HP作成備忘録：ホームページの配色を調整するために、ヘッダーを白く、背景をグリーンにしてみた

はじめに

企業サイトや事務所サイトなどを制作していると、ブランドカラーや視認性を意識した配色調整が必要になることがあります。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

今回は、ヘッダーの背景を白色（#ffffff）に、ページ全体の背景を深いグリーン（#3d843d）に変更する方法についてご紹介します。

書こうと思ったきっかけ

事務所サイトを制作していた際、「ロゴをもっと目立たせたい」「ページ全体にブランドイメージを持たせたい」と考えたことがきっかけです。

ヘッダーとボディの配色を調整することで、視認性とデザインの印象が大きく変わることに気づきました。

変更の目的

• ヘッダーは白背景にすることでロゴやナビゲーションが見やすく
• ボディはブランドカラーのグリーンをベースにして印象づけ

具体的なCSS修正内容

bodyの背景色を変更

body {
  background-color: #3d843d;
  color: #333;
}

このコードによって、ページ全体の背景が落ち着いたグリーンになります。

headerの背景色を白に変更

header {
  background-color: #ffffff;
  color: #333;
}

白背景に変更することで、ロゴ画像やナビゲーションメニューがより視認性の高いものになります。

文字色も合わせて #333（濃いグレー）などにするとバランスが良くなります。

header, footer をまとめて指定している場合の対応

以下のようなCSSがある場合は、個別に header と footer に分けてスタイルを指定しましょう。

修正前

header, footer {
  background-color: #ffcc80;
  color: #fff;
}

修正後

header {
  background-color: #ffffff;
  color: #333;
}

footer {
  background-color: #ffcc80;
  color: #333;
}

変更後のイメージ

• ヘッダー：白くてすっきりした印象、ロゴが映える
• 本文背景：ブランドカラーである深いグリーン
• 全体の印象：清潔感と信頼感のあるデザインに

おわりに

配色の変更は、デザインの印象を大きく左右します。

今回のように「白とブランドカラー」の組み合わせは、見やすさと個性の両立ができるため、非常におすすめです。

今後も必要に応じて、フォントやボタンの配色なども調整していくと、より魅力的なサイトになるかと思います！