ブログを始めたばかりのころ、「見出しってどう使えばいいんだろう？」と首をかしげた経験はないだろうか。
私もそうだった。
WordPressのテーマにSWELLを選んだはいいものの、見出しの設定方法やデザインの変え方がよくわからなくて、しばらく手が止まってしまったことがある。
でも実際に使ってみると、SWELLの見出し機能は本当によくできていて、ちょっとしたコツさえつかめば、基本的にはきれいな記事が作りやすくなる。
今回はSWELL見出しの使い方を、できるだけわかりやすく順を追って解説していこうと思う。
見出しはただの「タイトル」じゃない。
読者が記事を読みやすくなるための道しるべでもあるし、Googleに記事の内容を伝えるための大事な要素でもある。
だからこそ、正しい使い方を覚えておくことはブログ運営においてとても重要なんだ。
SWELLで使える見出しの種類と基本的な役割
まずは「見出し」そのものについて整理しておこう。
HTMLにはh1からh6までの見出しタグが用意されている。
数字が小さいほど重要度が高く、大きいほど細かい小見出しになる。
WordPressでは記事タイトルがh1として自動出力されるので、記事本文ではh2以降を使うのが基本だ。
SWELLでは、Gutenberg（ブロックエディター）の「見出しブロック」を使ってこれらを設定する。
操作はシンプルで、ブロックを追加して「H2」「H3」「H4」などのレベルを選ぶだけ。
だが、どのレベルをどんなときに使うのかを知っておかないと、見た目はきれいでも構造的にバラバラな記事になってしまう。
h2・h3・h4の使い分けかた
実際の使い方のイメージとして、こんなふうに考えるとわかりやすい。
| 見出しレベル | 役割のイメージ | 具体的な使い方 |
|---|---|---|
| h2 | 記事の大きな章タイトル | 「SWELLの見出し設定方法」「よくある質問」など |
| h3 | h2の中の小テーマ | 「h2の作り方」「h3のデザイン変更」など |
| h4 | さらに細かい補足説明 | 「ボーダーありのスタイル」「ノーマルスタイル」など |
見出しのレベルは「上位から下位へ順番に使う」のが鉄則だ。
h2の下にいきなりh4を使うのはNGで、必ずh3を経由すること。これはSEO的にも、読みやすさの面でも重要なルールなので覚えておいてほしい。
また、h2は記事の「目次」に直接反映される。
SWELLには自動で目次を生成してくれる機能があるので、h2の文章をしっかり考えることが読者の記事への入り口をわかりやすくすることにもつながる。
目次があると読者が「自分が知りたい部分はどこか」をすぐに見つけられて、離脱しにくくなる。
それだけで読んでもらいやすさがグッと上がるんだ。
SWELLの見出しブロックを追加する手順
実際にSWELLで見出しを追加する手順はとても簡単だ。
Gutenbergエディターを開いて、段落ブロックの「+」ボタンをクリックし、「見出し」を選択するだけ。
または本文を入力中に「##」と入力してスペースを押すと、自動的にh2の見出しブロックに変換される。
「###」なら h3、「####」ならh4 というふうに使い分けられる。
ブロックを選択した状態でツールバーを見ると、「H2」「H3」「H4」などのボタンが表示されている。
ここをクリックするだけでレベルを変更できるので、後から「やっぱりh3にしよう」と変えたいときも簡単だ。
初心者のうちはh2とh3だけで記事を構成するシンプルな構造にするのがおすすめだ。
深いネスト（入れ子）は読者が迷子になりやすいし、書く側も管理が大変になる。
まずはシンプルに始めて、慣れてきたらh4も取り入れていくといい。
SWELLの見出しデザインをカスタマイズする方法
SWELLの大きな魅力のひとつが、見出しのデザインをほぼノーコードでカスタマイズできる点だ。
デザインの知識がなくてもWordPressの管理画面からポチポチと操作するだけで、プロっぽい見た目の見出しが作れる。
設定場所は「外観」→「カスタマイズ」→「投稿・固定ページ」→「見出しタグのデザイン」だ。
ここでh2・h3・h4それぞれのスタイルを個別に設定できる。
用意されているデザインスタイルの種類
SWELLでは見出しのデザインスタイルがいくつか用意されている。
代表的なものを紹介しよう。
- ノーマル：装飾なしのシンプルなスタイル。
すっきりしたデザインにしたいときに向いている。 - ボーダー（左側に線）：見出しの左に縦線が入るスタイル。
ブログらしい定番デザインだ。 - 塗りつぶし：背景色で見出し全体を塗るスタイル。
インパクトがあって目立つ。 - アンダーライン：見出しの下に線が入るシンプルなスタイル。
文書的なイメージに合う。 - ダブルライン：上下二本の線で挟むスタイル。
クラシックな雰囲気が出る。 - ステップ（番号付き）：見出しに自動で番号が付くスタイル。
手順を説明する記事に向いている。
スタイルを変更すると、記事内のすべての同じレベルの見出しに反映される。
つまり、「h2はボーダースタイルにする」と決めたら、その記事だけじゃなくサイト全体のh2が変わる。
サイト全体の統一感が保てるのがSWELLのカスタマイズの強みだ。
カラーや文字サイズも自由に変えられる
スタイルだけじゃなく、見出しの色や文字サイズもカスタマイズ画面から調整できる。
たとえば「h2のボーダーの色をサイトのテーマカラーに合わせたい」という場合も、カラーピッカーで好きな色を選ぶだけで設定できる。
文字サイズも「少し大きくしたい」「控えめなサイズにしたい」という調整が可能だ。
ただし、文字サイズを極端に大きくしすぎると、スマホ表示で見切れたり読みにくくなったりするので注意が必要だ。スマホでの見え方もプレビューしながら調整することを強くおすすめする。
SWELLのカスタマイズ画面にはリアルタイムプレビュー機能がついているので、設定を変えながら実際の見た目をすぐに確認できる。
これがあるおかげで「設定を保存してみたら思ってたのと違った」というストレスが減る。
ブロックエディターで個別に装飾を加える方法
サイト全体の設定とは別に、特定の見出しだけ色を変えたり、太字にしたりすることもできる。
見出しブロックを選択した状態で右側の「ブロック」パネルを開くと、「色」や「タイポグラフィ」などの項目が表示される。
ここから個別にカスタマイズが可能だ。
ただし、個別設定を多用しすぎると記事ごとにデザインがバラバラになってしまうので、基本的にはカスタマイザーでサイト全体の設定を整えておいて、どうしても強調したい箇所だけ個別に調整するのがバランスがいい使い方だ。
SWELLの見出しとSEOの関係を知っておこう
見出しはデザインのためだけじゃない。
実はSEO（検索エンジン最適化）にも大きく関わっている。
Googleのクローラーは記事を読み込む際に、見出しタグの構造から「この記事は何について書いてあるか」を判断する。
だからこそ、見出しの使い方が記事の検索順位にも影響を与えることがある。
特に重要なのがh2だ。
h2には記事の中で扱うテーマを端的に表す言葉を入れるとよい。
たとえば「SWELLの見出し設定方法」というh2があれば、Googleは「この記事はSWELLの見出し設定について詳しく書いてある」と理解しやすくなる。
キーワードを見出しに自然に入れるコツ
SEOを意識すると、「見出しにキーワードを詰め込まなければ」と思ってしまいがちだ。
でも、キーワードの詰め込みは逆効果になることもある。大切なのは「読者にとってわかりやすい見出し」を作ることであって、キーワードを無理やり入れることではない。
たとえばこんな違いを見てほしい。
- NG例：「SWELL見出し使い方SEO対策カスタマイズ方法完全解説」
- OK例：「SWELLの見出しデザインをカスタマイズする方法」
上のNG例はキーワードを詰め込みすぎで、読んでいて何が言いたいのかわかりにくい。
下のOK例は自然な日本語になっていて、読者にも検索エンジンにも伝わりやすい。
「ターゲットキーワードを含みつつ、読者が見てすぐ内容を理解できる見出し」を意識するのが正解だ。
目次の自動生成機能とSEOの関係
SWELLには記事内の見出しを自動的に収集して目次を生成してくれる機能がある。
この目次はGoogleの検索結果に「サイトリンク」として表示されることがある。
サイトリンクとは、検索結果に記事タイトルの下に複数のリンクが並んで表示されるもので、クリック率が上がりやすい。
つまり、きちんとした見出し構造で書かれた記事は検索結果での見え方も良くなる可能性があるわけだ。
これもh2・h3をしっかり使うモチベーションになるだろう。
目次の表示・非表示は記事ごとに設定できるし、「目次を表示する最低見出し数」なども管理画面から調整できる。
短い記事には目次が不要なこともあるので、記事の長さや内容に応じて使い分けるといい。
見出しの文字数はどれくらいが適切か
見出しの文字数についても少し触れておこう。
h2は15〜30文字程度が読みやすいと言われている。
長すぎると一目で内容が把握できないし、短すぎると情報が伝わらない。
「内容を一言で言うならどんな言葉になるか」を考えながら書くと、自然とちょうどいい長さになることが多い。
スマホで見たときに見出しが折り返して2行になってしまうケースも多いので、できれば20文字以内に収めるのが理想的だ。
ただし、内容をきちんと伝えることを優先して、無理に短くしすぎる必要はありません。
バランスが大事だ。
SWELLの見出しブロックに使える便利な機能
SWELLの見出しブロックにはデザイン設定以外にも、ブログ運営をラクにしてくれる便利な機能がいくつかある。
知っておくと作業効率がぐっと上がるので、ぜひ確認しておいてほしい。
アンカーリンクの設定
見出しにはアンカーリンク（ページ内リンク）を設定できる。
たとえば「目次の『SWELL見出しのSEO対策』という項目をクリックすると、その見出しの場所までページがスクロールされる」という動作がこれだ。
SWELLでは目次が自動生成される際に、各見出しに自動的にIDが付与されてアンカーリンクが設定される仕組みになっている。
だから基本的には特別な操作は必要ない。
もし記事内の特定の場所に外部からリンクを張りたい場合は、見出しブロックの「高度な設定」から「HTMLアンカー」欄に任意のIDを入力すればOKだ。
たとえば「swell-midashi」と入力すれば、「https://サイトURL/記事URL/#swell-midashi」というURLでその見出しに直接リンクできるようになる。
見出しへのアイコン追加（SWELLの独自機能）
SWELLの見出しブロックには、見出しの前後にアイコンを追加できる独自機能がある。
Font Awesomeのアイコンが使えるので、「チェックマーク付きの見出し」「矢印付きの見出し」など、視覚的にアクセントをつけることができる。
設定は見出しブロックを選択した状態で右側のパネルを開き、「アイコン」項目からアイコン名を入力するだけだ。
ただし、アイコンを使いすぎると見た目がうるさくなるので、特に強調したい見出しだけに使うのがポイントだ。
見出しにラベルを付ける機能
SWELLの見出しブロックには「ラベル」を追加できる機能もある。
ラベルとは、見出しの上に小さなテキストを表示させる機能で、「POINT」「CHECK」「STEP」などの文字を入れることができる。
これを使うと、読者が見出しを見た瞬間に「ここは重要なポイントだな」「手順の説明が始まるな」とすぐに判断できるようになる。
特に手順解説系の記事や、複数の要点をまとめた記事では効果的だ。
ラベルの文字色や背景色もカスタマイザーから変更できるので、サイトのテーマカラーに合わせた統一感のあるデザインにすることができる。
見出しのコピーと再利用
Gutenbergエディターでは、ブロック単位でのコピーや貼り付けができる。
よく使う見出しのスタイルや文章パターンがあれば、「再利用ブロック」として保存しておくと便利だ。
たとえば「よくある質問」の見出しスタイルを毎回同じに統一したい場合、再利用ブロックとして保存しておけば一発で挿入できる。
これは地味に時間短縮になる機能で、記事をたくさん書くようになるほど恩恵を感じる。
ぜひ活用してみてほしい。
SWELLの見出し設定でよくある失敗と対処法
SWELLの見出しを使っていると、初心者のうちはいくつかの「あるある失敗」をしがちだ。
ここではよくある失敗例とその対処法をまとめておく。
同じ失敗で悩まないように確認しておこう。
失敗1：見出しのレベルが飛んでいる
先ほども少し触れたが、h2の次にh4を使うなど、見出しレベルが飛んでしまうのはよくある失敗だ。
これはSEO的に問題があるだけでなく、SWELLの目次生成機能でも表示が乱れることがある。
対処法はシンプルで、記事を書き終えたら一度見出しの構造を確認することだ。
SWELLのエディターではブロックの一覧を「ドキュメント概要」から確認できるので、見出しの階層が正しく設定されているかをチェックしよう。
失敗2：見出しを装飾のためだけに使う
「この文章を目立たせたいから見出しにしよう」という発想で見出しを使うと、構造が崩れてしまう。
見出しは文章を大きく・太くするための装飾ツールではなく、記事の構造を示すための要素だ。
文章を目立たせたいなら、見出しではなく「マーカー」や「太字」「吹き出し」などSWELLの装飾ブロックを使うのが正解だ。
SWELLにはデコレーション系のブロックが豊富に用意されているので、そちらを活用しよう。
失敗3：見出しを使いすぎる
記事の中に見出しが多すぎると、目次が長くなりすぎて逆に読みにくくなる。
目安としては、1,500〜2,000文字ごとにh2を1つくらいのペースが読みやすい記事になりやすい。
h3も同じで、h2の中に5個以上のh3が入るとごちゃごちゃした印象になる。
「本当にh3で分ける必要があるか？ 段落（p タグ）で済む内容じゃないか？」を一度考えてみることが大事だ。
失敗4：見出しテキストがあいまいすぎる
「その他」「補足」「まとめ」だけの見出しは、読者にとっても検索エンジンにとっても内容が伝わらない。
見出しを読んだだけでその章に何が書いてあるかわかるように、具体的な言葉を使うよう心がけよう。
たとえば「補足」というh3より「SWELLの見出しブロックを使う際の注意点」の方が読者はずっと理解しやすい。
少し長くなっても具体性を優先した方がいい。
SWELLの見出しを使って読まれる記事に仕上げる実践テクニック
ここまで基本的な使い方や設定方法を解説してきたが、最後に「読んでもらえる記事にするための見出し活用テクニック」をいくつか紹介したい。
設定ができるようになったら、次のステップとして意識してみてほしい内容だ。
読者が「続きが気になる」見出しの作り方
見出しには「読者の興味を引き続ける」役割もある。
たとえば「SWELLの見出し設定方法」という見出しより「5分でできる！SWELLの見出しカスタマイズ手順」の方が、読者は「どんな方法なんだろう？」と続きを読みたくなる。
具体的な数字や「〜する方法」「〜のコツ」などの形を見出しに取り入れると、クリック率や読了率が上がりやすい傾向が見られます。
ただし過度に煽った表現は逆効果なので、あくまで「中身を素直に表現した上で読みやすくする」意識でいよう。
見出しで記事の「流れ」を作る
見出しを上から順番に読んだときに、記事全体のストーリーが自然に伝わるように構成することが大切だ。
たとえば本記事のように「基本を知る→デザインを設定する→SEOを理解する→便利な機能を使う→失敗しないコツを学ぶ→実践テクニックを身につける」という流れがあると、読者は迷わず記事を読み進められる。
記事を書く前に見出しだけを先に書いてしまうのが、構成のぶれを防ぐ最もシンプルな方法だ。「アウトラインを先に作る」というプロのライターがよくやる方法だが、これはブログでも有効だ。
SWELLのエディターで見出しブロックだけを先に並べておいて、それぞれの見出しの下に本文を肉付けしていくと、バランスよく記事がまとまる。
見出しのデザインと記事テーマを合わせる
SWELLのカスタマイザーで設定した見出しデザインは、サイト全体に反映される。
だから、サイトのテーマやジャンルに合ったデザインを選ぶことが大切だ。
たとえば料理ブログなら温かみのある色のボーダースタイル、ITや技術系の情報サイトならシャープでモノトーンなアンダーラインスタイルが合いやすい。
見出しのデザインはサイトの「顔」になる部分でもある。
ぜひ自分のサイトのカラーやコンセプトに合ったスタイルを探してみよう。
カスタマイザーのリアルタイムプレビューを見ながら試行錯誤するのが一番手っ取り早い。
PC・スマホ両方での見え方を確認する習慣をつける
SWELLはレスポンシブデザイン対応なので、基本的にはPCでもスマホでもきれいに表示される。
ただし、見出しの文字サイズやデザインによってはスマホでの見え方が想定と違うことがある。
記事を公開する前に、必ずスマホでの表示を確認しよう。
WordPressの管理画面にはプレビュー機能があり、「スマートフォン」表示に切り替えて確認できる。
また、ブラウザの開発者ツールを使ってレスポンシブ表示を確認する方法もある。
特に見出しが長い場合、スマホでは2行に折り返されることがある。
折り返し方によっては見た目が不格好になることもあるので、文字数や改行の位置に注意しながら調整しよう。
見出しの確認に役立つチェックリスト
記事を公開する前に、以下のチェックをしておくとミスが減る。
- h2→h3の順番になっていて、レベルが飛んでいないか
- 見出しの文章を読むだけで記事の流れがわかるか
- ターゲットキーワードが自然な形で含まれているか
- スマホでの見え方を確認したか
- 目次が正しく生成されているか
- 見出しのデザインがサイト全体と統一されているか
これだけ確認しておけば、見出しに関する基本的なミスはほぼ防げる。
慣れてきたら無意識にできるようになるが、最初のうちはチェックリストを見ながら確認する習慣をつけると安心だ。
まとめ：SWELL見出しの使い方をマスターして記事をレベルアップしよう
今回はSWELLの見出しの使い方について、基本から実践テクニックまでをまとめて解説してきた。
最後に要点をおさらいしておこう。
- 見出しはh2→h3の順番で使い、レベルを飛ばさないことが大原則
- SWELLのカスタマイザーから見出しデザインをサイト全体に統一設定できる
- 見出しはSEOにも影響するので、キーワードを自然に含めることが大切
- アイコン・ラベル・アンカーリンクなどの便利機能も活用しよう
- 見出しのみを先に書いてから記事を肉付けすると構成がまとまりやすい
- 公開前にスマホでの見え方も必ず確認する
ブログを続けていると「なんか読まれないな」「離脱率が高いな」と感じることがある。
そういうときに見直すポイントのひとつが、この見出しの使い方だったりする。
見出しはただの飾りではなく、読者を記事に引き込むための重要な設計図だ。
SWELLは機能が豊富で最初は戸惑うことも多いが、見出しまわりの操作は覚えてしまえばとても直感的に使える。
まずは今回紹介した基本をひとつずつ試してみて、自分のブログに合ったスタイルを見つけてほしい。
きっと記事の見栄えも読まれやすさも、少しずつ良くなっていくはずだ。
