ホームぺージを開設するなら今!

国内シェアNo.1のレンタルサーバー
\エックスサーバーのお得な情報/

※ 2023年10月時点、 W3Techs調べ。

ホームページの配色ツール厳選7つ!基礎知識やコツも解説

\この記事をシェアする/

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

この記事のレベル
初心者
(3.5)
重要度
(3.5)
難しさ
(2.0)

「自社のホームぺージを作りたいけど、どんな配色にすればよいのか分からない……」と悩んでいませんか?

配色によって、ホームぺージの印象は大きく異なります。
自社のイメージに合うホームページを作るために、配色は重要な要素と言えるでしょう。

そこで今回は、おすすめのホームぺージ配色ツールを厳選して7つご紹介します。

カワウソ

この記事は次のような人におすすめ!

  • はじめてホームぺージを作る人
  • ホームぺージの配色に悩んでいる人
  • ホームぺージの配色見本を探している人

この記事を読めば、配色を決めるコツも分かるので、ホームぺージ作成がスムーズに進みますよ。

それではどうぞ!

ホームページの配色を決める3つのコツ

ホームぺージの配色を決めるコツは、以下の3つです。

それぞれ解説します。

コーポレートカラーを活用する

コーポレートカラーとは、企業を象徴する色のこと。
企業ロゴやホームぺージに採用する企業は多いです。

例として、ヤマト運輸の個人向けサービスサイトをご覧ください。

ヤマト運輸(個人向け)

▲出典:ヤマト運輸(個人向け)

画面左上の企業ロゴはもちろん、真ん中の荷物のお問い合わせの帯や画面右側のナビゲーションアイコンなど、各所に「黄色」と「黒色」が使われています。

いかにもヤマト運輸らしい、ホームぺージですよね。

このように、コーポレートカラーを用いれば、ホームぺージを自社のイメージに近づけることが可能です。

なお、コーポレートカラーは企業ロゴを作るときに決めます。

「まだ企業ロゴを作っていない」という方は、先に作りましょう。
ロゴは「会社の顔」であり、ホームぺージ以外でも使用するシーンが多いため、優先度が高いです。

ホームページに適したロゴとは?作り方やお役立ちサイトを紹介

色が持つイメージを知る

そもそも色には、単体でイメージがあります。

以下、色ごとにイメージをまとめた表です。
もし、コーポレートカラーがまだ決まっていない場合は、上記を参考にしてみてください。

生命・愛情・情熱・太陽・恋・前向き・警告
安心感・知的・誠実・理性・清潔・若さ・冷たい
オレンジ 暖かい・幸福感・元気・楽しい・好奇心
明るい・希望・楽しい・活発・幸福・注意
健康・若さ・自然・癒し・安全・安らぎ・保守的
神秘的・高貴・宇宙・優雅・魅力的・霊的
グレー 落ち着き・上品・安定・調和・不安・薄暗い
神秘的・威厳・高級・暗闇・恐怖

そのほか、次で解説する「メインカラー」を決めるときの参考にもなるでしょう。

3つのカラーを知る

ホームぺージの配色を決めるときは、以下3つのカラーを知っておくとよいでしょう。

