イベント「第一線で話題を呼ぶwebデザインのプロセスを知る」で語って頂いた、MONOspace板橋聡さんによるデザイン論。このブログでも紹介します！
イベント詳細→http://everevo.com/event/2138
デザインを考え始める前にしている３つの事
①サイトを作るたった１つの目的はなんなのか？を確認する。
買わせたいと買わせるは、目的が一緒でもデザインは大きく違う。
②対象となる業界のサイトをぼけ〜と眺めてみる。
不動産のサイトなら不動産業界のデザインを見ると、
どれも似通っている事が分かる。そこで差別化をはかろう。
③デザインの方向性をぼんやりと妄想する。
クールがいいのか、ポップがいいのか、どんな見せ方が新しいのか、
作る前にまず方向性を決める。
STEP1：デザインテイストを決める
リンク集からヒントを得よ。
デザインテイストは全部を自分で考えず、既存のサイトからも知識を得る。リンク集はサイトの完成系を知る最も有効な手段。この時点で配色は一切考えなくていい。まずはレイアウト（見せ方）を決定する。
各サイトをブックマークし、制作時には必ず開きブレを無くしていく。制作物ごとのブックマークは非常に有効な手段。製作中の方向性を確認するのと同時に、検証が終わったデザインテイストを排除する
＜板橋が普段見ているwebサイトリンク集＞
http://bm.straightline.jp/
http://io3000.com/
http://www.wookmark.com/
http://dribbble.com/
http://www.cssmania.com/
http://creattica.com/
http://www.thebestdesigns.com/
http://www.appsites.com/
http://pttrns.com/
http://inspired-ui.com/
STEP2：デザインを作る順番を整える
デザインはTOPページから作るのが正解ではない。
他のデザイナーは多くがTOPページから作っているが、普段のデザイン作業でTOPから作る事はほとんど無い。トップページがメインになるサイトはほとんど無いからで、そのテイストを基準にする考え方が間違いのもとになる。最も重要な要素を基準に考えるために、必ず重要コンテンツの順番にデザインを作り始める、そしてそれを基準に展開させる。重要なコンテンツから枝葉の様に周りのデザインを作っていく。実際に作り始める前に、優先順位を整理しよう！
STEP3：モノクロで作るという考え方
まずはモノクロで作って、配色は最後に考えれば良い。
Yahoo!のサイトをガラッと配色を変える仕事が来たとき、モノクロで１から色を付けるのと、既存のサイトを見ながら色を考えるのではどちらがやりやすいですか？モノクロで作って重要なものから順に配色を
STEP4：虫の目で要素を分解する
全体の姿をイメージしながら作るのは重要。でも、それは正解ではない。
実際は、各要素の重要性を１つ１つ確認しながら作った結果が全体のレイアウトになる。つまり一番重要なページの一番重要なコンテンツを全ての基準にするとその判断がしやすい。この要素より重要？それとも重要じゃない？という判断を全ての基準にする。この小さな要素の組み合わせが全体のデザインを完成させるのであって、全体の中に要素がある訳ではない
STEP5：フォントバランス
フォントバランスは、1.5倍と3倍。
余白バランスは、2倍もしくは2分の1。
フォントバランスや余白バランスがが崩れる原因の多くは、比率がおかしい事が大半。この様に簡単な比率を決めて考えるだけで、そう簡単にバランスが崩れる事はない。
STEP6：配色によるデザイン崩れを防ぐ
頭の中を配色を整理しよう。
配色によって大きく変わるイメージ。見た目がばらばらになってしまうのはなぜ？？それは自分の頭の中が整理出来ていないから。つまり配色がばらけてサイトがおかしくなるのは、要素の重要性が分かっていない場合が多い。ここでモノクロで作っていた事が役に立つ。
最初からカラーで作っていると、配色が混在してバラバラになってしまう。そして修正も難しい。。。フォントや余白と同様、配色も同じ要素＝同じ色で考えるとうまく。多色はランディングページで使われる事が多い。一気にまくしたてるインパクトを与えるなら多色が有効。
STEP7：マウスオーバーの表現
マウスオーバーの表現は無限。
日々様々な手法が公開されている。全てを覚えるのは大変なので、発見して気になった段階でブックマークして蓄積しましょうそしてマウスオーバーを考えるのは最後でいい。
STEP8：Photoshopのレイヤー構成
レイヤーはタイトルをつけ、必ず要素の順番と同じにする。
レイヤーは自分以外の人が見ても分かる様に、ブロックごとに明確に分ける。他の人に構成を伝えるレイヤーもデザインのうち。例えばマウスオーバー表現はカラーを付けてあげるなど。
STEP9：SNSボタン
SNSボタンは最後に付けよ。
webに起こしたあと、つまり最も最後に付けるのがオススメ。最初に付けてしまうと効果的なボタンにはならないし、デザインの邪魔をする可能性がある。実際にwebを触って、ユーザーがどの様な行動をするか予測、その結果を反映して設置箇所や種類を決める。
STEP10：最後に、webデザインで重要な３つのこと
①自分の感覚を鍛え、違和感を徹底的に排除する事。
②要素を分解して虫の目で考え、最後に鳥の目で見る。
③新鮮な感覚を保つ。
<終>
こちらもおすすめです！
→「デザインを志す人への簡単にキマるデザインの指南書」
提供：U-NOTE
講演者プロフィール
講演者プロフィール： MONOspace板橋聡(@Satoru_ItabashI)
Facebook MONOspace Liverty
広告制作会社にてグラフィックデザイナーとして勤務後、フリースタイルのwebクリエイター集団となる “MONOspace” を立ち上げ。
web制作やアプリ開発などの受託業務をメインとしながら、同時並行で自社サービス開発やスタートアップ業界へも幅広く関与し、デザイン〜アプリ開発までを一手に担当する事も多数。直近では孫泰蔵氏が立ち上げるサービスにもデザイナーとして参加すると共に、家入一真氏率いるLiverty（http://liverty.jp）へも参加。デザイナーとしてstudygift、チョコくれ！、neda.ly、うつっぽなどのUI設計を担当していた。
