フラットデザイン:
起源、問題、フラット2.0のほうが望ましい理由

フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。

フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWebデザインのミニマリズムの流れを汲むものととらえられている。

立体効果とスキューモーフィズム、リアリズム

フラットデザインを定義するには、フラットデザインでは「ない」ものを定義する必要がある。フラットデザインは、立体的で、スキューモーフィックで、リアリスティックなデザインスタイルへの反動として一般には解釈されている。したがって、真にフラットなスタイルのインタフェースではこれらの表現方法は一切利用されることがない。

立体効果

立体効果はインタフェースに奥行きがあるような錯覚を与える。その結果、ユーザーがビジュアル要素間の優先度を読み取り、どの要素がインタラクティブなのかを理解するのに役に立つ。

  • 浮き出ているように見える要素は押す(マウスでクリックする)ことができそうに見える。このテクニックはデジタルボタンのシグニファイアとしてよく利用される。
  • くぼんでいたり、へこんでいたりするように見える要素は何かを入力できそうに見える。このテクニックは検索バーのような入力フィールドのシグニファイアとしてよく利用される。

グラフィカルユーザーインタフェースの初期のころから、画面では擬似的な立体効果(影やグラデーション、ハイライト)が利用され、ユーザーが一目見ただけで、利用可能なアクションを理解できるようにしてきた。しかしながら、こうした初期のGUIの擬似3D効果は強烈で、やり過ぎ感のある目障りなものが多かった。

Windows 95のこうしたダイアログボックスでは、強い影とハイライトを利用して3D 効果を出していた。どういうふうにボタンが浮き出て見えるか、入力フィールドがくぼんで見えるかに注目してほしい。また、3個のタブのうちのどのタブが他の2個よりも上になっているかもわかりやすい。しかしながら、強い影はインタフェースの見栄えを悪くしてしまいがちだ。
Windows 95のこうしたダイアログボックスでは、強い影とハイライトを利用して3D 効果を出していた。どういうふうにボタンが浮き出て見えるか、入力フィールドがくぼんで見えるかに注目してほしい。また、3個のタブのうちのどのタブが他の2個よりも上になっているかもわかりやすい。しかしながら、強い影はインタフェースの見栄えを悪くしてしまいがちだ。

スキューモーフィズム

デジタルデザインにおいて、スキューモーフィックなデザインとは、現実世界での先例を模倣するという、なくてもいい装飾的デザイン特性を持つオブジェクトのことである。スキューモーフィックなデザインの狙いは、そうした先例についてのユーザーの予備知識を利用して、新しいインタフェースの利用方法へのユーザーの理解を助けることにある。

AmazonのKindle Fireタブレットの初期モデルでは、Androidベースのオペレーティングシステムによって、立体的な「棚」と木のテクスチャを備えたスキューモーフィックな本棚のデザインが採用されていた。この本棚というメタファーの狙いは、(物理メディアを保管したり、整理したりする場所という)本棚についてのユーザーの予備知識をデジタル環境に転移しやすくすることにある。「棚」と木のテクスチャはこのシステムの機能性には関係ないが、それらによってメタファーが強化されると考えられていた。しかし、後にAmazonは、UIからこのスキューモーフィックな本棚のデザインを削除した。
AmazonのKindle Fireタブレットの初期モデルでは、Androidベースのオペレーティングシステムによって、立体的な「棚」と木のテクスチャを備えたスキューモーフィックな本棚のデザインが採用されていた。この本棚というメタファーの狙いは、(物理メディアを保管したり、整理したりする場所という)本棚についてのユーザーの予備知識をデジタル環境に転移しやすくすることにある。「棚」と木のテクスチャはこのシステムの機能性には関係ないが、それらによってメタファーが強化されると考えられていた。しかし、後にAmazonは、UIからこのスキューモーフィックな本棚のデザインを削除した。

リアリズム

リアリズムとは、美的理由から物理的なアイテムやテクスチャを模倣するデザインスタイルのことである。

