![スタビジ](https://www.stabusi.com/wp-content/uploads/2021/11/gimon02.png)
ワードプレスでホームページを作成する際に、
どのような配色をすればいいのか
について知りたい。
こんなテーマに関する記事です。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/02/man01.png)
ワードプレスでホームページを作成するときの、配色の仕方について説明しています。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac22-e1706014055454.png)
ワードプレスで、配色を設定する際には、基本、
・メインカラー
・ベースカラー(背景)
・アクセントカラー
の3つを設定していきます。
この他に、リンクの色や、リンクの上にカーソルがある時の色なども設定します。
では、実際にワードプレスの色設定はどのようにしていくのか見ていきましょう。
ワードプレスの色設定
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac29-e1705664921991.png)
ワードプレスでの色設定も、基本、上記の考え方で色を設定します。
実際の設定は、
ワードプレスの管理画面の「外観」>「カスタマイズメニュー」
から行います。
設定画面自体は、
テーマと呼ばれるデザインテンプレート
のよって画面の見方は異なってきます。
また、メインカラーに関しては、
ヘッダー部分(上部)
と
フッター部分(下部)
や
メニュー部分
の色設定を別々に設定できる場合もあります。
ただ、全体のバランスを考えると、同じ色で統一しておいたほうが良いでしょう。
実際の配色パターン
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac21-e1706257016893.png)
では、実際の配色をどのようにしていけばよいのでしょうか。
結論としては、
色の組み合わせなので、膨大なパターン
がありますので、全てをチェックするのは、現実的に無理です。
ですので、実際には、ある程度、きまったパターンの中から選んでいくと早いです。
その際のフローとしては、
どのような色が、どのようなイメージになるのかを確認する
▼
その際に、他社のサイトの色合いも参考にする
▼
それらを踏まえて、自社のサイトをどのようなイメージにしたいかを決める
といった流れが良いでしょう。
また、企業のホームページの場合は、、あまり派手な色を選定するより、
落ち着いた色合い
にしたほうが良いと言えます。
また、背景色は、
白色
が見やすいです。
また、奇をてらったサイトより、「信頼度が高まるようなサイト」を作るほうが良いと言えます。
どのような色が、どのようなイメージになるのかを確認する
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac35-e1705664876559.png)
色のパターンを確認する
下記のサイトを使うと、画面の右側に、プレビュー画面がでてわかりやすいです。
有名な、サルワカさんというサイトのツールです。
親近感を感じさせる配色など、いくつかのパターンの配色の組み合わせが用意されています。
■おしゃれで使いやすい配色パターン見本集
![](https://saruwakakun.com/wp-content/uploads/2017/03/10383-NMW8A3-min.jpg)
その他の参考サイト
■「NIPPONCOLORS」
日本の伝統色ですので、落ち着いた色みをチェックできます。
■原色大辞典
![](https://www.colordic.org/assets/img/ob_image.png)
他社のサイトの色合いも参考にする
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac26-e1702107570271.png)
下記の事例サイトが参考になります。
■SANKOU!
国内のホームページのギャラリーサイトです。
![](https://sankoudesign.com/wp-content/themes/clip/images/ogp.png)
■I/O 3000
国内、海外のサイトの事例を集めています。
![](https://io3000.com/assets/img/og-image.png)
■S5-Style
国内外のサイトの事例を集めています。
![](https://bm.s5-style.com/img/share.png)
■81-web.com
国内のホームページのギャラリーサイト。
まとめ
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac45-e1702107517452.png)
ホームページの作成の際には、自社のサイトの
イメージカラー
は、かなり重要な要素となります。
少なくとも、ホームページを制作する前に
メインカラー
は決めておきましょう。
(もっとも、ワードプレスでは、色設定が簡単にできますので、後から、変更も可能ではあります)
以上、ワードプレスでつくるホームページの配色パターンについての説明でした。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2021/11/ok02.png)