第2回：写真以外の画像の色の選び方 写真の色とイラスト

色彩とコミュニケーション（全6回）
第2回：写真以外の画像の色の選び方
執筆：坂本 邦夫（フォルトゥナ）
イラストやアイコン・バナーなどの色は、サイト全体のイメージが完成した後に追加されるのが定石ですが、キャンペーン
などのバナーは頻繁に変えられるため、元の配色と整合させてきれいに見せることが難しいパーツです。全体の印象を
壊さず、なおかつ目立つような色を選ばなければ、重要なコンテンツに誘導することも難しくなります。今回は後から追
加するパーツまどの、色の選び方について考えてみましょう。
写真の色とイラスト・バナーの色の違い
写真とイラストやバナーの色には基本的な違いがあります。写真の色は補正などによって、ややよく見せるということは
あっても、まったく異なる色に変えてしまうということはあまりありません。それに対して、イラストの方はデフォルメされた
色を使われていることも多いということです。
どちらも茄子だが、イラストでの色はかなり強調されていることがわかる
一般的な企業や店舗のWebサイトでは、写真は「具体的な物をきちんと見せる」の必要なもの、イラストは「文章だけで
は伝わりにくいものを補う手段」として捉えるようにすれば、その使いどころははっきりとしてきます。
これらはあくまで手段ですので、写真やイラストなどを「目的もなく配置することのないように」心がけましょう。
イラストを使うときの色選び
サイトの基本的なデザインやレイアウトが決まっている場合、イラストは後から追加する色となります。
このような場合には、既に使われている色を拾い出し、同じような色が使われているイラストを選ぶと無難です。
サイト内でどんな色が使われているかを調べる「Web Colour
Data」のような無料のサービスもあります。どのような色がどれくらい使われているかがわかります。
Web Colour Dataの使用例
イラストのテイストや使われている色にも寄りますが、グラデーションの少ないベタ塗りの部分が多いイラストは、色の印
象が強く感じられることが多いため、サイトで使われている色よりも明るく彩度の低いトーンのイラストを選ぶようにする
と、配色の収まりはよくなります。特に大きなイラストや図を使いたい場合には、イラスト部分がにぎやかになりすぎて、情
報が目に入りにくくなりますので注意が必要でしょう。
既に使われている色のトーンを下げた色をイラストに使う
気をつけたいのは、無料のクリップアートなどを様々なところから拾ってきた場合です。イラストのテイストが変われば、使
われている色のトーンも変わります。同じページ内でテイストの異なったイラストが使われていると、「取って付けた」よう
な感じになってしまい、サイトそのものが安っぽく見られる可能性があります。出来る限り同じ人が描いたイラストか、有
料素材の同じシリーズの中から選ぶようにします。
違うテイストのイラストは一つのサイトに同居させにくい
目立たせたいバナーの色選び
キャンペーンなどに使うバナーは目立たせるのが基本ですが、周囲に配置されている色とのバランスを見ながら色を調
整していく必要があります。
例えばバナーが密集するような状況では、上下左右に位置するバナー色が派手な暖色であるならば、同じような色を避
けて目立たせるようにしなければなりません。例えば赤が多いような場所であれば、青を使ったり、派手な色のバナーの
中にあえてモノクロのバナーを使ったりして差を付けるようにします。
目立たせたい場合には周囲の色と異なる色を選ぶようにするのがコツ
サイドバーに配置される他サイトや他ページへのリンクバナーなどの場合には、最重要なのはバナーではなく、メインエ
リアに配置されている本文テキストや写真であり、サイドバーに配置されるものは優先順位も低くなります。バナー画像
の色が既に決まっている場合には、そのまま張るしかありませんが、自作するような場合には、サイト全体の配色や本文
を見てもらうのに邪魔にならないように、既に使われている色に似た色を選ぶようにします。最初からそれほど派手な色
が使われていない場合には、彩度を下げた色を使うようにしましょう。
重要な部分に視線が向かなくなるような配色は避ける
後から色を追加する場合には、「どこに配置されるのか」と「周囲にはどのような色があるのか」と同時に、「その部分が
どれくらい重要なのか」を考えれば、使う色を選びやすくなります。
次回のコラムを見る »
坂本 邦夫（さかもと・くにお）
カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/
1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、W
eb制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色
彩環境の向上を使命として活動。日本色彩学会正会員。
主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート
ホームページ配色入門』（ワークスコーポレーション）、『ウェブ配色 コーディネートカタログ』（技術評論社）など。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/