ホームぺージの3つのカラー
  • メインカラー・・・主張したい色(ホームぺージの印象はこの色で決まる
  • ベースカラー・・・最も使用する面積が多いホームぺージの基礎となる色
  • アクセントカラー・・・刺激や変化を与えるための色

多くの場合、メインカラーには、コーポレートカラーが利用されます。

参考に、コーポレートカラーが青色である、弊社『エックスサーバー』のサービスサイトをご覧ください。

エックスサーバーのコーポレートカラーは青

エックスサーバー

『エックスサーバー』のサービスサイトは、以下の配色になっています。

エックスサーバー公式サイトの配色
  • メインカラー・・・青色
  • ベースカラー・・・白色
  • アクセントカラー・・・オレンジ色

なお、これら3つのカラーはバランス(配色比率)が重要
具体的には、メインカラー25%、ベースカラー70%、アクセントカラー5%が理想とされています。

配色の黄金比率
注意

アクセントカラーは、多用してはいけません。
使いすぎると、ユーザーの目が慣れてしまって、注意を引くことができなくなります。

ホームぺージの配色ツールを紹介

ホームぺージの配色を決めるときは、ツールを使うのがおすすめです。

ここでは、おすすめの配色ツールを以下3つのカテゴリに分けて、紹介しますね。

色の三属性をもとに導き出す配色ツール

メインカラーなど、すでに使用する色がいくつか決まっている方は、「色の三属性をもとに導き出す配色ツールがおすすめです。

基準の色を指定すれば、候補となる色を導き出してくれます。

そもそも色の三属性とは、「色相」「明度」「彩度」のことです。

色の三属性
  • 色相・・・赤、青、黄など、色を特徴づける「色み(いろみ)」のこと
  • 明度・・・色の「明るさ」のこと
  • 彩度・・・色の「鮮やかさ」のこと

3つのツールを色の三属性について解説しながら紹介するので、ぜひ参考にしてください。

COLOR SUPPLY

COlOR SUPPLY

▲出典:COLOR SUPPLY

『COlOR SUPPLY』は、カラーホイール(12色の色相環)を利用した配色ツールです。

カラーホイールを使うなら、以下の3つの配色を知っておくとよいでしょう。

  1. ダイアード配色・・・色相環で向かい合う反対の色(補色)を組み合わせる方法
  2. アナロガス配色・・・色相環で隣り合う色(近似色)を組み合わせる方法
  3. トライアド配色・・・色相環を正三角形で3等分した位置にある3色を組み合わせる方法

一つずつやってみますね。

ダイアード配色

まず「次へ」のボタンをクリックして、カラーホイールの右下に「補色する」が表示されたことを確認します。

そのままカラーホイールの「青色」をクリックしてみると、青色の補色である「オレンジ色」が表示されました。

COlOR SUPPLY(ダイアード配色)

▲出典:COLOR SUPPLY

メモ

CTA(行動喚起)など重要なボタンは、メインカラーの補色を使うと、目立たせることができますよ! 弊社『エックスサーバー』では、CTAボタンに、メインカラーの青に対して、補色のオレンジ色を使用しています。

エックスサーバーのアクセントカラーは補色のオレンジ色

エックスサーバー

アナロガス配色

次に、アナロガス配色(近似色)を試してみましょう。
「アナロジー」という表記に変わるまで、「次へ」をクリックします。

COlOR SUPPLY(アナロガス配色)

▲出典:COLOR SUPPLY

アナロガス配色は、隣同士の組み合わせであり、メインカラーと馴染みやすく相性がよ良いとされています。
たとえばメインカラーが決まっていて、まとまりのよい配色にしたい場合は、おすすめです。

トライアド配色

最後に、トライアド配色を試してみましょう。
「トライアド」という表記に変わるまで、「次へ」をクリックします。

COlOR SUPPLY(トライアド配色)

▲出典:COLOR SUPPLY

指定した色に対して、正三角形に位置する色が分かります。

トライアド配色は、補色よりも馴染みやすく、近似色ほど偏った印象にもならないので、3色のバランスを保ちたいときに、おすすめです。

CopyPalette

CopyPalette

▲出典:CopyPalette

『CopyPalette』は、選んだ1色に対して、明度の違う色を提案してくれるツール。

たとえば、青色を選んだ場合は、明るい色と暗い色が隣り合わせで表示されます。

ホームぺージの配色は、色数が増えるほど難しくなります。
追加の色選びに迷った場合は、以下の2つを試してください。

  • 同じ色相の明度が異なる色(例:青に対して、濃い青や薄い青)
  • 同じ明度の色相が異なる色(例:薄い青に対して、薄い緑や薄い黄色など)

色彩もしくは明度のどちらかが、他の色と合っていれば、調整は取りやすいです。

colorbase

colorbase

▲出典:colorbase

『colorbase』は、総合的なカラーツール。色に関するさまざまな情報を取得できます。

たとえば上記は、画面右上の検索窓から「#286ed3」というカラーコードを調べた結果です。

ページをスクロールすると、さらに情報を取得できますよ。

colorbase(カラーの情報)

▲出典:colorbase

指定した色を基準に、以下のような情報を取得することが可能です。

colorbaseで表示される情報の例
  • 補色
  • 代替
  • 色相
  • 色相シミュレーション
  • コントラスト
  • トリアディック(トライアド)
  • スクエア
  • 分離補色
  • UI
  • 文字色/背景色
  • 同じ明るさ

このように、さまざまな情報をもとに、配色を決定するためのサポートをしてくれるので、役に立つでしょう。

デモサイトでプレビューできる配色ツール

デモサイトでプレビューできる配色ツールは、以下の方におすすめです。

  • まずは、さまざまな配色パターンを見てみたい人
  • コーポレートカラーとは異なる配色のホームぺージを作りたい人

ここで紹介するツールは、配色パターンをいくつか提案してくれます。
また選んだ配色パターンは、自動でデモサイトに反映されるため、すぐにイメージを確認することが可能です。

デモサイトがあれば、まだホームぺージ作成に取り掛かっていない方でも、配色を確認できますよね。
すでに取り掛かっている方も、わざわざ自社のホームぺージに配色を設定する必要がないため、手間が省けるでしょう。

palettemaker

palettemaker

▲出典:palettemaker

『palettemaker』は、配色をデモサイトでプレビュー(確認)できるツール。
配色を提案してくれるだけでなく、色数も変更できるため、よりイメージに近づけながら確認できます。

使い方は簡単。以下の手順で進めてください。

  1. 上部中央にある「Mixed」を「web//Mobile UI」に変更
  2. 左サイドメニューにある「Filter」をクリックして、「メインカラー」を選択
  3. そのまま「Filter」メニューにある「色数」を選択
  4. 左サイドメニューにある「配色パターン」を選んで、プレビューを確認する

イメージと近いデザインのデモサイトがある場合は、「Start the generator」をクリックすれば、さまざまな配色パターンを一覧表示で確認することが可能です。

palettemaker(プレビュー一覧表示)

▲出典:palettemaker

なお選んだ配色パターンは、「上矢印(↑)ボタン」をクリックすれば、さまざまな形式でエクスポートできますよ。

palettemaker(配色のカラーコード)

▲出典:palettemaker

記載されたカラーコードを自社のホームぺージに反映して、イメージどおりになるか確認しましょう。

カラーコードとは

6桁の16進数で表記される色番号のこと。番号の前に「#」を付けます。
(例)白「#FFFFFF」、黒「#000000」など

『palettemaker』は、カラーコードを指定して配色を確認することもできます。

コーポレートカラーなど、使用する色がいくつか決まっている場合は、配色の確認用ツールとしても使用できるでしょう。

palettemaker(カラーコードで配色を指定可能)

▲出典:palettemaker

配色パターン見本40選

配色パターン見本40選

▲出典:配色パターン見本40選

『配色パターン見本40選』は、スマホのデモサイトで配色を確認できるツール。

配色を以下6つのカテゴリから選べます。

  1. 万人受けする配色
  2. 親近感を感じさせる配色
  3. クール系の配色パターン
  4. 元気・アクティブ系の配色パターン
  5. かわいい系の配色パターン
  6. 個性的な配色

紹介されている配色は固定されており、組み合わせはそこまで多くありません。

しかしその分、「まだイメージを何も持っていない」という方なら、絞り込まれた配色の中から選べるため、決めやすいでしょう。

画像の構成色をヒントにできる配色ツール

配色ツールには、画像の構成色を抽出するタイプもあります。

すでに完成された画像は、配色が整っていることが多いです。

ホームぺージ専用の配色ツールではないものの、キャンペーンなどの特集ぺージを作るときにおすすめです。

それぞれ例をだしながら紹介しますね。

Adobe Color

Adobe Color

▲出典:Adobe Color

『Adobe Color』は、デザインツールで有名なAdobe社が提供している配色ツールです。
さまざまな機能があるものの、ここでは「探索」機能を解説しますね。

たとえば「海」と検索すると、関連する画像が多く表示されます。

気に入った画像をクリックすれば、構成色がカラーコードで確認できますよ。

Adobe Color(海の画像の構成色)

▲出典:Adobe Color

試しに配色ツールの『palettemaker』で、上記の配色を指定してみました。

海の画像の構成色をpalettemakerで指定

▲出典:palettemaker

カワウソ

配色だけで「海」っぽさを表現できていると思いませんか? サマーキャンペーンなどの特集ぺージが作れそうです。

このように、写真やイラストではなく、配色でイメージを表現したい場合などに、この『Adobe Color』の「探索」機能は、重宝するでしょう。

メモ

「作成」のなかにある「テーマを抽出」の機能では、自分で用意した画像の構成色を調べられますよ。画像をアップロードするだけなので、ぜひやってみてください。

Adobe Colorのテーマを抽出機能

▲出典:Adobe Color

ColorDrop

ColorDrop

▲出典:ColorDrop

『ColorDrop』は、画像やテキストから配色を提案してくれるツールです。

「Scan Image」から画像をアップロードすれば、自前で用意した画像の構成色を表示してくれます。

ColorDrop(画像をアップロードして構成色を確認)

▲出典:ColorDrop

そのほか、テキストの「色名検索」にも対応していますよ。

試しに、画面右上の検索窓から「blue」と検索してみた結果が、以下のとおりです。

ColorDrop(blueで検索)

▲出典:ColorDrop

近似色だけではなく、さまざまな配色パターンが表示されていますね。

もしかすると、「ちょっと、ホームぺージには使いづらいのでは?」と感じる方もいるかもしれません。

しかし、実際に試してみると、意外に使える配色もありますよ。

試しに、以下の配色パターンを『palettemaker』のデモサイトでプレビューしてみますね。

ColorDrop(配色パターン例)

▲出典:ColorDrop

palettemakerで配色パターンを指定

▲出典:palettemaker

イメージが湧かない場合は、こうしてデモサイトまたは、自社のホームぺージに反映して確認しましょう。

まとめ

今回の記事では、ホームぺージの配色に役立つツールを、厳選して7つ紹介しました。

まとめ
  • 「コーポレートカラー」は自社を象徴する色で、ホームぺージに使われることが多い
  • 「メインカラー」「ベースカラー」「アクセントカラー」は、配色比率を意識する
  • メインカラーが決まっているなら、「色の三属性をもとに導き出す配色ツール」がおすすめ
  • ゼロベースで考えたい方は、「デモサイトでプレビューできる配色ツール」がおすすめ

配色は、ホームぺージの見やすさにも影響を与えます。

よろしければ、以下の記事も併せて参考にしてください。

見やすいホームページは何が違うのか!?押さえるポイントを紹介

それでは、素敵なホームページの完成を祈っております。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、19万社の導入実績があります。

12月19日12時まで、サーバー利用料金が最大30%オフとなる『冬のトク割キャンペーン』を開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2023年10月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

URLをコピーしました!