フラットやレスポンシブは流行りものか?


ウェブやアプリのデザインの業界では、フラットデザインが大きな注目を集めており、新たな事例を目にしない日はないほどです。よく対比される、リアル系デザインの牙城だったAppleのiOSも、次バージョンの7でデザインを全面的にフラットに刷新することがアナウンスされています。

iOS7のホーム画面

フラットデザインのトレンドに火をつけたのは、MicrosoftのWindows Phone 7とそれに続いたWindows 8で採用された、Modern UI(以前はMetroと呼ばれていました)です。シャドウや立体感をほぼ排し、レイアウト/タイポグラフィ/鮮やかな色彩で表現されたUIはとても新鮮で、UIデザインの世界にブームを巻き起こしました。微妙なデザインだったAndroidはすぐに追随し、フラットデザインを採用しました。

Start_RTM_3ROW2

Appleの動きも、業界のトレンドも、表面的に見ればこのような新鮮なデザインのエピゴーネンとしか映らないかもしれません。しかし、別の業界のトレンドと並べてみたときに、それがもっと大きなトレンドの一部だと理解することができます。それは、レスポンシブデザインです。

レスポンシブデザインは、最近のスマートフォンやタブレットの普及とともに広く用いられるようになってきたウェブデザインの手法です。多様なデバイスのスクリーンサイズに応じて、コンテンツのレイアウトなどを動的に切り替えるデザインを指します。典型的には、CSS 3のMedia Query機能を用いて、UAのスクリーンの横幅に応じてCSSの内容を切り替えるといった実装方法が用いられます。

レスポンシブデザインの例

モバイルデバイスの普及とともにレスポンシブ対応へのニーズは高まり、最近作られる多くのサイトにおいて対応されています。Googleもウェブマスター向けにレスポンシブデザインを推奨していることで、当面はSEOの観点からもこのトレンドが弱まることはないでしょう。

ここで、レスポンシブなデザインのクリエイティブについて考えてみましょう。角丸やシャドウ、グラデーションを多用したデザインは、見栄えの善し悪しを置いておいても、多様なレイアウトに動的に対応させることはとても困難です。対してフラットなカラーリングや、テキストによる表現は、少なくともレイアウト変更に対して対応しやすいといえます。(実際は、見栄えを損なわずに多様なレイアウトを行うのは、非フラットな表現以上に難しいのですが。)

MicrosoftがModern UIを設計した際には、当然3スクリーン(モバイル/PC/TV)を意識していたものと思われます。フラットデザインは単なる既存のデザインに対するアンチテーゼではなく、このようにデバイスが多様化するという文脈に対するデザインからの回答として生まれたものなのです。

ゆえに、フラットデザインを単なる流行り廃りの一環と考えるのは誤りです。コンテンツやサービスの提供者が、できるだけ多くのターゲットに、できるだけ多くの接点で提供を行いたいと考えるのは自明であり、マルチデバイス対応は必然的に求められていくでしょう。フラットデザインというのは、そのようなダイナミックなデザインのニーズに応えるための取り組みの始まりなのです。

最後に、余談になりますが、このような使う人を問わないユニヴァーサルな便益の提供は、20世紀のモダニズムのデザイナー達が求めた理想でした。Microsoftが自社のUIをModern Designと名付けたのは、その表面的なスタイルを拝借しただけでなく、このような深いレベルでモダニズムの理想をUIデザインに持ち込もうとしているからだと思われます。

余談2:このように書いているとModern UIを絶賛しているように見えるかと思います。Modern UIが新しいデザインの方向性を示したのは間違いなく、そこは賞賛されるべきかと思います。一方で、製品としてのWindows PhoneおよびWindows 8には多くの問題があります。ニールセン博士のような識者もすでにユーザビリティの観点からの問題を多数指摘しています

たとえばAppleも長年苦しんだように、優れたUIだけが製品の成功をもたらすわけではありません。入り口から出口までのユーザー体験全体が成功して、はじめてユーザーへの高い付加価値をもたらすことができます。皮肉なのは、今のMicrosoftがかつてのAppleのように見えることです。UIは優れているものの、プラットフォームとしてアプリデベロッパーやハードメーカーを惹き付けることに成功しておらず、苦しんでいます。Windows 8については、別の機会に詳しく述べたいと思います。