スキューモーフィズムはよくリアリズムと混同される。また、Webデザインではこの2つのスタイルは一緒に見出されることが多い。しかし、両者のそもそもの違いは、リアリズムが純粋に美的目的から、物理的世界を模倣するデザインの要素やテクスチャを利用するビジュアルスタイルであるのに対し、スキューモーフィズムはユーザーのインタフェースへの理解を助けるために、メタファーを支援することにある。

初期のKindle Fireタブレットと同じく、食料品チェーンのSproutsのWebサイトでは立体的な木のテクスチャが採用されている。しかしながら、このデザインでのリアリズムは美観にしか効いていない。つまり、インタフェースの利用方法に対するユーザーの理解を助けるある種のメタファーの支援にもなってなければ、現実世界での先例の模倣にもなってない。
初期のKindle Fireタブレットと同じく、食料品チェーンのSproutsのWebサイトでは立体的な木のテクスチャが採用されている。しかしながら、このデザインでのリアリズムは美観にしか効いていない。つまり、インタフェースの利用方法に対するユーザーの理解を助けるある種のメタファーの支援にもなってなければ、現実世界での先例の模倣にもなってない。

フラットデザインの起源

Microsoftによる2011年のデザイン言語 MetroとWindows 8の発表が、フラットデザインの普及に及ぼした影響は大きなものだった。Microsoftのデザインドキュメントでは、それらの新しいスタイルは「真にデジタル」(authentically digital)と書かれているが、このフレーズはフラットデザインが多数のデザイナーを引きつけている魅力をうまく捉えている。スキューモーフィックデザインと違って、フラットデザインは物理的な世界での外観を再現することなく、デジタルメディアを探求する手段と考えられていたのである。

Appleのトップページのフラットデザイン化は、このトレンドの人気の伸長を示すベンチマークとして有益だ。スキューモーフィズムとリアリズムは長い間、Appleのデザインのトレードマークであり、そのトップページは2013年ごろまではフラットデザインというトレンドに逆らうものだったからである。

(WayBack Machine経由の)2007年のAppleのトップページ。ナビゲーションバーのデザインスタイルは光沢感のある立体的タブがあるもの。
(WayBack Machine経由の)2007年のAppleのトップページ。ナビゲーションバーのデザインスタイルは光沢感のある立体的タブがあるもの。
(WayBack Machine経由の)2012年のAppleのトップページ。タブのメタファーは消えたが、ナビゲーションバーには光沢感や丸みがまだあった(これらはリアリズムの例にあたり、スキューモーフィズムではない)。新しくできた検索バーにはへこんで見えるように、影が入れられている(17年前からあったWindowsの入力フィールドよりは視覚効果としての見た目は洗練されている。とはいえ、概念的には両者のアイデアは同じである)。右下隅に表示されているアイコンは光沢感が非常に強く、それが何かということを閲覧者が理解しようとするのを妨げているかのようだ。これらのボタンはほぼ発光しているかのように見え、浮き出ている感じはない。
(WayBack Machine経由の)2012年のAppleのトップページ。タブのメタファーは消えたが、ナビゲーションバーには光沢感や丸みがまだあった(これらはリアリズムの例にあたり、スキューモーフィズムではない)。新しくできた検索バーにはへこんで見えるように、影が入れられている(17年前からあったWindowsの入力フィールドよりは視覚効果としての見た目は洗練されている。とはいえ、概念的には両者のアイデアは同じである)。右下隅に表示されているアイコンは光沢感が非常に強く、それが何かということを閲覧者が理解しようとするのを妨げているかのようだ。これらのボタンはほぼ発光しているかのように見え、浮き出ている感じはない。
2015年のAppleのトップページ。全体用のナビゲーションバーはロゴも含めて完全にフラットなデザインになり、影もテクスチャもハイライトも見当たらない。ここには3Dやリアリズム、スキューモーフィズムといった視覚効果はまったく利用されてない。ナビゲーションオプションがクリック可能であるとユーザーにわかるのは、単にそれが慣例だからだ。つまり、Webページのトップを横切っている濃い色の横棒はナビゲーションバーであることが多いということによる(それが広告でない限りは。ただし、この横棒は細すぎるとバナー無視の犠牲になる)。
2015年のAppleのトップページ。全体用のナビゲーションバーはロゴも含めて完全にフラットなデザインになり、影もテクスチャもハイライトも見当たらない。ここには3Dやリアリズム、スキューモーフィズムといった視覚効果はまったく利用されてない。ナビゲーションオプションがクリック可能であるとユーザーにわかるのは、単にそれが慣例だからだ。つまり、Webページのトップを横切っている濃い色の横棒はナビゲーションバーであることが多いということによる(それが広告でない限りは。ただし、この横棒は細すぎるとバナー無視の犠牲になる)。

フラットデザインに関するユーザビリティ上の問題

2011年にフラットデザインが出現して以来、Nielsen Norman Groupはそれに付随するユーザビリティ上の問題を声高に非難し続けてきた。我々がフラットデザインに反対する一番の理由は、流行の見た目にするために、それがユーザーのニーズを犠牲にしがちだからである。

青色の下線の入ったリンクやボタンの3D効果といった伝統的シグニファイアによって、クリックが可能なことがわかるという状況に、長年、ユーザーは置かれてきた。デザイントレンドが変わり、ユーザーが経験するデザインパターンが新しいものになったことで、平均的ユーザーの、リンク要素だと直感的に識別する能力も進化してきている。しかし、ユーザーがリンク要素を見つけるのがうまくなったからといって、「まったく」手がかりが要らないということにはならないだろう。

Webサイトでクリックできそうなものをどうやって知るのかと、(「ミレニアル世代向けのデザイン」に関する今度のトレーニングコース用の調査に参加した)22歳のカナダ人ユーザーにたずねたところ、彼女は次のように答えてくれた。

青くて下線が付いていれば、まず、それがそうだとわかります。Wordなどでもそういうものはありますね。しかし、実際のところ、特に下線があるとわかりやすいです。それ以外に、ボタンの場合には、「ここをクリックしてください」と書いてなくても、「今すぐ購入する」や「カートに入れる」と書いていればわかります。

この発言はどんな種類の手がかりからユーザーがクリックの可能性を判断するかをうまく説明している:

  • 伝統的で外観が不変のシグニファイア(例:下線のついた青色のテキスト、浮き出たボタン)
  • 伝統的なシグニファイアを連想させるもの(例:下線の入った青色以外の色つきテキスト、枠に入ったテキスト)
  • コンテキストからの手がかり(例:実行可能なテキスト、ページトップという配置)
Trader Joe’sのトップページにはクリックができることを示すさまざまな種類のシグニファイアがある。(1)「View All(:すべて見る)」という下線のついた青色のテキストは伝統的なシグニファイアである。(2)フラットなデザインと赤い背景色を使った「Find」(:探す)リンクはボタンを連想させるものだが、立体的あるいは写実的な視覚表現は利用していない。(3)メインナビゲーションバーの黒字のリンクは配置とテキストだけでクリック可能であることを伝えている。(このほぼフラットなデザインのページにスキューモーフィズムの要素がしっかり1個だけあることに注目しよう。その要素とは目玉商品のカルーセルの下に置かれた木製の「棚」である)。
Trader Joe’sのトップページにはクリックができることを示すさまざまな種類のシグニファイアがある。(1)「View All(:すべて見る)」という下線のついた青色のテキストは伝統的なシグニファイアである。(2)フラットなデザインと赤い背景色を使った「Find」(:探す)リンクはボタンを連想させるものだが、立体的あるいは写実的な視覚表現は利用していない。(3)メインナビゲーションバーの黒字のリンクは配置とテキストだけでクリック可能であることを伝えている。(このほぼフラットなデザインのページにスキューモーフィズムの要素がしっかり1個だけあることに注目しよう。その要素とは目玉商品のカルーセルの下に置かれた木製の「棚」である)。

もし、あなた方の組織がフラットデザインにすることで、サイトの外観を美しくしたいと考えているのなら、クリック可能な要素が見てすぐにわかるデザインをするための我々のガイドラインに従い、クリックの不確実性を起こす原因を決して作らないようにしよう。

