スマートフォンサイトを表示する

  1. TOP
  2. 色彩とコミュニケーション : 第2回 写真以外の画像の色の選び方

エキスパートコラム

色彩とコミュニケーション(全6回)

第2回:写真以外の画像の色の選び方

執筆:坂本 邦夫(フォルトゥナ)

2013年5月15日更新

  • このエントリーをはてなブックマークに追加

閲覧数3,744views

このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

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

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

Web Colour Dataの使用例

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

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

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

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/19~2017/3/25]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!