話題のマテリアルデザインって何!?

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

目を惹く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付き!ホームページ制作」
 https://www.doubleloop.co.jp/business/solution/hp/wp/

■SNS活用で集客倍増!?「facebookページ制作」
 https://www.doubleloop.co.jp/business/solution/facebook/

■ターゲットを絞って効率的に集客「facebook広告運用代行」
 https://www.doubleloop.co.jp/business/solution/facebook/adsupport/

■被リンクに頼らず検索上位へ!「ホワイトハットSEOサービス」
https://www.doubleloop.co.jp/business/solution/seo/

お気軽にご相談ください。

お問い合わせはこちら

お問い合わせはこちら

電話での受付 03-4590-0785

メールでのお問い合わせ

お問い合わせはこちら

お問い合わせはこちら

パートナー

ご相談や質問・ご不明な点はお気軽にコチラから