マテリアルデザインでの「色」の使い方とガイドラインの要点

今回はマテリアルデザインでの「色の使い方」について解説します。

鮮明な色づかい

マテリアルデザインでは「鮮やかで明るめの配色」が使われる傾向があります。Googleも鮮明な色づかいを推奨しています。

ガイドラインにも色の使い方は詳しく書かれていますが、GoogleのWebサイトやサービスであっても完全には守られていなかったりします。個人的な意見ですが、以下で紹介する内容を全て守る必要はないかと思います。コンテンツが活きるような配色を心がけましょう。

1. 使用する色を選ぼう

マテリアルデザイン制作時には、はじめに使用する色を3〜4色を選んでおきましょう。

マテリアルデザインの色の使い方

メインカラー(1色)Webページやアプリの主役となる色です。最も広い面積に使われます。 サブカラー(1〜2色)補助的に使う色です。メインカラーと同じ色あいにします。 アクセントカラー(1色)重要な部分、目立たせたい部分にのみ使われる色です。あくまでもアクセントなので使いすぎはNGです。

カラーパレットを活用しよう

Googleさんにより「マテリアルデザインならこの色を使うと良いよ!」というカラーパレットなるものが用意されています。

参考
カラーパレット
Googleのガイドラインのページに飛びます。

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

このように色がずらっと並んでいます。このパレットを活用すると色選びがとても楽になります。

簡単にパレット色をチェックできるツールを使おう

とはいえ公式ガイドラインに載っているパレットはやや見づらいので、非公式の便利なサービスを使ってみましょう。

参考
Material Design Colors
クリックで飛びます。

material design ui colors

マテリアルデザインのパレットに含まれる色を一目で確認できます。使いたい色をクリックすれば、色コードがコピーされるという便利機能付きです。

色の選び方

パレットを使って色を選ぶときには、以下の3ステップを踏みましょう。

ステップ1:500番の色の中からメインカラーを選ぶ

500番の色をメインカラーに

メインカラーには「500番」の色を使うことが推奨されています。この500という数字は「色の明るさ」を表すものです。100だと明るい色、900だと暗い色となります。500はやや明るめですね。マテリアルデザインには明るめの大胆な色づかいがよく合うのです。

ステップ2:メインカラーと同じ色合いのサブカラーを選ぶ

同じ色合いのサブカラーを選ぶ

サブカラーは「メインカラーとは別の色を使って見やすくしたい」けれども「ものすごく重要な部分というわけではない」ときに使う色です。メインカラーと同じ色合いのものをサブカラーとして選びます。上の例だと、メインカラーを青にしたので、「暗い青」か「明るい青」を選ぶわけですね。なお、サブカラーは1つだけでなく、2つ使ってもOKです。

ステップ3:しっくりきそうなアクセントカラーを選ぶ

しっくりきそうなアクセントカラーを選ぶ

アクセントカラーは本当に目立たせたい部分にだけさらっと使う色です。メイン&サブカラーとは別の色合いのものを選びます。メインカラーとはハッキリと違いが分かり、さらに相性が良さそうな色を選びます。メインカラーとのコントラストが鮮明になるように「500番前後」の色を選ぶのが良いでしょう。ここが1番選ぶのが難しいところですね。

白、黒、グレーを合わせて使おう

これで配色が決まりました。なお、ここで選んだ色のほかに「白」「黒」「グレー」の無彩色を合わせて使うことができます。

配色がきまった

さきほど選んだ配色の使用例です。パレットを使うことでサクッと配色が決められるようになるわけですね。

配色を決めるときに便利なツール

とはいえ、サブカラーやアクセントカラーを決めるときに「何色にすれば良いのか」迷ってしまうこともあると思います。とくにアクセントカラーは派手な色の分、選び方を間違えるとデザインが台無しになってしまいます。そこで、サルワカではマテリアルデザイン用の配色見本集を作ってみました。

配色見本集

このように配色がずらっと並んでいます。気になる配色はクリックすることで使用例をチェックすることができます。

アクセントカラーの使い方に注意

誤ったアクセントカラーの使い方

NG例アクセントカラーを広い面積の塗りつぶしに使ってはいけません。広範囲に塗りつぶすときは基本的にメインカラーを使います。

