menu

認知科学によって利便性を追求。Googleが推奨する「マテリアルデザイン」とは?

制作

無料でダウンロードできるアイコンやフォント、ベクター素材などを上手く利用しながらデザインやレイアウトを工夫することによって、フラットデザインはその効果を発揮します。

ただ、シンプルで平面的なフラットデザインは一歩間違えればリンクやコンテンツの見つけにくさにもつながり、ユーザービリティを低下させてしまうのも事実。そうしたフラットデザインの弱点を補い、さらにユーザーの利便性を上げるために定義・開発されたのが、2014年にGoogleが発表した「マテリアルデザイン」です。

マテリアルデザインとは、物理法則を利用してユーザーの直観的な操作を可能にするデザインで、現在ではGoogleの提供するあらゆるWebコンテンツに採用されています。

GoogleのAndroidデザインの責任者でもあるマティアス・デュアルテ氏によれば、マテリアルデザインは「見栄えを良くするために現実世界をコピーしたものではなく、脳に対して現実世界と同じ刺激を与えて脳の負担を軽くする」ものだといいます。

例えば、書類を表現する場合、紙が重なった部分にできる影などの装飾的な要素を省略し、極めてシンプルに表現するフラットデザインに対し、マテリアルデザインでは重なった部分の影を活かし、さらに下の方の書類の光度を下げることによって立体感を出します。

この場合、注意する必要があるのは、従来のリッチデザインのように対象を目立たせ強調するために影や光を使うのではなく、あくまで現実世界と同じように直感的に距離感・明るさを伝える目的で、立体感を出すということ。飾りではなく、実用性と分かりやすさに特化しているのがマテリアルデザインの特徴とも言えます。

ただ、Googleが推奨するマテリアルデザインには色やコンポーネントなど極めて詳細なルールが定められているため、全てを理解するのは簡単ではありません。実際に自社のWebサイトにマテリアルデザインを取り入れる際はイチからデザイナーに依頼するのではなく、Googleから提供されている「Polymer」や「Material Design Lite」などのフレームワークを使うのが有効です。

こうしたフレームワークにはWebサイト制作に必要になるパーツやテンプレート、クリックエフェクトなどもコンポーネントされているので、それらを利用することで利便性を追求したマテリアルデザインによるWebサイトをカタチにすることができます。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

ユーザーを引きつけクリックを誘導するショップ名&ページタイトルの工夫

プラスアルファのバリュー&情報が行動を促すランディングページの要素

関連記事

  1. ランディングページ制作に携わるなら知っておきたい、行動心理学の4…

    訪問したユーザーを納得させ、具体的なアクションに導くことが求められるランディングページ制作。Webデ…

  2. よりスピーディに分かりやすく。大手企業2社のインフォグラフィック…

    グラフ、文字、イラストを組み合わせることで、データを視覚化するインフォグラフィック。ビジュアルと数字…

  3. ユーザーに声をヒントにWebサイトを改善。手軽に利用できるアンケ…

    Webサイトの効果を示すデータは大きく2つに分けられます。1つはアクセス数やクリック率(CTR)、コ…

  4. キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクシ…

    Webサイトのキービジュアルや広告のクリエイティブを制作する際は、歴史的な名画やアート作品に目を向け…

  5. 購買率が1.68倍UP。ECサイトに取り入れたい「短め」デモンス…

    企業のメッセージやブランドの価値観を伝えるブランディング動画とあわせて、動画マーケティングに取り組む…

  6. 無料素材とあわせて動画コンテンツ作成に活用したい、無料編集ツール…

    コストを抑えて動画コンテンツの制作・公開するために、動画素材の無料ダウンロードサイトとあわせて使いた…

  7. Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  8. マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

PICKUP

PAGE TOP