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

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第1回 色の違いでできることを覚えよう

エキスパートコラム

0からスタート ホームページ配色入門(全6回)

第1回:色の違いでできることを覚えよう

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

2014年5月26日更新

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

閲覧数19,274views

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

「0からスタート ホームページ配色入門」では、センスではなく、簡単な配色の知識やレイアウトのセオリー、情報伝達の基本を学ぶことで、あなたのホームページの目的を達成させるための配色を解説します。色を使う目的はきれいに見せること重要ですが、色でできることはきれいに見せることだけではありません。

この講座では正しい色選びをするための基本知識とセオリーを紹介していきます。

色の問題はセンス以外で解決できる

「配色のセンスがないんです」や「デザインセンスが悪くて」という言葉をよく聞きますが、実はこれは当たり前のことで、十分なトレーニングを積んだプロのデザイナーに敵うはずもありません。

ですが、あなたが今作っている、あるいは作ろうとしているホームページの場合に限って言えば、色を決めるのはそれほど難しいことではありません。なぜなら、あなたは何らかの情報を発信しようという目的を持って、ホームページを作っているはずなので、その目的をきちんと達成させればよく、プロとデザイン勝負をしているわけではないからです。

目的を達成させるということだけなら、ごく簡単な色の知識とホームページの目的を忘れずに色を選ぶという意志が最も大切です。「どんな色を使おうかな」と漠然と考えるのではなく、「この部分をアピールしたいからこの色」「こんなイメージを伝えたいからこの色」のように、常に目的を意識し、セオリーから色を選び、適切な場所に配置すれば、色はあなたのホームページを助けてくれるのです。

あなたが考えるべきは、ホームページの表現の邪魔をする色を使わないようにすることで、これにはセンスはあまり関係ないのです。言いかえれば知識によって、ほとんどの色の問題は解決できてしまうのです。

色を使ってできること

ホームページの色を変えたから、急に商品が売れるようになったりすることはほとんどありません。あるとすれば、今までも本来売れるはずだったものが、よくない色を使っていたために売れていなかったのです。そもそも誰もほしがらないものを売れるようにする魔法の色などは存在しないため、あなたのホームページに最適な色を選び出さなければなりません。

ではそもそも色を使うことで何ができるようになるのでしょうか?

まず最も基本的なものとしては、きれいだなぁとか楽しそうだなぁという雰囲気やイメージを与えることができるようになります。これは色が人の感情に働きかける力を持っているのです。ここで大きく踏み外すと「なんだか思っていたのと雰囲気が違う」などと感じられてしまいます。

訪問者の期待している色から大きく外れてしまうと、ページの内容を読まれる前に帰られてしまうこともあるため、最低限伝えたいイメージに合った色を選んでおくことが必要になります。

もうひとつ大きなものに、ページに書かれている情報をスムーズに伝えるということがあります。お店のことをアピールしたいのに店舗名が読めなかったり、大事な文字が読めなかったりすることで、せっかく訪問してくれた人に魅力を伝えきれないこともあります。色は情報を伝える機能も持ち合わせています。

この2つが両方できるとよい色ということになります。

  • お店やサービスのイメージをきちんと伝えること
  • ホームページで伝えたい情報を過不足なく伝えられること

これが色を使う本当の意味なのです。

色のイメージが合っているか考えよう

色を使う際にはきちんと合ったイメージを伝えられていることが大事です。例えば落ち着いた雰囲気を演出している飲食店のホームページににぎやかな雰囲気や冷たいイメージは必要ありません。選ばれた色によっては、逆効果を生み出すこともあります。

あまり色選びに自信がない場合には、まず自分が合うと思うイメージの写真やイラストを集めてみましょう。このような作業にはGoogleの画像検索が有効です。

「落ち着いた 飲食店」や「楽しそう 保育園」のように複数のキーワードで検索して、これがよいと思ったものを集めてみるのです。

そのコレクションした写真から自分の使いたい色を探し、他の人に相談してみましょう。そして「うちのお店のホームページの色はこういう感じだと思うんだけどどうだろう?」と聞いてみるのです。

色について考えることは、サービスやビジネスを見直すよい機会でもあるので、しっかりと考え、できるだけ具体的な言葉を選んで聞くようにしましょう。

色の好みは個人差がありますが、複数の人から意見をもらい、最も多かった意見を採用すればあまり間違うことはありません。

最終的にあなたが伝えたいイメージが正しいのかどうかを判断するのは、あなた自身ではなく、ページへの訪問者です。自分の好みを忘れて、多くの人が共感できる色を選ぶことで、完成したホームページのイメージが合わずに去られてしまう可能性を下げることができるのです。

このように多くの人に指示される1色を選ぶことができれば、その他の色選びも非常にスムーズになります。

次回は色の基本的な用語について説明し、選んだ色のことを詳しく話すための知識を説明します。

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

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

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

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

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

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

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

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