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

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

ワードプレスで、配色を設定する際には、基本、
・メインカラー
・ベースカラー(背景)
・アクセントカラー
の3つを設定していきます。
この他に、リンクの色や、リンクの上にカーソルがある時の色なども設定します。
では、実際にワードプレスの色設定はどのようにしていくのか見ていきましょう。
ワードプレスの色設定

ワードプレスでの色設定も、基本、上記の考え方で色を設定します。
実際の設定は、
ワードプレスの管理画面の「外観」>「カスタマイズメニュー」
から行います。
設定画面自体は、
テーマと呼ばれるデザインテンプレート
のよって画面の見方は異なってきます。
また、メインカラーに関しては、
ヘッダー部分(上部)
と
フッター部分(下部)
や
メニュー部分
の色設定を別々に設定できる場合もあります。
ただ、全体のバランスを考えると、同じ色で統一しておいたほうが良いでしょう。
実際の配色パターン

では、実際の配色をどのようにしていけばよいのでしょうか。
結論としては、
色の組み合わせなので、膨大なパターン
がありますので、全てをチェックするのは、現実的に無理です。
ですので、実際には、ある程度、きまったパターンの中から選んでいくと早いです。
その際のフローとしては、
どのような色が、どのようなイメージになるのかを確認する
▼
その際に、他社のサイトの色合いも参考にする
▼
それらを踏まえて、自社のサイトをどのようなイメージにしたいかを決める
といった流れが良いでしょう。
また、企業のホームページの場合は、、あまり派手な色を選定するより、
落ち着いた色合い
にしたほうが良いと言えます。
また、背景色は、
白色
が見やすいです。
また、奇をてらったサイトより、「信頼度が高まるようなサイト」を作るほうが良いと言えます。
どのような色が、どのようなイメージになるのかを確認する

色のパターンを確認する
下記のサイトを使うと、画面の右側に、プレビュー画面がでてわかりやすいです。
有名な、サルワカさんというサイトのツールです。
親近感を感じさせる配色など、いくつかのパターンの配色の組み合わせが用意されています。
■おしゃれで使いやすい配色パターン見本集

その他の参考サイト
■「NIPPONCOLORS」
日本の伝統色ですので、落ち着いた色みをチェックできます。
■原色大辞典

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

下記の事例サイトが参考になります。
■SANKOU!
国内のホームページのギャラリーサイトです。

■I/O 3000
国内、海外のサイトの事例を集めています。

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

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

ホームページの作成の際には、自社のサイトの
イメージカラー
は、かなり重要な要素となります。
少なくとも、ホームページを制作する前に
メインカラー
は決めておきましょう。
(もっとも、ワードプレスでは、色設定が簡単にできますので、後から、変更も可能ではあります)
以上、ワードプレスでつくるホームページの配色パターンについての説明でした。
