UIデザインガイドライン

マテリアルデザイン|No.12-2/2:The color system|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「The color system(カラーの適用ルール)」の概要について学ぶことができます。

Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html

また、この記事は前回の「The color system(カラーの適用ルール)」の記事の続きとなっており、前回の記事の理解がある前提で解説をしていますこと、ご了承ください。

前回の記事も学びたい方は、よろしければこちらをご確認ください。

マテリアルデザイン|No.12-1/2:The color system|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「The color system(カラーの適用ルール)」の概要について学ぶことができます。 なお、この記事は「約7〜10分」で読める内容となっています。...

なお、この記事は「約6〜10分」で読める内容となっています。

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

カラーの幅を広げるカラー| “Alternative color”


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

「Alternative color」とは、「Primary color」「Secondary color」とは別の観点で、「独立したテーマカラーを設定したいとき」に使用するカラールールです。

具体的には、「Alternative color」は以下のようなケースで使用します。

  • 「Light theme」や「Dark theme」として使用
  • UI内に「独立したUIテーマ」が複数ある場合
  • 統合的なサービスの「一部のUI」に対して使用

例えば上の図では、UI内に独立したUIテーマが3つあるため、3つの「Alternative color」を適用することによって、UIテーマの違いを表現しています。

なお、この「Alternative color」は「Primary color」や「Secondary color」などのカラーとの関係性もあるため、使用する場合はユーザーが混乱しないように慎重にカラーを選ぶ必要があります。

それでは、具体的な事例をもとに、「Alternative color」についてもう少し詳しく解説します。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

上の図では「Light theme」に対して「Dark theme」という「Alternative color」を採用している例です。

「Dark theme」では、読みやすさを確保するために、テキストカラーやアイコンカラーなども変更しています。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

少し繰り返しとはなりますが、上の図では3つの「Alternative color」を用いて、3つの独立したUIセクションを表現しています。

そして「Alternative color」を活用することによって、「今自分がいるUIセクションはここだ。」とユーザーが気付きやすくなります。

それでは各「Alternative color」の使い方について、もう少し詳しく解説していきます。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

1つ目のテーマではイエローカラーが「Alternative color」として使用されており、ユーザーの興味があるジャンルが分かるUIになっています。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

2つ目のブルーカラーは、ユーザーの個人アカウントに関連する授業を表示するためのUIに使用されています。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

そして最後の3つ目のピンクカラー「授業の詳細を説明するUI」に対して使用されています。

このように、UIの各テーマに対して「Alternative color」を適用することにより、表示しているUIの分かりやすさを向上させています。


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

そのほかの「Alternative color」の使い方として「データの区別」を目的とした使い方もできます。

例えば上の図では、①の所持金についてはグリーン系、②の出費についてはオレンジとイエロー系、③の利益についてはパープルとブルー系といった「Alternative color」の使い分けをしています。

それでは最後にカラーの組み合わせを作成することができる「Material palette generator」について解説します。

カラーの組み合わせを作成するツール| “Material palette generator”


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#tools-for-picking-colors

マテリアルデザインでは、最適なカラーの組み合わせを自動で作成するツール「Material palette generator」を提供しています。

この「Material palette generator」に「Primary color」を入力することによって、自動的に「Primary color」に対する、

  • Complementary:補助的なカラー
  • Analogous:類似カラー
  • Triadic:色相環カラー(トライアド配色)

を作成します。

上の図では「#6002EE」の配色をもとに、各カラーを作成しています。

ちなみに「Primary color」だけではなく「Secondary color」を入力しますと、「Primary color」に合わせた「Secondary color」が作成されます。

「Material palette generator」は、Webサイト上で色々と試すことができますので、ぜひカラーを入力して試してみてください。

また、2014年にマテリアルデザインとしてまとめたカラーパレット(カラーの組み合わせ)もWebサイト上に記載していますので、合わせてご確認しておくことをおすすめします。

出典:Material Design : Design section “The color system” > Material palette generator
URL:https://material.io/design/color/the-color-system.html#tools-for-picking-colors

まとめ


出典:Material Design : Design section “The color system”
URL:https://material.io/design/color/the-color-system.html#color-theme-creation

繰り返しとはなりますが、マテリアルデザインでは、基本的なカラーの組み合わせとは別に「Alternative color」を使用することによって、さまざまな組み合わせのカラーを設定することができます。

また、マテリアルデザインが提供している「Material palette generator」を使用することにより、「Primary color」を入力しますと、

  • Complementary:補助的なカラー
  • Analogous:類似カラー
  • Triadic:色相環カラー(トライアド配色)

が自動で作成され「見やすいカラーの組み合わせ」を作成することができます。

独自でカラーを検討することも大切ですが、マテリアルデザインのカラールールを参考にし、見やすいUIのカラーを検討してみるのもおすすめです。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事をご確認ください。

次のガイドラインを学びたい方は
マテリアルデザイン|No.13:Applying color to UI|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Applying color to UI(UIへのカラーの適用方法)」の概要について学ぶことができます。具体的には、この章では「各コンポーネント」や「UIの要素」に対して「どのようにカラーを適用すればよいか」を解説します。なお、この記事は「約8〜13分」で読める内容となっています。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.12-1/2:The color system|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「The color system(カラーの適用ルール)」の概要について学ぶことができます。 なお、この記事は「約7〜10分」で読める内容となっています。...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA