太字と色文字を使いすぎて、どこが大事か分からなくなっていませんか？

太字や色文字が多くなると、どこを先に読めばよいのか分かりにくくなることがあります。また、目立たせようと文字の色を変えても、背景や周囲の色との組み合わせによっては、かえって読みづらくなることがあります。

今回は、WordPressの記事やお知らせで見直したい、太字と色文字の使い方をご紹介します。

文字の色は、背景とセットで見る

好きな色やお店のイメージカラーでも、背景によって読みやすさは変わります。たとえば、白い背景に淡い黄色の文字を置くと、文字が背景に溶け込んで見えることがあります。文字そのものの色だけでなく、背景との明るさの差も確認しましょう。

特に気をつけたいのが、写真を背景にしている場所です。写真には、明るい部分も暗い部分もあります。暗い部分では読めていた白文字が、明るい部分に重なると読みづらくなることがあります。

そんなときは、文字の後ろに単色の帯や背景を敷くか、写真と文章を分けて配置します。文字に影や縁取りをつける方法もありますが、小さな文字では窮屈に見えることがあります。迷ったら、写真の下に文章を置いてみてください。

スマートフォンでは写真の表示される範囲が変わり、文字の後ろにくる部分がパソコンと異なることがあります。パソコンで読めていても、スマホで表示を確認してください。

一文全部を太字にせず、伝えたい言葉を選ぶ

大切な一文だからといって、まるごと太字にすると、その中で特に見てほしい言葉が埋もれてしまいます。

たとえば「ご予約は前日17時までにお願いします。当日のご予約は、お電話でご相談ください。」という案内。この一文がすべて太字になっているなら、まず「前日17時まで」だけを残して、ほかを通常の文字に戻してみます。締め切りが見つけやすくなります。

強調する言葉を絞っても文章が長く感じる場合は、色を足す前に、文章を短くしたり、内容ごとに段落を分けたりする方法もあります。「ここも大切」と足していくより、「この段落で一番伝えたいのは何か」を考えると、強調する場所を選びやすくなります。

色や文字の見せ方に、役割をつける

ある場所では赤、別の場所では青、その次は黄色。その都度違う色で強調していると、色の違いが何を表しているのか分かりにくくなります。

• 本文で特に伝えたい言葉は太字にする
• 注意してほしい内容には「注意」などの言葉を添える
• リンクは、サイトで使っている色や下線などの表示をそろえる

「赤い文字のところが注意点です」のように、色だけで意味を伝えないことも大切です。色の見分けがつきにくい場合や、画面によって色が違って見える場合でも、文章で内容が伝わるようにします。周囲の見出しやボタンも見ながら、同じ役割には同じ色を使ってみてください。

フォントの種類も、増えていませんか？

文字の種類を変えることも、目立たせる方法のひとつです。ただ、見出し・本文・強調した言葉で次々とフォントを変えると、ページ全体がばらついて見えることがあります。

まずは、サイトで使っている見出しと本文のフォントを基本にしてみてください。強調するたびに新しいフォントを使うより、同じフォントのまま太さを変える方が整えやすくなります。「何種類まで」と数だけで決めるよりも、同じ役割の文字が同じ見せ方になっているかを確認しましょう。

公開前に確認したいこと

• 文字が、背景の色や写真に埋もれていないか
• 太字にした言葉だけを拾っても、要点が分かるか
• 色だけで注意点や違いを伝えていないか
• 同じ役割の見出しや強調が、同じ見せ方になっているか
• スマートフォンでも、写真の上の文字や改行が読みづらくないか

直すときは、まず1つの段落だけで試してみてください。通常の文字に戻してから、残したい強調を選ぶと整理しやすくなります。

まとめ

• 文字の色は、背景や周囲の色とセットで確認する
• 写真の上の文字が読みにくいときは、帯を敷くか、写真と文章を分ける
• 太字は、特に伝えたい短い言葉に絞る
• 色やフォントは、同じ役割ごとにそろえる
• 最後にスマートフォンでも確認する

まずは、最近のお知らせを1つだけ見直してみてください。文字が背景に埋もれず、大切な内容が見つけやすくなれば、その整え方を次の記事にも使えます。