ウェブサイトでの色遣いについて

投稿日:2021.01.19.
更新日:2025.04.12.

ホームページ制作

デザイン

株式会社TREVOの月額制ホームページ制作サービス
PR

衣川 知秀
執筆・編集 衣川 知秀

デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み:AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条:私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事:記事一覧ページ

色は、ほぼ全ての人の日常に溶け込んでおり、また、体験するものです。
光が届く限り無色透明なものはなく、目に見えるものにはすべて何かしらの着色がされています。色は、まだ言葉を離さない子どもでも扱える不思議なツールです。最近はパーソナルカラー診断という、自分の肌に似合う色を診断するテストが流行ですね。ウェブサイトにも、まさに“似合う色”があります。
今回は、サイトに“似合う”色選びについての解説になります。

色の基本

色は、いくつかにグループ分けをすることが出来ます。下の図のように、X軸を「色味」、Y軸を「明るさ」で表現します。
まず色味は、プラス(右)に行くほど色が強く鮮やかに感じ、これを「有彩色」と言います。また、マイナス(左)に近いほど「無彩色」となります。があります。明るさには、プラス(上)に行くほど明るく、明清色と呼ばれ、マイナス(下)に行くほど暗く暗清色と呼ばれます。この図の真ん中あたりが、「色味」と「明るさ」が混ざった状態であるので「濁色」と呼ばれます。
これらの座標で「トーン」が決まり、印象を形づくります。
ウェブサイトでの色遣いについて
では次の章では、3つのトーンをピックアップしてそこから得られる印象を見てみましょう。

  • ビビットカラー
  • ライトカラー
  • グレイッシュカラー

3つのトーンと印象比較

もしも市役所のウェブサイトがビビットカラーだったら、皆さんはどう感じますか。幼稚園のウェブサイトがグレイッシュメインだったら?病院サイトの背景が黒一色なら‥?ちょっと怖いですよね。そして私自身、このようなサイトに出会った経験はまだありません。選定した色に、素晴らしい考えやテーマが含まれてあったとしても、ユーザーとのギャップがあまりにも大きい場合、ユーザーが違和感を感じることになります。これはせっかく労力をかけた作品を台無しにしてしまうことに繋がり、残念な結果に。このような悲劇を起こさないためには、ある程度“一般的な色の印象“を知っておく必要があります。

今回は、3つのトーン「ビビット」「ライト」「グレイッシュ」を比較してそれぞれの印象を見てみましょう。皆さんも、ユーザー目線に立ちどんな印象を受けるのか一緒に考えてみてください。

ビビット

ビビット ウェブサイトでの色遣いについて
色味が最も強いトーンです。元気で、活発な印象を与えます。くすみが無く、目につきやすいためロゴマークなどにも使用されやすいグループです。安っぽく見えたり、誠実さに欠ける場合もありますが、カジュアルで親しみやすさを感じます。

ライト

ライト ウェブサイトでの色遣いについて
最も明るく、色味もまだ十分残っているグループです。青や緑は特に爽やかな印象を感じ、ふんわりとやわらかなグループなので、インパクトには欠けます。女性向け商品や、ベビー用品、生活用品などに使用されることが多くあります。

グレイッシュ

グレイッシュ ウェブサイトでの色遣いについて
色味は抑え気味で、明度も低いグループです。ビビットカラーやライトカラーと比べて落ち着いた印象を与えます。暗すぎず、色味の違いもまだしっかりと感じられる色相群です。アースカラーとも呼ばれており、ナチュラルなイメージを感じます。一方で冷たい印象もあたえます。

いかがでしょうか。当たり前ですが、それぞれのトーンに良い印象と悪い印象があります。誤った色を選定すると、ユーザーの抱くイメージとのギャップで、あなたが意図しない印象を与えてしまうリスクがあるのです。

ウェブサイトの色選び、たった1つのポイントとは

これまでの章では、色味や明るさの違いからそれぞれのトーンごとに印象を持っているという話でした。では皆さんが感じたそれぞれの色トーンの印象は、ユーザーも同じように感じてくれるのでしょうか?
前述の通り、色に伝えたい全ての意味を込めることはとても難しいことです。しかし、色に抱く印象は、一般的にはそう変わらず固定化されていることも多いため、大きくイメージを外すことなく選定することが最も大切だと言えるでしょう。

つまりポイントは、【ユーザーと制作者の大幅なイメージギャップを避ける】ということです。

目立たせたいから「○○色」、高級感を与えたいから「△△トーン」といったように、主語を製作者にするのではなく、ユーザーにしてみましょう。ユーザーとのイメージギャップを減らすことで気持ちよくサイトを閲覧することができ、ユーザビリティ(特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。)の向上にも繋がるのです。

まとめ

色について、固定化されたイメージで語ることはナンセンスだと個人的には思っています。しかし、ウェブサイトにおいては違います。重要なビジネスツールであり、会社の顔といっても過言ではありません。見る人によって解釈が異なる芸術作品とは違い、万人に同じような解釈がなされて初めて力が出せるツールであるという事です。
それでも、競合他社との激戦を勝ち抜くためには個性も大変重要です。違和感のない印象を持ってもらった上で、奇抜な配色で個性を出す、あるいは、より一般的なイメージに近い色を選んで安心感を出すなど、様々な方法で独自のウェブサイトを築き上げてはいかがでしょうか?何か、ウェブサイトのデザインについてご不明な点がありましたら、お気軽にお問合せください。

大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。

関連の記事

CONTACT

ホームページ制作・Web制作に関するご質問やご相談は、
下記フォームよりお問い合わせください。

無料のお見積りや初回のご相談も承っておりますので、「まだ検討中」「ちょっと話を聞いてみたい」といった段階でも大歓迎です。
現状のホームページ診断も無料で実施中です。

0120-83-8567
平日9:00~18:00まで 定休日:土 日 祝