先輩ライターの体験談

分かりやすい見出し作成のコツと、HTML見出しタグの正しい使い方

この記事のタイトルとURLをコピーする
分かりやすい見出し作成のコツと、HTML見出しタグの正しい使い方
https://kacoo.jp/blog/midasi-tukurikata1354/

WEBライターにとって見出しをつけて記事をつくるのは、多くのメディアでも要求されることなので一般的として認知されています。

ただ実際執筆をしていると、筆者にも「いい言葉が出てこないな……」「言葉が出てこないので『?』を使って対応しておこう」と安易に『逃げ』の見出しを作成してしまうこともしばしばありました……

記事全体を見れば良記事なのに、記事内容が把握しづらくなってしまい、結果的にあまり読まれない記事に・・なんて事になってしまいます。

それは読者がどう記事を読むのか?という導線を理解することと、読む・書くトレーニングをしていないからだと思います。

WEBライティングに特化した内容でご紹介するため、「見出しタグの使い方」から説明していきますがが、既に理解をしている人は飛ばして次の章から読み進めてください。

また、「記事タイトル」も見出しと総称することがありますが、この記事では別物として考えていますのでもし記事タイトルの作り方記事をお探しの場合には「ブログ記事タイトルをつけるコツ。困った時の8つのルール」をご覧ください。

見出しタグの種類と使い方

無料のブログサービスを使用したことがあるライターさんなら知っている人はいるかもしれませんが、見出しや段落、リストなど表現するためにHTMLタグを使う必要があります。

ちなみに見出しタグにはh1~h6程度までありますが、一般的に使ってもh4までとしているサイト多いです。

<h1>大見出し</h1>・・・・1記事で1回まで(記事タイトルと考えて良いです。)
<h2>見出し</h2>・・・・・特に制限無し
<h3>小見出し</h3>・・・・上に同じ

※一般的にh1は1ページに1つ、h2~h*は1ページに何回出現しても良いとされています。
※厳密には、HTMLは指示でCSSが見た目(デザイン)の役割をしています。

HTMLタグはGoogleが認識するのに必要なタグ

WEBサイトに掲載する記事の見出しは、読者に見出しと認知してもらう他に、Googleの検索エンジンにもここが見出しであると理解してもらう意味があります。

逆に言えば、見出しを表す「<h2>や<h3>」などを使っていない箇所は見出しとして、Googleに認識されていません。

よくある間違いとして、自分が見た目を整えたいというだけで、見出しっぽく太文字を使用したりしてもそれは、実際には「見出し」としての意味を成していないのです。

適切に設定された見出しはGoogleの検索結果にも表示される

100%表示されるかと言われるとそうではないですが、GoogleはHTMLタグの付け方で記事構成を理解しているのが分かる例がこの検索です。

記事タイトルには「検索キーワード」は含まれていないですが、見出しの1つに含まれていて、見出しがピックアップされる形で検索結果に表示されています。

見出しタグの順番について

見出しの種類と役割を理解していただいた所で、見出しタグには使用する順番があるということを説明します。

1から順に使用していく事が見出しタグを使う時のルールです。言葉で説明するより例題で説明した方が分かりやすいので下記にNG例とOK例をのせます。

NG例
<h2>見出し</h2>
<h1>記事タイトル</h1>
<h3>小見出し</h3>
<h3>小見出し02</h3>
<h2>見出し02</h2>
<h3>小見出し03</h3>

ありえない形ですが、記事タイトル(h1)より上に見出し(h2)が存在して、記事タイトルの次の見出しがh2を飛ばしてh3になってしまっています。

1から順に使用していく事が見出しタグを使う時のルールを無視してしまっている形になるのでNGとなります。

OK例
<h1>記事タイトル</h1>
<h2>見出し</h2>
<h2>見出し02</h2>
<h3>小見出し</h3>
<h3>小見出し02</h3>
<h2>見出し03</h2>
<h3>小見出し03</h3>

h2の見出しの章の中にh3は必要なければ作成しなくても良いです。

さらにインデントを付けて階層を表現するとより分かりやすいかと思います。

NG例
<h2>見出し</h2>
<h1>記事タイトル</h1>
<h3>小見出し</h3>
<h3>小見出し02</h3>
<h2>見出し02</h2>
<h3>小見出し03</h3>

OK例
<h1>記事タイトル</h1>
<h2>見出し</h2>
<h2>見出し02</h2>
<h3>小見出し</h3>
<h3>小見出し02</h3>
<h2>見出し03</h2>
<h3>小見出し03</h3>

OK例では綺麗な階層になっているのが分かります。

見出しの役割について

