ホームページ配色の基本ルール
今回は、ホームページ制作における「配色の基本ルール」について解説します。

配色の選び方は「信頼できそう」「オシャレ」「安心感がある」といった印象や、サイト全体の雰囲気を決めます。
この記事では、配色が大切な理由や3色ルール、失敗しないコツをまとめました。
配色の基本を押さえて、本当に伝えたい内容を届けられるホームページを作れるように、ぜひ参考にしてください。
配色が大切な理由
ホームページ制作で配色が大切な理由は、色味によってサイト全体の雰囲気や訪問者の印象が変わるからです。
例えば配色によって、次のような印象を与えられます。
- ブルー:誠実さや信頼感
- ピンク・ベージュ:柔らかさや親しみやすさ
- レッド・オレンジ:活気や行動を促す印象

ホームページの配色によって、訪問したお客様に安心感や信頼感といった雰囲気を伝えられます。
基本は3色ルール

サイトの配色は基本的に3色で構成すると整いやすくなります。
例えば、OLTANAデモサイト(No.005 DEMO5)も写真以外は主に3色で配色されています。


こちらの画像をもとに3色のバランスと色の選び方について解説します。
ルール1. ベースカラー(70%)

ベースカラーは、背景のような大部分を占める場所に使う色です。
基本的には白や薄いグレーなど、落ち着いた色を選ぶのがおすすめです。


実際にOLTANAデモサイトでも、背景は白や淡いトーンが多く使われており、控えめな色を選ぶことで、文章や写真が自然に引き立ち、全体の印象が整います。
ルール2. メインカラー(25%)

メインカラーは、主に文字色に使う色です。
背景が白や淡い色なら黒系、暗い背景なら白を選ぶのがおすすめです。
また文字色に黒を使う場合は、真っ黒よりダークグレーにすると画面全体が柔らかい印象になります。


例えば、こちらのデモサイト(No.005 DEMO5)でも文字色は「#333333」を採用しており、黒「#000000」よりも少し落ち着いた雰囲気に仕上げています。
ルール3. アクセントカラー(5%)

アクセントカラーは、お問い合わせボタンや見出しなどに使う色です。
ここにはブランドカラーに近い色を採用しているケースが多く見られます。
特にボタンの色は、お客様の行動を促す重要な要素です。実際に色を変更することでクリック率が上がることもあり、アクセントカラーの配色は成約にも直結します。


どんな色にするべきか迷ったら、大手ECサイトのボタン配色を参考にするのもおすすめです。
OLTANAでテーマカラーを設定する方法

ホームページのカラーは、次の手順で設定していきます。


- テーマカラー:アクセントカラー(5%)
- 文字色:メインカラー(25%)
- 背景色:ベースカラー(70%)


前の章で紹介した3色ルールを意識しながら、カラーを設定してみてください。
配色を決める2つの方法
配色を決める方法は、主に次の2つです。

色を決める際は、完全にオリジナルで考えるのではなく、他のサイトや配色ツールを参考に決めていくのがおすすめです。
1. 業種やブランドカラーに合わせる
まずは自分の業種やサービスの雰囲気に合わせて色を検討してみましょう。
- 士業:信頼感のあるネイビー系
- 飲食店:食欲をそそる赤やオレンジ系
- 美容サロン:柔らかい雰囲気のピンクなど
OLTANAデモサイトにも、業種ごとの豊富なデザイン例を用意しています。

実際にプロのデザイナーが配色しているため、デモサイトを参考にイメージを掴んでみてください。
2. 配色例や配色ツールを参考にする
色選びに迷ったら、プロが作った配色例や無料で使える配色ツールを参考にしてみましょう。
- 配色例:「Canva 配色パターン・色の組み合わせ100選」「お道具箱」
- 配色ツール:「Canva カラーパレットジェネレーター」「Adobe Color」

配色例やツールを使えば、感覚に頼らず客観的にバランスの取れた色を選べるため、仕上がりのクオリティが安定します。
配色で失敗しないコツ
配色で失敗しないためには、いくつかの基本を意識することが大切です。
- 色を使いすぎない:色を使いすぎると、まとまりがなくなる
- コントラストをつける:明暗差があると読みやすくなる
- アクセントカラーを乱用しない:多すぎると本当に強調したい部分が目立たなくなる
- スマホでの見え方も確認する:文字が小さくなったり、色の印象が変わることがある

これらのポイントを意識して、客観的に見やすく、本当に伝えたい内容を届けられるデザインに仕上げましょう。
色の決め方まとめ

ホームページの配色によって、サイト全体の印象が決まり、お客様に安心感や信頼感が伝わります。
配色を決める際は、次の3色で構成しましょう。
- ベースカラー(70%):主に背景
- メインカラー(25%):文字色など
- アクセントカラー(5%):ボタンや見出しなど
また、色を選ぶときはOLTANAデモサイトや配色例・ツールなどを参考にしてみてください。
配色の基本ルールを守り、統一感のあるサイトデザインに仕上げましょう。
困ったら相談してみよう!
- 相談先→