ホームページ作成「グーペ」 トップ » グーペノート» ホームページ作成» カラーパレット選定ガイド。初心者でも迷わない配色ルール

カラーパレット選定ガイド。初心者でも迷わない配色ルール

ホームページを開いた瞬間、訪問者が最初に感じ取る情報の80%以上が視覚要素と言われています。
その中でも色は感情に直結し、信頼感・温かみ・高級感などブランドイメージを数秒で伝える強力なシグナルです。たとえば青は誠実さ、オレンジは親しみ、黒は高級感を印象づけます。逆に読みにくい配色やチカチカする色の組み合わせは離脱率を高め、SEOにも悪影響を及ぼします。

配色の基礎用語を5分でマスター

用語説明ポイント
色相色みそのもの（赤・青など）色相環で向かい合う色は補色関係
彩度鮮やかさの度合い彩度が高いほど派手、低いほど落ち着き
明度明るさの度合い高明度は柔らかく、低明度は重厚感
トーン色相・彩度・明度の組み合わせトーンをそろえると統一感
コントラスト色同士の差可読性とアクセシビリティの鍵

大切なのは “高彩度×多色使い＝目立つ”わけではないということ。トーンをそろえた2〜3色+アクセント色1色が基本形です。

色が持つイメージ早見表

色主なイメージ適した用途の例
赤情熱・緊急・エネルギーセールバナー・警告表示
オレンジ親しみ・活力・暖かさお知らせバナー・CTAボタン
黄希望・注意・陽気さハイライト・キッズ向けデザイン
緑安心・自然・成長環境・健康・金融サイト
青信頼・知性・清涼感BtoB・IT・士業サイト
紫高級感・神秘・創造性美容・ラグジュアリーブランド
ピンク柔らかさ・可愛らしさコスメ・女性向けEC
黒重厚感・権威・高級ファッション・ハイエンド製品
白清潔・シンプル・余白医療・ミニマルデザイン
グレー中立・調和・控えめバックグラウンド・補助テキスト
茶温もり・安定・伝統カフェ・クラフト系ブランド

この表を参考にすると、ターゲットの感情やブランドの個性に合わせた色選びがしやすくなります。

カラーパレット作成5ステップ

1. サイト目的とターゲットを確認

  • BtoB企業サイトなら信頼感を与える寒色系が無難。
  • キッズ向けECなら彩度高めの暖色系で楽しい印象。

2. 主色を1色決定

ブランドロゴがある場合はロゴカラーを主色に採用。ロゴがまだ無い場合はターゲット感情に合う色を色相環から選びましょう。

3. サブ色でトーンを整える

主色の隣接色（アナログ配色）または同一トーンのグレーを組み合わせると統一感が出ます。割合は主色 60%・サブ色 30%が目安。

4. アクセント色を1色だけ

補色または高彩度色を10%以下で使い、CTAボタンのクリック率を上げます。CTAにはブランドイメージを損なわない高コントラスト色を選定。

5. グレースケール&コントラスト確認

Adobe XDやFigmaのモードでサイトをグレースケール表示し、情報階層が色に頼らず伝わるかチェック。WCAG2.1のコントラスト比「4.5：1」以上が推奨。

人気カラースキーム5種類を図で理解しよう

配色を学ぶとき、色相環を使って色の位置関係を視覚化するのが一番早い方法です。ここでは実務でもよく使われる5つのスキームを取り上げ、特徴と相性が良いケースを挙げます。

類似配色 (Analogous)

出典：Color Preview
  • 特徴
    • 色相環で隣り合う3色を使用。まとまりがあり安心感を演出
  • 相性が良いケース
    • 健康・自然・教育サイト

補色配色(Complementary)

出典：Color Preview
  • 特徴
    • 色相環で真向かいにある2色をペアに。コントラストが強く目立つ
  • 相性が良いケース
    • CTAボタンや見出しの強調

トライアド配色(Triad)

出典：Color Preview
  • 特徴
    • 120°間隔で等辺三角形を作る3色。バランスと鮮やかさの両立
  • 相性が良いケース
    • 若年層向けサービス、エンタメ

