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. 外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

    的確な制作手順をふまえたうえで、自社の商材やブランドイメージに合わせてレイアウトやフォントを工夫する…

  2. 誰でも簡単にインフォグラフィックを作成できる無料ツール

    数値とイラスト、図形、グラフなどを組み合わせビジュアル化することによって、複雑な情報も直感的に伝える…

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

    1つの主題から関連するキーワードやイメージを放射状に書き出していくことによって、複雑な概念や情報を分…

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

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

  5. 日常的に使うPhotoshopだからこそ知っておきたい、初期設定…

    画像のレタッチやリサイズなど、Webディレクター業務でも何かと使う機会の多いPhotoshop。Ph…

  6. クリック率19倍UPの事例も。Facebookも活用しているパー…

    閲覧履歴や購入履歴をベースとして、1人1人のユーザーにあわせたコンテンツを配信するパーソナライズは動…

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

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

  8. ユーザーを適切に導くCTAボタンの3つのパーツと、デザインのポイ…

    予約や購入の起点となるCTA(コール・トゥ・アクション)ボタンは、コンテンツや入力フォームと並んでW…

PICKUP

PAGE TOP