マテリアルデザインの配色に自信がない方必見sマテリアルデザインはシンプルで直観的なルールに基づいています。あなた、基本的な配色の法則さえ押さえれば誰でも
簡単にマテリアルデザインが完成します！！
この記事ではデザインが苦手でも安心して使える配色の基本と役立つツールを紹介します！
目次
マテリアルデザインとは？
Googleが20141年に発表したデザインの一種であり日本語に翻訳すると「素材のデザイン・物質的なデザインを指します。
Material（マテリアル）＝材料、素材、物質
Design（デザイン）:＝設計、デザイン、デザインすること
マテリアルデザインで作成された物は（Webサイト・Googleマップ・Gmail・Googleドキュメントandroidアプリ等）でユーザーに見やすく扱いやすいと言われています。
マテリアルデザインの目的は「見やすく、直観的に操作できるWebページやサービス」
ということです。
今回はそんなマテリアルデザインの配色や基本的要素５個の特徴などについて紹介します！
マテリアルデザインの基本的要素（5個の特徴）
現実世界の物理的法則を取り入れる
→物の重なりなど画面をどう操作したらいいのか現実世界のように
取り入れ直観的に分かるようにしているか
紙とインクの要素で組み立てる
→印刷物と同じルールでデザインする余白や色の付け方で、印刷物に近づける
＝画面の情報を捉えやすくなる<\il>
色数を少なく配色する
→有彩色4色まで。メイン（1）サブ（2）アクセント（1）
白・黒・グレーは無彩色で自由に使える
メインとサブは同じ色合いアクセントだけ違う色合い
影を活用して立体感を作る
→現実世界と同じルールでどう重なり合っているのか表す目的
連動性のあるアニメーション
→自分の操作が画面にどんな影響を与えたのかアニメーションで
表現でユーザーの理解をサポートする
この５個の特徴を基本とし、マテリアルデザインはできています。
マテリアルデザインの配色の基本的な考え方について
少ない色で効果的に情報を伝えることを意識し、有彩色を4色まで、無彩色を白、黒、グレーを基本とする。メインカラー1色・サブカラーを2色・アクセントカラーを1色この3つを軸にGoogleが提供するカラーパレットから選択することが推奨されている。
配色の基本概念
Primary Colorとは
→アプリやWebサイトの主要の色であり、ブランドやサービスのアイデンティティを
示します。通常、ナビゲーションバーやアイコンなどに使用されます。
Secondary Coloとは
→Primary Colorを補完する色でボタンやアクセントに使用することが多いです。
このSecondary Coloにより、ビジュアルに動きやバランスを加えることができます。
例でGoogleが使用しているマテリアルデザインでは、
「Primary Color」に青色「Secondary Colo」に緑色が多く使用されています。
Accent Color
→視覚的に協調したい重要な要素やアクションを引き立たせるために使用します。
Accent Colorは少量にとどめ、重要な部分に使います
例：「送信」「今すぐ登録」やエラーメッセージや成功メッセージにも使用されます。
理想的な色の配色
- メイカラー（Primary Color） ：60-70％
- サブカラー（Secondary Colo） ：20-30％
- アクセントカラー（Accent Color）：5-10％
有彩色と無彩色について
わずかでも色味があることを有彩色（chromatic color）といい、色味のない白・灰・黒のことを無彩色（achromatic color）という。
マテリアルデザインにおける有彩色と無彩色の役割とは有彩色はアクションやインストラクションを強調し視覚的なインパクトを与えユーザーの注意を引き付ける。
無彩色はデザインにおけるバランスと調和を保ち視覚的な階層を作成します
また無彩色は背景やテキストに使用しコンテンツが目立つようにします。
色選定における調和
視覚的にバランスを保ちながら、全体的に美しいとされることを意味する
デザイン全体を一貫性のあるものとし、ユーザーに対して心地よい印象を与える。
色の選び方
類似色（Analogous Colors）
→隣接する色を選ぶ選び方。例として、青・青や緑・緑など視覚的に調和が
とりやすく落ち着いた印象を与える。
補色（Complementary Colors）
→反対側に位置する色を選ぶ選びかた。例として、青・オレンジや赤・緑など強い
コントラストで目を引きますが過度に使いすぎると、不快感を与えることが
あるため注意が必要です。
マテリアルデザインの具体的な配色例と便利なツールについて
具体的な配色例
私自身も今回この記事を通して「マテリアルデザイン」という言葉を知りました。
マテリアルデザインの配色について検索している中ですごく参考になるサイトを見つけたので紹介させてください。
https://saruwakakun.com/life/colors
↑私も実際にマテリアルデザインについて色々と調べた際に配色についてすごく参考になりました！
便利なツールについて
私は今回こちらの配色を手助けしてくれるツールを見つけました！
「Material Palette」https://www.materialpalette.com/light-blue/cyan
２色メインカラーとサブカラーを選ぶと配色してプレビューまでしてくれます。
私も今回すごく参考になりました！
ただ、少し前のマテリアルデザインの基準の配色が多いので
そこだけは注意です！！
でもすごく参考になるツールなのでぜひご活用ください！
まとめ
今回はマテリアルデザインとは？ということから具体的な参考になる配色サイト便利ツールについて書きましたがいかがでしょうか・・・？
マテリアルデザインは視覚的な一貫性と直観的な操作性を重視したGoogleが公式に発表しているデザインガイドラインです。
色の使い方、タイポグラフィ、アニメーション、インタラクション設計など多岐にわたる要素を組み合わせ、使いやすくアプリの視覚的な統一感を高め、ユーザーにとって心地よいデザイン体験を提供できるのがマテリアルデザインです。
最近ではマテリアルデザインが用いられてるゲームも多くあるそうで有名なものだと「ポケモンGO」などもマテリアルデザインが採用されているみたいです
ゲームやサイトそのほかにも日常の中には多くのマテリアルデザインが採用されているので意識して見てみるのも面白そうですね！
