配色の役割

視覚を利用することを前提にしたWebサイトやWebアプリケーションを作成するためには、配色という作業が欠かせません。もしそれが、プロのデザイナーが行うものでなかったとしても、必ず誰かが配色という作業をしています。

配色といわれてぱっと思いつくのは、装飾的な意味合いが多いのではないでしょうか。装飾には、WebサイトやWebアプリケーションに色をつけることで、ブランドのイメージを演出したり、見た目をオシャレにしたりといった効果があります。しかし、配色という行為の役割は装飾だけではありません。そこには、別の大事な役割が存在します。

装飾的な使い方以外の配色の重要な役割のひとつは、配置されている要素のグループ関係をコントロールすることです。次の例を見てください。これは特別な意味を持たない抽象的な色の集まりですが、要素のグループが配色によってコントロールされているということがわかります。

要素（または情報）のグループというのは、「気になる余白と気になりにくい余白」という記事にもあるように、要素同士の余白によっても大きく左右されますが、それと同時に、要素の色によっても左右されます。このようなグループ関係を伝達する色の働きは、WebサイトやWebアプリケーションのデザインをする上で、非常に重要で欠かせないものです。

デザインの厄介なところ

余白も配色も、ひとつの余白、ひとつの色が複数の役割を受け持っていることがとても多いです。ひとつの色が複数の効果に影響を与えます。ですので、それら複数の役割が大きな破綻をおこさないように、上手にバランスを取りながら全体をまとめる必要があります。

たとえば、黄色で塗った背景色が、サイトの雰囲気やブランドカラー、要素グループの伝達、前景となるテキストの可読性だったりと、複数箇所への影響力を併せ持っているように……。そして要素が増えるに従って、「あちらを立てればこちらが立たず」になる頻度も上昇して、全体の帳尻を合わせるのが難しくなっていきます。

改善前の配色

次の画像には、カードタイプのデザインが施された要素が配置されています。カードタイプのUIはWebサイトやWebアプリケーションを問わず、広く普及しているインターフェースです。今回は、このデザインに施されている配色が「情報をよりスムーズに伝達する」という視点からより良くなるように改善していきます。

カードタイプのデザインのポイントは、カードを構成している要素群がもれなくひとつのグループに見えているかです。その観点から、改善前の配色に調整が必要そうな箇所をリストアップします。

1. グループを分断している配色1（カードの見出し）
2. グループを分断している配色2（カードの背景色）
3. グループを分断している配色3（カードの下部）
4. 曖昧なグループ境界
5. 抑揚のないテキスト色

1.グループを分断している配色1（カードの見出し）

カード内の見出しを強調するために、テキストの背景に濃い紺色が配色されています。確かに強調という意味では効果が出ているように見えます。しかし、過度な強調とカードを余白なく横断する着色により、カードの上下を分断してしまっているので改善が必要です。

2.グループを分断している配色2（カードの背景色）

カード自体の背景色として薄い緑色が配色されています。この部分は、前景となっている黒文字の可読性を確保する濃度にしつつ、それと同時にカード自体が配置されているページの背景色（薄いグレー部分）との区別もつけなければなりません。結果的に、薄い緑色を配色することで、それらを両立させようとしていますが、緑色という色味をつけたことで新たな色味のグループが発生してしまっています。それが結果的に、カードの一体感を妨害する方向へ作用しているため改善が必要です。

3.グループを分断している配色3（カードの下部）

「日付」「ユーザーによる操作が可能なアイコン」という2つの付属的な情報を、まとめて分類するために濃い紺色が配色されています。配色によって情報の分離は達成できていますが、作用としては「グループを分断している配色1」と同様です。カードを構成している情報の最下部にあたる箇所なので、厳密にいえば、分断というよりは、視覚的にカードのグループに所属しているように見えないというほうが正確かもしれません。いずれにせよ、濃い紺色で配色されている最下部がカードの一体感を妨害してしまっていますので改善が必要です。

4.曖昧なグループ境界

これは、カードとページの背景色（薄いグレー部分）の差異の少なさを指しています。「グループを分断している配色2」でも取り上げていますが、カードとページの背景色の区別をつけるために、カードの背景色が薄い緑色に配色されていることが原因になっています。その結果、カードの背景色とページの背景色の濃度の差がほとんどない状態ですので、これも改善が必要です。

5.抑揚のないテキスト色

改善前のカードでは、テキスト色を#000で配色しています。これは相対的に色を表現するRGBカラーとしてはもっとも暗い黒色を示しています。対応する背景色にもよりますが、もしテキスト色が#000で背景色に明色が使われている場合は、テキストと背景とのコントラスト比は高くなります。コントラスト比の高い状態というのは、前景となる黒いテキストが、より前に飛び出して見えるということです。つまり、カードのデザインを奥行き方向で捉えたときに、前面に飛び出しすぎているテキスト色は、背景との一体感を損なっているといえます。

無彩色*の濃淡を配色として取り扱うかについては、別な見方もあるかもしれません。ただ、グループの一体感を左右する要素としては十分な役割を持っていますので、ここでは無彩色の濃淡を考えることも配色として取り扱います。

