46 Comment / Trackback

原点回帰ということで、たまにはビジュアルデザインのことでも書いてみます。
僕が思うに、プロとアマのデザイン力の決定的な違いは細部の詰めだと感じるわけです。
もちろん、ごく基本的なレイアウトだったり、配色だったりといったデザイン力の向上が何より大事だし、そこさえクリアすれば、ユーザーに対して最低限のおもてなしはできると言っていいです。

ただし、他のモノとは何かが違うより優れたデザインを作り上げるためには、普通のユーザーは気にも止めないようなほんの些細なところに対する気遣いが必要になってきます。
まさに「神は細部に宿る」というやつです。細部を突き詰め出すとキリがなかったりしますが、ここに気づけるかどうかが一流のデザイナーとそうでない人の別れ目のひとつなんじゃないでしょうか。

見た目で揃える

最初からガチガチにグリッドを決め込んでレイアウトする必要はないと思いますが、揃えるべきところはキチッと揃えましょうというのは基本ですよね。
たとえば、1なんかはわかりやすいグリッドデザインで、オブジェクトがグリッドにきちんと揃えられています。ここまでは普通の話。

もう一歩「揃える」ということを追求してみると、「見た目としてきちんと揃って見えますか？」というのを常に意識したいと僕は思っています。
たとえば、以下の2のリスト部分。リストのビュレットが左に飛び出していますが、このビュレットはあえて飛び出させて文字の左端を上のタイトルや下のボタンなどと揃えたほうがきれいに見えます。

さらに細かいところで言うと、3のサイトIDは「1」という数字を左側に少しズラすことでそれ以下のテキストと左端が揃って見えるようにしています。

人間の目というのは錯覚を起こしやすいので、「見た目で揃える」という意識は常に持っておくとよいと思います。

黄金比を思い出してみる

オブジェクトの縦横比やスペースの大きさなどに迷ったときは、黄金比を取り入れてみましょう。

黄金比は1：1.618（約5：8）です。多くの人にとって、この比率で描かれた長方形が最も美しいバランスの長方形に見えると言われています。
ちなみに黄金比の他に白銀比（大和比）というのもあります。比率としては1：1.414（約5：7）です。A4やB4といった紙の規格の縦横比がこれにあたります。

最初から意識せずとも、自然とオブジェクトやスペースを黄金比や白銀比に近い比率で表現できているケースが多いと思うので、最後にキチッと数値を出したいときに思い出してみるレベルでよい気がします。大事なのは、人間には何となく気持ちよく見えるバランス（比率）があるんだ、というのを知識としてあらかじめ知っておくことです。

黄金比 – Wikipedia
白銀比 – Wikipedia

奥行きを意識する

Webサイトのような平面のデザインをする際には、常に奥行きというのを意識しておくとよいです。

我々の身の回りに実際に存在するものは立体なわけで、やっぱり立体的に見えるものっていうのはリアリティがあるんだと思います。
最近はビジュアルとしてはフラットなWebデザインが流行っていますが、これはきっとパララックスのように動きで奥行きを感じさせるサイトが増えてきたからでしょうね。グラデーションや影をバリバリ使って画面を立体的に見せようというデザインは今後少なくなっていくのかも。

とは言え、コンバージョンが求められるボタンはやっぱりグラデーションや影による装飾で多少派手にデザインしてあげたほうがきっと結果は得られると思います。
ビジュアルとして洗練されているかどうか以上にコンバージョンが求められるケースもあるわけで、このへんはサイト（ページ）の目的によって臨機応変にデザインしたいところです。

ジグザグのリズムで

バランスのよい状態というのは、基本は全体を見渡して均一にオブジェクトが配置されている（ように見える）状態です。

もっとも簡単に全体のバランスを保つ方法は、上下左右に重みのあるオブジェクト（色が濃かったり、サイズが大きかったりするオブジェクト）を分散させることです。
Writing Modeも、デスクトップ表示で本文部分に置かれる写真は右・左・右・左……の順に並ぶように意図的にレイアウトしています。

もっともシンプルなバランスの取り方としてジグザグの意識は持っておくとよいと思います。

1ピクセルのラインを活用する

改めて言うまでもないようなことだけど、1ピクセルにまでこだわりたいという意味で。

たとえばナビゲーションやボタンをデザインするときの境界線に1ピクセルのラインを加えるだけでグッとデザインの質が高まるというのはもはや定番テクニック。
基本中の基本として抑えておきたいテクニックで、常に意識しておくとよいです。

Webデザインにおける、1pxへのこだわり « Parkn' Park
1ピクのラインにこだわったデザインスタディ | コリス

微妙なテクスチャを入れる

ここで言う「微妙な」テクスチャというのは、紙や布といったあからさまなテクスチャではなく、ちょっとしたノイズを加えた背景などを指します。
デザインに質感を与える意味でテクスチャというのはとても重要なエレメント。「なんかテクスチャ入ってる？」ぐらいの微妙なテクスチャでも、あるかないかでだいぶデザインの完成度が違ってくることがあります。

派手なグラデーション処理はしない

ここ最近は完全に脱グラデーションのフラットなデザインがトレンドになってますね。
グラデーションをかけるとしてもナビゲーションなどにすごくうっすらかける程度にとどめるのが今っぽいデザインになります。
また、上から下へ縦一直線のグラデーションだけではなく、13みたいに光が広がるようなグラデーションのかけ方もデザインの引き出しとして持っておくとよいと思います。

影の付け方に変化を付ける

フラットなデザインでも意外と影は使うもの。
そして、影の付け方というのはちょっとこだわってみたいところです。

影の付け方をちょっと工夫するだけで、14や15のようにオブジェクトの中央や両端だけが盛り上がって見えるようになったりします。マンネリな影に飽きたら、少し影に工夫を凝らしてみるのもありです。

ほんのちょっとだけ角丸にしてみる

男性らしいデザインが得意な僕は、どうしてもカクカクしたデザインを作りがち。
なので、角丸というのは結構意識して使っています。

だからと言って極端な角丸を使う必要はなくて、ほんのちょっと（2ピクセルぐらい）角丸にするだけでだいぶデザインの印象って変わってきます。
「ちょっと固いなぁ」と思ったら角丸を使ってみるのはひとつの手です。

もっともっと詰めなきゃいけない細かいことはいろいろあるけれど、あげ出したらやはりキリがなくなってきたので、今日はこのへんで。

最後に忘れてはならないのが、細部を詰めるにしても「木を見て森を見ず」状態にならないこと。
細部の処理はあくまでさりげなくが基本。やり過ぎは厳禁。枝葉にばかりこだわっていても、幹になる部分がきちんと作られてなきゃまったく意味がないのです。
そこは忘れないようにしつつ、どれだけストイックに細部を突き詰めていけるかが僕らの仕事なんだと思うのです。

Trackback

http://writing-mode.com/20130210/detail/trackback/