はてなブログを運営していて、記事数が増えてくると悩むのが「ブログの導線設計」です。
検索から個別記事に読者が入ってくるSEOブログでは、記事を読み終わったあとにどのページへ誘導するかが非常に重要になります。
そのときに役立つのがグローバルメニューです。
ブログ上部にあるナビゲーションメニューは、読者にとって「このサイトには何があるのか」を一瞬で伝える役割を持っています。
しかし、はてなブログの初期状態ではメニューの自由度はあまり高くありません。
そこで今回は、生成AIを使ってグローバルメニューを作成する方法を紹介します。
この記事は、noteに書いた体験記事とは違い、SEOブログとして実際の作り方を解説した記事です。
特に次のような方に役立つ内容になっています。
- はてなブログの導線を改善したい
- グローバルメニューを作りたい
- HTMLやCSSが苦手
- 生成AIでブログを改善したい
私が実際に作成したブログがこちらです。
コードが書けなくても、生成AIを使えばかなり実用的なメニューを作ることができますよ！
もくじ
- グローバルメニューとは？
- はてなブログの標準状態では導線が弱い
- 生成AIを使えばコードが書けなくても作れる
- じぇいぴーが実際に生成AIで作成したグローバルメニュー
- 生成AIでグローバルメニューを作る手順
- グローバルメニューを増やすと回遊率が上がる
- グローバルメニューを4行にした理由
- グローバルメニューとホームページを組み合わせる
- 生成AIでブログ改善するメリット
- まとめ
- よくある質問（FAQ）
- 生成AIに依頼するプロンプト例
- まとめ
グローバルメニューとは？
グローバルメニューとは、ブログやサイトの上部に配置されているナビゲーションメニューのことです。
例えば、次のようなリンクが並んでいる部分です。
- ホーム
- 記事一覧
- カテゴリ
- まとめ記事
- お問い合わせ
読者がどのページにいても同じ場所に表示されるため、サイト全体の案内板のような役割を持っています。
特にSEOブログでは、検索から入ってきた読者を次の記事へ誘導するための回遊導線として非常に重要です。
はてなブログの標準状態では導線が弱い
はてなブログはシンプルで使いやすいサービスですが、ブログが成長してくると少し物足りなく感じる部分があります。
例えば次のような点です。
- メニュー項目を自由に増やしにくい
- カテゴリへの入口が弱い
- まとめ記事へ誘導しづらい
- 回遊導線を設計しづらい
記事数が増えてくると、読者に読んでほしい記事がたくさん出てきます。
しかし、グローバルメニューが整っていないと、それらのページへうまく誘導できません。
そこで有効なのが、HTMLとCSSを使ったグローバルメニューの作成です。
生成AIを使えばコードが書けなくても作れる
以前は、HTMLやCSSを自分で書かなければグローバルメニューを作るのは難しい作業でした。
しかし現在は、ChatGPTなどの生成AIを使えば、かなり実用的なコードを作ってもらうことができます。
しかも、次のような情報を伝えるだけでOKです。
- はてなブログProを使っている
- グローバルメニューを作りたい
- PCでは横並び
- スマホでは開閉メニュー
- メニュー項目
- リンク先URL
AIはそれを元に、HTMLとCSSをセットで作成してくれます。
つまり、ブログ運営者がやることは次の3つです。
- メニュー項目を決める
- リンク先を整理する
- 生成AIに依頼する
これだけで、かなり本格的なグローバルメニューが作れます。
じぇいぴーが実際に生成AIで作成したグローバルメニュー
この記事で紹介している方法で作った実例はこちらです。
このサイトでは、生成AIで作成したグローバルメニューと固定ページのホームを組み合わせて、ブログ全体の導線を整理しています。
例えば、次のような入口を上部メニューやホームページに配置しています。
- 配達員募集
- フードデリバリークーポン
- ネットスーパーのクーポン
- サービス別まとめ記事
このように、読者の目的ごとに入口を作ることで、次に読むページへ自然に移動できるようになります。
実際のページを見ると、グローバルメニューとホームページを組み合わせた導線設計のイメージがつかみやすいと思います。
生成AIでグローバルメニューを作る手順
① メニュー項目を整理する
まず最初に、メニューに入れる項目を整理します。
例えば次のような形です。
- ホーム → /home
- 記事一覧 → /archive
- カテゴリA → URL
- カテゴリB → URL
- 人気記事まとめ → URL
- お問い合わせ → URL
このように名前とリンク先をセットで整理しておくと、AIに依頼しやすくなります。
② ブログのスクショを撮る
次に、現在のブログのスクリーンショットを撮ります。
AIにスクショを見せることで、次のような情報を理解してもらえます。
- ヘッダー画像
- ブログタイトル位置
- 余白
- 既存メニュー
これによって、より適切なコードが出てきます。
③ 生成AIに依頼する
次のように依頼するとスムーズです。
はてなブログProでグローバルメニューを作りたいです。
PCでは横並びメニュー
スマホでは開閉メニューにしてください。
CSSは「デザインCSS」
HTMLは「ブログタイトル下」に貼る形で
全文を省略せずに書いてください。
メニュー項目は以下です
ホーム → /home
記事一覧 → /archive
カテゴリA → URL
カテゴリB → URL
まとめ記事 → URL
お問い合わせ → URL
このように依頼すると、かなり使えるコードが出てきます。
④ はてなブログに貼り付ける
生成AIが作ったコードは、次の場所に貼ります。
- デザイン → カスタマイズ → デザインCSS
- デザイン → カスタマイズ → ヘッダ → ブログタイトル下
CSSはデザインCSSへ、HTMLはブログタイトル下へ貼ります。
⑤ 表示を確認して調整する
コードを貼り付けたら、ブログを表示してメニューが正しく表示されているか確認します。
特に次のポイントを確認すると良いです。
- PCで横並びになっているか
- スマホでメニューが崩れていないか
- リンクが正しく動作するか
- ヘッダー画像との位置関係
もしデザインを調整したくなった場合は、生成AIに再度依頼すればOKです。
例えば次のように伝えます。
このCSSを修正してください。
スマホでメニューが2行になるようにしてください。
コードは最初から最後まで全文を書いてください。
生成AIは既存コードを理解して修正してくれるため、HTMLやCSSに詳しくなくてもカスタマイズできます。
グローバルメニューを増やすと回遊率が上がる
グローバルメニューを整える最大のメリットは、ブログ内の回遊率が上がることです。
SEOブログでは、検索から個別記事に読者が入ってきます。
そのため、記事を読み終えた後に「次に読む記事」を提示できるかどうかが重要になります。
グローバルメニューが整っていると、読者は次のページに自然に移動できます。
- カテゴリページ
- まとめ記事
- 人気記事
- 初心者向けページ
これらへの入口をメニューに配置しておくことで、サイト内の回遊導線が強くなります。
グローバルメニューを4行にした理由
今回のサイトでは、グローバルメニューを1行ではなく複数行にしています。
理由はシンプルで、扱っているテーマが多いためです。
1行メニューの場合、項目数が限られてしまいます。
しかし複数行にすると、次のような入口を配置できます。
- サービス別まとめ
- クーポン記事
- 配達員募集
- カテゴリページ
- 初心者向け記事
結果として、サイトの構造を読者に伝えやすくなります。
グローバルメニューとホームページを組み合わせる
グローバルメニューだけでも導線は改善できますが、さらに効果的なのが固定ページのホームと組み合わせる方法です。
例えば次のような構造です。
- トップページ → ホーム（固定ページ）
- 記事一覧 → /archive
- グローバルメニュー → 各カテゴリ
この構造にすると、次のような役割分担になります。
- ホーム → サイトの入口
- 記事一覧 → 全記事閲覧
- グローバルメニュー → 主要導線
このように構造を整理すると、ブログがサイト型に近い形になります。
生成AIでブログ改善するメリット
生成AIを使う最大のメリットは、コードを書けなくてもブログを改善できることです。
以前は、次のようなスキルが必要でした。
- HTML
- CSS
- レスポンシブデザイン
- JavaScript
しかし現在は、生成AIに依頼することでかなりの部分を自動化できます。
ブログ運営者は次の部分に集中できます。
- 記事を書く
- 導線を設計する
- 読者に役立つ情報を作る
技術的な部分はAIに任せることで、ブログ運営のハードルはかなり下がりました。
まとめ
はてなブログでも、生成AIを使えばグローバルメニューを作ることができます。
コードを書けなくても、メニュー項目とリンク先を整理してAIに依頼するだけです。
グローバルメニューを整えることで、次のようなメリットがあります。
- サイトの構造が分かりやすくなる
- 回遊率が上がる
- 重要記事へ誘導できる
- ブログがサイト型に近づく
SEOブログでは、記事だけでなく導線設計も非常に重要です。
生成AIをうまく使いながら、ブログの構造を改善していくと、読者にも検索エンジンにも評価されるサイトになります。
よくある質問（FAQ）
はてなブログでグローバルメニューは作れますか？
はい。HTMLとCSSを使えば、はてなブログでもグローバルメニューを作成できます。
はてなブログでメニュー項目を増やすことはできますか？
はい。HTMLでリンクを追加することで、メニュー項目はいくつでも増やすことができます。
はてなブログでスマホ対応のメニューは作れますか？
はい。CSSやJavaScriptを使うことで、スマホ用の開閉メニューを作ることも可能です。
はてなブログでサイト型のブログは作れますか？
はい。固定ページのホームとグローバルメニューを組み合わせることで、サイト型のブログ構造を作ることができます。
はてなブログでトップページを固定ページにできますか？
はい。固定ページを作成し、リダイレクトを設定することでトップページをホームに変更できます。
はてなブログでカテゴリページへの導線を作れますか？
はい。グローバルメニューやホームページにカテゴリリンクを配置することで導線を作ることができます。
はてなブログで人気記事をトップに表示できますか？
はい。固定ページのホームを作れば、人気記事やおすすめ記事を自由に配置できます。
はてなブログで生成AIを使ってカスタマイズできますか？
はい。生成AIにHTMLやCSSを書いてもらうことで、ブログのカスタマイズを効率的に行うことができます。
生成AIに依頼するプロンプト例
最後に、実際に生成AIへ依頼するときのプロンプト例を紹介します。
はてなブログのカスタマイズでは、できるだけ具体的に依頼することがポイントです。
例えば次のように依頼すると、かなり実用的なコードを作ってくれます。
はてなブログProでグローバルメニューを作りたいです。
PCでは横並びメニュー
スマホでは開閉メニューにしてください。
コードは次の2つに分けて書いてください。
① デザインCSS
② ブログタイトル下に貼るHTML
コードは省略せず、最初から最後まで全文を書いてください。
メニュー項目は以下です。
ホーム → /home
記事一覧 → /archive
カテゴリA → URL
カテゴリB → URL
まとめ記事 → URL
お問い合わせ → URL
さらに、ブログのスクリーンショットを添付すると、AIがレイアウトを理解しやすくなります。
デザインを調整したい場合
このCSSを修正してください。
スマホで2行メニューになるようにしてください。
コードは全文を書いてください。
このように、生成AIを活用すれば、HTMLやCSSに詳しくなくてもブログのカスタマイズを進めることができます。
究極の手抜き
① やりたいことのでき上りサンプルの「スクショ」を貼り付けてから
② はてなブログのグローバルメニューを画像のようにしたいから、そのコード作成を指示するためのプロンプトを書いてください。
ここから始めましょう。
まとめ
はてなブログでも、生成AIを活用すればグローバルメニューを簡単に作ることができます。
特に次のポイントを意識すると、ブログ全体の導線が改善されます。
- グローバルメニューを作る
- カテゴリやまとめ記事への入口を作る
- 固定ページのホームと組み合わせる
これらを整えることで、検索から訪れた読者がサイト内を移動しやすくなり、ブログ全体の回遊率も向上します。
生成AIをうまく使えば、専門的な知識がなくてもブログの構造を改善することができます。
ぜひ、自分のブログでも試してみてください。
最後までお読みいただき、ありがとうございました。
じぇいぴー
