ブログの見出しの使い方・作り方【完読される効果的な付け方】

当ページのリンクには広告が含まれる場合があります。
ブログの見出しの使い方・作り方

ブログの見出しは、SEOの順位にも影響がある重要な要素です。

しかし、ほとんどのWordPressテーマでは見出しのレベルごとに見た目が違うため、単なる装飾として使っているだけ、という方も案外多いです。

本記事では、SEOにとってもユーザーにとっても非常に重要な見出しの作り方・使い方について解説します。

誤った使い方をしていたのであれば、修正することでSEOの順位が改善する可能性が高いので正しく使えているか確認しておきましょう。

本記事の内容
  • ブログの見出しの種類と使い方(どの見出しレベルを使えばいいか)
  • ブログに見出しを付ける4つの効果
  • ブログの見出しの作り方のコツ(見出しの文章の書き方)
  • ブログの見出しデザインの作り方(見た目と伝わり方の最適化)
本記事の内容詳細(目次)

ブログの見出しとは?

ブログの見出しとは?

ブログ記事は複数の「章」で構成されています。

見出しとは、各章のタイトルのことです

各章の内容を短く要約した文章なので、見出しを読めば「この章に何が書かれているか」が一目でわかります。

さらに、見出しが集まると「目次」となり、記事全体で何が書かれているのか把握できます。

このため、読者は各見出しや見出しが集まった目次をまず読んで、記事を読むかどうかを判断するのです。

読者が記事を読んでくれるかどうかは見出しにかかっているため、ブログの見出しは非常に重要です。

見出しの種類と使い方

見出しの種類と使い方

見出しは、h1・h2・h3・h4・h5・h6の6つの段階(レベル)に分かれています。

数字が小さいほどより重要で、ブログでは見出しのレベルによって、使い方が分かれています。

h1はタイトル

h1はタイトル
h1見出しの役割
  • 記事の主題を伝える
h1見出しの使い方
  • タイトルタグと一致させる
  • 文字数は30文字以内を目安にする
  • 記事で狙うメインワードを含める

最も重要度の高いh1は記事の主題にあたります。

実際に使用される場所は、記事のタイトル部分です。

ブログでは、1記事につき1つのテーマ・主題に絞って記事を書くので、通常は1つの記事に1回しか使いません。

HTMLにはもう一つ主題を扱う「タイトルタグ<title>」があります。h1とタイトルタグの違いは画面に表示されるかどうかです。

タグ表示
h1タグページに表示される
タイトルタグページに表示されない

どちらも意味は「主題」なので、h1タグとタイトルタグと全く同じ内容にしてOKです。

h1タグやタイトルタグには、記事で狙いたいメインのキーワードを含めるようにします。ブログはキーワードを主題にして記事を書くからですね。

h1見出し(タイトルタグ)の文字数は30文字以内にし、キーワードはできるだけ最初の方に含めると、検索エンジンでの検索結果でも省略されずに表示されるので、クリック率が上がります。

h2は骨子・テーマ(大見出し)

h2は骨子・テーマ

h1はタイトル部分にしか使わないので、本文ではh2が一番大きい見出しになります。

h2見出しの役割
  • 章の内容を端的に伝える
  • 記事の流れを作る(骨子)
h2見出しを作る時のコツ
  • 長くても20文字前後にする
  • キーワードを含める(関連ワードも含む)

h2をあまり長々と説明的に作ると記事の輪郭がぼやけてしまいます。

詳細な説明はh3以降に譲り、文章全体の流れ(骨子)を構成するように作成しましょう。

また、文章の流れになるので、主題との関連性を高めるために、メインワードや関連ワード(サジェストワード)を含めて作成するのがポイントです。

SEOキーワードの入れ方

記事の流れに入りきらないトピックスの処理方法
  • まとまった内容なら別の記事を作成し、リンクを貼る
  • 補足とわかるようにh2を作る
  • 細かい補足が複数ある場合は、よくある質問を作る

h2を作る際には前後のh2との連続性や関連性に注意しましょう。

話の流れを急にぶった切って、あれも盛り込みたい・これも盛り込みたいとモリモリにしていくと内容がバラバラな記事になってしまいます

しかし、自然な文章の流れになるように気を付けながら作ると、どうしても入りきらない内容が出てきてしまいますよね。

そういった場合は、補足用のh2を作ったり、よくある質問を作ったりするとうまくまとまりやすいです。

h3は詳細の説明(小見出し)

h3は詳細の説明

h3はh2の次に大きい見出しです。

文章の構成にもよりますが、大抵の記事では、h3が最も頻繁に使用される見出しです。具体的な内容を書くことが多いからですね。

h3見出しの役割
  • 詳細を伝える
  • 補足する
  • 列挙する
  • 具体例を挙げる
  • 手順を示す
