修正依頼を受けて「どう対応しよう？」と頭を抱えることは、ありませんか。この記事では、HTML・CSSデザイナーが職場であるある！と感じる困りごとの解決策をご紹介します。今回は、文章の可読性を上げる方法。“ユーザーのために、より読みやすく”を意識するあなたに届きますように。
「文章が読みにくい...」
あなたならどう修正する？
修正依頼者
文章がぎゅうぎゅうに詰まっていて、なんだか読みにくくて…。
自分
確認します。
修正依頼者
あと、難しい漢字には、ルビもふってください。
自分
承知しました。修正します。
（どうすれば、文章は読みやすくなるかな...？）
SNSの普及により、写真や画像、動画、音声などのコンテンツに需要が集まっていますが、ことウェブサイトにおいては、文章がもっとも重要だと私は捉えています。
見出しやメインビジュアルのコピー、本文、リストなどの視認性や可読性を確保することは、ウェブデザインをする上で必須のスキルで、デザインを再現するためのコーディングスキルはぜひとも得ておきたいものです。
今回は、読みやすい文章にするためのコーディング方法を4つご紹介します。初歩的な内容ですが、長く必要とされるスキルなので、復習としてもぜひご活用ください。
1.要素間に余白をつくる
文章と文章の間、見出しと文章の間、画像と文章の間、または背景と文章の間など。これらの余白を調整することで、文章は読みやすくなります。
CSSでは、marginやpaddingを使用し、どちらでも余白を調整することができますが、一般的には以下の方法で使うことが多いです。
■margin
2つの要素間の余白
■padding
1つの要素内の余白
指定する要素のどの部分の余白を空けるかは、top、right、bottom、leftと4つのプロパティを指定するか、margin: 10px 10px; などとショートハンドで記述します。
■ポイント
コードを短く書くには
2022年6月にIEのサポートが終了してからは、margin-block、margin-inline、padding-block、padding-inlineも使用可能となり、コードの短縮化を図ることができるようになりました。
margin、paddingともに、blockとinlineの位置の概念は同じで、blockはブロック方向の先頭と末尾、inlineはインライン方向の先頭と末尾に、それぞれ余白が指定できます。
ちなみに、top、right、bottom、leftの概念はなく、要素の先頭を『start』、要素の末尾を『end』と、個別に指定できます。
要素の左右中央配置でmarginを使用するケースがありますが、以下のように短縮化が図れます。
div {
margin-inline: auto;
}
ただし、この書き方はblockとinline、それぞれの先頭と末尾への指定のため、たとえば、writing-mode: vertical-rl;とテキストを縦書きで指定した場合は、以下のように余白の位置が変わるので注意が必要です。
2.行間に余白をつくる
文章は、行間の余白を適切につくることで読みやすくなります。
line-heightは、pxや%、emなどの単位で指定ができますが、単位は指定しない記述がおすすめです。単位未指定により、フォントサイズに指定した値を掛けたものが行間の値になるため、要素ごとに指定しなくても適切な余白をつくることができます。
h2 {
line-height: 1.6;
}
■ポイント
line-heightを正しく使うには
line-heightの適切な値は、要素間の余白や、テキストサイズ、画像のサイズなどを考慮して、デザインに合わせて都度変更するのが理想です。
どうしても難しい場合には、以下の記事を参考にしてみるといいと思います。
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦 - Yahoo! JAPAN Tech Blog
https://techblog.yahoo.co.jp/entry/2023052430423559/
3.文字間に余白をつくる
メインビジュアルのコピーや見出しなど、フォントサイズの大きい文章は、文字間の余白を適切につくると読みやすくなります。
■部分的なテキスト間の余白
部分的な要素の文字間の余白については、letter-spacingを使用することで調整することができます。
CSS
h2 {
letter-spacing: 5px;
}
■約物の間延び調整
約物（やくもの）とは、句読点やカッコなどのことを指します。
約物にはデフォルトで余白があるため、フォントサイズの大きい文章などでは読みづらくなることがあります。以下のように、約物の余白を取ることで読みやすく調整します。
CSS
h2 {
font-feature-settings: "palt";
}
上記のように、font-feature-settings: "palt";で、全角英数字や約物などが文字詰めされます。その上で、以下のように、先に紹介したletter-spacingを指定することで、可読性の高い文章になります。
h2 {
font-feature-settings: "palt";
letter-spacing: 5px;
}
■1行目の字下げ（空白）設定
デザインによっては、1行目の先頭に余白をあける字下げを採用することがあります。プライバシーポリシーなど文章のみで構成されたページコンテンツで見かけます。
CSS
h2 {
text-indent: 1em;
}
上記のように、text-indent: 1emを指定することで、1文字分の余白をあけることができます。
4.難読文字にはルビを設定する
一般的に認知されていない難読漢字は、以下のようにルビをふると読みやすくなります。
HTML
<ruby>柳葉魚<rt>ししゃも</rt></ruby>
難読漢字ではなくとも、ターゲットを考慮して読むのが難しいであろうことが予想される漢字には、ルビをふっておくだけで可読性は上がります。手間を惜しまず、設定しておくようにしましょう。
・・・
今回は可読性をテーマに紹介しました。
テキストに適切な指定をすることで読みやすくなり、ユーザーが使いやすいウェブサイトになります。読みやすさや使いやすさは、デザイン段階での検討となるため、コーダーの領域ではありませんが、そもそも、コーディングで表現できるものがわからないと、意図しない作業が増える可能性が出てきます。
デザイナーとのコミュニケーションをはかる際に、本記事のような知識は必要です。より良い制作にするために、ぜひご活用ください！
Webデザイナー。Webサイト制作をメインにサイト設計からデザイン、コーディングまでをワンストップで請負うフリーランスWebデザイナーとして活動。シンプルで伝わりやすいデザインを得意とし、中小企業のコーポレートサイト制作を主として制作。Twitter（@pulpxstyle）では、自身の経験から得た制作の現場で使えるTipsやアイデアを発信中。著書は、『現場で使える Webデザインアイデアレシピ』（マイナビ出版）。
▼これまでのHTML・CSS修正のアイデア
・fit-contentで画像キャプションを最適化するには
・モニターサイズに合わせて画像を出し分けする方法
・モニターサイズに合わせて改行位置を指定する方法
