ワードプレスでつくるホームページの配色パターン

ワードプレスでつくるホームページの配色パターン

2021年3月27日
スタビジ

ワードプレスでホームページを作成する際に、
 どのような配色をすればいいのか
について知りたい。

こんなテーマに関する記事です。


スタビジ

 ワードプレスでホームページを作成するときの、配色の仕方について説明しています。

スタビジ

ワードプレスで、配色を設定する際には、基本、
・メインカラー
・ベースカラー(背景)
・アクセントカラー

の3つを設定していきます。

この他に、リンクの色や、リンクの上にカーソルがある時の色なども設定します。

では、実際にワードプレスの色設定はどのようにしていくのか見ていきましょう。

スポンサーリンク

ワードプレスの色設定

スタビジ

ワードプレスでの色設定も、基本、上記の考え方で色を設定します。
 実際の設定は、
ワードプレスの管理画面の「外観」>「カスタマイズメニュー」
から行います。

設定画面自体は、
 テーマと呼ばれるデザインテンプレート
のよって画面の見方は異なってきます。

また、メインカラーに関しては、
 ヘッダー部分(上部)

 フッター部分(下部)

 メニュー部分
の色設定を別々に設定できる場合もあります。
ただ、全体のバランスを考えると、同じ色で統一しておいたほうが良いでしょう。

実際の配色パターン

スタビジ

では、実際の配色をどのようにしていけばよいのでしょうか。

結論としては、
 色の組み合わせなので、膨大なパターン
がありますので、全てをチェックするのは、現実的に無理です。

ですので、実際には、ある程度、きまったパターンの中から選んでいくと早いです。
その際のフローとしては、

 どのような色が、どのようなイメージになるのかを確認する
 ▼
 その際に、他社のサイトの色合いも参考にする
 ▼
 それらを踏まえて、自社のサイトをどのようなイメージにしたいかを決める

といった流れが良いでしょう。

また、企業のホームページの場合は、、あまり派手な色を選定するより、
 落ち着いた色合い
にしたほうが良いと言えます。

また、背景色は、
 白色
が見やすいです。
また、奇をてらったサイトより、「信頼度が高まるようなサイト」を作るほうが良いと言えます。

どのような色が、どのようなイメージになるのかを確認する

スタビジ

色のパターンを確認する

下記のサイトを使うと、画面の右側に、プレビュー画面がでてわかりやすいです。
有名な、サルワカさんというサイトのツールです。

親近感を感じさせる配色など、いくつかのパターンの配色の組み合わせが用意されています。

おしゃれで使いやすい配色パターン見本集

おしゃれで使いやすい配色見本を40パターン用意しました。それぞれの色の組み合わせごとに「どんな見た目になるのか」使用例をチェックできます。
saruwakakun.com

その他の参考サイト

「NIPPONCOLORS」
日本の伝統色ですので、落ち着いた色みをチェックできます。

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.
nipponcolors.com

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本
www.colordic.org

他社のサイトの色合いも参考にする

スタビジ

下記の事例サイトが参考になります。

SANKOU!
国内のホームページのギャラリーサイトです。

Webデザイン制作の参考になる日本のWebサイト・LPを集めたギャラリー・リンク集。おしゃれなサイトを厳選!制作会社探しにもおすすめ。2024年の最新トレンドを…
sankoudesign.com

I/O 3000


国内、海外のサイトの事例を集めています。

I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。
io3000.com

S5-Style
国内外のサイトの事例を集めています。

ハイクオリティなWebサイトを紹介するデザインギャラリー。コーポレートサイト、採用サイト、ECサイト、キャンペーンサイトなど2024年の最新トレンドを発信中!
bm.s5-style.com

81-web.com
国内のホームページのギャラリーサイト。

81-web.comはWebサイト制作に参考になる日本の優れたWebデザイン・Webサイトギャラリー&リンク集です。81-web.com is a collec…
81-web.com

まとめ

スタビジ

ホームページの作成の際には、自社のサイトの
 イメージカラー
は、かなり重要な要素となります。

少なくとも、ホームページを制作する前に
 メインカラー
は決めておきましょう。
(もっとも、ワードプレスでは、色設定が簡単にできますので、後から、変更も可能ではあります)

以上、ワードプレスでつくるホームページの配色パターンについての説明でした。

スタビジ