Not A Programmer のメモ帳: 1月 2014

In From up North’s web design galleries we present the latest of our findings from the wonderful world of web design. If you would like to send us suggestions for these galleries, please click on the button “Submit” located in the header, and fill out the form. And don’t forget to subscribe to the RSS-feed […]

参照元記事：From up North http://ift.tt/WhqObO

これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版 http://ift.tt/1jCrneQ

はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。

さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。

今回は日本ディレクション協会の人気講座「0からのWebディレクション講座：設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。

以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。

感動設計テンプレート＆講演資料

ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？

高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべきなんだとか。

ここで言う"感動"とは、通常の意味での感動とはちょっと異なり、「ユーザーが何かを感じて何か行動を起こす」という一連の感情⇒行動の流れ全般を指しています。

ではユーザーに何かを感じさせ、何か行動を起こさせるためにどういった流れを作り上げればいいのか？以下に詳細を解説してみます。

ユーザーの「感動」を作り上げる具体的な流れ

サービスの持つコンテンツと、そこに来て欲しいユーザーを定義し、そこで受け取る情報を設計し、どんな行動を起こしてもらえば、最終的な成果が上がるのか？

要するにWebサイトを使ったエモーショナルなマーケティングを行えって事らしいです。僕の書いた記事よりずっとシンプルで分かりやすいですね。こんちくしょう。

感動設計テンプレートの個別解説

以下で各テンプレートの解説をザックリ行ってみます。実際に利用する際の参考にご利用ください。

1.登場人物3Cの把握

事業、ユーザー、競合の3者をまずは明確にして、そのビジネスに関係するそれぞれの立ち位置を把握しておきます。

2.コンテンツのポジション（競合含む）を知る

複数のサービスを比較対象に、競合と比べたサービスの立ち位置を明確にするために使います。

縦軸や横軸に何を入れるか？によってもかなり変わってくるので、競合と比べるべきラインを間違えないようブレストやミーティングを綿密にやったほうが良いらしいです。

3.感動設計（ユーザーペルソナ＋キャッチ、アクション）

どんなユーザーがメインでいて、サブでどんなユーザーがいて、どんな情報を受け取って、なんと感じてどんな行動をとって欲しいのか？

てな情報を1ページにまとめられるナイスなテンプレートシート。「こんなシンプルにまとめられない！」という声が聞こえてきそうですが、ぶっちゃけこれだけシンプルにまとめられるまで考えぬいていないなら情報設計とかはやらないほうがいいです。無駄です。

4.KGI設定とKPI設定

そのWebサイトをやサービスを用いてなんとかしようとしているビジネスの「本来の目的」を数値化したものをKGIとし、そのKGIを達成するために「伸ばすべき数字」をKPIとして設定。

ようするに「この数字が伸び続ければビジネスは絶対成功するよね」と言い切れるものはなにか？を明確にするためのシート。

これを情報設計の段階で定義してからってのは結構重要だと僕も思います。さすがっすね。

5.コンセプトの設定

上記の情報・感情設計を元にその全てを一言で表すためのワーディングを行うためのまとめシート。

多くの人間が関わるWebプロジェクトにおいて、全てのスタッフの目指す先は何であるべきか？を明確にするためにこのシートの形式はかなり的を得ていると思います。

まとめと宣伝

実際の講演では高瀬さんがこれまでやってきた実際の案件をベースに超具体的な話が聞け、「なるほどこうやるのか」と納得しっぱなしでした。

さらに上記のテンプレートを使っての本気（ガチ）提案作成ワークショップも楽しく、最近何かと話題にあがる「ユーザー体験・感情設計」について深く学ぶことができたような気がします。

実際の案件での考え方や成功・失敗体験について聞いてみたくなったら、ぜひディレ協主催の講座に足を運んでみてくださいね。

たいてい僕（ナカムラ）も高瀬さんもいるので色々聞いてみてください。

ディレクションスキルに＋α「ディレクションアカデミー」

失敗しないスマホサイト制作講座〜落としどころの審美眼を体得せよ〜

開催日程：2/8（土）13：00～17：00

ミートアップ（懇親会）同日18：00～

場所：GARAGE AKIHABARA