h3見出しを作る時のコツ
  • h2と関係のないことを書かない(別の話はh2を分ける)
  • 文字数は20文字前後を目安に30文字以内に収める
  • 漏れないようにしっかりカバーしつつ、意味が重複しないように注意する
  • キーワードを入れても良い(無理に入れなくても良い)

h3は親になるh2をさらに掘り下げた内容にしていくというイメージで使います。

具体性の高い詳細な内容になるので、どうしても見出しの文字数はやや増加する傾向が高くなりますが、文章的にならないように注意しましょう。

h2では積極的に検索キーワードを含めるようにしますが、h3にもキーワードを無理に入れようとすると文章の流れに違和感が出てしまいがち。

h3にもキーワードを入れる際は、あくまで自然な話の流れになることを優先して無理に入れなくてOKです。

h2は文章全体の流れを意識しますが、h3は詳細の説明がユーザーに理解されることを意識して使うと良いです。

h3見出しを作る判断基準
  • h3を分けるかどうかは目次に表示したいかどうかで決める
  • 1つのh2に対し、h3が1つしかできない場合は作らないようにする
  • h3を作っても解説内容がほとんどない場合はリストやテーブル・図解にする

h2は記事テーマの流れを構成するためのものですので、比較的自然と内容が決まっていきます。

ですが、h3は見出しにするか、説明文の一部にするかを迷う場面が多くなります。

上記の判断基準でh3を作るかどうかを決めると自然な文章構成にできます。

h4は補足、h5・h6は使わない

h4は、h3のさらに下になる見出しです。

h4見出しの役割
  • 補足のみ

このレベルまで進むと、さすがに本文に近づきすぎるので、通常はめったに使いません。

それでもh4見出しを作るシーン例
  • h3がかなり長くなりそうだから区切った方がいい場合
  • h3の補足事項が複数ある場合
  • 悩みと解決策を1セットで使いたい場合(記事内で距離を離したくない場合)

h3と「親子」の関係にするのが妥当な時はh4にし、「並列」や「順序」の場合はh3に昇格させてしまうといいでしょう。

尚、見出しにはh5やh6もありますが、基本的には使いません。

h5以降を使わないと読みにくくなる記事は、記事が扱っているテーマが抽象的過ぎる可能性があるので、もう少し具体的なレベルで記事を分割する方が読者も読みやすいはずです。

ブログに見出しを付ける4つの効果

ここまで、見出しの重要性と使い方を解説してきました。

見出しの重要性やメリットについて、もう少し掘り下げると、下記のような効果を得ることができます。

見出しを付ける4つの効果
  • 文章が読みやすくなる
  • 目次になる
  • 文章を書きやすくなる
  • Googleに正しく内容が伝わる

順に解説しますね。

文章が読みやすくなる

文章が読みやすくなる

見出しが入ることで、文章は格段に読みやすくなります。

ブログ記事は2000~5000文字くらいの文章量がありますよね。

これを見出しを使わずに書いてしまうと、視覚的に「うっ」とくるのはもちろん、「今何の内容を読んでいるんだっけ?」とわからなくなり、頭に入りにくくなります。

章ごとに見出しが入ることで、一度に把握しなければならない内容が絞り込まれ、今読んでいる文章を整理しながら読み進めることができます。

目次になる

目次になる

見出しは各章の要約です。見出しが集まると、目次になります。

WordPressブログでは、テーマに目次作成の機能が含まれているか、プラグインを使えば目次が作成されます。

目次を設置するメリット
  • 自分が読みたい内容が含まれている記事なのかが一目瞭然
  • 読みたい場所までジャンプできる

検索から来た読者は、冒頭部分で自分が求めている情報が含まれているページかどうかを探しながら記事を読みます。

見出しをしっかり作れば、記事を読むだけの価値があることを知らせることができるので記事を読んでもらえる確率が高まります。

ブログの目次の必要性

おすすめのWordPress目次プラグイン

文章を書きやすくなる

文章が書きやすくなる

見出しを作ると、文章も書きやすくなります。

ブログでは執筆を始める前に、記事構成という作業を行います。

  • 記事に含むべき内容をリストアップする
  • 説明の順番を決める
  • 漏れがないか、蛇足になっていることはないか確認する

見出しごとに構成を組むと、後は本文を書いて肉付けするだけになるので、記事の内容が脱線することなく、伝えたかったテーマを確実に伝えることができます。

Googleに正しく情報が伝わる

Googleに正しく情報が伝わる

見出しタグを使用して重要なテキストを強調する

わかりやすい見出しを使用して重要なトピックを示すと、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

検索エンジン最適化(SEO)スターター ガイド

Google検索セントラルでも上記のように見出しを正しく使うことを推奨しています。

Googleは記事を定期的にクロールし、情報を収集します。

