東京都新宿区のWeb制作会社 - ウェブラボ株式会社

スタッフブログ

ユーザーがカスタマイズするデザイン「Material You」

2021.10.14 Posted by

4982435_s価値観や生活環境、趣味嗜好など私たちをとりまく様々なものが複雑化し、「多様化の時代」と言われる昨今、そのニーズに応えるデザインに注目が集まっています。

Webデザインの分野においても例外ではなく、「より自分らしく、使いやすく、愛着が持てるデザイン」という時代のニーズに応えたのが、Googleが2021年秋にリリースする「Material You」です。

Material Youとは、Googleが2014年に発表した「Material Design(以下マテリアルデザイン)」の進化版ともいえるデザイン概念です。

今回は、Material Youのリリースを記念して、マテリアルデザインからのデザイン進化の変遷を振り返ってみます。

マテリアルデザインとは

マテリアルデザインとは、Googleが2014年に提唱したデザインルール・ガイドラインのことです。ユーザーが直感的にわかりやすく操作・閲覧できることに重きを置いて設定されており、使う色の数やボタンのスタイルなど、デザインには具体的な決まりがあります。

なぜこのような規定が設けられたかというと、スマホやタブレット、パソコンなどあらゆるデバイスの使用が広がっていく中で、どのようなデバイスでも快適にWebサイトを閲覧・操作する必要が高まってきたからです。

 

マテリアルデザインには主に、下記のような取り決めがあります。

 

・重なりや奥行きといった現実世界の物理法則に則る(影がついて浮き上がっているように見えるボタンなど)
・有彩色は4色以内に止める
・アニメーションを取り入れてアクションをわかりやすくする

 

マテリアルデザインと似たデザイン手法に「フラットデザイン」と呼ばれるものがありますが、2つの違いについては過去の記事を参考にしてください。

マテリアルデザインのメリット・デメリット

マテリアルデザインをWebサイトに採用するメリットとデメリットは、次のとおりです。

メリット

マテリアルデザインの最大の特徴は、そのわかりやすさといえます。ユーザーは、物体の影の付き方や要素の動きから、機能や操作を直感的に理解することができます。マテリアルデザインは非常にシンプルな構造で形成されており、汎用的でマルチデバイスに対応しやすい形状となっています。

Googleの公式ガイドラインに沿ってデザインを制作できるので、デザイン経験が浅くても規定通りに作成することでデザインに統一感を保つことができる点もメリットと言えます。

デメリット

マテリアルデザインでは、ボタンや要素の表示などにアニメーションを組み込むため、Webページの読み込みにどうしても時間がかかってしまうことがあります。また、マテリアルデザインには厳格な作成ルールが存在するため、ビジュアル表現の制限が多くなります。同じルールに基づいてデザインを設計するため、没個性的になりやすい点も課題といえます。

企業やブランドごとにカスタマイズする「Material Theming」

マテリアルデザインのデメリットで挙げられた「没個性的」を解消するために2018年に発表されたのが「Material Theming」です。Material Themingでは、企業やブランドの個性に合わせてデザインシステムをカスタマイズできます。

たとえば、従来のマテリアルデザインでは、ボタンのサイズや形をガイドラインに沿って定義を行っていました。一方Material Themingでは、全体のデザインテーマを決定し、そのテーマに沿ってその他の要素のスタイルを変更できます。

オリジナリティのあるテーマの決定が可能となったため、自由度が高くなり、全体としての統一感をもたせながらも、その企業・ブランド「らしさ」が表現できるデザインが可能になりました。

ユーザーが自らカスタマイズする「Material You」

「Material Theming」からさらに焦点をユーザーに絞ったデザインシステムが「Material You」です。Material Youでは、ユーザー自らがボタンの色やテキストのサイズ、境界線の有無といったUIパーツのデザインをカスタマイズできます。そのため、ユーザーが使いやすいと感じるデザインを自由自在に実現できます。

Material Youには、マテリアルパレットと呼ばれる機能があります。マテリアルパレットを利用すれば、壁紙の色調に合わせてホーム画面のウィジェットの配色を変えられるため、より自分好みで愛着が持てるデザインにすることができます。

他にも、単にユーザーの嗜好性に合わせるだけではなく、色覚障害者が識別しやすい配色にカスタマイズできるようになるなどアクセシビリティの観点からもユーザーに寄り添ったシステムといえます。

まとめ

Material Youは、現時点ではAndroidを対象としたデザインシステムですが、Googleが提起した「ユーザー自らがデザインをカスタマイズする」という発想はWebサイトのUI/UX設計やビジュアルデザインにおいても今後、影響を及ぼしていきそうです。

見た目に美しいWebサイトを構築することも大切ですが、今後はユーザーにとってどのようなサイトなら使いやすいのかを考えることが、多様化するWebデザインの世界において大きな時代の流れになってくるでしょう。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278