やっぱりWebが好き

プロのデザイナーがこだわるべき細部の仕上げ

どんなに時間をかけて練られた優れたプランでも、最終的にユーザーに向けてアウトプットされたデザイン次第でそれまでの努力を台無しにしてしまう可能性すらあるわけで、僕らが生み出すデザインは何だかんだ言ってとても重要な役割を担っています。
デザインの好みは人によって違えど、完成度の高いデザインというのは単なる好みを説き伏せるだけのチカラを持っていると僕は信じています。今回のエントリーは久しぶりにデザイナーらしく、デザインの完成度を高めるために僕なりに普段考えているちょっとした工夫をまとめてみました。

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

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

見た目で揃える

1 等間隔のグリッドに揃えてオブジェクトを配置する典型的なグリッドデザイン。design spirits co.,ltd.

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

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

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

2

3

2 あえてリストのビュレットを左に飛び出させることでコンテンツの左端が揃って見えるようにしている。Conference Badge
3 「1」という数字の形を考えて、数字を左に少しズラすことでコンテンツの左端が揃って見える。10 TEN

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

黄金比を思い出してみる

4

4 最初から意識する必要はそれほどないと思うけど、黄金比のグリッドシステムも存在する。The Golden Grid

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

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

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

黄金比 – Wikipedia
白銀比 – Wikipedia

奥行きを意識する

5

5 透明を上手に使うことで画面に奥行きを持たせているデザインが増えてきた。Worth & Worth by Orlando Palacios

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

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

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

6

7

6 パララックスデザインは画面を立体的に見せてくれる。adidas x サッカー日本代表
7 フラットなデザインだけど、ヘッダーが固定されるので立体的に感じられる。Diesel

ジグザグのリズムで

8

8 写真を左右に順に並べてレイアウトすることで全体のバランスを保っている。CNN.com International

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

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

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

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

9

9 精巧に作られたUIキットは1ピクセルのラインを上手に活用したものが多い。Sign Up Widget(Icon Deposit)

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

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

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

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

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

10

11

10 手描きっぽいデザインの背景のテクスチャも、ちょっとさりげない感じがオシャレ。Kait Bos
11 メインコンテンツのグレーの背景にはすごく微妙なノイズが。asobisystem(アソビシステム)

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

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

12

13

12 グラデーションはかけるとしてもうっすらと。派手なグラデーション処理はめっきり見かけなくなった。We have MOVED♪too
13 特定の箇所に光が当たって、そこから光が広がるようなグラデーション処理もカッコいい。Schick

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

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

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

14

15

14 オブジェクトの下部中央だけに影をかけると、中央部分だけが盛り上がって見えて面白い。アップル
15 逆にオブジェクトの下部両端だけに影をかけて、両端がめくれ上がって見えるような見せ方もある。Last.fm

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

16

16 ボタンなどのオブジェクトをほんの少し角丸にするだけでだいぶ印象は柔らかくなる。Google

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

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

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

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

Comment / Trackback (46)

  1. @web_fantasista

    “プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode” http://t.co/cXyQZfqU

    Twitter

  2. @rune_of_harst

    プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode http://t.co/lQ8mpSGUqC

    Twitter

  3. 【生活】 最近増えてる? 妙な「ありがとう」 NHKニュース 2013年02月21日 夕刊 | aquadrops * news

    [...] プロのデザイナーがこだわるべき細部の仕上げ – やっぱりWebが好き – Writing Mode 原点回帰ということで、たまにはビジュアルデザインのことでも書いてみます。 僕が思うに、プ [...]

    Pingback

  4. @namuraclecent

    木が集まって森になる。細部にこだわったデザインは全体としても美しい。 / “プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode” http://t.co/dJ5S8hvqEK

    Twitter

  5. @NeXTSTEP2OSX

    ズルいのプレゼンで勉強したことが多く入っている / “プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode” http://t.co/QJtnUoUvLu

    Twitter

  6. @mitsuru_toshi

    プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode http://t.co/UnQJ5Jgcxd

    Twitter

  7. @macky_kfc

    プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode http://t.co/jTzSsA4qfI

    Twitter

  8. @_watercolor

    トレンド→ プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode http://t.co/MEojLvf6Ce

    Twitter

  9. @gnutar

    参考になる。3とかはHTMLでは無理? RT @NeXTSTEP2OSX: ズルいのプレゼンで勉強したことが多く入っている / “プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode” http://t.co/Uik4jRLydS

    Twitter

  10. @nakomaru36

    “プロのデザイナーがこだわるべき細部の仕上げ - やっぱりWebが好き - Writing Mode” http://t.co/zvyJL3VTQY

    Twitter

Leave A Comment

Address never made public