長い記事を書いていると、見出しがh2かh3かわからなくなることありませんか？
HeadingsMap（ヘディングスマップ）を使えば、ページの見出し構造をワンクリックで丸ごと確認できます！
しかも無料で使えるのが嬉しいポイントです！
HeadingsMap（ヘディングスマップ）とは？
閲覧しているWebページのh1からh6までの見出しタグを、階層がわかる形の一覧マップにして表示してくれるChrome拡張機能です。
見出しの順番が崩れている箇所（h2の次に急にh4が来ている、など）も指摘してくれるので、記事構成のチェックにかなり重宝します。
表示された見出しをクリックすると該当箇所までジャンプしてくれるのも、地味にありがたい機能でした！
主な機能・特徴
| 機能 | できること |
|---|---|
| 見出し構造の表示 | h1〜h6を階層付きの一覧で表示可能 |
| 構造エラーの検出 | 見出しレベルの崩れ（階層のとび）を検出可能 |
| セクション・ランドマークの表示 | HTML5のセクション構造やランドマーク情報も確認可能 |
| クリックでジャンプ | 見出しクリックで該当箇所へ自動スクロール＆ハイライト |
| フレーム内ページにも対応 | iframe内の見出しも切り替えて確認可能 |
| 階層ごとの折りたたみ | 見出しレベルごとに表示の折りたたみが可能 |
| 2種類のテーマ | 表示テーマの切り替えが可能 |
活用例
正直、最初は「SEOチェック用のちょっと硬いツール」だと思っていたんですが、使ってみると意外と出番が多いんです！
私の場合、こんな場面でよく開いています。
- ブログ記事を公開する前に、見出しの階層が崩れていないか最終チェックする
- 検索上位のライバル記事を開いて、見出し構成をこっそり研究する
- コーディング中のHTMLで、見出しタグの使い方がずれていないか確認する
- 長い記事を読むとき、目次代わりにして気になる部分まで一気にジャンプする
インストール方法
Chromeウェブストアの配布ページを開いて「Chromeに追加」をクリックするだけです！
確認のポップアップが出てくるので「拡張機能を追加」を選べば完了。
アカウント登録のような手間は一切なく、思っていたよりあっけないくらいでした！
HeadingsMap（ヘディングスマップ）の使い方
使い方自体はとてもシンプルなので、身構えなくて大丈夫です！
大きく分けると「入れる」「見る」「整える」の3ステップです。
①インストールする
- 拡張機能を追加する
Chromeウェブストアの配布ページから「Chromeに追加」→「拡張機能を追加」の順にクリックします。 - アイコンの表示を確認する
インストールが終わると、ツールバー（アドレスバーの右側あたり）にHeadingsMapのアイコンが現れます。
②起動して見出しを確認する
- アイコンをクリックする
見出し構造を確認したいページを開いた状態で、そのアイコンをクリックします。 - マップを眺める
画面の右側にサイドバーのようなパネルが開いて、見出し構造がツリー状にずらっと表示されます。 - 気になる見出しをクリックする
ページ内の該当箇所まで自動でスクロールして、その部分をハイライトしてくれます！
③表示を整える
- 設定画面を開く
パネル内の三点リーダー（︙）から設定画面に入れます。
セクション構造の表示やテーマの切り替えなど、好みに合わせて調整してみてください。
つまずきやすいポイント
私は最初、セクション構造の表示がデフォルトでオフになっていることに気づかず「あれ、思ったより情報が少ないな」と少し戸惑いました。
設定を一箇所オンにするだけで解決したので、表示が物足りないと感じたら、まずこの設定を疑ってみるとよさそうです！
個人で利用する場合の料金プランについて
ここは正直、いちばん安心したポイントかもしれません！
HeadingsMapは個人でも法人でも、すべての機能を無料で使えます。
課金プランという仕組み自体が存在しないので、インストールしたその日からフル機能を使い始められます！
| 利用者 | 料金 | 備考 |
|---|---|---|
| 個人（ブログ運営・学習など） | 無料 | 登録不要、インストールのみで全機能利用可能 |
| 企業・法人（ビジネス利用） | 無料 | 個人向け・法人向けでの機能差やライセンス条件なし |
開発者はこの拡張機能について、ユーザーのデータを収集・販売しない旨を明言しています。
業務で使うにも、そのあたりの安心感はありがたいところでした！
利用規約
細かい利用規約が別途用意されているわけではありませんが、開発者はChromeウェブストア上で、ユーザーデータを第三者に販売しないこと、拡張機能の本来の目的以外にデータを利用しないことを明言しています。
プライバシーについてもう少し詳しく知りたい場合は、開発者が公開しているプライバシーステートメントのページを覗いてみるとよいと思います。
注意点
使っていて気づいた、ちょっとした注意点も書き添えておきます。
- アシスト技術（スクリーンリーダーなど）から隠されている見出しは、マップ上にも表示されません
- ページの構造に変更があると自動で内容が更新されますが、うまく反映されないときは手動更新が必要でした
- セクション構造の表示は初期設定でオフになっていることがあるので、表示が少ないと感じたら設定画面を確認してみてください
見出し構造のチェックって、地味だけど後回しにしがちな作業ですよね。
HeadingsMapを入れておくと、その面倒な確認がクリックひとつで済むようになるので、記事を書く人にはかなり相性がいいツールだと思います！
無理のない範囲で、一度試してみてください！
related site
