今あるWebサイトを改善する⑦｜背景色を変更する方法（Web担当者向け）
この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。
Webデザインの背景色は、ページ全体の雰囲気を左右する重要な要素です。また、文字の可読性にも影響を与えます。
そこで今回は、背景色を選ぶ際のポイントと変更方法をお伝えします！
背景色を選ぶ際のポイント
①サイトの目的やターゲットユーザーに応じた色を選ぶ
ビジネス向けのサイトでは青やグレーなどの落ち着いた色にしたり、若い女性向けのサイトではパステルカラーや明るい色調を選ぶなど、訪問者の年齢、目的などを考慮して最適な色を選びましょう。
②ユーザーの視認性を確保
白い背景に薄い灰色の文字や、黒い背景に暗い色の文字は、何と書いてあるか読みづらくなります。
Webサイトからの離脱率が上がってしまわないよう、淡い背景色には濃い色の文字、暗い背景色には明るい色の文字を使うなど、視認性を高める色を選びましょう。
背景色設定方法
設定は簡単です。背景色を設定したい箇所に、CSSでbackground-colorで色を指定するだけです。
background-color：背景の色を指定；HTML
<body>
<h1>背景色が青になっています！</h1>
</body>CSS
/*背景色を青に設定 */
body {
background-color: lightblue;
}
/ テキストのスタイル /
h1 {
color: white;/*テキストの色 */
text-align: center;/*テキストの真ん中寄せ */
}上記のように、CSSで簡単に背景色を変更することができます！
Webサイトのデザインは、色1つで大きく変わることがあります。背景色を工夫し、より魅力的なサイトを作成しましょう。
IT担当者がいない企業のみなさまへ
株式会社オートプロジェクトでは、スタッフが直接お伺いし、PC・ソフトのトラブル解決や、クラウド導入の設定支援などを行います。現場で一緒に確認できる、安心の「訪問サポート」をぜひご利用ください。