主催：日本ディレクション協会

参加費用：￥3,000（ミートアップ代別途）

2014年1月28日火曜日

サイト運営者様向けの Google サービスを WordPress から利用が可能に：Google サイト運営者向けプラグイン（ベータ版） http://ift.tt/M2WmCv

参照元記事：AdSense Blog-Japan http://ift.tt/1d9yTFq

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) http://ift.tt/1mLQUiP

前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れ… read more →

参照元記事：コムテブログ http://commte.net/blog

2014年1月25日土曜日

汎用のフラットアイコン４４種 http://ift.tt/1eRhUdH

Dribbble - 44 Shades of Free Icons by Victor Erixon 汎用のフラットアイコン４４種次のよ...

参照元記事：phpspot開発日誌 http://ift.tt/JJOweX

input要素にタイプすると入力文字上にヒントを表示できる「floatlabels.js」 http://ift.tt/1fTl9Xs

floatlabels.js by Clubdesign input要素にタイプすると入力文字上にヒントを表示できる「floatlabels...

参照元記事：phpspot開発日誌 http://ift.tt/JJOweX

2014年1月24日金曜日

シンプルなジョブボードを設置できるWordPressプラグイン・「WP Job Manager」 http://ift.tt/LO6BKJ

WP Job Manager WP Job Managerはシンプルなジョブボードを設置できるWordPressのプラグインです。ユーザー側で仕事情報を投稿する事も可能です。仕事の内容はカテゴリ分けやフィルタリングも可能 [...]

Post by かちびと.net

PR:WPデザインギャラリー

WordPressの管理画面で固定ページの管理性を向上させるプラグイン・Advanced Page Manager

参照元記事：かちびと.net http://kachibito.net

2014年1月23日木曜日

『地域レポート』と『ユーザーの所在地レポート』の違いとは？ http://ift.tt/KIJArQ

詳細分析からレポートの一覧を表示させると、『地域』と『ユーザーの所在地』の2つのレポートがありますが、どこが違 […]

参照元記事：グーグルアドワーズラボ http://ift.tt/1kZwbMQ

レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20 http://ift.tt/1eC0pQ0

レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。

参照元記事：NxWorld http://www.nxworld.net

2014年1月22日水曜日

ある要素を別の要素にフィットさせるための『Fit.js』 http://ift.tt/1aJYdlT

↑ 文法がシンプルでいいですね。 ↑ 基本的な使い方。 ↑ 上にフィットさせてみる。コールバック関数などもあっていいかもですね。詳細は以下からどうぞ。 » Fit.js » Fit things into other things

参照元記事：IDEA*IDEA http://ift.tt/saQ58r

背景に使えるパターン画像を収集、配布する・「The Pattern Library」 http://ift.tt/1mqiJgq

The Pattern Library The Pattern Libraryは背景に使えるシームレスなパターン画像を収集、配布しているプロジェクトサイトです。まだ始まったばかりのようなので数は多くありません。あまり見な [...]

Post by かちびと.net

PR:WPデザインギャラリー

パブリックドメインやGPLライセンスの高品質なアイコンをパッケージで配布しているOpen Icon Library

Facebookライクなモーダルボックスを実装するスクリプト・Mikes Modal Library

iPhoneやAndroid向けのUIパターンギャラリー・Mobile Design Pattern Gallery

参照元記事：かちびと.net http://kachibito.net

2014年1月21日火曜日

配色を考えやすくするための様々なルール http://ift.tt/KnYrZ9

色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わってい […]

参照元記事：YATのBLOG » YATのBLOG http://wp.yat-net.com

次の確定申告はもう始まっている。「やよいの白色申告オンライン」を今から使っておくべき理由 http://ift.tt/KvjRmM

「白色申告の唯一のメリット」とも言える「記帳義務なし・ざっくり申告」で済ませられるのは今回で最後です。毎年、今頃の時期になると「確定申告の準備をしなきゃ」と思っている人も多いですが、すべての白色申... 続きを読む

参照元記事：ライフハッカー［日本版］ http://ift.tt/pvGBfD

フリーも社内も助かった！Web制作フローが「完璧」にわかる資料や流れのまとめ http://ift.tt/KnKzOx

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。もくじオリエンテーション／受注前１．書… read more →

参照元記事：コムテブログ http://commte.net/blog

まだ「部分一致+完全一致」を使ってる？絞り込み部分一致、完全解説 http://ift.tt/1aC1MdC

「どんなキーワードマッチを利用していますか？」「何のキーワードマッチでアカウントを作成すればよいですか？」この質問はセミナーを始めた当初から今現在まで、90%以上の確率で質問される内容です。僕自身もリスティング広告を...

参照元記事：SEM-LABO » SEM-LABO 【SEMマスターによるSEM実践ブログ】 http://ift.tt/KvMYGw

2014年1月19日日曜日

RWD施行時に使える、デバイス毎のモニターサイズを視覚的に把握できるチートシート・「Responsive Web Design Cheat Sheet」 http://ift.tt/KrXkXK

Responsive Web Design Cheat Sheet Responsive Web Design Cheat SheetはレスポンシブWebデザインの施行時に使えるモニターサイズのチートシートです。各メジャ [...]

Post by かちびと.net

PR:WPデザインギャラリー

CSSやJavaScriptでのEasing使用法を確認できるチートシート・Easing Functions Cheat Sheet

レスポンシブWebデザインのためのリソースをまとめたWebサイト・This Is Responsive

モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive

参照元記事：かちびと.net http://kachibito.net

2014年1月18日土曜日

自分のやりたい事を仕事にしてる僕らに見られる10個の特徴 http://ift.tt/1fGzIxp

先日、バンクーバーな僕らのQ君が本を出すことになりました。このマンガブログを始めた時の話は別でしたいなーと思っているのですが、僕らに共通する唯一の事は『自分のしたいことを仕事にしている』。もっと言えば『仕事が楽しくて仕方 […]

参照元記事：バンクーバーのうぇぶ屋 http://webya.opdsgn.com

この気配りが嬉しい、便利なデフォルト設定解除ツール「DefaultApp Reset」 #Android http://ift.tt/19zOzHg

マルチデバイス時代の制作手法の選び方 http://ift.tt/1cwfnTB

遅ればせながら、あけましておめでとうございます。昨年10月後半から職場での環境が大きく変わったこともあり、ブ […]

参照元記事：Rriver http://ift.tt/1aTNHMk

2014年1月16日木曜日

収益最大化のために 1 月中に立てておきたい、 2014 年の目標と計画 http://ift.tt/1j0Sxt3

参照元記事：AdSense Blog-Japan http://ift.tt/1d9yTFq

Google公式のWordPressプラグイン・「Google Publisher Plugin」 http://kachibito.net/useful-resource/google-publisher-plugin

Google Publisher Plugin Google Publisher PluginはGoogle社公式のWordPressプラグインです。本プラグインでは、AdSenseとWebマスターツールを管理する事が出 [...]

Post by かちびと.net

PR:WPデザインギャラリー

Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts

ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin

シンプルな地図系jQueryプラグイン・ jQuery Plugin for Zoomable

参照元記事：かちびと.net http://kachibito.net

Google Publisher Plugin (Googleサイト運営者向けプラグイン) でウェブマスターツールとアドセンスをWordPressから設定 http://www.suzukikenichi.com/blog/google-publisher-plugin/

Googleは、WordPressの管理画面からAdSenseを設定したりウェブマスターツールにアクセスできたりするツールを公開した。名称は「Google Publisher Plugin」、日本語名は「Google サイト運営者向けプラグイン」。AdSenseとウェブマスターツールの初期の設定手順が楽になることがメリット。既存サイトでは不要。

- Google Publisher Plugin (Googleサイト運営者向けプラグイン) でウェブマスターツールとアドセンスをWordPressから設定 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

参照元記事：海外SEO情報ブログ - 海外のSEO対策で極めるアクセスアップ術 http://www.suzukikenichi.com/blog

Google、モバイル版Chromeのデータ圧縮機能を公式にリリース―データ量を最大50%節減 http://jp.techcrunch.com/2014/01/16/20140115google-adds-optional-data-compression-feature-to-chrome-for-mobile-reducing-your-data-usage-by-up-to-50/

