フラットデザインはUIを進化させるか

ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。

フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。

Google Search アプリ

フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。

• UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする
• ドロップシャドウやベベルといった立体感を出す表現を用いない
• 角丸を用いない。あるいは半径を非常に小さくする
• ボーダーや罫線を用いない。あるいは非常に細く淡くする
• 背景色の違いや余白によってエリアの境界を示す
• タイポグラフィを重視し、文字の大きさにメリハリをつける
• 最低限の視覚情報で強調表現する
• ピクトグラム風のアイコン

これらの性質から、フラットデザインの見た目の印象は、シンプルでミニマルなものになります。また視覚的なあしらいの種類が減って色のみで要素の区別をつけようとするため、全体的にカラフルになりやすく、階調が非連続的になるのでポップな雰囲気になります。

フラットデザインのトレンドは急速に広がっており、インターネットを検索すれば、サンプルを集めたギャラリーサイト、UIステンシル、フリーアイコン素材などが沢山見つかります。

ではこのトレンドはどのような背景から生まれたのでしょうか。

フラットデザインは目新しい

フラットなUI表現が注目されているのは、それまで全盛であった、グラデーションやドロップシャドウを多用した装飾的なデザイン、あるいは現実世界のオブジェクトをリアルに真似たスキュアモーフィックデザインと対照的だからです。

つまりまず純粋にファッションとして、フラットデザインはより新しく、より洗練されて見えるということが言えます。

ただこれまでのグラフィックリッチなUIというのは、トレンドというより、80年代に GUI を備えたパソコンが普及して以来ずっと続いてきた流れなのです。

コンピュータのメーカーは、自社製品のグラフィック性能を効果的にアピールするというマーケティング戦略的な意味もあって、精緻に描き込まれたUI要素を熱心に詰め込んできました。

またそもそも GUI は、コンテンツや機能の性質を二次元のスクリーンにグラフィックで示すというコンセプトですから、扱う情報が増えれば視覚的な要素も増えます。また概念的で分かりにくいコンピュータの操作体系をビジュアルなメタファを使うことで分かりやすくしているので、識別すべき選択肢が増えれば、より表現が具象化していくのも自然でしょう。

グラフィックリッチなUIを牽引してきたのはなんといっても Apple です。Mac OS、Mac OS X、iOS というプラットフォームにおいて、標準コンポーネントやプリインストールアプリのUIグラフィックはますます細かく描き込まれるようになってきました。

例えば WWDC 2011 における「Designing User Interfaces for iOS and Mac OS X Apps」というセッションでは、（特にスクリーンの大きな Mac や iPad で）美しく精細なグラフィックによるリアリズムを実践するようデベロッパーに推奨していて、そのようなリッチな表現によって楽しさや高いエンゲージメントをもたらすのだと説明していました。

グラフィックに凝ってUI要素に光沢や影などを沢山付け加えていくと、際限がなくなって、画面が無意味に複雑化してしまうことがあります。その点 Apple は、グラフィックの解像度を高めていくに際して、下手なゴテゴテ感が出ないよう、うまく画面全体のまとまりや表現としての合理性を追求しながら、統制のとれたバランスのよい、シンプルな印象を与えるデザインを展開してきたように思います。

Mac のカレンダー

ただ同時に、ユーモア半分のスキュアモーフィックの多用は過剰な装飾であり、操作性に貢献していない上に悪趣味であるといった批判も増えてきました。

そのような中で現れてきたフラットデザインは、過剰なものを削ぎ落としたモダンな表現に見えるのでしょう。

フラットデザインは作りやすい

一方で、グラフィックリッチなUIは作るのが非常に大変であるという側面があります。プラットフォームにもよりますが、ボタン、アイコン、メニュー、ナビゲーションバーといった部品を凝った見栄えにしようとすると、それらをすべて画像リソースとして用意しなければいけません。アプリをひとつ作るのに、数千点の画像を作成することもあります。

また、画像リソースを多く使ったデザインは、表示スピードが遅くなったりサーバー負荷が高まるといった問題もあります。

更に、昨今のマルチスクリーン（さまざまな種類のデバイスから同じサービスを利用する）に対応するためには、UIを画像で組み上げるのは非効率であるということも言えます。

もし複雑な立体表現や入り組んだ形状表現が無く、すべてプログラマティカルにUI要素を実装できるなら、開発コスト、運用コスト、表示のスムーズさ、互換性といった多くの点でハイパフォーマンスになります。

フラットデザインは、こういった作り手側（プラットフォームベンダー、サービスベンダー、デザイナー、プログラマー）からの要求を反映したものでもありますし、私はむしろその側面が大きいように感じています。

フラットデザインは優雅

パソコンのスクリーンが大型化して画素数が増えたことで、ある程度余裕をもって画面をレイアウトできるようになったと言えます。

