配色で魅せるWebデザイン｜実例から学ぶ「Webサイトの配色見本帳」
自社のコーポレートサイトのリニューアルを進める中で、デザインにおける配色がサイト全体の印象や機能性に大きく影響することを改めて実感しました。配色の理論自体はカラーコーディネーター検定試験で学んだものの、Webサイト特有の配色方法や実例を知りたいと感じていたときに出会ったのが、この「Webサイトの配色見本帳」です。
この本では、Webデザインにおける配色の基本から具体例まで網羅的に解説されており、特に「どのように色を選び、どのように配色を活用するか」が非常に実践的に書かれています。これからWebサイトをデザインする方や、配色に悩んでいる方には参考になる一冊だと思います。
1.Webデザインにおける配色の役割
まずWebデザインにおける配色の役割について
①行動を促す役割（問い合わせなど）
②情報を正確にわかりやすく伝える役割
③与えたい印象づけを行う役割
④ブランドを訴求する役割
と説明されています。特にWebデザインではユーザー（訪問者）を目的のページに誘導し、何らかの行動を促させる施策であるCTA（Call To Action）というアクションが伴うこともあるのが、紙などの印刷物でのデザインとは異なるところだと思います。
2.配色の基本について
そのほかの配色の基本で書かれていることは、以下のような点です。
・色の作り方（RGBやHEXなどの色の指定）
・色相・彩度・明度とトーン
・色が与えるイメージ
・色の機能的役割（誘目性・視認性・明視性・可読性・識別性）
・アクセシビリティを考慮した配色
・カラーの定義
・配色の決め方
一通り色についての勉強をしていると基本的なことが書かれているのですが、Webサイトの場合に落とし込んで説明されている点が良いと思いました。一方で、わかりやすく網羅はされているのですが、さらに深く知るためには、どのような本を読めばよいのかがわからないので、おすすめの書籍などもあると良いのかな、と個人的には思いました。
3.具体例で学ぶWebサイト配色のポイント
Webサイトにおける配色の具体例が書かれていて参考になると思った点は、たとえば以下のような点です。自分の備忘録にもなるので列挙してみます。当たり前すぎる内容は、これまであえて説明もされていなかったような気もしていて、そのあたりは親切に感じました。
・CSSでは、RGBにα（アルファ）という不透明度を加えて色を指定する方法もある。不透明度には0〜1をの間の小数値を使用し、rgba(0,255,255,0.5)と指定すると不透明度50%のシアンになる。
・16進数のカラーコード「#D89B39」は、RGBに対応する2桁の16進数をつなげて表現したもので、R：赤がD89なので10進数では216。同じくG：緑は9Bなので10進数では155、B：青は39なので10進数では57。よってrgb(216,155,57)と同じ色を指定している。
＊今更ながら、この説明がどこでも見たことがなく、当たり前するから説明されていないのかな・・・
・CSSではRGBやHEX以外にも色の三属性を用いて色を指定するHSLという形式もある。
H（Hue）：色相に該当し、0〜360の値で指定する。
S（Saturation)：彩度に該当し、0〜100の値で指定する。
L（Lightness）：明度に該当し、0〜100の値で指定する。
・誘目性とは対象物がどれだけ人の目を引きやすく、目立つかを指す。警告や注意喚起、広告やコンバージョンエリアなど、ユーザーの視線を集めたい部分には誘目性の高い色を使用すると良い。
＊誘目性の高い色については、カラーコーディネーター検定試験でも説明されていましたが、どのようなエリアで誘目性を高くするべきか、といった考え方が述べられている点が良いと思いました。
・コントラスト比をチェックするには、Figmaの「Contrast」というプラグインがある。オンラインの場合は、「Adobe Color」や「Colorable」などが利用できる。
・色覚特性による見え方の違いは、Figmaでは「Color Blind」というプラグインを使用することで確認できる。Photoshopでは「表示」からP型（赤い光を主に感じる錐体が無い）とD型（緑の光を主に感じる錐体が無い）の色覚特性の見え方を確認できる。
・Webデザインにおけるカラーの定義としては、以下。
キーカラー
ブランドカラーを使用
ベースカラー
背景や主要なコンテンツエリアに使用（キーカラーと同じになることも）し、キーカラーを引き立てる色がよい。キーカラーと同系色でトーンを調整した色、補色、白やグレー
サブカラー
キーカラーを補完する役割の色、キーカラーの１色では物足りないと感じるときに使用する。サイト全体に統一感を持たせる場合はキーカラーと色相の近い類似色、コンバージョンエリアを目立たせたい場合にはキーカラーの補色を使用、メリハリや華やかさを出したい場合には、複数の色をサブカラーとして使用。
フォントカラー
サイト内のテキストに使用される色。ブランドカラーやキーカラーと同じ色や明度を落としたものでブランドイメージを統一。本文に使用するフォントカラーはコントラストの強い#000000でなく#222222を使用するなど。
・配色に困ったらAdobe Color。AIを活用して配色を決めるのであれば、Chat GPTに配色のアイデアを提案してもらう、Khromaで好みの色を自動で生成してもらう。
＊Khroma（https://www.khroma.co/）は、最初の好きな50色を選ぶと、その好みに合わせた配色を選んでくれるというものです。
4.実際のWebサイトでの配色見本
その後は様々なWebサイトについての配色例が挙げられています。ベースカラー、キーカラー、サブカラー、フォントカラーがそれぞれ説明されているので、自分の作りたいサイトの方向性を決めるのに、参考になりました。
5.おわりに｜この本を活かして配色を考えるヒント
「Webサイトの配色見本帳」は、Webデザインにおける配色の基本から実例までを具体的に学べる、非常に実践的な内容の本でした。特に、配色の役割や心理的効果、アクセシビリティの観点からのアプローチは、自分たちのサイトにも活かせる多くのヒントがありました。
これからWebデザインを進める際には、この本を参考にしながら、キーカラーやサブカラーなどの選定をまず行い、アクセシビリティの確保に注意しつつ、視認性や誘目性などを意識した配色を取り入れたいと思います。配色で悩んでいる方にはぜひ手に取ってみていただきたい一冊だと思います。