分裂補色配色(Split Complementary)

出典：Color Preview
  • 特徴
    • 補色の片方を隣の2色に分けた計3色。補色より刺激がマイルド
  • 相性が良いケース
    • コーポレートサイト、金融系

テトラード(Tetrad)

出典：Color Preview
  • 特徴
    • 2組の補色で長方形を作る4色。色数は多いがメリハリが付く
  • 相性が良いケース
    • 大規模ポータル、キャンペーン特設

業種別おすすめカラーパレット例

業種主色サブ色アクセント理由
IT・BtoB#005B96#E5F1FB#F49B00信頼＋未来感
美容サロン#E94E77#FFE6EC#FFC107温かみと華やかさ
士業#2E3A46#F0F2F5#0066CC落ち着きと誠実さ
カフェ#7B5740#FDF7F0#FF7043ナチュラル＆安心感
学習塾#3366CC#EEF4FF#FFCC00知性＋親しみ

活用ヒント：パレットはSass変数やCSSカスタムプロパティに登録しておくと、全サイトの色変更が一括で行えます。

便利ツール＆サイトで色選びを時短

ツールURL特徴
Adobe Colorhttps://color.adobe.com/ja/配色ルール別に自動生成、CC連携
Coolorshttps://coolors.co/スペースキーでランダム生成、ロック保存可
Color Hunthttps://colorhunt.co/人気パレットをギャラリー閲覧
Picularhttps://picular.co/キーワードから色を検索、写真も同時表示

やりがちな配色ミスと回避法

  1. 高彩度色の多用 → トーンを落とし彩度バランスを取る。
  2. CTAと背景が同系色 → 補色や明度差でボタンを際立たせる。
  3. テキストと背景のコントラスト不足 → 「4.5：1」以上かWebAIMコントラストチェッカーで検証。

アクセシビリティ：色弱シミュレーションとWCAG

多様な色覚対応

世界人口の約8%が何らかの色覚特性を持つと言われます。
https://color.adobe.com/ja/create/color-accessibilityなどのシミュレーターで潜在的なカラーの競合を確認。

コントラスト比

WCAG2.1の達成基準AAでは本文と背景のコントラスト比を「4.5：1」以上、見出しは「3：1」以上に保つことが推奨されています。
https://color.adobe.com/ja/create/color-contrast-analyzerなどでコントラスト比を確認。

まとめ ―― ブランドを色で語ろう

  • カラーパレットの作り方は「目的確認→主色→サブ色→アクセント→コントラスト検証」の5ステップ。
  • トーンをそろえ、アクセントは1色だけが迷わないルール。
  • Adobe ColorやCoolorsを活用して効率的に配色を決定。さらに色覚やコントラスト比のアクセシビリティ確認。
  • 配色はブランドの感情設計。色で語る物語がユーザーの心を動かします。

ホームページ作成を検討している方へ

グーペなら、信頼度アップやブランド強化に有効な独自ドメインのホームページをどこよりも早く簡単に作成できます。
簡単に導入できるホームページ作成サービス1、使いやすいホームページ作成サービス2、利用者満足度3の3部門でNo.14を獲得

  1. 導入の容易性 ↩︎
  2. 使用の容易性 ↩︎
  3. 利用者満足度 ↩︎
  4. インターネットアンケートによりホームページ作成サービスのうち主要含む10社について比較。日本マーケティング・リサーチ機構調べ。2022年1月調査。 ↩︎
ホームページの作成を、15日間無料でおためしできます。
無料おためしを始める

▼関連記事
・【初心者向け】ゼロからわかるホームページ作成完全ガイド
・初心者でもわかる！信頼を高めるサイト構成とページ設計ガイド

この記事を書いた人

「グーペノート」編集部

ホームページ作成サービス「グーペ」が運営しているオウンドメディアです。ホームページ作成のノウハウを発信し、みなさまのサービスやブランドを全国に届けるお手伝いをします。

グーペメディアとは？

新着記事