寺院ホームページ作成サービス >>

【お寺のHP作成講座19】ホームページの色を決めよう!参考になる配色とカラー設定の方法について

【お寺のHP制作講座19】へようこそ!

ようやくホームページの色を決める段階になりました。

本記事ではホームページの色を設定する方法を解説します。

たもんくん

色が変わると一気にサイトの雰囲気が変わります。

「自分のサイトを作ってる感」をすごく感じられる作業なので楽しいですよ!

配色で大事なこと

サイトの色を決めるとき、大事なポイントが2つあります。

1.感覚で色を決めない

WEBサイトの色を決める時に大事なことは、自分の感覚で色を決めないことです。

デザイナーではない人が自分の感覚で色を決めるのは危険です。

たもんくん

なんかデザインがちぐはぐな感じがする・・・

という時は、色の決め方に問題があることが多いです。

配色にはルールやコツがあります。

といっても、その色のルールをゼロから学ぶのはとても大変ですよね。

このあと紹介する配色の参考になるサイトや書籍を利用して色を決めていきましょう。

2.カラーコードを使おう

パソコンやスマホの表示で使われる色を決めるときはカラーコードを使いましょう。

カラーコードは#で始まる6桁の数字で、このコードを利用すると色を正確に指定することができます。

カラーコードの使い方
6桁のカラーコード

カラーコードで数値を指定すれば、正確に色の指定をすることができますよ。

複数の場所に同じ色を使うときはカラーコードをコピー&ペーストすると、同じ色に設定することができます。

下のカラーパレットから感覚で色を選んでいくと、配色ルールから外れやすくなることは覚えておいてください。

カラーパレット

配色に役立つ参考サイト

これから紹介するサイトは色を紹介してくれるサイトでカラーコードを取得することができるサイトです。

色のアイデアをもらって、自身のホームページ作成に役立てましょう。

Palettable

Palettable見た感じで色の好き嫌いを答えていくと5色のカラーパレットができるサイトです。

表示される色は配色のルールにのっとったものなので、好みで選んでも破綻はしづらくなっています。

表示される色について「Dislike(嫌い)」か「Like(好き)」の2択で答えると次の相性の良い色が表示されていきますよ。

Palettableのスクリーンショット

「Like」を押すと自動的に組み合わせの良い色が表示されます。

Palettableのスクリーンショット2

色が追加されていきます。

Palettableのスクリーンショット3

気に入らなかったら何度か試してみるとよいでしょう。

最終的に5色のパレットができるので、気に入った色のカラーコードをコピーして利用します。

日本の伝統色

お寺のホームページで使う色は日本の伝統色も親和性が高いですよね。

日本の伝統色を表示し、色コードも取得できるのがNIPPON COLORSというサイトです。

ぱっと見てわかるとおり、サイトデザインが美しいですね。

好きな色をクリックすると画面の色が代わって、色の情報が表示されます。

NIPPON COLORSのスクリーンショット

落ち着いた和の色で統一されているので、色を組み合わせてもきれいにおさまります。

和の色

和の色も日本の色を一覧表示してくれているサイトです。

NIPPON COLORSともまた違った表示なので、使いやすいほうをご利用ください。

和の色のスクリーンショット

配色の参考になる書籍

書籍でいろんな配色を見るのもとても勉強になります。

参考にしやすい書籍を紹介しておきます。

色の組合わせを考えるときにすごく参考になります。

ホームページのカラー変更方法

ホームページの色の設定は「カスタマイズ」から設定できます。

ワードプレスにログインした状態で、上のメニューから「カスタマイズ」を選択してください。

ワードプレスのカスタマイズの位置
カスタマイズを選択

左側に表示されるメニューの中に「サイトカラー設定」をクリックしましょう。

サイトカラー設定の位置

サイトに使われているパーツごとに色を指定して、自由に決めることができます。

サイトカラー設定のスクリーンショット

各色をクリックするとカラーパレットが開きます。

カラーパレットを開いた表示

上部の#で始まる6桁の数字がカラーコードを入力する場所です。

カラーコードの表示位置
カラーコード

このカラーコードに参考サイトや書籍で見つけた色のカラーコードを入力してみましょう。

たもんくん

見た目で色を管理すると絶対にズレが生じます。

カラーコードをコピーして色を指定してあげましょう。

「公開」を押すまでは何度でも変更できますので、プレビュー画面の色が変わるのをみながら色を決めていきましょう。

サイトカラー設定のプレビュー
選んだ色が画面に反映されます。

よくわからなくなったら「デフォルト」ボタンを押すと初期状態に戻ります。

ヘッダー領域

ヘッダー領域サイト上部の色を決める領域です。

下に図示した部分の色を変更することができます。

ヘッダー領域の配色説明

「ヘッダーサイトロゴ」は現時点で文字になっていますが、後の講座でロゴ画像を作って置き換えます。

とりあえず今は好きな色に設定しておいてください。

メイン領域

メイン領域は本文の文字色とリンクのついた文字の色を指定します。

メイン領域の配色説明

リンクの文字色は青系にしておくことをおすすめします。

これは多くの方の認識として青文字はリンクという意識が定着しているからです。

「リンク色(hover)」はPCで表示されたときに、マウスポインターが上にきた時に変化する色を指定しています。

メインコンテンツ

メインコンテンツは「コンテンツ部分の背景色」と「見出しの色」を指定します。

メインコンテンツの配色説明

「見出しの色」もサイトの印象を決める重要な要素です。

サイトのメインカラーと考えて設定してください。

文字色と背景の色が似ていると、文字が読みにくくなることがあります。

見出しの背景色に淡い色を選んだ場合は文字色は黒に近い濃い色をえらびましょう。

ラベル

ラベルは記事を一覧表示した時にアイキャッチ画像の右上に表示されるカテゴリーを示すラベルの色を指定します。

ラベルの配色説明

「ラベル色」と「文字色」の色の組み合わせを考えて、読みにくくならないよう気をつけましょう。

サイドバーテキスト

サイドバーとはPCで表示したときに画面の側面に来るエリアのことです。

サイドバーテキストの配色説明
このエリアがサイドバー

「サイドバーテキスト」はサイドバーの文字の色を決めます。

サイドバーの配色説明2

これは本文のテキストの色と合わせておいたら良いと思います。

フッター

フッターはページ下部のエリアのことです。

フッターの配色説明

ページの読み終わりに表示されるので、濃いめの色の方がどっしり落ち着くかもしれませんね。

現時点ではフッターには何もコンテンツを追加していませんが、フッターにも情報を表示することができます。

お寺の住所や電話番号などの基本情報や、カテゴリーの表示など必要なものがあれば後で追加しましょう。

サンプルサイト出模寺の設定

出模寺サンプルサイトで設定しているカラーコードも参考として用意しておきます。

サンプルサイト出模寺のホームページ

背景色#ffffff
[ヘッダー」背景色(メインカラー)#ffffff
[ヘッダー」サイトロゴ#eeee22
[ヘッダー」テキスト#333333
[全体]テキスト色#333333
リンク色#1853B5
リンク色(hover時)#69c2c7
[メインコンテンツ]背景色#ffffff
[記事ページ]見出し(H2)背景#44617B
[記事ページ]見出し(H2)文字色#ffffff
[ラベル]背景色#FFDB4F
[ラベル]テキスト#333333
[サイドバー]テキスト#333333
[フッター]背景色#666666
[フッター]テキスト#CACACA
[フッター]リンク#f7f7f7

サイトカラー変更方法まとめ

サイトカラーを設定すると一気にオリジナル感がアップしますよね。

色の設定は何度でもやり直せますので、納得のいく色味をさがしてみてください。

ポイントは色数を必要以上に増やさないこと。

お寺のホームページで落ち着いた雰囲気を出したいならできるだけ少ない色数で表現することを意識してみましょう。

STORK19の本家サイトでSTORK19を使ったサイトの事例が紹介されています。

布教使.comもサイト事例のひとつとして紹介いただいてます。

画像とサイトカラーをうまく組み合わせればいろんなデザインが実現できますので、ぜひ参考にしてみてください。

【お寺のホームページ作成講座20】ではサイトタイトルに使うロゴ画像の作成や設定をします。