はじめてWEBエキスパート(専門家)コラム 色彩とコミュニケーション(全6回)

イラストやアイコン・バナーなどの色の選び方ポイント――色彩とコミュニケーション#2

イラストやアイコン・バナーなどの後から追加するパーツの、色の選び方について考えてみましょう。

イラストやアイコン・バナーなどの色は、サイト全体のイメージが完成した後に追加されるのが定石ですが、キャンペーンなどのバナーは頻繁に変えられるため、元の配色と整合させてきれいに見せることが難しいパーツです。全体の印象を壊さず、なおかつ目立つような色を選ばなければ、重要なコンテンツに誘導することも難しくなります。今回は後から追加するパーツまどの、色の選び方について考えてみましょう。

写真の色とイラスト・バナーの色の違い

写真とイラストやバナーの色には基本的な違いがあります。写真の色は補正などによって、ややよく見せるということはあっても、まったく異なる色に変えてしまうということはあまりありません。それに対して、イラストの方はデフォルメされた色を使われていることも多いということです。

どちらも茄子だが、イラストでの色はかなり強調されていることがわかる

一般的な企業や店舗のWebサイトでは、写真は「具体的な物をきちんと見せる」の必要なもの、イラストは「文章だけでは伝わりにくいものを補う手段」として捉えるようにすれば、その使いどころははっきりとしてきます。
これらはあくまで手段ですので、写真やイラストなどを「目的もなく配置することのないように」心がけましょう。

イラストを使うときの色選び

サイトの基本的なデザインやレイアウトが決まっている場合、イラストは後から追加する色となります。
このような場合には、既に使われている色を拾い出し、同じような色が使われているイラストを選ぶと無難です。

サイト内でどんな色が使われているかを調べる「Web Colour Data」のような無料のサービスもあります。どのような色がどれくらい使われているかがわかります。

Web Colour Dataの使用例

イラストのテイストや使われている色にも寄りますが、グラデーションの少ないベタ塗りの部分が多いイラストは、色の印象が強く感じられることが多いため、サイトで使われている色よりも明るく彩度の低いトーンのイラストを選ぶようにすると、配色の収まりはよくなります。特に大きなイラストや図を使いたい場合には、イラスト部分がにぎやかになりすぎて、情報が目に入りにくくなりますので注意が必要でしょう。

既に使われている色のトーンを下げた色をイラストに使う

気をつけたいのは、無料のクリップアートなどを様々なところから拾ってきた場合です。イラストのテイストが変われば、使われている色のトーンも変わります。同じページ内でテイストの異なったイラストが使われていると、「取って付けた」ような感じになってしまい、サイトそのものが安っぽく見られる可能性があります。出来る限り同じ人が描いたイラストか、有料素材の同じシリーズの中から選ぶようにします。

違うテイストのイラストは一つのサイトに同居させにくい

目立たせたいバナーの色選び

キャンペーンなどに使うバナーは目立たせるのが基本ですが、周囲に配置されている色とのバランスを見ながら色を調整していく必要があります。

例えばバナーが密集するような状況では、上下左右に位置するバナー色が派手な暖色であるならば、同じような色を避けて目立たせるようにしなければなりません。例えば赤が多いような場所であれば、青を使ったり、派手な色のバナーの中にあえてモノクロのバナーを使ったりして差を付けるようにします。

目立たせたい場合には周囲の色と異なる色を選ぶようにするのがコツ

サイドバーに配置される他サイトや他ページへのリンクバナーなどの場合には、最重要なのはバナーではなく、メインエリアに配置されている本文テキストや写真であり、サイドバーに配置されるものは優先順位も低くなります。バナー画像の色が既に決まっている場合には、そのまま張るしかありませんが、自作するような場合には、サイト全体の配色や本文を見てもらうのに邪魔にならないように、既に使われている色に似た色を選ぶようにします。最初からそれほど派手な色が使われていない場合には、彩度を下げた色を使うようにしましょう。

重要な部分に視線が向かなくなるような配色は避ける

後から色を追加する場合には、「どこに配置されるのか」と「周囲にはどのような色があるのか」と同時に、「その部分がどれくらい重要なのか」を考えれば、使う色を選びやすくなります。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
色彩とコミュニケーション(全6回)「第2回:写真以外の画像の色の選び方」(2013/05/15)

この記事が役に立ったらシェア!
tweet22はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

重複コンテンツ
同じドメイン名内、または他のドメイン名にわたって存在する、「内容は同じだがURL ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore