こんにちは！mizuki（@kikapyon）です。
「Webサイトにおける最適な一行あたりの文字数ってどのくらいなんだろう？」と疑問に思うことはありませんか？可読性の高い文字数のガイドラインもあるはず！と思い調べてみました。
結果、デスクトップの場合、日本語は〜40文字、英語は〜80文字。モバイルの場合は日本語は20文字前後でした。
ユーザーは長い文章を読む時、認知的な負荷を感じます。各行に適切な量の文字を配置することは、テキストを読みやすくするための鍵です。根拠に基づいた一行の読みやすい文字数と共に箇条書きのポイントもご紹介するので、ぜひ最後までご覧ください。
ユーザーが好む文字数とは
ユーザーは基本的に、簡潔で読みやすく、客観的な文章を好みます。簡潔さ、読みやすさ、客観性に共通するのは、それぞれがユーザーの認知的負荷を軽減し、より速くより効率的に情報を処理することにつながるという点です。
そして新しい行が始まるたびに最初は文章に集中し始めますが、この集中は進んでいくうちに徐々に薄れてきてしまいます。そのため、文章自体もなるべく短い方が読みやすいとされています。
では具体的にどのくらいの文字数が読みやすいのでしょうか。
一行の文字数についてデスクトップの場合、W3Cで以下のように定義されています。
行は80文字または80グリフ(CJKの場合は40)を超えてはなりません。
「引用：Visual Presentation (Level AAA) （筆者翻訳）」
※CJKとは中国語（China）日本語（Japan）韓国語（Korea）の略です。画像のように英語とCJKでは同じフォントサイズでも見え方が異なります。
フォントサイズについては、こちらの記事をご覧ください。
【関連記事】デジタルプロダクトで読みやすいフォントサイズを模索する4つの方法
日本語
英語
画像からも分かる通り、推奨されている長さの文字数は一息で読める長さになっていますね。
テキスト行が短すぎる場合、目線を何度も移動しなければならず、読み手のリズムが崩れます。そして、現在の行を終える前に次の行を読み始めることになるため、逆に読者にストレスを与える傾向があります。結果として、無意識に重要な単語を見落としてしまう可能性が出てくるのです。
反対にテキスト行が長すぎる場合、読み手がテキストに集中し続けなければならないため、疲労を感じます。これは、行の長さによって一行の始めと終わりを判断するのが難しくなるためです。可視範囲をはみ出る程の行の長さはユーザーのストレスに繋がります。
モバイルではテキストの可読性が低くなる？
まず、一般的にモバイルデバイスでのタスクパフォーマンスは、デスクトップよりも低いことが分かっています。記事の内容が難しい場合、デスクトップと同じレベルの理解をするのにより時間がかかります。したがって、非常に難しいコンテンツは、モバイルでの理解度を低下させる可能性があるということです。さらに、モバイルで難しい記事を読む速度はデスクトップよりも遅くなります。
モバイルの場合は一行あたり何文字を採用しているのか、アプリを実際に調査してみました。
LINE：19文字
Twitter：19文字
いずれのアプリも20字前後でした。デスクトップに比べて横幅が小さいモバイルではより少ない文字数を大きく表示して、可読性を高めることが重要です。
さらに短く端的にするために
情報を提示する最善の方法は、箇条書きにすることです。以下の画像のように箇条書きリストはテキストを短く、アイテムの関係を明らかにしてくれます。さらにページの中でも目立つため、認識性が高まります。
Webサイトは、基本的に長い文章が好まれる場所ではありません。認識しやすいフォーマットなコピーを好みます。そのため、ユーザーは文章を読み飛ばしながら、関心のある部分により早くたどり着きます。
箇条書きのポイント
・行の長さがほぼ同じになるようにリスト項目を作成する
箇条書きリストは、関連項目が含まれている場合に最適です。項目は、同等レベルの重要性を持ち合わせる必要があります。可能な場合は、箇条書き項目がほぼ同じ長さになるようにして、一方が他方より悪目立ちしないようにします。統一された形状を維持することは、見栄えが良く、リストをすっきり見せることに繋がります。
・番号付きリストは、特定の順序または数が重要な場合にのみ使用する
番号付きリストは通常、手順のステップなど、アイテムが特定の順序である必要がある場合や、トップ10リストなど、数字を使用することが重要な場合のみ活用しましょう。
リスト項目の順序または最終的な数字が重要でない場合は、それらに番号を付けないようにすることをおすすめします。番号付きリストの場合、すべての項目を行う必要があると間違った認識をしてしまうことがあるからです。
・リストアイテムは並列文に構成する
各項目には、一貫したスタイルの言い回しが必要です。多種多様な言い回しは直感的でなく、読者の認識を遅らせてしまう(または混乱させてしまう)可能性があります。
各リスト項目を同じように構成しましょう。箇条書きの各項目が同じ品詞(名詞、動詞など)で始まるなど、統一感を持たせるとよいです。
・明確で説明的な文またはフレーズを含むキャプションを使う
導入部分（キャプション）は、リストの内容とその重要性をユーザーに知らせるために大切です。リスト内の各項目が意味のある形で完結している場合は、導入部分は完全に説明的な文である必要はありません。
・フォーマットの一貫性を保つ。
リスト項目が文章の場合、認識しやすくするためすべてのリスト項目に句点（。）を使用しますが文章でない場合は、末尾の句点を使用しないようにしましょう。
・効果が失われる可能性があるため、箇条書きリストを過度に使用しない。
あらゆるビジュアルデザインの手法と同様に、よいとされることをやりすぎると悪影響を与える可能性があります。箇条書きやインデントでいっぱいのページに遭遇すると、ユーザーは読む気が無くなってしまう場合があります。特に強調したいことを抽出しましょう。
おわりに
いかがでしたでしょうか？
行の長さはテキストの読みやすさの1つの要素にすぎないことに注意しましょう。より読みやすくするためには、文字数だけでなくインタラクションコスト（相互作用コスト）、フォントサイズ、コントラスト比、文字間、行間や文章構成など様々な要因を都度改善していくことがおすすめです。
文章の可読性を高め、ユーザーにリーチさせるためにも意識していきたいですね。
参考文献
Readability: The Optimal Line Length「https://baymard.com/blog/line-length-readability」
Applying Writing Guidelines to Web Pages「https://www.nngroup.com/articles/applying-writing-guidelines-web-pages/」
Reading Content on Mobile Devices「https://www.nngroup.com/articles/mobile-content/」
Legibility, Readability, and Comprehension: Making Users Read Your Words「https://www.nngroup.com/articles/legibility-readability-comprehension/」
7 Tips for Presenting Bulleted Lists in Digital Content「https://www.nngroup.com/articles/presenting-bulleted-lists/」
Visual Presentation (Level AAA)「https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html」