そして、収集したページの内容をできるだけ正確に把握しようとします。

その際、ページの内容を知る手がかりになるものの一つが見出しタグです。

見出しが正しく認識されると、検索結果にページのアンカーが表示されることがあります。タイトルだけが表示されるより、クリック率が高まるのでアクセス数を増やせます。

見出しが正しく認識されると、検索結果にページのアンカーが表示されることがある

ブログの見出しの作り方6つのコツ

ここまでお読みいただいた方は、どの見出しレベルを使えばいいかや見出しの重要性や効果についてご理解いただけたかと思います。

ここからは実際に見出しに使う文章自体について、具体的な作り方や書き方を解説します。

見出しタグは数字の小さい順に使い、追い越さない

見出しタグは数字の小さい順に使い、追い越さない

見出しのタグの役割や使い方については解説してきた通りです。

HTML上のルールとして、見出しタグは数字の小さい順に使い、追い越してはいけない、というものがあります。

h2の次は必ずh3になり、h3の次は必ずh4となります。h2の次に急にh4に飛んだり、h5を使ってはいけません。

文書の構造は、概要→詳細→補足というのが普通であり、概要→補足となったり、補足→概要→詳細というのは構造的におかしいためです。

シンプルにまとめる

シンプルにまとめる

見出しは短くシンプルにまとめましょう。

見出しが長文になってしまうと、「章の内容を短く要約する」という役割を果たせなくなるからですね。

回りくどく抽象的な表現を避け、具体的でキャッチコピーを作るようなイメージで作成しましょう。

数字などを入れて具体的にする

数字などを入れて具体的にする

短く具体的な見出しにするための簡単な方法は数字を入れることです。

数字があると、その章に何個の項目があるのか一目見てわかりますよね。

  • ブログを始めるメリット
  • ブログを始める8のメリット

上記だと、数字の入った方がより具体的です。

また、数字が入ると、自分が思いつく数よりも多いか少ないかを判断し、極端に少なかったら「他に何があるんだろう」と気になりますよね。

反対に完全に一致していると、大体自分の知っている情報だけのはず、ということを把握できるので、読み飛ばす判断もつきます。

数字を入れるのはタイトルタグでも有効な方法なので、主にh1とh2で使用すると効果的です。

ブログの見出しの文字数は30文字以内を目安にする

ブログの見出しは30文字以内を目安に作成しましょう。

h1タグ

タイトルタグと一致させるので、検索結果に表示できる30文字以内を目安に作成します。

h2タグ

文章の流れになるので、短く把握しやすくするため、20文字前後を目安にしましょう。

h3タグ以降

詳細の内容になるので、20文字を目安に、最大30文字以内に収めましょう

人間が一度に知覚できる文字数は13文字だそうです。

日本最大のニュースサイト、Yahooニュースでは、2021年までの約20年間13.5文字で見出しを作るルールになっていました。

最近15.5文字まで増えたのですが、独自の調査で直感的に正しく識別するのに最適な文字数として採用されているそうです。

重要なことをたくさん伝えようとして結果的に何も伝わらない見出しを作るくらいなら、短くても確実に伝えられる見出し作りを心がけたいものです。

見出しだけで記事の内容がわかるようにする

見出しは章の要約であり、見出しが集まると目次になります。

見出しまたは目次を読んだら記事の内容が概ねわかるようにしていきましょう。

読者の興味を引く内容にする

見出しは読者に文章の要約を伝えることの他に、読者に読んでみたいと思わせることも役割の一つです。

読者の興味を惹く見出し
  • メリット・デメリット
  • コツ
  • 効果
  • 実現性
  • 簡単
  • 理由

上記のような言葉で終わる見出しは比較的興味を惹きやすいです。

あまり多用するのはお勧めできませんが、「含みをもたせる」「言いかけてやめる」といった見出しにすると、ついつい続きを知りたくなってしまいます(こういった心理効果をツァイガルニク効果といいます)。

「どういうことなのか知りたい」「読まないと損をする」と感じさせることができれば記事を読み進めていってくれる可能性が高まります。

ブログの見出しデザインの作り方

ここまでの内容で、見出しのレベルの使いどころを把握し、実際に見出しを書く際に押さえておくべきコツを紹介してきました。

最後に、見出しのデザインを整えたりカスタマイズしたりして、見出しの効果を最大限に引き出す作り方を解説します。

見出しレベルに応じたデザインにする

見出しレベルに応じたデザインにする

見出しのレベルは小さい方が重要度が大きくなります。

当然、重要度の高い見出しほど、大きく太い文字になり、前後にマージンもとられ、装飾も強めになるのが普通です。

h3やh4の見出しのデザイン・文字の大きさがh2よりも強くなりすぎないようにデザインしましょう。

