2011/11/17

Googleの新しいデザインに学ぶミニマルデザインのコツ

ここ数ヶ月のうちにGoogleが立て続けに行ってきたデザインのリニューアルが、ここにきてひと段落したようです。統一されたデザインがひととおり出来上がってきました。

こちらは新しいGmailの動画。


今回のデザイン変更は、Google+のリリースと期を同じくして、通常の検索、Google maps、YouTube、Gmail、Google docs、Analytics、Webmaster Tools、Google Reader、Blogger、Profileなどなど。Googleが展開中のサービスのうち、メジャーなものについてはほぼすべてに対して行われました。

Googleはもともとミニマルデザイン、シンプルデザインを好む会社でしたが、このリニューアルでさらにその傾向が強くなった感じがします。

僕は、今回のGoogleのデザインリニューアルをきっかけに、「情報の整理」と深い関係にある「情報のシンプル化」ということを意識する時間が増えました。いい機会なので、勉強の意味も含めて、Googleの新しいデザインを参考とした「 ミニマルデザインのコツ 」というのをざっとまとめてみました。

きれいに体系化できていませんが、わかりやすいところからざーっと行きます。

ミニマルデザインのコツ#01 要素を隠す
たとえば、Webmaster Toolsの上ナビ。Googleのサービスを利用しているときは基本的に上のナビの部分にGoogleのサービス群が並びますが、Webmaster Toolsの場合、載っているのはAdWords、AdSense、Analytics、Appsだけ。その他のサービスは隠されています。コンテクスト上関連性の薄いものは隠す、ということ。


ミニマルデザインのコツ#02 要素を小さくする
フッターなどの要素は可能なかぎり小さくしてあります。利用頻度が低い要素はとことん小さくする、ということ。必要なときには注意深く探すから見つかるでしょ、というところでしょうか。


ミニマルデザインのコツ#03 色数を抑える
Googleロゴだけには複数の色が使われていますが、テキスト、背景、ボーダー、ボタンなどの色はできるかぎり統一してあります。ページ内の色をすべてあわせても5~6色程度。使う色数を抑える、ということ。


ミニマルデザインのコツ#04 形のパターン数を抑える
たとえばBloggerの場合、ボタンの角丸の半径は1種類(2px)に統一されています。たまに形のパターン数はできるだけ減らす、ということ。


ミニマルデザインのコツ#05 シンプルな図形だけを使う
丸、三角、四角、星型など、積み木のパーツとしてあるような単純な図形だけが使われています。

ミニマルデザインのコツ#06 フォントファミリーは1種類だけを使う
使うフォントは1種類だけ。日本語の場合は半角と全角があるのでどうしても1つにはなりませんが、それでも半角1種類、全角1種類、と最小限にとどめてあります。

ミニマルデザインのコツ#07 フォントサイズの数を抑える
これもフォントファミリーの数と同じで、サイズの種類は多くても3種類、ぐらいに抑えてあります。

ミニマルデザインのコツ#08 テキストのかわりにアイコンを使う
これが顕著なのはGoogleドキュメント。長いテキスト、もしくは難しい単語を使う代わりにアイコンで表現してあります。このあたりのやり方は表示できる情報量がかぎられるモバイルでの学びが活かされているようです。


ミニマルデザインのコツ#09 色使いにはすべて意味を持たせる
登録は赤、検索は青、など、無彩色以外の色には1色1役、という風に意味が持たせられています。


ミニマルデザインのコツ#10 場所にはすべて意味を持たせる
色と同じく、場所にも意味が持たせられています。検索窓は常に一番上に、ナビは常に左に、などと場所と意味が1対1対応しています。Googleほどの会社が共通性を持たせることで、これがデファクトスタンダードとして確立されたりもします。

ミニマルデザインのコツ#11 グリッドシステムでレイアウトする
左端を揃える、上端を揃える、など、ほぼすべての要素がグリッドシステムに基づいてレイアウトしてあります。

ミニマルデザインのコツ#12 グリッドにきれいに合わせられたら枠線は消す/薄める

ミニマルデザインのコツ#13 余計な意味を持たせるべきでないものには無彩色を使う
適当に赤や緑の色をあてるのではなく、ブランドカラー、アイコン、重要なボタン以外のパーツはすべて無彩色で作られています。

ミニマルデザインのコツ#14 あらゆる画面サイズに対応させる
ウィンドウサイズを変更するとそれにあわせてパーツの横幅を変えるレイアウトになっています。「リキッドレイアウト」とも呼ばれています。

ミニマルデザインのコツ#15 クリッカブルエリアを大きくとる
これはミニマルにするためというよりも「ミニマルにしても問題なくするため」のコツですが、クリッカブルエリアを大きめにとること。ちょっとしたことですが、アクションがスムーズになります。



・・・以上です。ざっとこんなところかなぁ。

パパッと挙げてみてこれだけ出てくることからもわかるように、ミニマルデザインは単純なものに見えますが、その裏には多くの原則があり、それを実現するのは実は、それほどカンタンではありません。

プレゼンテーションzenの著者ガー・レイノルズさんはこのあたりのことについてこう言っています。

simplicity is not simple.

この動画の43秒あたりから。



情報のシンプル化、いわゆる「ミニマルデザイン」の需要というのは今後ますます高まってくるかと思いますが、単純そうに見えるミニマルデザインの裏にも原理と技術が確かに存在するということが、こういう遊びをしてみるとよくわかります。

このあたりの部分は体系化がまだそれほど進んでいないようなので、今後は、ここを体系化し総合的に扱うプロフェッショナルなんかも求められるようにもなってくるのかなと思います。その職業の名前デザイナーになるかアーキテクトになるか、はたまた他のものになるかはわかりませんが。

ともあれ。現代は、本当にノイズの多い時代です。ごくわずかの有益な情報と合わせてストレスフルな情報を大量に送りつけてくるノイジーなデザイン、広告がそこここにあふれています。GoogleやAppleには、そんな世の中をちょっとでもミニマルなデザイン、本質的なデザインの方向へと牽引してくれることを願うのみです。


最後に、ミニマルデザインを行うために必要なスキルというのをまとめておきたいと思います。

ミニマルデザインに必要なスキル
  • 重要な要素とそうでないものを見分ける力  (論理的思考力)
  • 最適な言葉選びをするための言語能力    (ラベリング・ライティングの能力)
  • 人間の認知特性を考慮したデザインを行う力 (認知科学・認知心理学の知識)

0 件のコメント: