[fancy_box]海外デザインブログDesignModoで公開された「Flat Design vs. Material Design: How Are They Different? – Designmodo」の著者Anna Lisnyakより許可をもらい日本語抄訳しています。[/fancy_box]
フラットデザインとマテリアルデザインの違いについて、しばしば討論されているのを耳にするようになっています。２つの似たデザインスタイルに、ひとつはもうひとつをベースにしています。片方は「人気沸騰中の新しいもの」となっており、もう片方はデザイントレンドが過ぎていると推測するひともいます。また、ひとつはデザイントレンドをのびのびと採用し、もうひとつはガイドラインに沿って意図的に作成されています。
実際にこの２つのスタイルの本当の違いはなんでしょうか。性質的に片方がすぐれているのでしょうか。それとも特定のユーザーにとってのみ良いものなのでしょうか。実際に多くのデザイナーが、どのように違いがあるのか関心を持っています。ではまずは両スタイルの基本となる、スキューモーフィズム（英: Skeuomorphism）デザインについて見ていきましょう。
スキューモーフィズム（skeuomorphism）とは？
スキューモーフィズム（英: Skeuomorphism）は、日常生活を反映されたデザインが特長です。たとえば本物そっくりに制作されたキーボードを採用したシンセサイザープログラムのような、リアルティーのあるデザインとなっています。一時期は多くのウェブサイトや、インターフェースデザインにも採用されていました。
しかし、デジタル世界でのユーサビリティーを土台にせず作成されている点や、マウスやタッチスクリーンでどのようにうまく動作させるかも問題になっていました。スキューモーフィズム（英: Skeuomorphism）は、単純にライフスタイルの動き、見た目の部分のみを参考にしただけでした。
そして遂に、レトロなデコレーションパーツなどを取り除き、ユーザビリティ一番に優先し、ページの読み込み速度を早くし、より効果的にユーザーがコンテンツに着目できる新しいデザインが考えられました。スキューモーフィズム（英: Skeuomorphism）のデジタルインターフェースを省いたことで、フラットデザインが誕生したのです。
フラットデザイン（Flat Design）とは？
フラットデザイン（Flat Design）は基本となるベーシックで、重要で最小の機能のみを備えています。ドロップシャドウやグラデーション、テクスチャなど立体感のあるスタイルを取り除き、よりアイコンやタイポグラフィー、配色に着目しています。
これはデジタル・メディアを目的別に作成することができる、首尾一貫したはじめてのデザインスタイルのひとつです。インターネットのユニークな機能をうまく利用することで、ユーザーが迷わないシンプルなボタンや配色は、特定のデザイン要素やアイコンなどを素早く探すことが手助けをしてくれます。
フラットデザインにおいてデザインは補助的なものと考えられ、より機能性にフォーカスしています。簡略化されたイラストや図解は、ウェブサイトのコンセプトを直感的にユーザーに伝えることができます。またサイトの読み込み速度を改善させ、あらゆる解像度のスクリーンに対応し、より信頼性のあるユーザーエクスペリエンスを実現します。デザイナーとユーザー両方にメリットがあるといえるでしょう。
メリット
- あらゆるスクリーン解像度に対応しています。
- デザインを合理化し、不要なグラフィックやアニメーション要素を排除し、読み込み速度を改善します。
- スキューモーフィズム系デザインを取り除き、よりユーザーがコンテンツを続けて閲覧しやすくなります。
- 不要なデザイン要素を取り除くことで、より速いサイトデザインに仕上げます。
- フラットデザインで簡略されたサイトは、レスポンシブにもとても対応しやすくなります。
デメリット
- シンプルな配色やシェイプ、図解を中心としたデザインに限定されます。
- 他サイトに似たデザインになりやすい。
- いくつかのサイトやアプリでは、プロセスを通じてより複雑なビジュアルが必要となり、これがフラットデザインの落とし穴のひとつです。ドロップシャドウや立体感がないことで、ベクターグラフィックで作成されたボタンなどは、クリックできるのかわかりづらくなります。
- あまり代わり映えのしないデザインは、ユニークでオリジナル性のあるサイトやアプリデザインには向いていません。
- 関連事項として、フラとデザインは200年半ばに登場したスタイルで、やや時代遅れのデザインとなってしまう恐れがあります。
マテリアルデザイン（Material Design）とは？
フラットデザインは、本当は役立つスキューモーフィズム系デザインまで取り除いてしまったため、新しくマテリアルデザインが誕生しました。数えきれないイメージ写真を編集するエディターからヒントを得たレイヤーコンセプトで、ドロップシャドウやベベル、アニメーションを加えることで、各レイヤーを独立させています。より自然な動きに近い、重要性に応じてレイヤーの重ね方が考慮されています。
マテリアルデザイン（英: Material Design）をはじめてのひとに分かりやすく説明すると、Google社が開発したデザイン基準で、デザインガイドに基づいて作成されます。数多くの特長がありますが、その中でもZ軸の使い方はユニークです。基本的にはフラットデザインに、すこしだけスキューモーフィズムを加えることで、各要素に重なるエフェクトを実現しています。
数枚の紙を想像してみると分かいやすいですが、このスタイルでは伸縮したり、コントラストを加えたり、形を変えることもできます。それらのページを上に重ねることで、各デザイン要素をそれぞれ表示します。これが、マテリアルデザインの本質的なコンセプトとなります。
デザインスタイルガイドは細かく区別、記載されていますが、必ず守らなければいけないルールというわけでもありません。マテリアルデザインをフレームワークとして考え、今後のデザインプロジェクトのテンプレートに検討してみましょう。またあらゆる端末サイズに対応するレスポンシブデザインで、Androidウエラブル端末にさえも対応しており、アプリデベロッパーが積極的に利用してもらえるよう推奨もしています。
Andoridアプリデザインの基本でもあり、ウエラブル端末についても言及されています。iOSに利用するべきかどうかは、討論されているまっただ中で、Googleの見た目で統一されてしまうというひともいたり、他のオペレーティングシステムに影響を及ぼすという意見もあったりと、判断は自分自身となるでしょう。
メリット
- ドロップシャドウなどを利用した立体的な並びは、より分かりやすい操作性を実現します。
- フラットデザインと異なり、マテリアルデザインは具体的で明確なデザインガイドラインが設けられているので、悩まずに作業を進めることができます。
- ウェブサイトやアプリなど複数のプラットフォームを検討しているときは、ユーザーエクスペリエンスを統一し、ユーザーフレンドリーでブランドイメージ確立にも役立ちます。
- デザインにアニメーションを加えたり場合、マテリアルデザインはすでに考慮されているので、手動で導入することができます。
デメリット
- 好き嫌いによりますが、マテリアルデザインはGoogleと密接につながっています。オリジナル性の強いサイトやアプリの作成は、ガイドラインに沿って制作することでより難しくなるでしょう。
- すべてのシステムがフレームレートに役立ちわけではありません。そしてどのように改善したら良いかも分かりにくいでしょう。
- アニメーションエフェクトは、モバイル端末のバッテリーを消費しやすい。
- ガイドラインを意識するあまりクリエイティブなデザインが抑制され、アニメーションの導入など開発速度も遅くなりがちです。
終わりに、、。
マテリアルデザインは、フラットデザインからの新しいはじまりというわけではなく、どちらのスタイルもシンプルでミニマルさが特長です。基本的にマテリアルデザインは、フラットデザインの一部であると考えることができるでしょう。また、マテリアルデザインのアニメーションが広く賞賛されるようになっている今、デザインに煮詰まってしまったときにも、よりユーザーフレンドリーに仕上げてくれるでしょう。実際にフラットデザインを残したまま、マテリアルデザインでより新鮮なエフェクトを合体させてもよいでしょう。
個人的な意見として、フラットデザインはより実践的な考え方です。たくさんのアニメーションや複雑なグラフィックを採用したウェブサイトより早くページ読み込みを行います。もしシンプルなウェブサイトを作成していて、すべての端末デバイスを対象にしたユーザーフレンドリーなサイトを作成したいときは、フラットデザインが適しているでしょう。もしアニメーションやモーショングラフィックなどに興味がなく、本質的なシンプルさとユーザビリティーを考慮する場合にも、フラットデザインを推奨します。しかしユニークなアニメーションなどをサイトに採用したい場合は、マテリアルデザインが適していると言えるでしょう。
参照元リンク : Flat Design vs. Material Design: How Are They Different? – Designmodo