今日、Googleはモバイル版Chromeブラウザのデータ圧縮のオプション機能を正式にリリースしたことを発表した。この機能はユーザーのスマートフォンやタブレットへのデータ転送量を大きく削減するものだ。処理のスピードアップ、データ料金の節約に寄与することが期待されている。

同時に、モバイル版Chromeブラウザのアップデートではこれ以外にもiOS版へのGoogle翻訳、Android版へのお気に入りのウェブサイトへのショートカットなど、いくつかの新機能が追加され、バグ修正が行われている。

しかしやはりデータ圧縮機能が今回のリリースの目玉になるようだ。これが有効化されると同時にChromeのセーフ・ブラウジングテクノロジーによって悪意あるウェブページからも保護される。Googleによると、この機能は今後数日かけてiTunes App StoreとGoogle Playストアに順次公開されるという。

…

参照元記事：TechCrunch Japan http://jp.techcrunch.com

美しいフラットデザインのアイコンセット 20 http://ift.tt/1kBKdnT

美しいフラットデザインのアイコンセット 20

去年に引き続き今年もデザイントレンドのひとつとなるだろうと言われているフラットデザインのアイコンセットのまとめです。立体感あるもの、ロングシャドウ、少し変わった色合い、レトロチックなものなど全20種類です。

参照元記事：NxWorld http://www.nxworld.net

2014年1月14日火曜日

特定のジャンルに特化したデザインギャラリーやショーケースのまとめ http://www.nxworld.net/inspiration/specific-genre-design-gallery-and-showcase.html

特定のジャンルに特化したデザインギャラリーやショーケースのまとめ

引き続きデザインの参考になるギャラリーなどを整理兼ねてシェアします。縦長のサイトのみを集めたギャラリーや各パーツデザインのみを集めたギャラリー、素敵なヘッダー・フッターデザインのみを集めたまとめエントリーなど、特定のジャンルに特化したギャラリーやデザインショーケースをまとめたエントリーのまとめです。

参照元記事：NxWorld http://www.nxworld.net

2014年1月13日月曜日

標準カラー16色をモダンにリメイクしたカラーパレット『colors.css』 http://kenz0.s201.xrea.com/weblog/2014/01/colors.html

『Colors 』は一般で定義されているごく基本的な標準カラー16色 を現代風の色合いにリメイクしたカラーパレット。

付属の「colors.css」を使用し従来のカラーネームをクラス名として適用することで割り当てられた新しい背景色を利用することができます。

例えば従来の標準カラーの「Red（#ff0000）」というカラーは、よりシックで現代的な色合いの「#ff4136」で表現できます。

パッケージにはcssの他、less、sass、stylusなども含まれており用途によって活用が可能です。

» Colors

初心者が学ぶのに最適な5つのプログラミング言語 http://www.lifehacker.jp/2014/01/140112best_programming_languages.html

コードの勉強をはじめようと思ったら、まずどのプログラミング言語を習得するか決める必要があります。そしてその選択は、どのような技術を得たいのかと密接に関係しています。言語にはそれぞれ特徴があって、習... 続きを読む

参照元記事：ライフハッカー［日本版］ http://www.lifehacker.jp/

Combining Punk Music and Swiss Modernism: The Swissted Poster Series http://ift.tt/19m2515

As an ongoing project, graphic designer Mike Joyce has created a huge 250+ poster series that pulls from his passion for punk music and Swiss modernism. For the series he redesigns vintage punk, new wave...

参照元記事：Speckyboy Design Magazine http://speckyboy.com

2014年1月12日日曜日

自分が離れたときだけロックがかかる。『ブルセク』がなかなかスマート - レビュー TABROID http://www.tabroid.jp/app/tools/2014/01/com.blusec.html

わずらわしいロック解除からの解放！スマホをONにするたび、秘密のパスワードな...

参照元記事：TABROID http://www.tabroid.jp/

2014年1月11日土曜日

2013年に話題になったデザインに関する「考え方」が変わる記事14選 http://creive.me/archives/3962/

もうすぐ今年が終わるということで、2013年に話題になり、さらに読むだけで「考え方」を変えさせられる14個の記事をご紹介します。これはウェブページです｡ウェブデザインの本質は､言葉です｡ウェブで一番強力な道具は […]

参照元記事：creive【クリーブ】 http://creive.me

2014年1月9日木曜日

ブログ移転やバックアップに！ WordPressプラグイン「WP-DB-Backup」 http://plus1world.com/wp-db-backup

最近、このブログのサーバーを移転しました。当WordPressブログの移転に際して、ブログ記事のデータやブログ内で使っている画像などのファイルは、記事のインポート機能やFTPによるアップロードなどで比較的簡単に行えまし […]

ブログ移転やバックアップに！ WordPressプラグイン「WP-DB-Backup」は +PlusOneWorld の記事です。

関連記事

BloggerからWordPressへ記事画像の移行時に「Blogger Image Import」

ブログ記事盗用対策に私が使っているWordPressプラグイン

Google+ のコメント欄も設置できる WordPressプラグイン

画像圧縮を一括処理！ WordPressプラグイン「EWWW Image Optimizer」

WordPressのカテゴリを順序変更できるプラグイン「Category Order」

画像で解説！はてなブックマークのエントリータイトル変更方法

参照元記事：+PlusOneWorld http://plus1world.com

2014年1月8日水曜日

僕がWEB制作者として必要不可欠だったWEBサービスやツールの厳選まとめ【2013年振り返り版】 http://webya.opdsgn.com/introduceweb/2013webserviceformeroundup/

皆様、新年あけましておめでとうございますっ！さて、今年も年が明けましたね〜。なんか去年は本当に色々な事があったように思う一方。12ヶ月の内2ヶ月を休暇で過ごしてしまった事もあり、正直サボりの一年だったようにも感じてしま […]

参照元記事：バンクーバーのうぇぶ屋 http://webya.opdsgn.com

プロが教える！Google Analyticsを見る前に知るべき仮説思考メソッド【小川卓】 http://www.find-job.net/startup/ga_supposition

ここ数年でアクセス解析をはじめとしたサイト/サービス分析ツールを導入する企業が増えてきました。が、その活用方法が分からず、なんとなく数値を眺めたり、レポートを作ってみたり…そんなケースもチラホラ。前回の記事でも紹介した「仮説リストアップ⇒解析」の手法で、多く [...]

参照元記事：Find Job ! Startup http://www.find-job.net/startup

2014年1月6日月曜日

効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ http://commte.net/blog/archives/4015

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。もくじアートディレクター１．アクセシビリティ２．ユーザビリ… read more →

参照元記事：コムテブログ http://commte.net/blog

2014年1月5日日曜日

Word文書を見たまんまHTMLに変換できるサービス「Convert Word Documents to Clean HTML」 http://www.lifehacker.jp/2014/01/140105word_html.html

「Convert Word Documents to Clean HTML」はWord文書をHTMLに変換できるサービスです。Word文書の見た目をそのままHTMLで構成してくれますよ。Word文書... 続きを読む

参照元記事：ライフハッカー［日本版］ http://www.lifehacker.jp/

登録: 投稿 (Atom)

2014年1月31日金曜日

Other Links

2014年1月30日木曜日

2014年1月29日水曜日

感動設計テンプレート＆講演資料

ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？

ユーザーの「感動」を作り上げる具体的な流れ

感動設計テンプレートの個別解説

1.登場人物3Cの把握

2.コンテンツのポジション（競合含む）を知る

3.感動設計（ユーザーペルソナ＋キャッチ、アクション）

4.KGI設定とKPI設定

5.コンセプトの設定

まとめと宣伝

ディレクションスキルに＋α「ディレクションアカデミー」

人気の定番講座「0からのウェブディレクション講座」

2014年1月28日火曜日

2014年1月25日土曜日

2014年1月24日金曜日

2014年1月23日木曜日

2014年1月22日水曜日

2014年1月21日火曜日

2014年1月19日日曜日

2014年1月18日土曜日

2014年1月16日木曜日

2014年1月14日火曜日

2014年1月13日月曜日

2014年1月12日日曜日

2014年1月11日土曜日

2014年1月9日木曜日

2014年1月8日水曜日

2014年1月6日月曜日

2014年1月5日日曜日