「フラットデザイン」の流行で失われた“触覚”をよみがえらせる「マテリアルデザイン」

フラットデザインとは

近年のWEBデザインの主流となったフラットデザイン。そもそもフラットデザインとは、どういったデザインなのでしょうか？フラットデザインの「フラット」とは「平らな、平べったい、平坦な」ことを意味します。つまり、物質の陰影や立体感を取り除いたデザインの手法です。実はフラットデザインには明確な定義は存在しないのですが、代表的な特徴として以下のポイントが挙げられます。

最小限のエフェクト

グラデーション、テキスチャー、シャドウなど、物質の質感を細かく表現するエフェクト

最適化されたタイポグラフィ

シンプルな書体を使用し、コンテンツの読みやすさを追求したタイポグラフィを使用しています。

シンプルでスタイリッシュなアイコン

一目で意図が伝わるシンプルなアイコンを使用しており、よりモダンな印象を与えます。

 

 

 

フラットデザインの例

なぜフラットデザインが流行ったのか

2007年にiPhoneが登場したことをきっかけに、ユーザーはスマートフォンやタブレットなど、パソコン以外の端末でWEBサイトを閲覧するようになりました。 言い換えると、ユーザーはどの端末からWEBサイトを見に来るか分からないため、様々な端末で最適化してページを見せる技術＝レスポンシブ対応が求められていたのです。

 

それ以前まで主流だった、陰影・重厚感を強調したリッチデザインだと、端末のスクリーンサイズによってはその質感をうまく表現できず、時代に対して不適切なデザイン手法となっていきました。

 

そこで注目されたのがフラットデザインです。シンプルですっきりとした表現方法は、あらゆる端末のスクリーンサイズに適切な形で表示することができ、読み取り速度も速いため、最も適したデザイン手法としてWEBデザイナー達が取り入れていきました。 当時、Microsoftがフラットデザインを全面的に取り入れたWindows8をリリースし、後を追うようにAppleがiOS7をリリース、続々と世界に認知されていったのです。

フラットデザインによって失われた“触覚”

しかし、このフラットデザインの場合、シンプルで三次元的な要素を取り除いたために、 重要な部分を強調しにくいというデメリットもあります。 例えば、どこがクリックできるのか、どこにテキストが入力できるのか等、ユーザーに対してアクションを喚起させる要素、すなわち「触覚」が弱かったのです。

 

 

一見スタイリッシュだが、平面的な印象が強いためアクションを喚起しにくい

見直されるシャドウ「マテリアルデザイン」

フラットデザインで消失した要素である「触覚」は、新たなデザイン手法を生み出しました。それが、2014年にGoogleが発表した「マテリアルデザイン」です。 マテリアルデザインは、影・奥行き・動きなど、現実世界の物理的な法則を取り入れたデザイン手法です。

 

フラットデザインでは、どこがクリックできるのか、クリックしたら次に何が起きるのか、といった視覚的な判断要素が弱かったですが、これを解消する要素の一つが「シャドウ」です。 シャドウ（影）はフラットデザインで取り除かれた要素の一つですが、これをデザインに取り入れることで、以下の効果が期待できます。

 

• ボタンやアイコンがクリックできるものだと認識させる
• タッチしたオブジェクトと遷移先のオブジェクトがどう連動するか認識しやすくする

 

ユーザーは、影の動きによって何がどうなるのかを直感的に判断ができるようになり、よりスムーズにWEBサイトを閲覧できるようになります。

マテリアルデザインの参考サイト

 

https://events.google.com/io2015/ 

参考：GoogleI/O

 

 

 

http://materialdesignblog.com/

参考：Material Design Blog

 

 

 

https://www.udacity.com/pathfinder

参考：Udacity

まとめ

一見、フラットデザインとの違いが見極めにくい部分もありますが、マテリアルデザインは私たちの普段生活している感覚により近い形で、「直感的」に使えるデザインであることが分かります。また、事例でもご紹介したように、Google関連のサイトはマテリアルデザインを採用しているサイトが殆どなため、デザインの際に大いに参考になると思います。