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

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

イラストやアイコン・バナーなどの後から追加するパーツの、色の選び方について考えてみましょう。
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

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

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

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

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

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

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

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

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

Web Colour Dataの使用例

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

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

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

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

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

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

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

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

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

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

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

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

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

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

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


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