もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。
実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。
マテリアルデザインにいたる歴史
二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。
しかし、どのようにして我々はフラットにたどり着いたのでしょうか？
スキューモーフィズム
UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手なエフェクトを持つ古いインターフェースを思い出してみてください。
現実世界のモノに似せようというこの試みには、ユーザーとデバイスのデジタルな情報のやりとり、つまりインタラクションを容易にするという目的がありました。これが、リッチなテクスチャーと実物そっくりな操作感が数年間にわたりITの世界を支配した理由です。
人々はなんとかして現実世界からデジタル世界への移行に対応する必要がありました。その点、スキューモーフィズム的なデザインスタイルは、その役割を良く果たしたように見えます。
しかし、モバイル技術が進歩するとともに、世の中はユーザービリティに重点を置くべきという流れになりました。これがシンプルさが新しいデザインスタンダードとなり始めた経緯です。
ただ、スキューモーフィズムが完全に死んだとは思わないでください。キャラクターやユーザーを没頭させることが重要なゲームでは、スキューモーフィズムは今でも広く使われています。
フラットデザイン
フラットデザインは、要素から立体感が取り除かれたデザイン手法です。すべてのオブジェクトが一つの平面上に存在しているように感じさせるものです。フラットデザインはドロップシャドウ、テクスチャー、グラデーションといったスタイル要素を排除し、フォントとアイコンと色の遊びのようになっています。
しかしなぜこのような変化が必要なのでしょうか？ それはとっても簡単な理由です。第一に、フラットデザインはページの読み込み時間を大幅に短縮します。重たいスキューモーフィズム的なディテール（レイヤー、階調度、セリフ体）を排除することは、フラットデザインの要素をより小さくし、読み込み時間を早くします。さらには、フラットデザイン化された要素は高解像度のスクリーンでも低解像度のスクリーンでも同じように魅力的にみえます。（これは強力なモバイルフレンドリーの解決策だと私は考えています）。
次に、シンプルなイメージは細かいイラストよりもメッセージを素早く伝えます。フラットデザインは、図式的かつとても繊細なので、だれでも理解することができます。
最後に、シンプルなフォントが用いられたフラットデザインのアイコンは、本当に価値のあるコンテンツにユーザーの注意を向けることを助けます。そのため、ユーザーがウェブサイトやアプリの文章を読むよりも、デジタルアートに気を取られる可能性がなくなります。
メトロデザイン
しかしながら、偉大なるフラットデザインはこう感じるかもしれません。初めからいくつかの問題点を抱えていたと。
私が思う最もわかりやすい例は、マイクロソフトによるWindows 8です。Windows 8はメトロデザインのコンセプトによるフラットデザインの先駆者と考えられていました。しかし、マイクロソフトは、グラフィックよりもタイポグラフィに注力するという過ちを犯してしまいました。
NNグループが実施したWindows8のユーザビリティーテストでは、ユーザーはOSのインターフェース上にある実行可能なオブジェクトと実行できない要素を見分けることが難しいという結果を示しました。ユーザーは、クリック可能な要素がロゴのように見えて混乱すると不満でした。結果として、彼らはテストを実施した会社からの改善要求に対応することができず、ミッション（システムを理解することを助け、クリックしたくさせること）を達成できなかったということです。
フラットデザインと関連するもう一つの会社はアップルです。彼らは2013年中頃にリリースしたiOS７から、スキューモーフィズム的なデザイン要素を排除しました。アップルのフラットデザインへの移行は、そこそこ受け入れられたようです。主な理由は、アップルが全く新しいコンセプトのUIを構築しようとせず、既存のものに少量のフラットデザイン感を追加したという点にあります。そのため、ユーザーは以前と同じOSと知識で新しいプロダクトを使うことができました。
マテリアルデザイン
マテリアルデザインは自然に生まれた流行りのデザインスタイルというより、どちらかと言うとブランド製品です。この点がフラットデザインとの主な違いと考えられるものです。
マテリアルデザインを「ブランドのついた」と呼んだ意図は、よく定義されたガイドラインと自尊心のあるモバイルデザイナーが固執する原則を持つからです。(しかしながら、Googleはそうではありません)。Googleがマテリアルデザインをやや露骨に紹介したのは、多くのAndroid端末において同じ見た目を実現する必要性があるからです。
しかし、何がマテリアルデザインの主なアイデアなのでしょうか。ある程度機能的ではあるものの、フラットデザインはあまり直感的ではないデザインであると考えられています。実際、スクリーン上のオブジェクトの過剰な平面化がユーザーを混乱させてしまうのです（特に、ウェブやモバイルのインターフェースに慣れていない人々にとって）。先に述べたように、クリック可能な要素はクリックのできないアイコンやテキストと間違えやすく、残念なユーザー体験という結果となるでしょう。
そのため、マテリアルデザインでは、可能な限りシンプルな見た目にする一方でスキューモーフィズムを再度取り入れようとしています。平面的に見えますが（特に色に関して）、Z軸（奥行き）のおかげで多次元的でもあります。
言い換えると、マテリアルデザインはアニメーション、シャドウ、レイヤーといった細かなスキューモーフィズムのディテールを強調したフラットデザインの改良版です。これによって、ナビゲーションはより直感的になり、全体的なスタイルとしてはシンプルであることを可能としています。
フラットデザインの利点と欠点
次に、フラットデザインの利点と欠点について考えてみます。
利点
- ミニマリスティックでスタイリッシュ
- 理解しやすく、アイデアを伝えやすい
- 時間とリソースの節約。ページはより早く読み込まれ、通信量は少なくなります。
- コンテンツにフォーカスします。本当に価値のあることからユーザーの気をそらす過度に装飾されたUI要素が存在しません。
- PC、スマートフォンなど異なるデバイスでも同じようコンテンツを見せます。
- 不要な要素の描写を少なくすることで、ウェブサイトやアプリケーションのデザインプロセスを加速します。
欠点
- シンプルになりすぎる可能性があります。やりすぎてしまうと、フラットデザインUIは特徴がなく平凡なものに見えます。
- 形、色、図を使う時の制限となる可能性があります。
- 直感的ではありません。ウェブやモバイルの経験のないユーザーは、フラットデザインなUI要素の目的を理解することを難しいと感じるかもしれません。それはスキルのある人たちにとっても同じです。よって、複雑なウェブやモバイルソリューションにはフラットデザインは適しません。
- ユビキタス。実際のところ、フラットデザインであり続けることは難しいでしょう。
マテリアルデザインの利点と欠点
つづいてフラットデザインの利点と欠点についても忘れないにしましょう。
利点
- 同じくらいミニマルでスタイリッシュ
- より直感的。マテリアルデザインは経験のあるユーザーにも新規ユーザーにも良いです。
- 適度なスキューモーフィズム。Z軸の利用（Googleのユニークなコンセプト）により、全てをよりリアルに見せます。
- 定期的にアップデートされるよく定義されたガイドラインを持ちます。プロジェクトで困難に直面した時は、常にそのガイドラインを参照する事ができます。
- アニメーションをウェブでのソリューションに昇華させます。さらに、アニメーションはユーザーがUIをより良く理解するのを助けます。
欠点
- マテリアルデザインはGoogleのものです。Googleに断りなく、不満に感じていることを改善するのは難しいでしょう。
- Z軸があるため、フラットデザインよりも開発工数がかかります。
- モーションはとてもエネルギーを消費します。
- ガイドラインを常に守ることは、デザイナーの創造性に悪い影響をあたえます。
結論
フラットデザインとマテリアルデザインはとても近しいため、この二つのうちどちらかが明確なアドバンテージを持っていると決めつけるのは実に愚かなことです。どちらも流行であり、どちらも極端なリアリズムを排すものです。
フラットデザインが重たく過剰なリアリズムへの反発である一方、マテリアルデザインは過度なフラット化に対する答えと言えます。マテリアルデザインは、フラットデザインが避けてきたスキューモーフィズムの要素を追加しただけのものです。また、両者の明確な違いのひとつは、マテリアルデザインはGoogleの特許取得済みの製品で、フラットデザインはシンプルさを目指したいくつかのデザイン手法が混ざり合ったものという点にあります。
しかし、フラットデザインは「すでにフラットではない」ということにも言及したほうが良いでしょう。フラットデザインは、自身の過ちと競合の成功から学ぼうとしてきました。ここ数年でフラットデザインは驚くほど進化し、完全にフラットなスタイルからややフラットなものに変わりました。以前よりも少し立体的に見せるために、レイヤーとわずかなシャドウを使うようになりました。これは、フラットデザイン2.0と言えるでしょう。