充実するフラットデザイン

最近、デザイナーもフラットデザインのユーザビリティ上の課題を認識し始めてきた。その結果、フラットデザインに対して、より賢明でバランスの取れた解釈をしようという動きが出てきている。フラットデザインなら「真にデジタル」になりうるということ、そして、ユーザビリティを損なわずに、メディア独自の可能性を探求できるということにデザイナーが気づきつつあるのである。

こうした動きは「セミフラット」や「ほぼフラット」、「フラットデザイン2.0」(‘semi flat,’ ‘almost flat,’ or ‘flat 2.0’)と呼ばれる。これはおおむねフラットではあるが、わずかな影とハイライト、レイヤーを利用して、UIに多少の奥行きを作り出そうとするデザインスタイルのことである。

このデザイナーポートフォリオサイトに見られるような、長い影のついたフラットなデザイン要素というのは、2013年ごろによく見られるようになったものである。長い影はフラットデザイン2.0が間違った方向に行ってしまった例の1つだ。というのも、そうした3D効果は見た目のためだけのものであり、ユーザーにとって意味のある情報を何も追加してないからである。幸いなことに、このデザインの人気は衰えてきている。しかし、長い影付きアイコンを利用しているフラットなインタフェースというのはいまだに見られる。
このデザイナーポートフォリオサイトに見られるような、長い影のついたフラットなデザイン要素というのは、2013年ごろによく見られるようになったものである。長い影はフラットデザイン2.0が間違った方向に行ってしまった例の1つだ。というのも、そうした3D効果は見た目のためだけのものであり、ユーザーにとって意味のある情報を何も追加してないからである。幸いなことに、このデザインの人気は衰えてきている。しかし、長い影付きアイコンを利用しているフラットなインタフェースというのはいまだに見られる。

Googleのマテリアルデザイン言語は要素間の優先順位がきちんとされているフラットデザイン2.0の一例である。そこでは物理学から拝借した一貫性のあるメタファーと原則を利用して、ユーザーがインタフェースの意味を理解し、コンテンツ内のビジュアルの序列を解釈できるように手助けをしている。

Android向けのEvernoteアプリはフラットデザイン2.0の利点を示す良い例である。ほぼフラットなUIであるにもかかわらず、このアプリでは、ナビゲーションバーやフローティング表示になっているプラスボタン(「新しいメモを追加する」)に多少の影がつけられている。また、カードというメタファーを利用して、コンテンツを3D空間にあるレイヤー可能なフラットな面として表示している。
Android向けのEvernoteアプリはフラットデザイン2.0の利点を示す良い例である。ほぼフラットなUIであるにもかかわらず、このアプリでは、ナビゲーションバーやフローティング表示になっているプラスボタン(「新しいメモを追加する」)に多少の影がつけられている。また、カードというメタファーを利用して、コンテンツを3D空間にあるレイヤー可能なフラットな面として表示している。

他のデザイントレンドと同じく、我々のアドバイスは、バランスよく適度に、というものだ。流行を追うために、ユーザビリティを犠牲にするようなデザイン上の判断はしてはならない。忘れてはならないのは、(他のデザイナーのためだけにあなたがデザインしているのではない限り)あなたはそのデザインのユーザーではない、ということだ。あなた方デザイナーの好みや、クリックの可能性を示すシグニファイアを読み取る能力はユーザーとは違う。というのも、自分自身のデザインにある各要素の意図をあなたは「知っている」からである。

初期の擬似3D GUIやSteve Jobs風のスキューモーフィズムは重くて、かっこ悪いインタフェースになってしまうことが多かった。そうした過剰さを抑制するというのはユーザビリティにとっては良いことである。しかし、ビジュアル間の区別をなくし、完全にフラットなデザインにして、シグニファイアを用いないのは、同じくらい悪いほうに振ってしまうことになりかねない。フラットデザイン2.0 なら折衷案を作り出せるチャンスがある。ビジュアルをシンプルにしたからといって、シグニファイアを犠牲にしなくてすむのである。