ホームページカラーの配色決定の方法とコツ｜HTMLでの表現と便利ツールも解説｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

ホームページを制作するうえで色選びは非常に重要な工程です。

なんとなく無難な色だけでホームページを作ると、あなたの会社の良さや魅力が伝わらない平凡なサイトになってしまうかもしれません。ホームページカラーを決めるには、色の種類や組み合わせについて理解しましょう。

この記事では、ホームページカラーの決め方を詳しく解説します。CSS・HTMLでの色の表し方や、色選びに便利なツールも紹介しているのでぜひ最後までご覧ください。

ホームページカラーの種類

ホームページカラーは「メインカラー」「ベースカラー」「アクセントカラー」の3種類に分類できます。

• メインカラー：ホームページの主役となる色

• ベースカラー：余白・背景に使われる色

• アクセントカラー：メイン・ベースを引き立てる色

ここではiPhoneで有名なAppleのホームページを例に挙げてみましょう。

▲Apple

メインカラーの黒、ベースカラーの白で高級感や都会的な印象を与えつつ、アクセントカラーのブルーが遊び心を演出しています。デザイン性・実用性に優れた製品を多数生み出しているAppleらしいホームページです。

ホームページカラー（配色）の決め方

ホームページカラーは「メインカラー」「ベースカラー」「アクセントカラー」の順番で決めましょう。ここではそれぞれの決め方を解説します。

メインカラー｜コーポレートカラーから決める

メインカラーはホームページの主役となる色で、会社の印象を大きく左右します。 コーポレートカラーが決まっているならその色を利用しましょう。

コーポレートカラーとはロゴマークや看板、製品に使われる色のことです。たとえばスターバックスといえば自然と緑色が頭に浮かぶように、コーポレートカラーは企業を象徴する色でありホームページのメインカラーに最適です。

コーポレートカラーが決まっていない場合、自社の理念や競合との兼ね合いからふさわしい色を選びましょう。

ベースカラー｜企業イメージから決める

ベースカラーはおもにホームページの背景に使われ、サイト内でもっとも大きな面積を占めます。与えたいイメージで色を選ぶとよいでしょう。

• クリーンなイメージ：白

• 高級感あるイメージ：黒

• 爽やかなイメージ：ブルー

• ナチュラルなイメージ：ベージュ

• ポップなイメージ：オレンジ、黄色

• 女性らしいイメージ：ピンク

• 知性的で爽やかなイメージ：青

• 元気で活力的なイメージ：赤

• エキゾチックで高貴なイメージ：紫

たとえば病院や弁護士事務所、学校などはクリーンなイメージの白が合います。高級ホテルや高級車など、ホームページに重厚感を持たせたいときは黒が効果的です。

メインカラーとの相性や、背景としての使いやすさも考慮するとより洗練されたホームページに仕上がるでしょう。

アクセントカラー｜メイン・ベースの関係から決める

アクセントカラーはメインカラー・ベースカラーを決めてから、それぞれが引き立つ色を選択しましょう。お問い合わせフォームや資料請求ボタンにアクセントカラーを使うことで、ユーザーに届けたい情報を目立たせることができます。

アクセントカラーの色選びに自信がない人は、メインカラーの補色を使えばメリハリのあるホームページカラーを作れます。

■代表的な補色の組み合わせ

• 赤系×青緑系

• 青系×オレンジ系

• 黄緑系×赤紫系

• 黄色系×青紫系

とはいえ、知識として理解できてもホームページ全体のデザインや雰囲気を鑑みて自分で配色を決定するのは難しいですよね。そういった場合はさまざまな業界・業種のホームページ制作の実績があり、デザインの最新トレンドにも対応できるWeb制作会社に相談するのも一つの選択肢となります。

LeadGridは自由度の高いデザインでサイトを制作できる国産CMSです。感覚ではなく、根拠のある配色・デザインを通して企業理念の表現やブランディングへの寄与を得意としております。堅実なデザインからポップなデザインまで、幅広い要望に応じることが可能です。

サイト種別の事例をまとめた無料配布資料「LeadGridサイト制作事例集」もご用意しておりますので、ぜひ下記より無料でダウンロードし、比較検討にお役立てください。

LeadGridサイト制作事例集|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

ホームページカラー（配色）による印象の違い

ここからは実際のホームページを参考に色による印象の違いを解説します。

比較するのはファミリーレストラン3社。それぞれのホームページが与える印象を考えながらご覧ください。

ガスト｜情熱的・活発なイメージの赤色（#cf00e）

出典：ガスト

ガストはロゴマークや看板でおなじみの赤色をホームページのメインカラーに採用しています。

赤は情熱的・活発な印象を与えるほか、人間の食欲や物欲を刺激する色。チーズinハンバーグやステーキなどガッツリ系メニューが人気のガストによく合っていますね。

サイゼリヤ｜落ち着ける場所をイメージする緑色（#264d46）

出典：サイゼリヤ

サイゼリヤはロゴマークの鮮やかな緑ではなく、深い緑色をメインカラーに使っています。理念である「毎日の暮らしの豊かさを、食から」のイメージにふさわしい堅実な色ですね。

緑色は安心感や安らぎを与えてくれるため、今回比較した3社のなかでもっとも落ち着いた印象に仕上がっています。

デニーズ｜フレッシュで楽しいイメージの黄色（#f1c71d）

出典：デニーズ

デニーズはビビッドな黄色をホームページに採用しています。

