大阪・兵庫・京都・奈良のホームページ制作、ECサイト制作、ランディングページ制作、WEB集客なら安心の「リエイト」へ

0120-800-804
定休日 土日祝
受付時間 10時〜18時

homepage

ホームページ制作

ホームページ制作2018.04.12

マテリアルデザインとは?

img

デザインの手法は日々さまざまなものが登場しています。
 
なかには、トレンド的かつビジュアル的なものも含まれていますが、UIについてもしっかりと練られたものも多く、より適切なユーザーエクスペリエンスを実現するために是非採り入れたいところです。
 
さて、今回ご紹介するのはマテリアルデザインというデザイン手法。
 
このデザイン手法もUIに関してしっかりと練られているデザインのワークフレームで、参考にするべき点は多々あります。
 
インターネットの世界において神とでも呼ぶべきGoogleが提唱しているという点も、マテリアルデザインの習得を推奨したい理由のひとつです。
 
Googleがインターネットの世界において提唱する概念はスタンダードなものになりやすく、習得しておくとさまざまな面で応用できる場合が多いからです。
 
それでは、マテリアルデザインとは何かというところから、マテリアルデザインを作成する際の実例まで、ご説明させていただければと思います。
  

マテリアルデザインとは?

 
マテリアルデザインとは、ホームページで使用される要素を実際の空間に存在する物質と似通わせることで、お客さまにとって直感的な操作を実現することをコンセプトに作られたデザインフレームワークです。
 
レイアウトやデザインルールは紙媒体で制作されるものと似通っており、ホームページ上にそうしたルールで作られた紙を配置するようなイメージで制作を進めていきます。
 
前述した通り、Googleが提唱しているデザインフレームワークで、Googleにてしっかりとしたガイドラインが提供されていますので一度目を通してみてください。
 
Googleマテリアルデザインガイドライン
https://material.io/guidelines/

  

マテリアルデザインの実例・特徴

 
マテリアルデザインについては、本家本元のGoogleのサイトをいくつか見てみるのがもっともわかりやすいでしょう。
以下にマテリアルデザインの特徴を示しますので、Googleのデザインと見比べながら確認してみてください。
 

奥行きを意識した立体的なオブジェクトを配置する

 
マテリアルデザインがフラットデザインと大きく違うポイントは奥行きがあるということです。フラットデザインは影などの立体感を排除することですっきりとしたデザインを実現していますが、これに対してマテリアルデザインは影をはじめとした立体感をつけることで直感的なデザインを実現している、という違いがあります。
 

「高度」によって影の量を決める

 
マテリアルデザインは奥行きを意識する必要があるデザインフレームワークであるということをお話ししました。そのため、必然的に要素の重なりを意識する必要があります。基本的には、紙を重ねた時に「高度」が高い、つまり前面に来ている要素ほど影の濃さを強くすることで立体感を表現します。
 

シンプルで微細なアニメーション

 
お客さまの操作に対してインタラクティブに反応を返してあげるのもマテリアルデザインの重要なポイントです。とはいえ、あまり派手なエフェクトをかけるのではなく、クリックやホバーされた際に影の量を増やして「高度」を高める表現をしてみたり、リップルと呼ばれるインクの波紋が広がるような表現が採用されたりすることが多いです。
  

メリットを理解して適切な活用を

 
マテリアルデザインはGoogleにより緻密でロジカルなルール決めがされたデザインフレームワークです。
 
Googleは検索エンジンにおいても、お客さまを第一に、お客さまを最適なホームページへ誘導するアルゴリズムを構築しつつありますが、デザイン領域においてもお客さまを適切に誘導する方向性の強化に取り組んでいることがわかります。
 
是非とも学習し、自社のホームページに取り入れることでパフォーマンスの良いホームページの制作に取り組みましょう。

関連記事

RELATED ARICLE

img