今度はGoogleではなく、読者にとって見出しはどのような役割をするのか見ていきますが、その前に大原則として、上から下に話しが流れていくように見出しを構成していき、記事を逆流するような流れにはしないようにしてください。

ほとんどの読者は『見出し”だけ”』を見る

これは紙媒体でもWEB媒体のメディアでも同じことが言われていますが、いわゆる見出し読みをする読者が多いとされていて、見出しで惹きつける事ができれば中身も読んでもらえる可能性が高くなると言われています。

だからこそ、見出しで引き寄せるテクニックを覚えておく必要があります。

分かりやすい見出しを作るテクニック

では、分かりやすい見出しを作るテクニックを厳選して3つご紹介します。どれも難しいことではないですが、実践できているライターさんは少ないです。

質問形式は極力控えること

  • なぜ見出しを分かりやすく作成する必要があるのか?
  • 見出しを分かりやすく作成する理由

突然ですが、上の2つの言い回しの例は後者のようにきっちりと言い切る方が明確でストレートに読者に伝わります。

また疑問形で読者に投げかけても、受け取りようのない答えになるので会話のキャッチボールが成立していない状態になってしまうので疑問形の見出しを減らしていきましょう。

伝わる言葉を使って見出しを作ること

たまに「見出しをキャッチコピーのように作るんですね!」というライターさんがいますが、半分当たっていて、半分外れていると思っています。

「読者を引き込む」言葉を選ぶことは参考にしてもよいと思いますが、説明しないと分からないような言葉を選ばないことが大切だと思っています。

前にサランラップの広告がコピー(公募)にこんなコピーがありました。

「あの人が自殺なんてするわけない!だってサランラップをしていたんだから」

サランラップをしていたという事は後から食べようと思っていた証拠であって、これは自殺ではなく他殺だ!という意味だそうです。理解するまでにかなり時間がかかるのと、最悪のばあい理解してもらえない可能性もあります。

※このコピー自体は好きです。変な例の使い方をしてすみません……

分かりやすい表現もそうですが、普段使わないような言葉や自分だけしか使わない言葉にも注意しましょう。自分の言葉が一般的かどうか?はGoogleトレンドで確認すると良いです

説明不要で分かりやすい見出しを作成しましょう。

◯◯しようなどの『Do』となる文言は注意

基本は言い切りの見出しを作成するようにして、DIYやレシピ記事は『ボウルに水200mlを入れましょう』という『Do』何かアクションを促すような言い方も効果的です。

しかし、これも汎用性が高くてどんなテーマの見出しにも使えるので初心者のうちは使いがちですので、使いすぎないように構成完成後にはチェックしておきましょう。

見出しだけで本文構成を確認するとブレが無くなる

これは『本文』を書き始める前の構成が完成した時に、メインテーマと見出しの流れにブレは無いか?を確認できます。簡単に説明できるように、『◯◯したい』という属性のテーマを例に出して説明します。

『キャンプ場 愛知』
このように検索する人に対して、

  • 愛知県のおすすめキャンプ場
  • キャンプ+アクティビティを楽しもう
  • ラフティングが楽しめるスポット!
  • ラフティングでもっとおすすめなのが岐阜県!
  • いけるなら長野のキャンプ場もアツい!

読者の余計な善意で、岐阜や長野の情報までも入れてしまい、本来しりたい愛知県の情報が少なくなってしまっています。おすすめだかといって、余計な情報は入れないようにしましょう。

素直に愛知県のキャンプ場でおすすめな場所を方面別で教えてあげる構成にしていきましょう。

  • 名古屋市内でキャンプ出来る場所
  • 岡崎や豊川方面のキャンプ場
  • 知多方面のキャンプ場
  • キャンプ場に最低限持っていった方が良い物(詳細はリンク)

このように構成してあげると探しやすく、記事のメインテーマともマッチしています。

見出しこそ手を抜かないこと

見出しは短い文なので、ちゃちゃっと適当に作成していきたい気持ちも分かります。

文章は短くなればなるほど難しく、長くなればなるほど簡単に作成できるとも言われていますので毎記事トレーニングだと思って見出しをシンプルに短く作ってみてください。

人を惹きつけるという部分をもっと知りたい!という方は「WEBライティングにも使える、心理学」を参考にしてみてください。

記事が役にたったらシェアしよう
この記事のタイトルとURLをコピーする
分かりやすい見出し作成のコツと、HTML見出しタグの正しい使い方
https://kacoo.jp/blog/midasi-tukurikata1354/
  • お仕事一覧
  • ご利用ガイド
  • よくある質問
【運営会社】
株式会社WEB企画
〒451-0045
愛知県名古屋市西区名駅3-10-17 IT名駅ビル2号館 3F
E-mail:kyuujin.info@webkikaku.co.jp

ページの先頭へ