フレッシュな黄色が与えるのは、明るさや楽しさといったポジティブな印象。ポップな色合いはデニーズの料理のイメージとも合っています。

これまで紹介した3つの事例を通し、与えたい印象によってメインで使うべき色が大きく変わるということが分かりました。しかし、

「自社サイトはさわやかなイメージで作って欲しいけど、候補の色かいくつか思い浮かぶ。どの色にすれないいか分からない」
「自社の場合、事業の真面目さとスタートアップの情熱感を両立できるようなデザインにしたいけど、相反するようなイメージだから色が決まらない」

とお悩みの方も多いのではないでしょう。そんな時は高いデザイン力が評価されている国産CMS「LeadGrid」に一度ご相談ください。

感覚ではなく、根拠のある配色・デザインを通して企業理念の表現やブランディングへの寄与を得意としております。企業認知につながるようイメージカラーをメインに取り入れたデザインやターゲットユーザーを意識し、健康的で若々しい配色まで、サイト制作の目的や達成したいゴールに応じて最適なデザインをご提案いたします。

サイト種別の事例をまとめた無料配布資料「LeadGridサイト制作事例集」もご用意しておりますので、依頼先にお悩みの方はぜひ下記より無料でダウンロードし、比較検討にお役立てください。

LeadGridサイト制作事例集|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

Web上で色を表す方法

Web上で色を指定するには、プログラミング言語のHTMLとCSSを使います。制作会社に依頼する場合は細かい使い方まで理解する必要はありませんが、下記を理解しておけば制作会社ともスムーズにやりとりできるでしょう。

• HTML：Webサイトの構造を作るための言語

• CSS：Webサイトのレイアウトやデザインなどを指定する言語

Web上で色を表す方法①HTML（カラーコード・カラーネーム）

HTMLで色を指定するには「カラーコード」「カラーネーム」の2つの方法があります。

カラーコードとはWeb上で色を指定するためのコードのこと。「#（ハッシュ）」に続く6桁の16進数で表されます。6桁の並びはR（Red：赤）、G（Green：緑）、B（Blue：青）で2桁ずつ構成されており、RGBの強度の組み合わせによって色が表現される仕組みです。

■カラーコードの例

• #000000（黒）

• #ff0000（赤）

• #0000ff（青）

• #ffffff（白）

対してカラーネームとは、Web上で頻繁に使用される色につけられた名前です。理論上RGBで表現できる色は約1600万種類。すべてをコードで管理するのは大変なため、「black（黒）」「red（赤）」「blue（青）」など主要な147色にはカラーネームが付けられています。

■カラーネームの例

• black

• red

• aqua

• beige

• limegreen

これらのカラーコード・カラーネームは、以下のようにHTMLタグと組み合わせることで文字色や背景色を指定できます。

<font color="カラーコードorカラーネーム">ここの文字色が変わります</font>

Web上で色を表す方法②CSS

HTMLタグでも文字色や背景色は指定できますが、現在ではデザインに関わる要素はスタイルシートとしてCSSファイルに記述する方法が推奨されています。

最新のHTMLバージョンではデザイン要素のある一部のHTMLタグが廃止されているため、デザイン関連の指定はHTMLではなくCSSで行うと覚えておくとよいでしょう。

色指定には前述のカラーコード、カラーネームのほか、RGB、HSLといったCSS独自のコードも使用できます。また、HTMLでCSSを読み込むには外部CSSファイルを作成して紐づけるだけでなく、HTML内に直接CSSを記述する方法も有効です。

カラーコードを調べるサイトや色見本、配色ツールも便利

ホームページカラーを決定するときはツールが役立ちます。ここではシチュエーションごとに最適なツールを3つ紹介します。

• iromiru
• Adobe Color CC
• Happy Hues

カラーコードを調べたいとき｜iromiru

出典：iromiru

iromiruは画像や画像URLからカラーコードを調べられるサイトです。アップロードした画像をクリックするだけで簡単にカラーコードを抽出できます。

配色パターンを探したいとき｜Adobe Color CC

出典：Adobe Color CC

Adobe Color CCはカラーホイールを動かすだけで直感的に配色パターンを決められる無料デザインソフトです。探索モードを利用してカラーパレットを探すこともできます。

色の組み合わせをシミュレーションしたいとき｜Happy Hues

出典：Happy Hues

Happy Huesでは、選択した配色パターンをサイト全体で確認できます。カラーパレットの具体的な使い方がわからない人におすすめです。

ホームページは色の組み合わせで印象が変わる

同じ内容のホームページであっても、使われる色によって受ける印象は大きく異なります。

ホームページ制作を依頼する場合はカラーコードまでしっかり調べておく必要はありませんが、おおまかな希望を持っておくと円滑にプロジェクトが進行します。

自分でホームページカラーを決めるのが難しい人は、デザイン力が強い制作会社に相談する方法もあります。

スタートアップから上場企業まで、Web制作の支援実績が豊富なGIGが開発したCMS（コンテンツマネジメントシステム）である「LeadGrid」なら、デザイン性とリード獲得に強いホームページを制作可能です。

いくらデザイン性の高いホームページでも、担当者レベルでの操作が難しければWeb集客の施策を継続できないでしょう。LeadGridはドラッグ＆ドロップの直感的な操作でWebページの更新・編集が行えるうえ、フォーム管理機能やホワイトペーパーの自動ダウンロード機能、顧客管理機能など、リード獲得に必要な機能が揃っています。

Webサイト制作実績はこちら

LeadGridの詳細はこちら