Web上の文章、たとえばブログでは「見出しが重要」とよく言われます。
そもそもですが「見出し」とはなんでしょうか?
次の画像にある「うどんを毎日食べよう」の部分が見出しに該当します！
（※ ここではデザインの話ではありません）
ではなぜ「見出し」をを入れるのかについて、「見出し」使う理由を3つの視点で説明しますね。
読者目線での「見出し」を使う理由
まずは読者目線で「見出し」を使う理由についてお話しします。
シンプルにいうと、「見出し」は新聞の見出しと同じ役割です。
新聞を読むときは、文章をいきなり読むのではなく、まず「見出し」を目で追いますよね。
見出しから内容をパパっと把握し、興味をもったところの文章を読んでいくわけです。
つまり、読む前に文章を理解しやすくするのが見出しの目的です。
見出しがない文章の例
では、見出しがないとどうなるのでしょうか？ あえて見出しを入れていない文章を見てください。
見出しがない文章の例
ブログを始めるときにはサーバーを借りる（＝契約して年間でいくら……という形でお金を払う）ということが必要になってきます。先ほども書きましたが「サーバー」というのはブログを置いておく場所のことです。サーバー会社はいろいろありますが、安いサーバーとしてはロリポップ！が有名です。お次は「独自ドメイン」についてです。独自ドメインというのは自分だけのURL（ホームページアドレス）のことです。このブログで言うと……https://yossense.com/というアドレスですね。これを打ち込めばたどり着くので、ネット上の住所みたいなものです。独自ドメインを取得したあと、サーバーの管理画面に戻りましょう。サーバーで取得した独自ドメインを追加する作業をして、いよいよ、WordPressを、契約したサーバーに入れましょう。以前はめんどくさい方法で手動でインストールしていましたが、今ではサーバー側で「簡単インストール」というものを用意してくれています。
パッと見て、何が書いてあるかわかりますか？ ムリですよね（笑）。
メリハリもない文章で、パッと見たときに必要以上に文章が多く見え、読む気がなくなります。
見出しを入れた文章例
では見出しを入れてみました。
見出しを入れた文章例
サーバーと契約する
ブログを始めるときにはサーバーを借りる（＝契約して年間でいくら……という形でお金を払う）ということが必要になってきます。
先ほども書きましたが「サーバー」というのはブログを置いておく場所のことです。
サーバー会社はいろいろありますが、安いサーバーとしてはロリポップ！が有名です。
独自ドメインを取得する
お次は「独自ドメイン」について紹介します。
独自ドメインというのは自分だけのURL（ホームページアドレス）のことです。
たとえば「https://example.com/」というアドレスですね。
これを打ち込めばたどり着くので、ネット上の住所みたいなものです。
WordPressをインストールする 独自ドメインを取得したあと、サーバーの管理画面に戻りましょう。
サーバーで取得した独自ドメインを追加する作業をして、いよいよ、WordPressを、契約したサーバーに入れましょう。
以前はめんどくさい方法で手動でインストールしていましたが、今ではサーバー側で「簡単インストール」というものを用意してくれています。
どうですか？ 見出しのすごさが伝わりましたか？
Google目線での「見出し」を使う理由
今度はGoogle目線での「見出し」を使う理由について紹介します。
「見出し（ここでは『見出しタグ［Hタグ］』と呼びます）」をきちんと入れておくと、検索結果での順位を上げたいときに有効なのです。
「Googleがこの記事に書いている内容を理解しやすい」というのが正しいですね。
たとえば「犬について」という記事なら、次のような見出しが想像できます。
- 犬ってなに?
- 犬の種類
- 犬の好物
- 犬の買い方
↑
これらの情報は「犬について知りたい読者」が知りたい情報ですよね？
こういうキーワードをきちんと「見出し」として設置すると、Googleが「この記事にはこういう情報を書いているのだな」と理解しやすくなります。
すると、そのキーワードを含むワードの順位が上がりやすいのです。
【重要】正式な「Hタグ」を使う
ではどうすればGoogleに「ここが見出し」ということが伝わるのでしょうか?
それは「見出しタグ（Hタグ）」を使います。HTMLでは<h2>や<h3>のように表記されるコードです。
間違っても、太字や大きい文字で代用しないでください。
コードがわからなくても大丈夫。WordPressなら下の画像のように選ぶだけで「見出しタグ」が勝手に入ってくれます。
見出しは「見出し2（<h2>タグ）」から使いましょう。
とつぜん「見出し3」を使うのはやめましょう!
「hタグ」以外ではGoogleに「見出し」だと伝わらない
ここで重要なのは「文字サイズを大きくする」だけではダメだということです。
本来の「見出し」を使わずに文字サイズを大きくし装飾したのでは、Googleは「見出し」として認識してくれません。
「単に太い文字、強調したい文字にしているただの文」のような扱いにはなります。
文章構造の中での「見出し」とは受け取ってもらえないんスね！
そうなると、次のような状態になります。
- 記事の内容（構造）がGoogleに伝わりづらい
- 検索で上位に来にくい
ぜひ「見出し」を使って、Googleに「ここ、重要だよ」ということを伝えてください。
Webサイト運営者側の「見出し」を使う理由
そして最後に記事を書く側、つまりWebサイト運営者の「見出し」を使う理由を紹介します。
「見出し（見出しタグ）」として管理しておくと、あとで見出しのデザインを変えたいと思ったときにCSSを使って一括でデザイン変えられるんですね。
一瞬で100記事分の見出しデザインを変えられます。
もしブログを始めたばかりで、意味がわからなくても「見出し2」や「見出し3」は入れておきましょう。
見出しを入れるには、上の画像のようにすればいいだけなのでカンタンですよね。
HTMLやCSSの知識がついた数か月後に「あのときの自分ありがとう」と感謝すると思います。
ちなみにわたしは、「見出し2」から「見出し4」までしか使っていません。
【参考】CSSで「見出しデザイン」を一括変更する例
CSSで見出しデザインを一括で変更できるという例を紹介します。
たとえば、こんなデザインの見出しがあるとします。
ドラゴンボールについて
CSSではこう記述されています。
h2 { font-size:180% ; color : red ; border-bottom : solid 2px red ; font-weight : bold ; }
なんかカッコ悪いデザインっスね……。
なのでこんなデザインに変更したいとしたら……
ドラゴンボールについて
CSSを記述しているところで、次のように文字（コード）をチャチャッと書き直すと、100記事あったとしても、すべての見出しのデザインが一瞬で変わります。
h2 { width:92%; padding:0.1em 0.5em;border:solid 3px #0091ff;color:#0091ff;font-size:150%; }
ということで、見出しをキチンと付けていれば、デザインの管理もラクだということです。
まとめ
長々と説明しましたが、すべて理解できなくてもかまいません（笑）。
理由うんぬんはともかく、「見出し」を使いましょう！