逆にスマートフォンなどのモバイル向けにできるだけ要素を切り詰めたデザインを多く目にするようになり、一度にひとつのことだけを見せるような端的なコンテンツ構成が受け入れられるようになりました。

つまり画面上の情報量を増やしていくという方向性は限界を迎えたのでしょう。それよりも、最も重要なメッセージをホワイトスペースを多めにとって優雅に見せるという方向性に、サービスベンダーは新たな効果を見出しはじめたのだと思います。

フラットデザインはUI部品を減らす

ジェスチャ操作の意義と課題でも書いたように、タッチ操作を前提としたUIでは、コンテンツの表示領域自体がジェスチャ入力を受け取るヒットエリアになっていたり、あるいは暗黙的なジェスチャコマンドによって処理が実行されるような仕掛けが増えています。

そうすると、操作のためのスイッチやレバーを常に表示しておく必要がなくなるので、限られたスクリーン面積をできるだけコンテンツ表示に使うことができるようになります。

結果的に、ボタンやメニューなどのUI部品は減り、あってもあまり強調されない形で脇役といった位置づけになっていきます。

フラットデザインは抽象的

グラフィックリッチな GUI では、UI部品は現実世界のコックピットやAV機器の操作パネルを思わせる立体的／具象的な表現が多くとられていました。

しかし画面上でのUI部品の強調度合いが下がってフラットあるいは半透明な表現になると、それに合わせてアイコン類もより抽象的でピクトグラムのようなデザインが用いられるようになります。

もともと GUI におけるアイコンは（その名のとおり）かなりシンボリックなデザインでしたが、コンピュータのグラフィック性能が向上するにつれて、まるで3Dレンダリングしたような写実的なものになっていきました。

旧 Mac OS の TeachText のアイコン。今見ると抽象度が高い。

Mac OS X のテキストエディットのアイコン。具象的。よく見ると Think Different の原稿が。

2001年に Mac OS X が出た時、アイコン類のデザインがそれまでにくらべて非常に具象的でリアリスティックなものであったため、UI業界では多くの有識者がそれを批判していたのを覚えています。

ですから、再び記号的なアイコンのデザインが増えてきたというのは面白いものです。

その際、ウェブやアプリでよく用いられるアイコン（検索の虫眼鏡、メールの封筒、撮影のカメラ）が共通のモチーフや形状でデファクトスタンダードになることはよいことだと思います。

しかし一方で、ブランドアイデンティティやアイキャッチのためのアートワークとしては、アイコンでオリジナリティを出しづらくなるという側面もありそうです。

フラットデザインは機能主義的

コンピュータメーカーはグラフィック性能やデザイン性をアピールするために凝った見栄えのUIを多く提案し、またそれによってサードパーティのサービスベンダーも同等のUI表現を実装してきました。

そこには、より明快なメタファを用いた方がユーザーにとって分かりやすいはずだという考え方が前提にあったと思います。例えば、押せるものは出っぱって見えているべきだし、文字の入力欄はへっこんでいるべきである。そういう視覚的な手がかりが十分になければいけないという考えです。

しかしこれだけ GUI に接する機会が増えてくると、多くのユーザーはUI部品の種類や識別の「勘所」がもう分かっているので、そこまで大げさに表現しなくても普通に使えるようになってきたのも事実でしょう。

デザイナーであれば誰でも一度はミニマルなデザインに憧れるはずです。無くてもよいあしらいは排除して、コンテンツや機能がその性質上もともと要求している制約から蓋然的に導かれるデザイン。そのような、言ってみれば合理主義／機能主義的なムーブメントが、ソフトウェアのUIデザインにも起きているのかもしれません。

あるいは、表面的な装飾を重視していた縄文土器の時代から、より抽象度が高くそのかわり用途の広がりをみせた弥生土器の時代への移行と言ってもよいでしょう。

ただしそこには懸念もあります。

画面上の各要素の性質やそれらの関係性を示す視覚的な手がかりが極端に減ってしまうと、操作のしかたが予測しづらくなります。またデザインパターンとして識別できなくなって、学習効果が下がってしまいます。

UIについての「勘所」は、普段からITに接している人とそうでない人ではかなり差があるでしょうから、例えば、ボタンにボーダーや立体感がなければそれが押せると分からないかもしれませんし、見慣れない記号はその意味が分からないでしょう。

いくら合理的な構造でデザインされていたとしても、フラットすぎるUIでは自己説明的な要素の欠如によって、その合理性が伝わらない恐れがあります。

Apple Mail（左）と Gmail（右）。Apple にくらべて Gmail は最低限の視覚要素によるフラットデザインだが、ユーザーは検索ボックスの存在に気づくだろうか。

フラットデザインは高度