誤ったアクセントカラーの使い方例その2

NG例また、このように文章をまるっとアクセントカラーにするような表現もNGです。

重要な部分でのみ使う

正しい使い方リンクなどユーザーに「明らかに他とは違う」のだと伝えたい部分でアクセントカラーを使いましょう。

スイッチにアクセントカラーを使う

正しい使い方「ONになっているスイッチ」や「スライダー」にアクセントカラーを使うことも推奨されています。

フローティング操作ボタン

正しい使い方また、最も重要な操作が割り当てられる「フローティング操作ボタン」にはアクセントカラーが使われることが多いですね。

マテリアルデザインでのボタンの使い方についてはこちらの記事で解説しています。

2. カラフルな背景に文字を見やすくのせる方法

マテリアルデザインに限った話しではありませんが、カラフルな背景に文字をのせるときには、読みやすさを損なわないように注意しなければなりません。Googleのガイドラインではそのようなケースでの色の指定方法にまで触れられています。

濃い背景色には白文字をのせる

白文字をのせる例

背景色が濃い色の場合には、白の文字をのせます。黒文字だと見にくくなってしまうので注意しましょう。

テキストの位置づけ(重要度)により不透明度を変える

なお、テキストの位置づけにより不透明度を変えると、より見る人が分かりやすくなります。

重要度により不透明度を変更

ガイドラインではこの図のように不透明度を指定することが推奨されています。

重要度の低いテキストは透明度を高くして、うっすらと見せるわけですね。なお、CSSでの指定では、以下のようになります。

  • メインのテキスト:#FFFFFF
  • サブのテキスト:rgba(255, 255, 255, 0.7)
  • 無効になったテキスト:rgba(255, 255, 255, 0.3)

淡い背景色には黒文字をのせる

逆に背景色が淡い(明るい)色のときには、黒の文字をのせます。

淡い背景色には黒文字をのせる

ガイドラインでは、背景色になじみやすいように真っ黒ではなく少しだけ薄めの黒にする(=不透明度87%)ことが推奨されています。

テキストの位置づけにより不透明度を調整

重要度によって透明度を調整

この場合にもテキストの重要度により不透明度を変えます。

CSSで指定するときには、以下のようになりますね。

  • メインのテキスト:rgba(0, 0, 0, 0.87)
  • サブのテキスト:rgba(0, 0, 0, 0.54)
  • 無効になったテキスト:rgba(0, 0, 0, 0.38)

グレイは使わずに半透明の黒を使う

マテリアルデザイン制作時だけでなく、グレイを半透明の黒で表現すると何かと融通がききます。

グレイは使わずには半透明の黒を使った例

例えば#727272のようなグレイだと背景に色がついたときに色の明るさが被ってしまい、チカチカして読みづらくなってしまいます。一方、半透明の黒でグレイを表現すれば、背景に色がついても読みやすさが保たれます。

「半透明の黒」+「背景色」により文字の濃さが増しているのですね。さらに背景色に少しなじんだような色になります。

3. アプリバーの配色

アプリバー(ツールバー)とはコレのことです。

アイコンの色は統一する

Googleのサービスを見ると、アプリバーにはだいたいメインカラーが使われています。

メインカラーじゃなくてもOK

黒のアプリバー

メインカラーを使わなければいけないというルールはありません。例えば黒を使っても良いですし…

グレーのアプリバー

透明にして背景に馴染ませてもOKです。

アイコンの色は統一

ただし、アイコンは全て同じ色にしましょう。

アプリバー

たとえばこのようなアプリバーならを全て同じ色にします。

アプリバーは「常に表示される部分」だったり「最初に目に入ってくる部分」だったりするので、カラフルにすると統一感のない印象を与えてしまうわけですね。

アイコンの色は統一する

なお、タイトルは別の色にしてもOKです。

最後に

何かとルールが多くて嫌になってしまいそうですが、どれも合理的な内容かと思います。パレットの色は好みのものがなければ使う必要はないと思いますが、色の選び方や使い方のルールはできる限り守るようにしたいですね。


同じカテゴリーの記事
同じカテゴリーの記事一覧
マテリアルデザイン入門
サルワカ