Webデザインをするうえで、重要な役割を持つ要素の1つとして挙げられる「配色」。
配色の参考資料やツールは様々あるけれど、
インパクトを与えるための目立つ色は何？影響を与えやすくする配色には、明るい色や濃い色を取り入れるべき？効果的な色は？役立つツールは何があるの？
イメージはなんとなくあるけど、どの要素にどんな色を使えばいいのか分からない…
と、悩んでしまうことはありませんか？
今回は、マテリアルデザインを取り入れる際のみなさんが抱えている悩みや、疑問を解決するおすすめの便利なツールや、具体例を用いて紹介していきます。
目次
そもそもマテリアルデザインってなに？
マテリアルデザインは、Googleによって2014年に提唱されたデザインのガイドラインです。現実世界の物理法則に沿って、画面上の世界を構築するデザインの特徴を持っています。
一時、爆発的な流行をみせたフラットデザインよりも、さらに発展させた旬なデザイン。リアルを追及した質感であることから、日常的に見慣れているモノのように脳は判断しやすく、ユーザーにとっては非常にわかりやすいと高い評判を得ています。
そのニーズに応えるかのように、多くのWebサイトで用いられているデザインとなっています。
マテリアルデザインのメリット＆デメリット
マテリアルデザインのメリットとデメリットをそれぞれ紹介していきましょう。
メリット
マテリアルデザインのメリットとしては、現実世界の物理的な法則に沿ってデザインされているため、ユーザはリアルな質感を感じながら直感的に判断することができます。操作する際に生まれるアニメーションなどのアクションは、マテリアルデザインが掲げる分かりやすさとして評価されるといえます。
デメリット
マテリアルデザインのデメリットは、主にデザイナー側で示されることが多いでしょう。デザイナーにとっては、覚える要素が多いため習得するのに時間を要することになります。表現の縛りが出てくるので、状況によっては差別化を図る際の厳しさがあることは否めません。フラットデザインと比較すると、ちょっとした仕掛けを用いた要素やWebサイトの高速化などにおいて、複雑に感じられることも少なからずあるでしょう。
マテリアルデザインカラーの構成
デザインカラーは、基本的にプライマリーカラー、プライマリーバリアント、セカンダリーカラーの3色構成となっています。
プライマリーカラー（メインカラー）
メインカラーであるプライマリーカラーは、Webサイト上で占める割合が最も多いカラーを指します。主に、赤・黄・青などの濃い色の原色で構成されており、ヘッダー部分のアプリバーで用いられていることが多いです。
ちなみに、Googleは、明度の100番から900番の範囲内で中間色である500番前後のカラーをメインカラーとして設定することを推奨しており、いいとされています。
プライマリーバリアント（サブカラー）
プライマリーカラーの補助色として使われています。基本的にはメインカラーの同系色から、濃い色と薄い色といったような2色を選びます。メインカラーを際立たせる効果があります。
セカンダリーカラー（アクセントカラー）
アクセントカラーとも表されますが、いわゆる差し色としての役割を担っているカラーです。メインカラーに対して、対面にあたる色（反対色）が用いられている場合が多いです。メインカラーの補色であることから、多用しがちになってしまう点に注意しましょう。
無彩色
上記の有彩色以外では、黒、白、グレーの無彩色を使用することも自由とされています。主に、テキスト部分で用いられていることが多いです。
また、薄い背景色に対して黒色の文字をのせる場合は、不透明度：87％の数値が推奨されています。
配色が苦手な人におすすめなカラーツール
便利なマテリアルデザインカラーのツールを紹介していきます。
Material Color Tool
https://material.io/tools/color/
選んだ色をデザインに反映させたときにどのように配色されるのか、Webサイトやスマホアプリの配色例として提示してくれます。また、テキストとのコントラストを検証してアクセシビリティ（可読性）をチェックしてくれます。スマホでの使用も可能となりました。
マテリアル パレット ジェネレーター
https://m2.material.io/inline-tools/color/
選択した任意の色のパレットを生成できます。彩度や明度、色相をアルゴリズムによって調整し、使いやすいパレットが作成できます。
マテリアルデザインのカラーパレット
マテリアルデザインのカラーパレットは、調和するように設計された色で構成されてる機能で、256色の中から独自の調和のとれたパレットを生成することができます。
Material UI Colors
https://mui.com/material-ui/customization/color/
ブラウザに配色が掲示され、個別にHSB、RBG、CMYK用の調整が可能です。
任意で選んだカラーで配色されたサンプルとして生成されるので、反映されたあらゆる色味を確認できます。
Material Design Palette
https://www.materialpalette.com/
マテリアルデザインパレットは、ユーザーが色を選択→カラーエフェクトをリアルタイムでプレビューすることができるという特徴を持っています。
単なるパレットではなく、アイコンツールとカラーツールとして活用されています。
マテリアルデザインを取り入れている具体例
世の中にはたくさんのサービスが溢れかえっています。
ユーザが日常的に利用している様々なサービスには、マテリアルデザインが多く用いられています。
例えば、YouTubeやGoogleマップ、通販サイトなど、普段何気なく接しているサービスには、巧妙なマテリアルデザインが使用されているのです。
YouTube
ヘッダーやサイドメニュー、動画コンテンツなど、ボタンとして選択しやすく整理されていますが、これらはまさにマテリアルデザインの技です。
1つのページ内にそれぞれの役割を担っているコンテンツが集まっているので、機能的に作用できていると考えます。
Googleマップ
旅行先でも街中に出かけるにしても欠かせない地図アプリ。Googleマップは、検索をかけた際の画面ズーム機能やボタンをタップして広がる情報、公共施設のジャンルごとで色別されたアイコンのデザイン、指でスワイプする動作での地図の移動など随所でマテリアルデザインが取り入れられています。各機能は、ユーザーにとって必要な役割を果たしており、便利なサービスとして高い評価を得ています。
通販サイト
代表的な通販サイトとして挙げるとすれば、Amazonや楽天市場が思い浮かぶのではないでしょうか。Amazonに関しては、大きいサイズの画像を画面上に表示させ、何の商品やサービスなのか一目で分かるような仕組みになっています。楽天市場に関しては、ジャンルごとの一覧やキャンペーン情報が色別されて表示されていたり、ランキングの順位やセール価格などの文字色も目立つ仕様となっています。
最後に
いかがでしたか？
様々なブランドのアイデンティティを確立するためにも、最も重要な要素の1つであるカラーの組み合わせは常に高いクオリティを求められることでしょう。
今回の記事で紹介させていただいた、マテリアルデザインの便利なカラーツールを使うことで苦手意識を解消し、Webサイトやアプリ開発の際に役に立つことができるのではないでしょうか。