*注：無彩色とは

色味がついていない色のことを無彩色といいます。RGBカラーで表現すると、#000から#fffで終わる黒と白を含めたグレースケールのことを表します。

改善後の配色

次の画像は、改善前の配色をグループの一体感という視点から色を調整したものです。要素の余白や、配置には手を加えていません。配色の変更点について、それぞれ解説していきます。

改善の方針

改善前のカードデザインを観察してみると、色があることでカードの一体感が減少してしまっていることに気が付きました。ですので、今回の配色改善の方針は、周囲の要素との関係では、強すぎる色味を調整していく作業となります。その方法は、色味を感じさせている有彩色を無彩色に置き換える作業です。無彩色は味気ないですが、情報のグループを作る上ではとても重要な役割を果たします。

配色改善なのに、色味を減らしてしまっては本末転倒ではないかと思われるかもしれません。しかし、色数をなるべく少なくすることで、本当に使いたい色を、配色しやすい状態に維持することができます。色数の多い状態をバランス良くコントロールするのは、非常に繊細で難しい作業だからです。加えて、不用意に色を使いすぎると、重要な箇所を目立たせることができなくなってしまったり、ひとつの配色調整の影響が広範囲になることもあります。そしてなにより、多すぎる色数が情報過多な状態を生み出し、スムーズな情報伝達を妨害してしまいます。ですので、無理に色をつけようとせずに、あまり色を使いすぎないという心がけが、スムーズな情報伝達をするための配色には重要になってきます。

1.グループを分断している配色1（カードの見出し）

カードの上下を分断してしまっている濃い紺色を改善します。これを改善するためには、区切りとして捉えられそうなデザインを排除します。この場合ですと、「すごい題名」と表記されている部分の濃い紺色と、その上下のカードの背景色（薄い緑）の部分です。この部分の変化が大きすぎるために、濃い紺色に区切り線としての効果が付与されてしまっています。

配色改善としては、薄い緑色の背景色を濃い紺色にすることで、上下の要素を分断している境界線を感じさせなくする方法も考えられました。しかし、それをするとページの背景色（薄いグレー）とのコントラスト差が強くなりすぎる状態が発生してしまいます。結果、今度はページの背景色を調整する必要が出てきてしまいます。さらに、ページの背景色が変更されていますので、その背景色に重ねられている要素すべてに調整が波及してしまいます。このように、ひとつの配色変更が、さらなる配色調整を玉突きで発生させてしまうことがあります。この懸念があったため、濃い紺色側に合わせるという方法は採用しませんでした。

別の方法として、今回採用した、濃い紺色の変更があります。この配色変更による影響範囲は隣接している上下の要素と、濃い紺色が内包しているテキスト色だけです。目的は区切りとしての認識を排除することなので、シンプルに濃い紺色そのものを削除してしまいます。そうすることで、上下の要素との視覚的な区切りは余白の多寡による作用のみとなりますので、区切られている印象になるような強いコントラスト変化を排除することができそうです。

次に、濃い紺色に内包されていたテキスト色の調整ですが、こちらは「5.抑揚のないテキスト色」で解説します。

2.グループを分断している配色2（カードの背景色）

カードの背景色にあたる、薄い緑色を改善します。改善前の画像で解説したように、ページの背景色（薄いグレー）と、前景となるテキストの両方のコントラストのバランスが取れるように意識しなければなりません。改善前の配色では、ページの背景色とカードの背景色が馴染んでしまっていたため、カードの一体感が損なわれていました。そこで、たとえばこのカードの背景色の色を濃くすれば、ページの背景色との差別化は容易です。ですが、前景となるテキストの可読性が落ちてしまいます。逆に、薄い状態の背景色とした場合は、テキストの可読性は確保できますが、ページの背景色と一体化してしまい、カードの一体感が損なわれてしまいます。

このような、どちらを選択しても程よい状態を作り出せない場合は、無理に色味をつけようとせずに白色#fffを選択することもできます。白色は背景色として当たり前すぎるので、白色を色の選択肢のひとつとして思い浮かばないこともありますが、白色も立派な色ですし、とても使い勝手の良い色です。

カードの背景色を白色とした場合、前で述べたように、ページの背景色とカードの背景色の境界が曖昧になってしまいます。ですので、この2つの背景色の境界が認識できるように配色の調整をする必要があるのですが、それは「4.曖昧なグループ境界」で解説します。

3.グループを分断している配色3（カードの下部）

カードの下部の濃い紺色を改善します。改善の方法、考え方は「1.グループを分断している配色1」と同じです。一体感を出したい要素同士の境界を感じなくさせるために、濃い紺色を取り除きます。

ただし、もしこのような箇所の色を取り除いたことによって、カード内に配置されている要素ごとのグループ分けが曖昧になってしまうようなら、別の方法で要素ごとのグループ分けを伝達する必要があります。今回の場合であれば「タイトル + 本文のプレビュー」と「日付 + アイコン類」のグループ分けの伝達です。前者はカードが持つ情報の本質部分で、後者は、それに付属する情報に分類されます。

