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

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

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

最後に

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

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

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

関連記事

これからの始めるWebデザイナーにオススメ。脱Adobeという選択... この記事はSketch Advent Calendar 2016の15日目の記事になります。 皆さんAdobe製品は使ってますか? 私は使っていません(CCの契約はしているけど)。 理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。 私はSketchに出...
現役WebデザイナーがデザインツールをSketch一択にした理由... 転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。 ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。 以前使っていたデザインツール もともとはFireworksをメインに使っていました。 ただ開発...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
現役Webデザイナーがランディングページのセミナーで学んだこと... 2016/11/05に行われた 「フォルトゥナ ランディングページセミナー」に参加してきました。 デザイン関連の勉強会というのも珍しいですし、しかもランディングページといったあまり表に出てくる事のない勉強会なのもあって新鮮な話・心揺れる話が盛りだくさんで非常に満足の行くセミナーでした。 ...
【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方... 4/10はなんの日かご存知ですか? そう、フォントの日です。 本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。 とりあえず見たい方はデモを用意しているのでそちらをご覧ください。 Noto Serif CJKのデモ ...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...