話題のマテリアルデザインって何！？

お世話になっております。ダブルループの福田です。

目を惹くwebサイトの条件の1つにデザインがあります。
デザインは時代によって流行が変わっていきます。

そんな中、今のトレンドは「マテリアルデザイン」です。

ということで今回はマテリアルデザインについて紹介します。

マテリアルデザインは2014年にGoogleが発表した新たなデザインの概念のこと
です。

マテリアル＝物質的ということからデザインする対象のwebパーツを物質として考えて、我々の現実世界の物理的構造ルールに基づいてそのwebパーツをデザインすれば、より直感的にユーザーが操作できる

という概念です。

この説明では「？」の方が多いことかと思います。かくいう私も自分で書いてお
いて「？」です^^;

わかりやすく、身近で具体的な例を挙げるなら

・GoogleディスカバーなどGoogleの各種アプリ内の表示方法
・Android端末のUI

これらをご覧いただくことが最も早いかと思います。

ではなぜマテリアルデザインが人気なのか、を解説する前にマテリアルデザイン
に至るまでのデザインの歴史について解説してみます。

現在までのデザインの大まかな流れは

スキューモーフィズム
↓
フラットデザイン
↓
マテリアルデザイン

となります。

まずスキューモーフィズムについて。
これは2000～2010年頃に流行ったデザインです。

マテリアルデザイン同様、デザインなので説明しづらいのですが、スキューモー
フィズムは我々の現実世界に存在するリアルさを表現したデザインのことです。

少し昔にリアルなON/OFFのスイッチなどがwebやアプリで流行りました。
これはまさにスキューモーフィズムデザインと言えるでしょう。

具体的な例を挙げるならばiOS6（2012年迄）までのiPhoneのUIがスキューモー
フィズムを採用しています。

続いてフラットデザイン。
iPhoneの例を挙げるならばiOS7がこれにあたり、さらにはAppleの公式サイトはフラットデザインで作られています。

また最近のWindowsのメニュー画面もフラットデザインです。

フラットという名の通り2次元的なデザインです。一言でいうならばシンプルに
最小限でこちらの意図を伝えるデザイン、それがフラットデザインです。

そして今日においてはフラットデザインからマテリアルデザインへと進みました。

パッと見る限りフラットデザインとマテリアルデザインでは大差がありません。
では何が異なるのか、というよりもマテリアルデザインの特徴を述べて参ります。

・影

2次元なデザインのフラットデザインに比べて3次元表現になるマテリアルデザインには影があることが特徴と言えます。
たとえば写真をいくつか並べたwebサイトにて、その中の1つをクリックすると
背景が暗くなり、選んだ写真がくっきりと見やすくなる、というのはまさにマテリアルデザインです。この細かな動きにより、ユーザーは数ある写真からその1つを選択したということが理解できるはずです。

・モーション（アニメーション）

ボタンなどタップした際に動きを多く持たせているのがマテリアルデザインの特徴の1つです。これにはユーザーが操作を感覚的に行えるようサポートする意味合いが含まれています。

・画面構成（レイアウト）

上に挙げた影と内容が被りますが、影を使って奥行きを持たせwebサイトを構成
するパーツの動作状態を表現することはマテリアルデザインと言えます。
これによりユーザーの視覚的理解を促します。

さて、今回はデザインに関して解説しましたが、いかがでしたでしょうか。
デザインもコンテンツも結局はユーザー（検索者）のためです。
検索して自社のサイトにたどり着いてくれた方にとって、見やすいサイトの方が
当然良いはずです。

今回ご紹介したマテリアルデザインはそんな見やすいサイトにするためのヒント
です。皆さんのサイトを見直す際にどうぞお役立てください。

弊社サービス紹介

■いつでも自分でページを作成できる「WordPress付き！ホームページ制作」

■SNS活用で集客倍増！？「facebookページ制作」

■ターゲットを絞って効率的に集客「facebook広告運用代行」

■被リンクに頼らず検索上位へ！「ホワイトハットSEOサービス」

執筆者紹介

福田英明

株式会社ダブルループ　代表取締役

明治大学卒業後、大塚商会に入社、営業経験を経た後に楽天株式会社に転職。
楽天ではビジネスマッチングサイト「楽天ビジネス」にて営業・コンサル・マーケティング・事業企画の業務に従事。
2010年に、株式会社ダブルループを設立後、多くの企業のホームページ制作及びWEBコンサルティングを行う。
また、大小問わず様々な企業にて、WEB戦略に関する講演を多数行っている。
累計講演回数150回以上。

【著書】
「まるっと1冊でわかる! 起業を決めたら最初に読む本」翔泳社
第三章　「ホームページ作成で必要なこと」執筆