改善前のデザインでは濃いめの背景色を配色することで、情報の分離を試みていたのですが、これでは効果過剰で、カードの一体感を妨害してしまっていました。濃い色の延長線上にある発想で、薄い背景色を採用するという選択肢もあります。ただ、これですと、ページの背景色となっている薄いグレーとの境界が曖昧になってしまいます。

このように、一体感は出したいがグループ分けもしたいという場合には、余白による調整が程よいです。改善前のカードと改善後のカードでは、余白の調整は行っていませんが、改善後のカードの「タイトル + 本文のプレビュー」と「日付 + アイコン類」間には、グループの一体感を損なわずにグループを程よく分けてくれるだけの余白が存在しています。余白によるグループ分けの方法は、「気になる余白と気になりにくい余白」を参照してください。

4.曖昧なグループ境界

「2.グループを分断している配色2」から改善のポイントとして挙がっている、ページの背景色（薄いグレー）とカード自体の境界に関する改善です。これには、手法として広く普及している「影」、いわゆるドロップシャドウを利用します。微細な影をカードに追加することで奥行き方向への距離感を付与する方法です。これによって、視覚的にページの背景からカード自体を分離させます。そうすることで、カードの背景色が白色になったことによるページの背景とカード背景の一体化を解消します。

別な方法としては、カードを罫線で囲んでしまい、明示的なグループを伝達する方法も考えられます。しかし、この方法は意外と分離過多な状態になりやすいです。分離過多な状態はたいていの場合で、罫線自体が情報としてユーザーの目に入ってきてしまい、余分な情報として認識コストを増大させてしまう結果になりがちです。

もちろん、ドロップシャドウの手法も、影を強く認識できる状態にデザインしてしまうと余分な認識コストとなってしまいます。そうならないためには、実物の机の上に薄いトランプを1枚配置したときのような、影をそれほど感じさせないさりげない濃度にする必要があります。

5.抑揚のないテキスト色

最後に、テキストの配色を改善します。ここまできてしまえば、テキスト色による配色調整は隠し味のようなものです。ですので、もしカード内に配置されているテキストすべてを同じ濃度で配色したとしても、カード全体の一体感を破綻させるほどの影響は与えないでしょう。ただ、カード内に配置された情報の中にも「先に読んでほしい情報」や「後からでも大丈夫な情報」が存在しますので、それらの情報をよりスムーズにユーザーへ伝達させるために、テキストの濃度を少しだけ調整してあげられるとより良い効果を発揮します。

具体的には、見出しとなっている一番大きなテキストと、その他のテキスト群の分離です。ユーザーがパッとカードを見たときに「見出し→本文→その他」という順番に見てもらえるようになれば理想的です。そのためにテキストの濃度を調整します。より目立たせたいものは濃く、そうではないものは、一番目立たせたいものよりも薄く配色します。

ただし、あまり薄くしすぎてしまうと可読性が著しく損なわれてしまいますので、そのあたりの指標としては、WCAG 2.1 - Success Criterion 1.4.3 Contrast (Minimum)を参照すると良いかもしれません。

参考までに、改善後の配色に利用されているテキストのRGB値を掲載しておきます。

要素	テキストカラー	背景色
カテゴリー名	#767676	#fff
見出し	#505050	#fff
本文のプレビュー	#666	#fff
日付	#767676	#fff

背景が暗色の場合（参考）

改善前の画像は背景が明色だったために、改善後のカードも明色を基準としていました。ただし、パターンとしては背景色が暗色である場合もありますので、参考までに暗色でのカードデザインも作成しました。基本的な考え方は明色での配色と違いありません。色数を増やさないようにすることで、色の変化によるグループの分離が発生しないように心がけます。

明色の場合との大きな違いを挙げるとすれば、カードとページを分離するために追加した、影の濃度です。暗色に影を重ねる場合、明色と同等程度の濃度では背景色に影が馴染んでしまい、変化を感じられません。ですので、明色に重ねる影の濃度に比べるとかなり濃い状態の影を重ねることで、カードが浮き出る効果を付与しています。

具体的な数値で表すと、明色の場合は、影となる黒色を透明度30%程度に薄くして重ねていますが、暗色の場合は、透明度70%程度の濃さで重ねています。ただし、ここで注意しなければならないのは、影による奥行き感を付与したい場合は、ページの背景色を#000としないことです。ここの背景色を完全な黒にしてしまうと、後からどんなに影を重ねても#000以上には暗くなりません。ですので、影の効果を重ねたときに、より黒くする余地を、背景色には残しておく必要があります。

まとめ

記事のタイトルに配色という言葉が入っていましたが、今回の内容は基本的に色を排除するという内容でした。配色というと、どうしても多くの有彩色を同時にコントロールする方法を想像してしまいがちです。しかし、数多くの有彩色をコントロールするのは非常に難しい作業です。WebサイトやWebアプリケーションのゴールが「カラフルにする」というものでなければ、基本的に有彩色の利用はなるべく控える心持ちでいると、最終的に程よい状態を保ちやすいです。特にアプリケーションの場合は、色味によって区別を伝達しようとする場面が必然的に増えますので、装飾用途での有彩色の利用は控えめにするのがおすすめです。