邦夫(フォルトゥナ)2013年5月15日更新ツイート閲覧数6,968viewsこのコラムをPDF形式でダウンロードするイラストやアイコン・バナーなどの色は、サイト全体のイメージが完成した後に追加されるのが定石ですが、キャンペーンなどのバナーは頻繁に変えられるため、元の配色と整合させてきれいに見せることが難しいパーツです。全体の印象を壊さず、なおかつ目立つような色を選ばなければ、重要なコンテンツに誘導することも難しくなります。今回は後から追加するパーツまどの、色の選び方について考えてみましょう。写真の色とイラスト・バナーの色の違い写真とイラストやバナーの色には基本的な違いがあります。写真の色は補正などによって、ややよく見せるということはあっても、まったく異なる色に変えてしまうということはあまりありません。それに対して、イラストの方はデフォルメされた色を使われていることも多いということです。どちらも茄子だが、イラストでの色はかなり強調されていることがわかる一般的な企業や店舗のWebサイトでは、写真は「具体的な物をきちんと見せる」の必要なもの、イラストは「文章だけでは伝わりにくいものを補う手段」として捉えるようにすれば、その使いどころははっきりとしてきます。これらはあくまで手段ですので、写真やイラストなどを「目的もなく配置することのないように」心がけましょう。イラストを使うときの色選びサイトの基本的なデザインやレイアウトが決まっている場合、イラストは後から追加する色となります。このような場合には、既に使われている色を拾い出し、同じような色が使われているイラストを選ぶと無難です。Data」のような無料のサービスもあります。どのような色がどれくらい使われているかがわかります。Dataの使用例イラストのテイストや使われている色にも寄りますが、グラデーションの少ないベタ塗りの部分が多いイラストは、色の印象が強く感じられることが多いため、サイトで使われている色よりも明るく彩度の低いトーンのイラストを選ぶようにすると、配色の収まりはよくなります。大きなイラストや図を使いたい場合には、イラスト部分がにぎやかになりすぎて、情報が目に入りにくくなりますので注意が必要でしょう。使われている色のトーンを下げた色をイラストに使う気をつけたいのは、無料のクリップアートなどを様々なところから拾ってきた場合です。イラストのテイストが変われば、使われている色のトーンも変わります。同じページ内でテイストの異なったイラストが使われていると、「取って付けた」ような感じになってしまい、サイトそのものが安っぽく見られる可能性があります。出来る限り同じ人が描いたイラストか、有料素材の同じシリーズの中から選ぶようにします。違うテイストのイラストは一つのサイトに同居させにくい目立たせたいバナーの色選びキャンペーンなどに使うバナーは目立たせるのが基本ですが、周囲に配置されている色とのバランスを見ながら色を調整していく必要があります。バナーが密集するような状況では、上下左右に位置するバナー色が派手な暖色であるならば、同じような色を避けて目立たせるようにしなければなりません。赤が多いような場所であれば、青を使ったり、派手な色のバナーの中にあえてモノクロのバナーを使ったりして差を付けるようにします。目立たせたい場合には周囲の色と異なる色を選ぶようにするのがコツサイドバーに配置される他サイトや他ページへのリンクバナーなどの場合には、最重要なのはバナーではなく、メインエリアに配置されている本文テキストや写真であり、サイドバーに配置されるものは優先順位も低くなります。バナー画像の色が既に決まっている場合には、そのまま張るしかありませんが、自作するような場合には、サイト全体の配色や本文を見てもらうのに邪魔にならないように、既に使われている色に似た色を選ぶようにします。最初からそれほど派手な色が使われていない場合には、彩度を下げた色を使うようにしましょう。重要な部分に視線が向かなくなるような配色は避ける後から色を追加する場合には、「どこに配置されるのか」と「周囲にはどのような色があるのか」と同時に、「その部分がどれくらい重要なのか」を考えれば、使う色を選びやすくなります。2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。コーディネートカタログ』(技術評論社)など。(編集)『ウェブデザイン&レイアウトの見本帳』に続く、ウェブの配色に特化した実例の見本帳です。掲載している項目のテーマは、季節感を感じさせる配色デザインや、イメージを喚起させる配色、文字や罫線などと配色の関係、さらには集客に繋がる配色も紹介しています。本書のはじめには色相や彩度、補色など、配色に関する基本的な事柄も解説することで、ウェブに関する配色の本として充実した内容になっています。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。