また、UIに装飾やユーモアは不要なのかという疑問もあります。UIにおいて、情報や機能を正しく伝えるためのメタファ表現は有用である、という考えは多くの人が肯定するところだと思いますが、純粋な装飾についてはどうでしょうか。リアリズムのための細工や、ユーモアによる仕掛けはどうでしょうか。

UIデザインには多くの場合、機能上の合目的性だけでなく、新規性、特異性、娯楽性といったものも求められます。そのバランスはサービスによって違ってくると思いますが、例えば他社のサービスとの差別化が重視されているデザインにおいて、ほとんどカラーパレットとレイアウトしかデザイン要素がないというのでは困りそうです。

また装飾や写実的な表現についても、どこまでが必然でどこからが遊びなのかを判断するのは実際には難しいところです。例えば iOS でよく用いられるリネン風テクスチャや、画面が遷移する際のアニメーションなどは、無くても機能上は問題なさそうですが、それらがあることによって、背景と前景の区別、画面同士の空間的な関係性などをよりよく表しているとも言え、結果的にシステム全体の心地よさ、高級感、楽しさなどを醸成していると言えます。

Mac のメモアプリにある、ノートパッドの上部にあしらわれた紙の切れ端などは、無くても恐らく誰も困らないものですが、メタファの有用性を世に知らしめてきた Apple がこれをやると、メタファのメタファというか、GUI へのセルフオマージュというか、人とソフトウェアのインタラクションは適度な楽しさの演出で促進されるといった考え方が反映されているわけです。

Mac のメモ

あるいは、Podcast アプリの前バージョンにあったオープンリールデッキの表現。これはもうほとんどジョークで、メタファとしては何も機能示唆に貢献していないと思いますが、このような仕掛けを異常にハイクォリティな実装（再生開始時にテープが波打ったり、シーケンスに合わせてリールに巻かれたテープの量が変化したりする）で提供することで、システム全体の文化を豊かにしているとは言えないでしょうか。私個人はこういうばかばかしいのは大好きで、Apple の中の一流プログラマーが大まじめにテープをびよんびよんさせるコードを書いている様子を想像すると楽しい気分になります。

Podcast アプリ

もちろん装飾的な要素がなくても、思いどおりに操作できて、それに迅速に反応するUIであれば、ユーザーは使っていて楽しいと感じるでしょう。また凝ったテクスチャやトランジションがなくても、UI要素の役割を適切に表現することはできます。

しかしそれにはデザイナーの高いスキルが要求されます。敷石と苔と岩だけで宇宙を表現するような緻密な計算と豊富な経験が必要でしょう。

いずれにしても、20世紀初期に建築やプロダクトデザインの分野に起きた機能主義的なアプローチでは現実世界の物理的なものを扱っていましたが、二次元に表示するソフトウェアでは、奥行きや手触りといった情報を得られない分、装飾的要素を排除していくとUIとして役立たなくなってしまう恐れがあるのです。

フラットデザインは一時的な流行か

UIとしての表現力において上記のように課題が多いフラットデザインは、数年のうちに限界に達するのではないでしょうか。フラットすぎるUIは使いづらいというフィードバックが増えてくることも予想されます。そしてフラット度合いやUI部品の強調度合いを試行錯誤していくうちに、やがてポストモダン（大げさですが）が現れてくると思います。だからといって、フラットデザインを一時的な流行であると捉えてはいけないと思っています。

フラットデザインのムーブメントには何か本質的な意味があるような気がします。それは、ジェスチャによる直接操作や、クロームよりもコンテンツを前面に出した世界観と関係しています。

ファンシーなUI部品を誇示したり、あらかじめ決められたタスクをメニューとして強調するのではなく、もっとユーザーが自然にシステムをコントロールできるようにするにはどうすればよいか。必要最低限の要素でシステムの機能性を表現するにはどうすればよいのか。

フラットデザインは、そうしたUIデザインの本質的な部分の模索だと思います。そして次のことを示唆していると思います。すなわち、情報を処理するためにUIを操作するという手続き的な利用モデルではなく、もっとユーザーがコンテンツと直接インタラクトしていると感じるような利用モデルへの移行です。

それがどのような操作になるのかは具体的には分かりませんが、来るべきUIのポストモダニズムでは、静的なグラフィックによってシステムを表現するのではなく、ジェスチャに対する多様な反応やコンテンツの連続的な状態変化によって、ユーザーとシステムとのコミュニケーションが形成されるような、モードレス・ユーザーインターフェースの方向に進化していくだろうと思います。

その意味で、すでにUIデザイナーの仕事は「機能的で美しいグラフィックを作ること」から、「機能的で美しい反応を作ること」にシフトしはじめています。

フラットデザインは、そういったUIの変遷の大きな流れの中にあるのだと考えています。