MONOspace板橋聡さんのデザインプロセス
-
- いいね！11
Bashi
@bash1boy
昨日のデザインイベント（ http://t.co/UYs2tCx3 ）で話した内容をババっとTweetしていきます。昨日来れなかった方はぜひご覧下さい。
2012-10-05 00:14:18
Bashi
@bash1boy
デザインを考え始める前にしている３つの事 ①サイトを作るたった１つの目的はなんなのか？を確認する。買わせたいと買わせるは、目的が一緒でもデザインは大きく違う
2012-10-05 00:15:23
Bashi
@bash1boy
②対象となる業界のサイトをぼけ〜と眺めてみる。不動産のサイトなら不動産業界のデザインを見ると、どれも似通っている事が分かる。そこで差別化をはかろう。③デザインの方向性をぼんやりと妄想する。クールがいいのか、ポップがいいのか、どんな見せ方が新しいのか、作る前にまず方向性を決める
2012-10-05 00:15:48
Bashi
@bash1boy
①デザインテイスト⇒全部を自分で考えず、既存のサイトからも知識を得る。リンク集はサイトの完成系を知る最も有効な手段。この時点で配色は一切考えなくていい。まずはレイアウト（見せ方）を決定
2012-10-05 00:16:36
Bashi
@bash1boy
各サイトをブックマークし、制作時には必ず開きブレを無くしていく。制作物ごとのブックマークは非常に有効な手段。製作中の方向性を確認するのと同時に、検証が終わったデザインテイストを排除する
2012-10-05 00:16:49
Bashi
@bash1boy
＜普段見ているwebサイトリンク集＞ http://t.co/wdh28xoP http://t.co/2nBKHh4b http://t.co/LXLYrHE1 http://t.co/SfjvIRCN http://t.co/rF99yNud
2012-10-05 00:18:27
Bashi
@bash1boy
＜普段見ているwebサイトリンク集②＞ http://t.co/UR4fuxWj http://t.co/OtXTzjVv http://t.co/tKPjU5Uf http://t.co/rFlHOUyv http://t.co/22KeE35I
2012-10-05 00:19:08
Bashi
@bash1boy
＜②デザインを作る順番を整える＞デザインはTOPページから作るのが正解？他のデザイナーは多くがTOPページから作っているが、普段のデザイン作業でTOPから作る事はほとんど無い。トップページがメインになるサイトはほとんど無いからで、そのテイストを基準にする考え方が間違いのもとになる
2012-10-05 00:20:11
Bashi
@bash1boy
＜重要コンテンツから広げる＞最も重要な要素を基準に考えるために、必ず重要コンテンツの順番にデザインを作り始める、そしてそれを基準に展開させる。重要なコンテンツから枝葉の様に周りのデザインを作っていく。実際に作り始める前に、優先順位を整理しよう！
2012-10-05 00:20:51
Bashi
@bash1boy
＜③モノクロで作るという考え方＞まずはモノクロで作って、配色は最後に考えれば良い。Yhaoo!のサイトをガラッと配色を変える仕事が来たとき、モノクロで１から色を付けるのと、既存のサイトを見ながら色を考えるのではどちらがやりやすいですか？モノクロで作って重要なものから順に配色を
2012-10-05 00:22:35
Bashi
@bash1boy
＜④虫の目で要素を分解する＞全体の姿をイメージしながら作るのは重要。でも、それは正解ではない。実際は、各要素の重要性を１つ１つ確認しながら作った結果が全体のレイアウトになる。つまり一番重要なページの一番重要なコンテンツを全ての基準にするとその判断がしやすい
2012-10-05 00:23:03
Bashi
@bash1boy
この要素より重要？それとも重要じゃない？という判断を全ての基準にする。この小さな要素の組み合わせが全体のデザインを完成させるのであって、全体の中に要素がある訳ではない
2012-10-05 00:23:18
Bashi
@bash1boy
＜⑤フォントバランス＝1.5倍と3倍／余白バランス＝２倍もしくは２分の１＞フォントバランスや余白バランスがが崩れる原因の多くは、比率がおかしい事が大半。この様に簡単な比率を決めて考えるだけで、そう簡単にバランスが崩れる事はない
2012-10-05 00:23:45
Bashi
@bash1boy
＜⑥配色によるデザイン崩れを防ぐ＞ 配色によって大きく変わるイメージ。見た目がばらばらになってしまうのはなぜ？？それは自分の頭の中が整理出来ていないから。つまり配色がばらけてサイトがおかしくなるのは、要素の重要性が分かっていない場合が多い。ここでモノクロで作っていた事が役に立つ
2012-10-05 00:24:17
Bashi
@bash1boy
最初からカラーで作っていると、配色が混在してバラバラになってしまう。そして修正も難しいですね。。。フォントや余白と同様、配色も同じ要素＝同じ色で考えるとうまく。多色はランディングページで使われる事が多い。一気にまくしたてるインパクトを与えるなら多色が有効。
2012-10-05 00:25:04
Bashi
@bash1boy
＜⑦マウスオーバーの表現＞ マウスオーバーの表現は無限です。日々様々な手法が公開されている。全てを覚えるのは大変なので、発見して気になった段階でブックマークして蓄積しましょうそしてマウスオーバーを考えるのは最後でいい。
2012-10-05 00:25:27
Bashi
@bash1boy
＜⑧Photoshopのレイヤー構成＞ レイヤーはタイトルをつけ、必ず要素の順番と同じにする。レイヤーは自分以外の人が見ても分かる様に、ブロックごとに明確に分ける。他の人に構成を伝えるレイヤーもデザインのうち。例えばマウスオーバー表現はカラーを付けてあげるなど
2012-10-05 00:25:52
Bashi
@bash1boy
＜⑨SNSボタン＞ SNSボタンはwebに起こしたあと、つまり最も最後に付けるのがオススメ。最初に付けてしまうと効果的なボタンにはならないし、デザインの邪魔をする可能性がある。実際にwebを触って、ユーザーがどの様な行動をするか予測、その結果を反映して設置箇所や種類を決める
2012-10-05 00:26:16
Bashi
@bash1boy
＜⑩webデザインで重要な３つの事は…＞ 自分の感覚を鍛え、違和感を徹底的に排除する事。要素を分解して虫の目で考え、最後に鳥の目で見る。新鮮な感覚を保つ。
2012-10-05 00:26:50
Bashi
@bash1boy
先日登壇したデザインイベント（第一線で話題を呼ぶwebデザインのプロセスを知る）の動画を少しだけ。 http://t.co/9lUDWMbe 会場着くまでに７回吐いて鬼の様にテンション低いうえに話してる時も吐き気に襲われ死にそうになるという登壇者としてあるまじき姿をさらしてました
2012-10-06 00:27:00