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. Webサイトのプランニングに活用できる「マインドマップ」(後編)…

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

  2. YouTubeやFacebookは既に導入済み。Yahoo! J…

    Webサイトの制作・運営においてセキュリティは非常に大切です。日ごろのWebディレクター業務では企画…

  3. Webディレクターなら正しく理解しておきたい、HTML5の4つの…

    2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHT…

  4. マルチタスクを効率的に管理。スムーズなプロジェクト進行に活かせる…

    「納期までに間に合わず、実装予定の機能を絞らざるを得なかった‥」、「プロジェクトの進行が滞ったことで…

  5. 時間による変化やこだわりの制作過程を数十秒で見せる、タイムラプス…

    インフォグラフィックと並んで、よりスピーディーに分かりやすく情報を伝えるWebマーケティングの手法と…

  6. 外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

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

  7. フォントひとつでバナーの印象は変わるー。訴求ポイント別のバナーの…

    スマートフォンが普及して時間・場所を問わずWebサイトに接触できるようになったいま、多くのユーザーが…

  8. アイコンとあわせてフラットデザインに活用したい無料フォント&ベク…

    Webサイトにフラットデザインを取り入れる際は、アイコンのデザインやレイアウト、文字情報の配置に気を…

PICKUP

PAGE TOP