ホームページの見出し、上手な使い方を説明します。読者対象は、ホームページの見出しを上手に使いたい方です。単なる見出しの使い方ではなく、アウトラインを意識することで読みやすい文章にする方法を説明しています。
なぜホームページの見出しは、アウトラインが重要なのか？
ホームページの文章を書いていて、「うまくまとまらず、読みやすい文章にならないなぁ。」と思ったことはありませんか？ 内容そのものがうまく書けていても、説明のしかたがうまくないと、どうしてもまとまりのない読みにくい文章になってしまいます。
そんな時は、HTMLの見出しをうまく使って、アウトラインを意識した記述をしてください。アウトラインとは文章構造のことですが、構造を論理的に組み立てることで、非常にまとまりのある文章にできます。つまり、アウトラインを意識すると、読みやすい文章になるんです。
そこで、ホームページではどのようなアウトラインにすればよいのか、HTMLの見出しの使い方を中心に説明しましょう。
ホームページの見出し、アウトライン構造のポイント！
それでは、ホームページの見出しについて、アウトライン構造のポイントを説明します。ポイントは７つですので、ぜひすべてに目を通してください。
見出しで、アウトライン構造を作るメリットとは？
アウトラインを作ると、文章の書き方が楽になります。なぜなら、アウトラインは書く内容を整理でき、文章の構成をまとめやすいからです。アウトラインを意識した文章は、意味ごとにブロック化されるので、ブロックを簡単に入れ替えられます。つまり、編集がとても楽なんですね。
したがって、１ページは「意味のあるブロックの集合体」と考えることができます。比較的長い文章であっても、短い文章を小分けにして書くという感じにできるので、まとめやすくなって明らかに書きやすいんです。これなら、特別な文才がなくても十分に書けると思いますよ。
このように、文章が見やすくなるだけでなく、文章が書きやすく編集しやすい点も、アウトラインをしっかり作ることのメリットなんです。
見出しによるアウトラインは、閲覧者のメリットも大きい。
アウトラインは、閲覧者にとってもメリットが大きいです。なぜなら、文章が意味ごとにまとまるから読みやすいんです。説明がいろいろと飛んでしまうと、読み手は当然混乱してしまいます。例えば価格の説明がいろいろな場所にあると、「一か所で説明してくれ！」と思いますよね。
また、見出しを使ってブロック分けするので、閲覧者は「このテーマは読みたいけれど、これは読まなくてもいいや」と取捨選択しやすくなります。つまり、書き手の書きやすさがそのまま読み手の読みやすさにもなっているのが、アウトラインの大きなメリットでしょう。
このように、読み手と書き手両方にメリットがあるのがアウトラインによる構造づくりなんです。
HTMLの見出しとは？
続いてHTMLの見出しについて説明します。ここでいうHTMLの見出しとは、Hタグのことです。H1とかH2などといったタグがあることは、ご存じのことと思いますが、このタグについて説明していきます。まず、使い方や仕様は次の通りです。
- H1～H6まで存在（H1が大見出しで、H6に向かって小見出しになっていきます。）
- 記述例：H1の場合 ⇒ <h1>Hタグに関する説明</h1>
H2～H6の場合も記述の方法は同様です（小文字での記述が無難です。）
このように、ごく一般的なタグと同様な使い方です。ところで、Hタグは見出しなので、長い文章を入れる用途には使いません。あくまでも見出しとして使ってください。
HTMLの見出しを使ったアウトラインとは？
続いてアウトラインについて説明します。先ほど簡単に触れましたが、アウトラインとは文章構造のことで、文章に一定の構造を与えて分かりやすく整理することです。ホームページの場合は、見出しを付けてその下に文章を書けば、基本的にはアウトライン構造が作れます。
具体的には、以下のように Hタグを配置して、その下に Pタグで段落を構成すれば、それでアウトラインにできます。要するに、 Hタグから下の部分を、１つのまとまりとしてとらえるわけです。
- <h1>見出し</h1>
- <p>文章１</p>
- <p>文章２</p>
このように、文章に構造を与えて、内容を論理的に整理することがアウトラインです。なお、もっと大きく見ると、『 header、nav、article、main、footer 』などページ全体の構造もあるんですが、ワードプレスのようなシステムを使うと、意識することはまずありません。
したがって、ほとんどの方に影響がある、本文のみを対象に説明していきます。
アウトラインの具体的な記述方法とは？
それでは、具体的な記述方法を見ていきましょう。本文のアウトラインをおさらいしておくと、文章に見出しを付けて、小さなまとまりを作ることでした。別の見方をすると、見出しを付けて区切ることともいえるでしょう。
見出しタグの具体的な使い方は、簡単な例を使って説明します。例えば「麺類のお話し」というページを作ったとすると、次のように使います。（文章の部分は、実際には P タグを使います。）
見出しタグとその該当範囲を色分けしました。上の図の場合、H1 の「麺類のお話し」は全体をまとめています。そして、 H2 で「うどんとは何か？」と大まかに分類して、さらに、H3 で「きつねうどん」や「天ぷらうどん」として細かく分けていますね。（そばについても同様です。）
つまり、麺類のお話を「うどん、そば、まとめ」という３部構成にしているということです。なお、それぞれの見出しタグは何回使ってもいいんですが、使う順番は守ってください。例えば、 H2 がないのに H3 が来ることがないようにしてください。
また、 H1 を全ページ統一の内容にしていることもあると思いますが、その場合は H2 から始めても構いません。つまり数字が一つずれて、 H2 ～ H4 を使うということになりますね。要するに、見出しタグで内容ごとに別けることができていれば、それで構いませんよ。
見出し以外に、まとめるタグはあるのか？
見出し以外に、まとめるタグが必要なことがありますが、そんな時は SECTIONタグを使います。どのようなシチュエーションなのか先ほどの例で説明すると、きつねうどんと天ぷらうどんの話の後にまとめの言葉として「これがうどんです。」を入れたい場合です。
そのまま続けて文章を入れると、どうしても H3 の天ぷらうどんの話になってしまいます。そこで、きつねうどんと天ぷらうどんを SECTION タグで囲みます。
このように SECTIONを使用すると、 H3のレベルをまとめることができるので、天ぷらうどんの後に文章を入れても、 H2の文章にできるわけです。頻繁に使うことは無いかもしれませんが、検索エンジンに対して、正確にアウトラインを伝えることができる方法です。
なお、見かけ上は何も変わりません。もちろん、SECTIONに対して CSS で書式を設定すれば、行間を調整するなど見た目を変えることができます。見た目にも違いを出せば、見やすく理解しやすい文章にすることができるでしょう。
アウトラインの順守は必須なのか？
ここまで、HTMLの見出しを使ったアウトラインについて説明しましたが、このような文章構造は必須なのでしょうか？ 実は必ずしもそうではありません。なぜなら、アウトラインで見やすく理解しやすい文章が書けても、役に立つ文章になるかどうかは別問題だからです。
例えば、 Google においても基本的にはアウトラインが整ったページを推奨しています。しかし、役に立つ文章であれば、多少アウトラインやタグの使い方が誤っていても、上位表示させるという考え方だそうです。アウトラインが整っていれば有利であるとは、言い切れないんですね。
したがって、アウトラインを意識するのは重要ではあるものの、まとまりのある文章を書きやすくする方法の一つとして考える方がよいと思います。なお、アウトラインを知ったからといって、それだけで役立つ文章が書けるわけではありませんので、注意してください。
このように、アウトラインの順守は必須ではないものの、見やすい文章が書けるという点で、従うべきであると考えてください。
まとめ：アウトラインは、書き手にも読み手にもメリットがある。
いかがでしたか？ ホームページの見出し、上手に使い方を説明しました。
アウトラインで構造を作るメリット、閲覧者にとってもメリットは大きい、HTMLの見出し、HTMLの見出しを使ったアウトライン、具体的な記述方法、見出し以外にまとめるタグ、アウトラインの順守は必須なのか、と言った７つのポイントがありました。
文章を読みすく理解しやすいものにするには、アウトラインを意識することで文章構造をしっかり作ることが重要です。アウトラインは必須ではありませんが、閲覧者のためを考えると、ホームページを書く際は常に意識すべきでしょう。
ただし、アウトラインを作って見やすい文章にしたからと言って、それだけで良い文章になるわけではありません。良い文章とは、読み手の知りたいことを分かりやすく伝えている文章です。ぜひその点を理解した上で、ホームページの見出しを活用していただければ幸いです。
以上、「ホームページの見出し、上手に使うには？」と題して説明しました。