はじめに
第18章「テーマを設定する前に知っておきたいこと」では、
テーマの種類によって、ホームページ全体を設定する場所が違う
ことを見てきました。
ここからは、実際にホームページの見た目を整えていきます。
最初に考えたいのが、
色と文字
です。
色やフォントは、ホームページの印象を大きく変えます。
しかし、
「好きな色を使う」
「おしゃれなフォントを選ぶ」
だけで決めると、読みにくいホームページになることがあります。
ホームページは作品として眺めるだけではありません。
文章を読む。
料金を確認する。
メニューを探す。
問い合わせをする。
といった目的があります。
そのため今回は、
見た目の好みだけではなく、読みやすさと使いやすさを含めて色と文字を決める
という考え方を見ていきます。
色はたくさん使わなくていい
ホームページを作り始めると、
「ここは青」
「ここは赤」
「見出しは緑」
「ボタンは黄色」
と、色を増やしたくなることがあります。
しかし、色が増えるほど、
何が重要なのか分かりにくくなる
ことがあります。
初心者のうちは、まず役割を決めて色を使う方が整理しやすくなります。
たとえば、
- 背景色
- 基本の文字色
- メインカラー
- アクセントカラー
くらいから考えてみましょう。
1．背景色
ページ全体の背景になる色です。
白や、ごく薄い色を使うホームページが多いのは、
文章を読みやすくしやすい
からです。
もちろん、黒や濃い色を背景にしたデザインもあります。
その場合は、文字色との組み合わせを特に注意して決めます。
2．基本の文字色
本文で最もよく使う文字の色です。
白い背景だからといって、
必ず真っ黒にしなければならないわけではありません。
少し柔らかい黒や濃いグレーを使うこともできます。
ただし、
薄くしすぎて読みにくくならないこと
が大切です。
デザイン上はきれいに見えても、
長い文章を読むと目が疲れる色があります。
本文は、まず読みやすさを優先しましょう。
3．メインカラー
ホームページ全体の印象を作る中心となる色です。
たとえば、
- ロゴ
- 見出しの一部
- ボタン
- 線
- アイコン
などに使います。
お店や会社に、
すでにブランドカラーがある場合
は、それを基準に考えると統一しやすくなります。
ただし、ブランドカラーをページ全体へ大量に使う必要はありません。
印象を作る色として、必要な場所で使います。
4．アクセントカラー
特に目立たせたい場所で使う色です。
たとえば、
- お問い合わせボタン
- 重要なお知らせ
- 注目してほしい部分
などです。
アクセントカラーは目立つからこそ、
使う場所を絞る
ことが大切です。
何もかもアクセントカラーにすると、結局どこも目立たなくなります。
色には「役割」を持たせる
色を決めるときは、
「この色が好き」
だけではなく、
この色を何のために使うのか
も決めておきます。
たとえば、
| 背景 | 白 |
| 本文 | 濃いグレー |
| メイン | 深い緑 |
| アクセント | 落ち着いた金色 |
というように決めます。
こうしておけば、ページを追加したときにも、
「このボタンは何色にしよう？」
と毎回考え直さなくて済みます。
文字と背景のコントラストを確認する
色を決めるときに重要なのが、
文字と背景の明るさの差
です。
この差を、
コントラスト
と呼びます。
たとえば、
白い背景に薄いグレーの文字。
淡いベージュの背景に白い文字。
見た目は柔らかくても、組み合わせによっては非常に読みにくくなります。
WCAG 2.2では、文字と背景のコントラストについて、
- 通常の文字は 4.5:1以上
- 大きな文字は 3:1以上
がレベルAAの基準として示されています。
数字を暗記する必要はありません。
大切なのは、
「見た感じで大丈夫」と思わず、必要ならコントラストを確認する
という習慣です。
色だけで意味を伝えない
もう一つ大切なのが、
色だけに意味を持たせない
ことです。
たとえば、
「赤い項目は必須です」
と説明して、必須項目を赤色だけで示すと、
色の違いを判別しにくい人には伝わらない場合があります。
その場合は、
必須
という文字や記号も一緒に表示します。
同じように、
エラーを赤色だけで示すのではなく、
「入力してください」
などの文章も表示します。
色は便利な情報ですが、
色が分からなくても意味が伝わる
ようにしておきましょう。
フォーカスが見えるデザインにする
キーボードでホームページを操作すると、
タブキーを押すたびに、
リンクやボタンなどへ操作位置が移動します。
この「今どこを操作しているか」を示す状態を、
キーボードフォーカス
と呼びます。
W3CのWCAG 2.2では、
キーボードで操作できる要素について、
フォーカス位置が見えること
がレベルAAの要件として示されています。
たとえば、
ボタンへフォーカスが移ったときに、
- 枠線が出る
- 背景色が変わる
- 概要が見える
など、現在位置が分かる必要があります。
「概要を消す」だけのCSSに注意する
デザインをすっきり見せるために、
outline: none;のようにフォーカス表示を消してしまう例があります。
しかし、代わりのフォーカス表示がないと、
キーボード利用者は今どこを操作しているか分からなくなります。
フォーカスの見た目を変更する場合は、
消すのではなく、別の見える表現へ置き換える
と考えます。
固定ヘッダーや固定ボタンでフォーカスを隠さない
WCAG 2.2では、
キーボードフォーカスを受けた要素が、
ヘッダーや固定表示のコンテンツによって完全に隠れないこともレベルAAで求められています。
固定ヘッダーや画面下部の固定CTAを使う場合は、
タブキーで移動したときに、
現在のリンクやボタンが隠れていないか確認します。
色は先に「パレット」を決める
ブロックテーマでは、WordPressの「スタイル」から、
カラーパレット
を設定できます。
現在のWordPressでは、
「外観 → エディター → スタイル」
から、テーマが対応していれば、
- 背景
- テキスト
- リンク
- 見出し
- ボタン
など、サイト全体の色を設定できます。
各ページで毎回違う色を作るより、
最初に使う色をある程度決め、同じ色を繰り返し使う
方がホームページ全体に統一感が出ます。
次に「文字」を考える
色と同じくらい重要なのが、
文字
です。
ここで考えるのは、
- フォント
- 文字サイズ
- 太さ
- 行間
- 見出しとの違い
などです。
これらをまとめて、
タイポグラフィ
と呼ぶことがあります。
言葉を覚えることより、
文章を読みやすく整えるための設定
だと理解しておけば十分です。
フォントは種類を増やしすぎない
ホームページには、多くのフォントを使うことができます。
しかし、
本文はこのフォント。
見出しは別。
ボタンはまた別。
英字はさらに別。
と増やしていくと、全体がまとまりにくくなります。
初心者のうちは、
基本となるフォントを1種類
から始めても十分です。
必要なら、
- 本文用
- 見出し用
の2系統くらいまでにします。
フォントの種類より、
読みやすく、全体で統一されていること
を先に考えましょう。
日本語は「雰囲気」だけで選ばない
日本語フォントは、
- ゴシック体
- 明朝体
などで印象が大きく変わります。
たとえば、
ゴシック体は比較的はっきり見せやすく、
明朝体は上品さや落ち着いた印象を作りやすい場合があります。
ただし、
「高級感を出したいから全部明朝体」
と決める必要はありません。
小さな文字やスマートフォンでは、フォントによって読みやすさが変わります。
ブランドの印象と読みやすさの両方を確認しましょう。
本文の文字を小さくしすぎない
デザインをすっきり見せようとして、
本文を小さくすることがあります。
しかし、ホームページでは、
読んでもらえなければ意味がありません。
文字サイズはテーマやフォントによって見え方が違うため、
「必ず何px」
と一つに決める必要はありません。
初心者なら、
16px前後を一つの出発点として、実際のスマートフォンで確認する
くらいから始めると分かりやすいでしょう。
これは絶対的な基準ではなく、
実際のフォントや読者、サイトのデザインに合わせて調整します。
行間も読みやすさを左右する
文章が上下に詰まりすぎていると、
長い文章が読みにくくなります。
逆に、行間が広すぎても文章のまとまりを追いにくくなります。
本文では、
文字サイズだけでなく、行と行の間隔
も確認しましょう。
たとえば、本文の行間を文字サイズの1.5〜1.8倍程度から確認し、
実際の見え方に合わせて調整する方法があります。
これも固定値ではありません。
文章量、フォント、画面幅によって適切な見え方は変わります。
見出しと本文に差をつける
ページを開いたとき、
見出しと本文がほとんど同じ見た目だと、
どこから話題が変わったのか分かりにくくなります。
そのため、
見出しには、
- 文字サイズ
- 太さ
- 余白
- 色
などで本文との差を付けます。
ただし、
すべての見出しを派手に装飾する必要はありません。
見出しの役割は、
「ここから話題が変わります」
と伝えることです。
太字を使いすぎない
文章の重要部分を目立たせるために、
太字
を使うことがあります。
しかし、文章の半分以上が太字になっていると、
どこが重要なのか分からなくなります。
太字は、
特に読んでほしい短い部分
へ使います。
色による強調も同じです。
強調は、少ないからこそ機能します。
WordPressの「スタイル」で文字もまとめて設定できる
ブロックテーマでは、
サイトエディターの「スタイル」から、
タイポグラフィ
を調整できます。
テーマが対応していれば、
- フォント
- 文字サイズ
- 行の高さ
- 見出し
- リンク
- ボタン
などを、サイト全体の単位で設定できます。
WordPress公式でも、「スタイル」は個々のページを一枚ずつ編集するのではなく、
サイト全体の色・タイポグラフィ・レイアウトなどをまとめて管理する機能
として案内されています。
パソコンだけで決めない
色と文字を設定したら、
必ずスマートフォンでも確認しましょう。
パソコンでは、
「ちょうどいい文字サイズ」
に見えても、
スマートフォンでは小さすぎることがあります。
また、
大きな見出しが2行、3行になり、
ページの印象が大きく変わることもあります。
確認するときは、
- 本文を無理なく読めるか
- 見出しが大きすぎないか
- ボタンの文字が読めるか
- 背景と文字の差が十分か
- 長い文章を読んでも疲れないか
を見ます。
色と文字の基本ルールを書き残しておく
ホームページを作り続けると、
数か月後に、
「この色、何色だったっけ？」
「本文のサイズはいくつにした？」
となることがあります。
そこで、簡単でよいので、
デザインの基本ルール
を残しておきます。
たとえば、
背景色：#FFFFFF
本文色：#333333
メインカラー：#2F5142
アクセントカラー：#B28A45
本文フォント：○○
本文サイズ：16pxを基準
見出し：本文より大きく・太くという形です。
これは、本格的なデザインガイドを作るという意味ではありません。
あとから自分が迷わないためのメモ
です。
最初に決めすぎなくてもいい
ここまで読むと、
「全部決めてから作らないといけないの？」
と思うかもしれません。
そんなことはありません。
まずは、
- 背景
- 本文色
- メインカラー
- アクセントカラー
- 基本フォント
- 本文の大きさ
くらいを決めれば十分です。
実際にページを作ってみて、
「もう少し文字を大きくしよう」
「アクセント色が強すぎる」
と感じたら、調整します。
ホームページは、
作りながら改善していくもの
です。
今回のポイント
- 色は増やしすぎず、役割を決めて使う
- 背景色・本文色・メインカラー・アクセントカラーから考えると整理しやすい
- 本文は見た目より読みやすさを優先する
- 文字と背景のコントラストを確認する
- WCAG 2.2では通常文字4.5:1以上、大きな文字3:1以上がレベルAAの基準
- 色だけで重要・必須・エラーなどの意味を伝えない
- ブロックテーマでは「スタイル」でサイト全体の色を管理できる
- フォントは増やしすぎない
- 本文は16px前後を一つの出発点として、実機で確認する
- 行間も読みやすさに関係する
- 見出しと本文には分かる程度の差をつける
- 太字や強調色を使いすぎない
- パソコンだけでなくスマートフォンでも確認する
- 色や文字の基本ルールを簡単に書き残しておく
- キーボードフォーカスは現在の操作位置が見える状態にする
- フォーカスの概要を消す場合は、代わりの見える表示を用意する
- 固定ヘッダーや固定CTAでフォーカス中の要素を完全に隠さない
今回の視点
デザインというと、
「何色にするか」
「どのフォントがおしゃれか」
に目が向きやすくなります。
でも、ホームページの文字は、
飾るためだけにあるのではありません。
読んでもらうためにあります。
色も、
きれいに見せるためだけではなく、
情報を整理し、重要な場所へ目を導くために使います。
だから、
好きなデザインを作ることと、使いやすいデザインを作ることは必ずしも同じではありません。
見る人に伝わることを土台にして、その上に自分らしいデザインを重ねていきましょう。
Part 3｜ホームページの見た目と構造を作る