だれでも読みやすい記事の書き方とは？アクセシビリティのためのライティングガイド

インターネット上の記事は、さまざまな方法で読まれています。画面の文字をそのまま読むひともいれば、音声読み上げ機能を使って聞くひと、文字を拡大して読むひと、見出しをたどって必要なところを探すひともいます。

この記事では、どんな読み方であっても、読者に記事の内容をわかりやすく届けるためのポイントを紹介します。アクセシビリティというと専門的に聞こえるかもしれませんが、大切なのは「できるだけ多くのひとに伝わる書き方をする」ことです。

アクセシビリティとは

アクセシビリティとは、すべてのひとが、情報やサービスを利用しやすくするための考え方です。

情報の受け取りやすさは、そのひとの状態や、置かれている状況によって変わります。たとえば、目が見えない、腕を骨折している、赤ちゃんを抱いていて片手しか使えない、日差しで画面が見えにくいといった場合があります。こうした状況でも、アクセシビリティに配慮していれば内容が伝わりやすくなります。

たとえば、画像に説明文をつけておけば、音声で聞いているひとも、通信が遅くて画像が表示されなかったひとも、記事の内容を理解しやすくなります。アクセシビリティの高い記事を書くことで、より多くの読者が、記事の内容をきちんと受け取れるようになります。

記事の書き方

タイトルは、記事の内容が伝わる言葉を前に持ってくる

タイトルは、検索結果や通知の一覧では途中で切れることがあります。記事の内容がわかる言葉を前に置いておけば、途中で切れても伝わりやすくなります。

△避けたい例：【重要】お知らせ
◎おすすめ：秋の写真展を10月3日から開催します

見出しは、それだけで内容がわかるようにする

読み上げソフトには、見出しだけをたどって移動する機能があります。目次から気になるところに飛んで読むひともいます。どちらの場合も、見出しだけで内容がわかると、必要な情報を見つけてもらいやすくなります。

△避けたい例：はじめに／その1／まとめ
◎おすすめ：応募に必要な3つの書類

見出しは、大きい階層から順番に使う

読み上げソフトは「見出しレベル2」のように見出しの種類も読み上げます。そのため、見出しの順序が入れ替わると、どこまでが前の話の続きで、どこからが新しい話題なのかがわかりにくくなります。内容のまとまりがわかるように、小見出しは大見出しの内容のなかで使いましょう。

文字を大きくしたいという理由だけで見出しを使うのは、避けたほうが安心です。強調したいだけなら太字が向いています。

箇条書きは、エディタの機能を使う

行頭に「・」を打って並べるのではなく、箇条書きの機能を使います。

見た目が同じでも、機能を使ってつくったリストは「ここから3個の項目が始まります」というふうに情報を持ちます。一方、記号を打っただけの行は、ふつうの文章として扱われます。

1文が長くなりすぎないようにする

音声で聞いているひとは、文章内の気になったところへ戻るのがかんたんではありません。そのため、1つの文にたくさんの情報を詰め込まず、できるだけ短く区切りましょう。目安としては、1文のなかで読点が3つを超えたら、文を分けることを検討しましょう。

△避けたい例：応募は10月3日までで、書類は3種類必要ですが、うち1つは郵送のみの受付となっているため、早めにご準備ください。
◎おすすめ：応募は10月3日までです。書類は3種類必要で、このうち1つは郵送でのみ受け付けます。早めに準備してください。

色だけで情報を伝えない

色の見分けがつきにくいひとには、どれが赤い文字なのかなどがわからないことがあります。音声で聞いているひとには、色の情報そのものが届きません。そのため、色だけで区別するのではなく、文字でも内容がわかるようにしましょう。

△避けたい例：赤い文字の項目は必須です
◎おすすめ：「必須」と書いてある項目は、かならず記入してください

記号の使い方に気をつける

音声で読み上げるとき、記号は読み飛ばされることもあれば、記号の名前が読まれることもあります。どちらになるかは読者の環境によって異なります。そのため、記号がなくても意味が伝わるように書くと安心です。

• よくある例

  • 「13時-15時」ではなく「13時から15時」

  • 「7/28（火）」ではなく「7月28日（火曜日）」

位置だけで情報を伝えない

noteの記事は画像や埋め込みが縦に並ぶため、「上の画像を見ると」「くわしくは下の記事で」など、位置を使って説明したくなることがあるかもしれません。でも音声で聞いているひとには、どれを指しているのか特定しにくくなります。また、文字を大きくしているひとの画面でも、位置関係が変わることもあります。

「下記」「上記」も同じです。「次の3つの書類」のように言い換えるか、指しているものを具体的に書きましょう。

△避けたい例：くわしくは下の画像を見てください
◎おすすめ：応募に必要な書類は、身分証明書・住民票・申込書の3つです

画像の入れ方

画像は、目で見ているひとには内容が伝わりやすい一方、音声で聞いているひとには、そのままでは画像の内容が伝わりません。通信環境などによって画像が表示されないこともあります。画像だけに大切な情報を載せていると、そうしたひとたちにはその情報が伝わらず、情報がないのと同じになってしまいます。

そのため、画像の内容は文字でも伝えるようにしましょう。方法は、代替テキストを書くことと、同じ内容を本文にも書いておくことの2つです。

代替テキスト（ALT）を設定する

代替テキスト（ALT）は、画像の内容を文字で説明したものです。noteでは画像のALT欄に入力します。

写真などの画像の場合
何が写っているのかを具体的に書きます。

△避けたい代替テキスト：画像
◎おすすめ：満開の桜並木の下を、傘を持った人たちが歩いている

代替テキストを適切に書けているか迷ったときは、「電話で相手にこの画像の内容を伝えるとしたら、何と言うか？」を考えてみるのもひとつの方法です。

画像のなかに文字が入っている場合
画像に書かれている文字も代替テキストに含めます。たとえば画像に「秋の写真展／10月3日から10月20日／市民ギャラリー／入場無料」と書かれているなら、その4つの情報をすべて代替テキストに入れます。

△避けたい代替テキスト：秋の写真展の告知画像
◎おすすめ：秋の写真展の告知画像。10月3日から10月20日、市民ギャラリー、入場無料

図やグラフの場合
軸の名前や目盛りをすべて並べるのではなく、その図やグラフから読み取れることや、伝えたいことを書きます。

△避けたい代替テキスト：来場者数のグラフ
◎おすすめ：月別の来場者数の棒グラフ。8月がもっとも多く、2月がもっとも少ない

リンクの貼り方

テキストリンクの文字は、リンク先がわかるように具体的に書く

読み上げソフトには、記事のなかにあるリンク部分だけを一覧にしたり、読み上げたりできる機能があります。そのため、「こちら」のような抽象的な言葉にリンクが貼られていると、どんなページにつながるのか判断できません。

URLをそのまま貼るのも避けたいところです。URLは1文字ずつ読み上げられることがありますし、目で読む読者にとっても、リンク先の内容がわかりません。

△避けたい例：くわしくはこちら
◎おすすめ：秋の写真展の応募要項

リンクを埋め込む場合も、ひとこと説明を添える

noteのエディタでリンクを貼ると、自動で埋め込みカード形式になります。カードには記事のタイトルが表示されますが、それだけではなぜその記事を紹介しているのかまでは伝わりません。紹介している理由をひとこと添えておくと、読者が自分に必要な情報かどうかを読む前に判断しやすくなります。

△避けたい例：くわしくはこちら
◎おすすめ：前回の写真展の様子を書きました。当日の雰囲気が伝わると思います。

公開前にできること

読み上げ機能を使って、実際に聞いてみる

パソコンやスマートフォンには、画面の文字を読み上げる機能が標準で入っています。設定のアクセシビリティの項目から使えます。

実際に聞いてみると、目で読んでいたときには気づかなかった、わかりにくい箇所が見つかることがあります。画像や記号を使ったところだけでも確認してみるのがおすすめです。

AIを使って確認する

AIに記事を渡して、アクセシビリティの観点から確認してもらう方法もあります。確認してほしいポイントを具体的に伝えると、精度が上がります。

AIプロンプト例

代替テキストをAIにつくってもらうこともできますが、そのまま使うのは避けたほうが安心です。AIは、その画像を記事に置いた理由まではわかりません。記事の文脈に合っているか、自分で読み直してみてください。

エディタからnoteのAIアシスタントを利用して、確認してみるのもおすすめです。AIアシスタントの使い方についてはヘルプページ「note AIアシスタントについて」をご覧ください。

アクセシビリティは、読みやすさそのもの

わかりやすいタイトルや見出しをつける、1つの文を短くするなど、この記事で紹介したことの多くは、文章を読みやすくするための基本とも重なります。

アクセシビリティを意識して、だれにとっても内容を理解しやすい記事を書くことは、あなたの記事を読んでくれる読者を増やすことにもつながります。

noteのアクセシビリティ施策についてまとめたマガジンはこちら。

noteの公式X（Twitter）、公式Instagramでは、創作に役立つヒントやすてきな記事を紹介しています。みなさんのフォローをお待ちしています！