多くのWordPressテーマでは、見出しの装飾は好きな組み合わせを自由に選択になっているのでh2よりh3やh4の方が強調されたデザインにしてしまいがち。

私が知る中では、だと見出しレベルに適したデザインになるようにテーマ側で調整されているので、もし自信がないのであればSWELLを使えば確実です。

見出しのデザインの要素と向いているレベル

見出しのデザインには、以下の要素があります。

  • 背景色・塗り
  • 横断する線
  • ワンポイント

背景色にコントラストの高い色を選択すると、強く区切ることができます。したがって、背景色の入った見出しのデザインはh2に向いています。

本文エリアを横断する細い線も、明確に前後を区切ることができます。このため、横断する線を使った見出しのデザインはh3に向いています。

見出しの前にチェックのようなアクセント的に設置しても見出しであることがそれとなく伝わります。他の装飾方法に比べるとやや弱めなので、補足であるh4に向いています。

見出しのデザイン例をコピペで取り入れる

利用者の多いワードプレステーマで使える見出しパターンは以下のとおりです。

WordPressテーマ見出し数
SWELL12
Affinger13
THE THOR53
DIVER14
SANGO36
STORK4
JIN10
賢威1
Cocoon1
Lightning10
Luxeritas1

WordPressテーマに組み込まれている見出しのデザインがイマイチだなと感じた場合はCSSコードをコピペしてデザインを反映させると良いです。

見出しのCSSコードをコピペできるサイト

<外観>→<カスタマイズ>→<追加CSS>に貼り付けて保存すると適用されます。

ブログの見出しの作り方でよくある質問

見出しに改行タグを入れることはできますか?

HTMLの文法的には改行タグ(<br>)を含めても構わないことになっていますが、そもそも改行を入れる必要性は皆無のはずです。

見出しに画像や写真を設定することはできますか?

可能です。

ブログではない一般的なサイトではトップページなどでロゴ画像にh1を設定することが割とあります。

ただ、ブログの場合は文章が主体になるので、やはり文字で見出しは作成するのがおすすめです。

見出しのレベルはどのくらいまでが適切ですか?

基本はh3までにし、どうしても必要な場合のみh4まで使用するのが適切です。

h5やh6を見出しで使うことはまずありません。

目次に出す見出しはh2まで?h3まで?

目次にh2まで出すか、h3まで出すかは迷いますよね。

記事によって正解は異なるはずなので、読者に何を伝えるのが最適なのかを判断しましょう。

h2まで出す場合h3まで出す場合
記事の流れを中心に読者に伝える
目次部分が短く済む
本文までのスクロール量が減る
記事の細部まで読者に伝える
記事の概要がしっかり伝わる
淡泊になりがち目次部分が長くなる
本文までのスクロール量が増える

記事ごとに変更できる場合は都度変更しても構いませんし、本サイトのように、目次はh3まで出すけれど、初期は閉じておき、要約だけ手書きしてディテールまで読みたくなったら開いてもらう、という方法を使ってもいいです。

まとめ:見出しは超重要!作り方をマスターして読まれるブログ記事を書こう

ブログの見出しの使い方や作り方について解説してきました。

少し長くなりましたので、要点を箇条書きでまとめておきます。

見出しの使い方(どのレベルを使うか)
  • 見出しとは、章ごとの要約
  • 見出しはh1~h6までの6段階ある
  • h1はタイトル部分でのみ使う
  • h2は記事の骨子・テーマ(大見出し)
  • h3は詳細な説明(小見出し)
  • h4はh3の補足
  • h5とh6は使わない
見出しを使う効果
  • 文章が読みやすくなる
  • 目次になる
  • 記事を書きやすくなる
  • Googleに情報が伝わりやすくなる
見出しの作り方(見出しに入れる文章)
  • 数字の小さい順に使う
  • シンプルにまとめる
  • 具体的にする(数字を入れるなど)
  • 文章にしない(20文字を目安に30文字以内にまとめる)
  • 見出しだけで内容がわかるようにする
  • 読者の興味を惹くように作る
見出しデザインの作り方
  • 見出しレベルが強いほど、大きい文字・余白を使い目立たせる
  • h2は塗りを使うなど明確に前後を区切るデザインにする
  • h3は線を使うなど、項目の変わり目がわかるデザインにする
  • h4はワンポイントを添えるくらいに控えめにする

ブログ記事において、見出しは、タイトルタグに次ぐ重要な要素です。

見出し一つで記事を読むかどうかや滞在時間が変わり、ブログ記事の内容を正確にGoogleに伝えられるかも変わってきます。

もし、今まで装飾のためだけに見出しタグを作っていたという場合は、正しい見出しの使い方をみにつけましょう。

ブログの見出しの作り方を習得したら、記事構成・文章構成の作り方も習得しましょう。

ブログ記事の文章構成の作り方

本記事の内容詳細(目次)