色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)

Google のマテリアルデザイン良いですよね。
特にカラーパレットがいいなと思っています。

サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が必要になってしまうのはみなさん見に覚えがあるのでは無いでしょうか。
Googleが提供しているマテリアルデザイン では予めカラーパレットが作られており、それを使えば色の組み合わせをより短時間で構成することができます

色選びが苦手な人や面倒な人にはオススメです。

マテリアルデザイン カラーパレット

用意するもの

githubでマテリアルデザインの色を扱えるCSSがすでに公開されているのでそれを利用します。

2015-09-24_16h13_20
google-material-colgoogle-material-coloror
ちなみにこちら、LESSやSassでも利用できるようになっているので汎用性は高いです。
こちらをダウンロードすると「dist」の中にpalette.cssが入っているのでこれを読み込む用にすれば準備完了です。

デザインデータに使用したい人はこちらからphotoshop,illustratorパレットデータがダウンロードできます。
2015-09-24_16h28_35
パレットデータ

使い方

マテリアルデザインの色にはある法則性があります。

マテリアルデザインのカラーパレットは19の系統に分類されており、その中でプライマリーカラーとアクセントカラーとなる色が用意されています。

プライマリーカラーでは、明るい方から順に、50、100、200、300、400、500、600、700、800、900のバリエーションで分けられており、
ツールバーや大きなカラーブロックには500を、ステータスバーには700を使用するよう推奨しています。
アクセントカラーはアクションボタン、スイッチ、スライダーといった小さな部分に使用するよう推奨されています。

マテリアルデザインのカラードキュメント

プライマリーカラーのみの色(3系等)

  • ブラウン
  • グレー
  • ブルーグレー

プライマリーカラー・アクセントカラーの色(16系統)

  • レッド
  • ピンク
  • パープル
  • ディープパープル
  • インディゴ
  • ブルー
  • ライトブルー
  • シアン
  • ティール
  • グリーン
  • ライトグリーン
  • ライム
  • イエロー
  • アンバー
  • オレンジ
  • ディープオレンジ

先ほどダウンロードしたCSSも上記のルールを守ってclassの名称が統一されています。
プロパティとして用意されているのは、背景色(background-color)と文字色(color)です。
※hover等にも適用させたい場合はLESSのようなプリプロセッサを使うと簡単に拡張できます。

後は用意されたセレクタを使って指定するだけです。

例)Red500の文字色を使いたい場合
<p class="palette-Red-500 text">Red500の文字色です。</p>

Red500の文字色です。

ねっ、簡単でしょ。

使えそうなシーン

インブラウザ・デザインなどコードベースで画面構成をする際は利用価値が高いかなと思っています。
色を最初に決めてしまうと、後で修正が大変のように思われがちですが、CSSなので別に上書きすれば問題無いです。

また変更を前提に、基本のclassを作っておいて、後で差し替えるのも良い手だと思います。
※カラーコードはドキュメントから引っ張ってくると楽です。
※LESSのようなプリプロセッサを使うともっと便利です。

.dark-primary-color    { background: #0288D1; }
.default-primary-color { background: #03A9F4; }
.light-primary-color   { background: #B3E5FC; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #8BC34A; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }
        

あとは企画書の色付け・色選びとかにも良いですね。

色の組み合わせは下記のようなカラーパレットを作ってくれるサービスを利用すると悩みが減って良いです。
materialpalette

最後に

色選び苦手な人多いと思いますがフレームワーク同様あるものを利用すると、考える時間を減らして失敗の少ない進行が可能になります。

また他人に共有するのにもドキュメント見せながら(すでにあるところから色を選びながら)で話ができるので、色の認識のブレが減られます。
ピンクと言いつつ(…これ紫やん)とかもありますし。

開発フローとしてまとめれれば、さらに時間を短縮して開発が行えるようになるかと思います。
余った時間を別の制作の時間に当てて、よりよいものが出来上がる手助けにつながれば幸いです(*ゝω・*)

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール