文書構造を意識した原稿作成

文書構造とは

文書構造とは、情報を「見出し」「本文」「箇条書き」など役割ごとに整理し、適切な階層構造にしたものです。文書構造を意識すると、見た目がわかりやすくなるだけでなく、スクリーンリーダーなどの支援技術が文書を正しく解釈できるようになります。

文書構造をもたない文章の例

ただの「テキスト」状態では、文章の役割は原稿を書いた人にしかわからない。

適切な文書構造の文章の例

図左： テキストに文章としての役割を持たせた状態（文章の役割）
図右： 文章としての役割をHTMLタグで紐づけた状態（文書の階層構造）

文書構造を意識した原稿作成のポイント

文書構造を意識した原稿作成を行うには、以下のポイントを注意して原稿を作成します。

1.内容がわかる記事タイトル、ページタイトルをつける

• 記事タイトルやページタイトルは、そのページの大見出し（h1）にあたる大事な文字列です。タイトルを読むだけで、記事の内容やページ内容の主題がわかるタイトルをつけてください。
• 記事タイトルやページタイトルは、検索エンジンの検索結果などにも表示されるため、長すぎるタイトルは控えてください。（最大文字数の目安：日本語で40文字程度。）
• 他のページと混同されないユニークな記事タイトルやページタイトルをつけてください。

2.見出しの構造と順番を意識する

• ユーザーが読みやすいように、大見出し（h1）、中見出し（h2）、小見出し（h3）などを意識して文章を構成します。（見出しはhtmlではh6まで設定できます。）
• 見出しは順番を飛ばしてはいけません。大見出し（h1）の次に小見出し（h3）がきたり、大見出し（h1）の前に小見出し（h3）がくるのは非推奨です。
• 文字の大きさだけで情報の重要度を表現した場合は、スクリーンリーダーなど支援技術やコンピューターでは、その重要度を認識できません。

3.リスト（箇条書き）を意識する

webサイト上では、「・」「●」のテキストを用いて、リスト風に表現することはできません。

• 2つ以上の項目を扱う場合は、「・◯◯」「・△△」のようにリスト（箇条書き）を利用してください。
• 手順や流れなど順番を扱う場合は、「1. ◯◯」「2. △△」のように番号つきのリスト（箇条書き）を利用してください。
• 原稿作成時はリスト（箇条書き）部分がわかるように、箇条書き機能などを利用して作成してください。

※やむを得ず原稿で箇条書きが使用できない場合、Webサイト上ではリスト（箇条書き機能）を利用して制作します。

4.装飾的な表現として●や■など用いて表現しない

原稿で●などの記号が見出しなどで装飾的に使われている場合は、Webサイトでは、●などを用いずに箇条書きなどの適切な機能で制作します。（ ●を「くろまる」と読ませたい場合など、記号本来の意味で使う場合は問題ありません。）

見出しなどを含めて、●や■などの記号を用いての表現は、webサイト上では使用できません。（スクリーンリーダーなどの支援技術で「くろまる」などと読み上げられることを回避するため。）

5.空白（スペースキー）や記号で見た目を整えない

• Webサイト上では、スペースキーの空白や記号を見た目を整えるために使用しないでください。スクリーンリーダーなどの支援技術で空白は「ブランク」などと読まれる場合があります。
• 「北海道」を空白をいれて「北　海　道」とした場合、スクリーンリーダーなどの支援技術で読み上げた場合に「北　海　道（きた　うみ　みち）」といった読み上げがされてしまう可能性があり、本来伝えたい情報とは異なってしまう可能性があります。
• 原稿で空白を用いて見た目を整えていた場合、Webサイト上では見た目を調整していた空白は削除して制作します。