「自社のホームぺージを作りたいけど、どんな配色にすればよいのか分からない……」と悩んでいませんか？
配色によって、ホームぺージの印象は大きく異なります。
自社のイメージに合うホームページを作るために、配色は重要な要素と言えるでしょう。
そこで今回は、おすすめのホームぺージ配色ツールを厳選して7つご紹介します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームぺージを作る人
- ホームぺージの配色に悩んでいる人
- ホームぺージの配色見本を探している人
この記事を読めば、配色を決めるコツも分かるので、ホームぺージ作成がスムーズに進みますよ。
それではどうぞ！
目次
ホームページの配色を決める3つのコツ
ホームぺージの配色を決めるコツは、以下の3つです。
それぞれ解説します。
コーポレートカラーを活用する
コーポレートカラーとは、企業を象徴する色のこと。
企業ロゴやホームぺージに採用する企業は多いです。
例として、ヤマト運輸の個人向けサービスサイトをご覧ください。
▲出典：ヤマト運輸（個人向け）
画面左上の企業ロゴはもちろん、真ん中の荷物のお問い合わせの帯や画面右側のナビゲーションアイコンなど、各所に「黄色」と「黒色」が使われています。
いかにもヤマト運輸らしい、ホームぺージですよね。
このように、コーポレートカラーを用いれば、ホームぺージを自社のイメージに近づけることが可能です。
なお、コーポレートカラーは企業ロゴを作るときに決めます。
「まだ企業ロゴを作っていない」という方は、先に作りましょう。
ロゴは「会社の顔」であり、ホームぺージ以外でも使用するシーンが多いため、優先度が高いです。
ホームページに適したロゴとは？作り方やお役立ちサイトを紹介
色が持つイメージを知る
そもそも色には、単体でイメージがあります。
以下、色ごとにイメージをまとめた表です。
もし、コーポレートカラーがまだ決まっていない場合は、上記を参考にしてみてください。
| 赤 | 生命・愛情・情熱・太陽・恋・前向き・警告 |
| 青 | 安心感・知的・誠実・理性・清潔・若さ・冷たい |
| オレンジ | 暖かい・幸福感・元気・楽しい・好奇心 |
| 黄 | 明るい・希望・楽しい・活発・幸福・注意 |
| 緑 | 健康・若さ・自然・癒し・安全・安らぎ・保守的 |
| 紫 | 神秘的・高貴・宇宙・優雅・魅力的・霊的 |
| グレー | 落ち着き・上品・安定・調和・不安・薄暗い |
| 黒 | 神秘的・威厳・高級・暗闇・恐怖 |
そのほか、次で解説する「メインカラー」を決めるときの参考にもなるでしょう。
3つのカラーを知る
ホームぺージの配色を決めるときは、以下3つのカラーを知っておくとよいでしょう。
- メインカラー・・・主張したい色（ホームぺージの印象はこの色で決まる）
- ベースカラー・・・最も使用する面積が多いホームぺージの基礎となる色
- アクセントカラー・・・刺激や変化を与えるための色
多くの場合、メインカラーには、コーポレートカラーが利用されます。
参考に、コーポレートカラーが青色である、弊社『エックスサーバー』のサービスサイトをご覧ください。
『エックスサーバー』のサービスサイトは、以下の配色になっています。
- メインカラー・・・青色
- ベースカラー・・・白色
- アクセントカラー・・・オレンジ色
なお、これら3つのカラーはバランス（配色比率）が重要。
具体的には、メインカラー25％、ベースカラー70％、アクセントカラー5％が理想とされています。
アクセントカラーは、多用してはいけません。
使いすぎると、ユーザーの目が慣れてしまって、注意を引くことができなくなります。
ホームぺージの配色ツールを紹介
ホームぺージの配色を決めるときは、ツールを使うのがおすすめです。
ここでは、おすすめの配色ツールを以下3つのカテゴリに分けて、紹介しますね。
色の三属性をもとに導き出す配色ツール
メインカラーなど、すでに使用する色がいくつか決まっている方は、「色の三属性をもとに導き出す配色ツール」がおすすめです。
基準の色を指定すれば、候補となる色を導き出してくれます。
そもそも色の三属性とは、「色相」「明度」「彩度」のことです。
- 色相・・・赤、青、黄など、色を特徴づける「色み（いろみ）」のこと
- 明度・・・色の「明るさ」のこと
- 彩度・・・色の「鮮やかさ」のこと
3つのツールを色の三属性について解説しながら紹介するので、ぜひ参考にしてください。
COLOR SUPPLY
▲出典：COLOR SUPPLY
『COlOR SUPPLY』は、カラーホイール（12色の色相環）を利用した配色ツールです。
カラーホイールを使うなら、以下の3つの配色を知っておくとよいでしょう。
- ダイアード配色・・・色相環で向かい合う反対の色（補色）を組み合わせる方法
- アナロガス配色・・・色相環で隣り合う色（近似色）を組み合わせる方法
- トライアド配色・・・色相環を正三角形で3等分した位置にある3色を組み合わせる方法
一つずつやってみますね。
ダイアード配色
まず「次へ」のボタンをクリックして、カラーホイールの右下に「補色する」が表示されたことを確認します。
そのままカラーホイールの「青色」をクリックしてみると、青色の補色である「オレンジ色」が表示されました。
▲出典：COLOR SUPPLY
CTA（行動喚起）など重要なボタンは、メインカラーの補色を使うと、目立たせることができますよ！ 弊社『エックスサーバー』では、CTAボタンに、メインカラーの青に対して、補色のオレンジ色を使用しています。
アナロガス配色
次に、アナロガス配色（近似色）を試してみましょう。
「アナロジー」という表記に変わるまで、「次へ」をクリックします。
▲出典：COLOR SUPPLY
アナロガス配色は、隣同士の組み合わせであり、メインカラーと馴染みやすく相性がよ良いとされています。
たとえばメインカラーが決まっていて、まとまりのよい配色にしたい場合は、おすすめです。
トライアド配色
最後に、トライアド配色を試してみましょう。
「トライアド」という表記に変わるまで、「次へ」をクリックします。
▲出典：COLOR SUPPLY
指定した色に対して、正三角形に位置する色が分かります。
トライアド配色は、補色よりも馴染みやすく、近似色ほど偏った印象にもならないので、3色のバランスを保ちたいときに、おすすめです。
CopyPalette
▲出典：CopyPalette
『CopyPalette』は、選んだ1色に対して、明度の違う色を提案してくれるツール。
たとえば、青色を選んだ場合は、明るい色と暗い色が隣り合わせで表示されます。
ホームぺージの配色は、色数が増えるほど難しくなります。
追加の色選びに迷った場合は、以下の2つを試してください。
- 同じ色相の明度が異なる色（例：青に対して、濃い青や薄い青）
- 同じ明度の色相が異なる色（例：薄い青に対して、薄い緑や薄い黄色など）
色彩もしくは明度のどちらかが、他の色と合っていれば、調整は取りやすいです。
colorbase
▲出典：colorbase
『colorbase』は、総合的なカラーツール。色に関するさまざまな情報を取得できます。
たとえば上記は、画面右上の検索窓から「#286ed3」というカラーコードを調べた結果です。
ページをスクロールすると、さらに情報を取得できますよ。
▲出典：colorbase
指定した色を基準に、以下のような情報を取得することが可能です。
- 補色
- 代替
- 色相
- 色相シミュレーション
- コントラスト
- トリアディック（トライアド）
- スクエア
- 分離補色
- UI
- 文字色／背景色
- 同じ明るさ
このように、さまざまな情報をもとに、配色を決定するためのサポートをしてくれるので、役に立つでしょう。
デモサイトでプレビューできる配色ツール
デモサイトでプレビューできる配色ツールは、以下の方におすすめです。
- まずは、さまざまな配色パターンを見てみたい人
- コーポレートカラーとは異なる配色のホームぺージを作りたい人
ここで紹介するツールは、配色パターンをいくつか提案してくれます。
また選んだ配色パターンは、自動でデモサイトに反映されるため、すぐにイメージを確認することが可能です。
デモサイトがあれば、まだホームぺージ作成に取り掛かっていない方でも、配色を確認できますよね。
すでに取り掛かっている方も、わざわざ自社のホームぺージに配色を設定する必要がないため、手間が省けるでしょう。
palettemaker
▲出典：palettemaker
『palettemaker』は、配色をデモサイトでプレビュー（確認）できるツール。
配色を提案してくれるだけでなく、色数も変更できるため、よりイメージに近づけながら確認できます。
使い方は簡単。以下の手順で進めてください。
- 上部中央にある「Mixed」を「web／/Mobile UI」に変更
- 左サイドメニューにある「Filter」をクリックして、「メインカラー」を選択
- そのまま「Filter」メニューにある「色数」を選択
- 左サイドメニューにある「配色パターン」を選んで、プレビューを確認する
イメージと近いデザインのデモサイトがある場合は、「Start the generator」をクリックすれば、さまざまな配色パターンを一覧表示で確認することが可能です。
▲出典：palettemaker
なお選んだ配色パターンは、「上矢印（↑）ボタン」をクリックすれば、さまざまな形式でエクスポートできますよ。
▲出典：palettemaker
記載されたカラーコードを自社のホームぺージに反映して、イメージどおりになるか確認しましょう。
6桁の16進数で表記される色番号のこと。番号の前に「#」を付けます。
（例）白「#FFFFFF」、黒「#000000」など
『palettemaker』は、カラーコードを指定して配色を確認することもできます。
コーポレートカラーなど、使用する色がいくつか決まっている場合は、配色の確認用ツールとしても使用できるでしょう。
▲出典：palettemaker
配色パターン見本40選
▲出典：配色パターン見本40選
『配色パターン見本40選』は、スマホのデモサイトで配色を確認できるツール。
配色を以下6つのカテゴリから選べます。
- 万人受けする配色
- 親近感を感じさせる配色
- クール系の配色パターン
- 元気・アクティブ系の配色パターン
- かわいい系の配色パターン
- 個性的な配色
紹介されている配色は固定されており、組み合わせはそこまで多くありません。
しかしその分、「まだイメージを何も持っていない」という方なら、絞り込まれた配色の中から選べるため、決めやすいでしょう。
画像の構成色をヒントにできる配色ツール
配色ツールには、画像の構成色を抽出するタイプもあります。
すでに完成された画像は、配色が整っていることが多いです。
ホームぺージ専用の配色ツールではないものの、キャンペーンなどの特集ぺージを作るときにおすすめです。
それぞれ例をだしながら紹介しますね。
Adobe Color
▲出典：Adobe Color
『Adobe Color』は、デザインツールで有名なAdobe社が提供している配色ツールです。
さまざまな機能があるものの、ここでは「探索」機能を解説しますね。
たとえば「海」と検索すると、関連する画像が多く表示されます。
気に入った画像をクリックすれば、構成色がカラーコードで確認できますよ。
▲出典：Adobe Color
試しに配色ツールの『palettemaker』で、上記の配色を指定してみました。
▲出典：palettemaker
カワウソ
このように、写真やイラストではなく、配色でイメージを表現したい場合などに、この『Adobe Color』の「探索」機能は、重宝するでしょう。
ColorDrop
▲出典：ColorDrop
『ColorDrop』は、画像やテキストから配色を提案してくれるツールです。
「Scan Image」から画像をアップロードすれば、自前で用意した画像の構成色を表示してくれます。
▲出典：ColorDrop
そのほか、テキストの「色名検索」にも対応していますよ。
試しに、画面右上の検索窓から「blue」と検索してみた結果が、以下のとおりです。
▲出典：ColorDrop
近似色だけではなく、さまざまな配色パターンが表示されていますね。
もしかすると、「ちょっと、ホームぺージには使いづらいのでは？」と感じる方もいるかもしれません。
しかし、実際に試してみると、意外に使える配色もありますよ。
試しに、以下の配色パターンを『palettemaker』のデモサイトでプレビューしてみますね。
▲出典：ColorDrop
▲出典：palettemaker
イメージが湧かない場合は、こうしてデモサイトまたは、自社のホームぺージに反映して確認しましょう。
まとめ
今回の記事では、ホームぺージの配色に役立つツールを、厳選して7つ紹介しました。
- 「コーポレートカラー」は自社を象徴する色で、ホームぺージに使われることが多い
- 「メインカラー」「ベースカラー」「アクセントカラー」は、配色比率を意識する
- メインカラーが決まっているなら、「色の三属性をもとに導き出す配色ツール」がおすすめ
- ゼロベースで考えたい方は、「デモサイトでプレビューできる配色ツール」がおすすめ
配色は、ホームぺージの見やすさにも影響を与えます。
よろしければ、以下の記事も併せて参考にしてください。
見やすいホームページは何が違うのか!?押さえるポイントを紹介
それでは、素敵なホームページの完成を祈っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※のレンタルサーバーであり、19万社の導入実績があります。
12月19日12時まで、サーバー利用料金が最大30%オフとなる『冬のトク割キャンペーン』を開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年10月時点、W3Techs調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
