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

読んでほしいところを太字にして、目立たせたいところに色をつける。

記事を書いているうちに、強調する場所が少しずつ増えていませんか？

太字や色文字が多くなると、どこを先に読めばよいのか分かりにくくなることがあります。

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

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

━━━━━━━━━━━━━━━━

■ 先に結論

目立たせる前に、まず読みやすく整えます。

・文字が背景に埋もれていないか確認する

・強調するのは、特に伝えたい短い言葉に絞る

・同じ役割の文字は、同じ見せ方にそろえる

すべてを一度に直す必要はありません。

まずは、最近書いた記事やお知らせを1つ開いてみてください。

━━━━━━━━━━━━━━━━

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

好きな色やお店のイメージカラーでも、背景によって読みやすさは変わります。

たとえば、白い背景に淡い黄色の文字を置くと、文字が背景に溶け込んで見えることがあります。

文字そのものの色だけでなく、背景との明るさの差も確認しましょう。

特に気をつけたいのが、写真を背景にしている場所です。

写真には、明るい部分も暗い部分もあります。

暗い部分では読めていた白文字が、明るい部分に重なると読みづらくなることがあります。

そんなときは、文字の色を何度も変える前に、次の方法を試してみてください。

・文字の後ろに、単色の帯や背景を敷く

・写真と文章を分けて配置する

文字に影や縁取りをつける方法もありますが、小さな文字では窮屈に見えることがあります。

迷ったら、写真の下に文章を置いてみてください。

同じ写真と文字で比較しています。左は写真に直接文字を置いた例、右は文字の後ろに濃い色の帯を敷き、写真の明るさに文字が左右されにくいようにした例です。

スマートフォンでは写真の表示される範囲が変わり、文字の後ろにくる部分がパソコンと異なることがあります。

パソコンで読めていても、スマホで表示を確認してください。

━━━━━━━━━━━━━━━━

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

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

たとえば、次のような予約のお知らせです。

「ご予約は前日17時までにお願いします。当日のご予約は、お電話でご相談ください。」

この一文がすべて太字になっているなら、まず「前日17時まで」だけを残して、ほかを通常の文字に戻してみます。

締め切りが見つけやすくなります。

文章の内容は同じです。左は一文すべてを太字と色文字で強調した例、右は「前日17時まで」だけを太字にした例です。

強調する言葉を絞っても文章が長く感じる場合は、色を足す前に、文章を短くしたり、内容ごとに段落を分けたりする方法もあります。

「ここも大切」と足していくより、「この段落で一番伝えたいのは何か」を考えると、強調する場所を選びやすくなります。

━━━━━━━━━━━━━━━━

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

ある場所では赤、別の場所では青、その次は黄色。

その都度違う色で強調していると、色の違いが何を表しているのか分かりにくくなります。

たとえば、次のように役割をそろえます。

・本文で特に伝えたい言葉は太字にする

・注意してほしい内容には「注意」などの言葉を添える

・リンクは、サイトで使っている色や下線などの表示をそろえる

「赤い文字のところが注意点です」のように、色だけで意味を伝えないことも大切です。

色の見分けがつきにくい場合や、画面によって色が違って見える場合でも、文章で内容が伝わるようにします。

見出しの色を記事ごとに変えるよりも、サイト全体でそろえた方が落ち着いて見えます。

周囲の見出しやボタンも見ながら、同じ役割には同じ色を使ってみてください。

━━━━━━━━━━━━━━━━

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

文字の種類を変えることも、目立たせる方法のひとつです。

ただ、見出し・本文・強調した言葉で次々とフォントを変えると、ページ全体がばらついて見えることがあります。

まずは、サイトで使っている見出しと本文のフォントを基本にしてみてください。

強調するたびに新しいフォントを使うより、同じフォントのまま太さを変える方が整えやすくなります。

「何種類まで」と数だけで決めるよりも、同じ役割の文字が同じ見せ方になっているかを確認しましょう。

━━━━━━━━━━━━━━━━

■ 公開前に確認したいこと

編集画面だけでなく、実際のページのプレビューを開いて確認します。

・文字が、背景の色や写真に埋もれていないか

・太字にした言葉だけを拾っても、要点が分かるか

・色だけで注意点や違いを伝えていないか

・同じ役割の見出しや強調が、同じ見せ方になっているか

・スマートフォンでも、写真の上の文字や改行が読みづらくないか

直すときは、まず1つの段落だけで試してみてください。

通常の文字に戻してから、残したい強調を選ぶと整理しやすくなります。

━━━━━━━━━━━━━━━━

■ まとめ

・文字の色は、背景や周囲の色とセットで確認する

・写真の上の文字が読みにくいときは、帯を敷くか、写真と文章を分ける

・太字は、特に伝えたい短い言葉に絞る

・色やフォントは、同じ役割ごとにそろえる

・最後にスマートフォンでも確認する

まずは、最近のお知らせを1つだけ見直してみてください。

文字が背景に埋もれず、大切な内容が見つけやすくなれば、その整え方を次の記事にも使えます。

もし「写真の上の文字がどうしても読みにくい」「記事ごとに文字の雰囲気がばらばら」「自分で変えた設定を元に戻せない」という場合は、ココナラ内のメッセージから、現在の画面のスクリーンショットを添えてご相談ください🌿