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. 上手く使って確認やオペレーションの手間を軽減。Google Ch…

    ソースの修正や検索キーワードのピックアップ・確認など、何かと細かい作業がつきもののWebディレクター…

  2. Webサイトのコンテンツをどう見せるか。共有・拡散されやすい3つ…

    Webサイトのコンテンツは内容に加えて「どう見せるか」、「どう届けるか」という視点も非常に大切です。…

  3. CTRが約300%UPしたオウンドメディアも。SNSシェアボタン…

    多くのWebサイトに設置されているFacebookやTwitterといったSNSのシェアボタン。ペー…

  4. 観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR…

    Youtubeなどの動画配信プラットフォームに加え、無料の動画素材や編集アプリなども身近になったいま…

  5. クライアントを納得させるWebデザイン制作&プレゼンのコツ_前編…

    「デザイン、レイアウトは自信があるけど、クライアントにきちんと伝わるか不安‥」、「時間の限られたプレ…

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

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

  7. Webディレクターが最低限知っておきたい著作権の3つのポイント

    昨年2015年に東京オリンピックのエンブレム問題が大きな騒動になったように、他人の作品を無断で流用し…

  8. ハイクオリティな動画素材を無料でダウンロードできるWebサイト3…

    従来のリスティング広告やバナーに対して圧倒的に多くの情報量を伝えられ、商品開発の陰に隠れたストーリー…

PICKUP

PAGE TOP