じぇいぴー先輩

アラフォー大学ブログ部 じぇいぴー先輩のブログ

じぇいぴー先輩

MENU

【回遊率アップ】はてなブログのトップを「固定ページ(/home)」にすると導線が整う|記事一覧はグローバルメニューへ格下げ

当記事には、ユーザーファーストの観点から当サイトが選別した広告が含まれます。

はてなブログのトップページを「固定ページ(ホーム)」へ

こんにちはじぇいぴーです!

じぇいぴーのnoteから飛んできた方もようこそお越しくださいました!

 

私は、はてなブログの記事数が増えてきたタイミングで「トップページをどうするか」という問題に直面しました。

標準設定ではトップページに「最新記事」が並ぶ仕組みですが、ブログがある程度育ってくると、この構造では導線が弱くなるケースがあります。

そこで今回は、トップページを固定ページの/home(ホーム)に変更し、/archive (記事一覧)はグローバルメニューに残す構造に変更しました。

かんたんですよ!

結果として、ブログ全体の導線が整理され、読者がサイト内を移動しやすくなりました。

この記事では、はてなブログのトップを「固定ページ(ホーム)」にする理由と、/archive (記事一覧)をグローバルメニューに残すメリットについて解説します。

もくじ

はてなブログのトップページの仕組み(変更前)

はてなブログの標準構造では、トップページは最新記事一覧です。

つまり、サイト構造としては次のようになります。

 

トップページ → 最新記事一覧

この構造はシンプルで分かりやすいのですが、記事数が増えるといくつかの問題が出てきます。

記事一覧トップのデメリット

まず大きいのが、サイトの全体像が分かりにくいことです。

検索から訪れた読者がトップページを開いたとき、記事が並んでいるだけでは「このブログが何を扱っているサイトなのか」が直感的に伝わりません。

また、記事一覧は新しい記事が上に表示される仕組みです。

そのため、まとめ記事や重要記事など、本来読んでほしい記事が更新によって下に流れてしまいます。

さらに、記事一覧は新着順なので「読者にこの順番で読んでほしい」という導線を作ることができません。

要するに表示される順番をコントロールできないのです。

トップページを固定ページのホームに変更(NEW)

そこでトップページを固定ページで作る方法を採用しました。

構造は次のようになりました。

/(トップページ)→ /home(固定ページ)へリダイレクト

/archive → 記事一覧

トップURLにアクセスすると、固定ページ/home(ホーム)に移動する仕組みです。

さらに、ヘッダーのロゴをクリックした場合も、このホームページに戻るようにしています。

これによって、トップページは「サイトの入口」として機能するようになりました。

/archive を記事一覧として残す理由

トップを固定ページにすると、記事一覧が不要に思えるかもしれません。しかし実際には、記事一覧ページは残しておいた方が便利です。

記事一覧は、自分が最新記事を確認したいときや、一覧から記事を探したい読者にとって役立つページです。

そのため、/archive を記事一覧として残し、グローバルメニューからアクセスできるようにしています。

この構造にすると、役割が次のように分かれます。

  • ホーム → サイトの入口
  • 記事一覧 → 記事を探すページ

役割を分離することで、読者が迷いにくくなります。

固定ページホームのメリット

トップページを固定ページにすると、サイトの入口を自由に設計できます。

例えば次のような要素を配置できます。

  • サイトの説明
  • 主要カテゴリ
  • 人気記事
  • まとめ記事
  • 初心者向けページ

記事一覧トップでは新着順にしか表示できませんが、固定ページならまとめ記事や比較記事など、「読者に特に見せたい順」や「検索上位に持ち上げたい順」で記事を自由に配置できます。

また、固定ページに設置したリンクは更新しても流れません。

「重要記事」や「まとめ記事」を常に目立つ位置に置けるため、導線設計がしやすくなります

グローバルメニューとの組み合わせ

今回の構造では、グローバルメニューも重要な役割を持っています。

グローバルメニューには、カテゴリページや記事一覧(/archive)など、主要なページへの導線を配置しています。

つまり、次のような役割分担になります。

  • ホーム → サイト全体の案内
  • 記事一覧 → 全記事の閲覧
  • グローバルメニュー → 主要ページへの導線(常時表示)

このように役割を分けることで、ブログ全体の構造が分かりやすくなります。

トップページを固定ページにする手順

ここからは、実際にはてなブログのトップページを「固定ページ(/home)」に変更する手順を紹介します。

今の世の中、作業自体はそれほど難しくありませんよ。

① 固定ページ「/home」を作成

まずは固定ページでホームページを作ります。

はてなブログの「固定ページ作成」から /home のページを作成します。ページ名は「ホーム」にしておくと管理しやすいです。

この固定ページ /home が、サイトのトップページとして機能します。

ホームページの構成は、ChatGPTなどの生成AIに相談するとかなり簡単に作れます。

例えば次のように依頼します。

はてなブログのホームページを作りたい。カテゴリ導線や人気記事、まとめ記事を配置したサイト型ホームのHTMLを書いてください。

するとHTMLコードを作ってくれるので、それを貼り付けるだけです。

あなたがやる作業は主に次の2つだけです。

  • ボタンのリンク先を指定する
  • カードや記事のURLを指定する

この固定ページ /home で、ホームページを自由にデザインします。

② リダイレクトを設定

次に、ブログのトップURLから /home に移動するように設定します。

設定場所はこちらです。

はてなブログ管理画面 → 設定 → 詳細設定 → 「<head>要素にメタデータを追加」

この欄に、次のコードを記入します。

<!-- トップからホーム(固定ページ)へジャンプ -->
<script type="text/javascript">
  // トップページ(/)にアクセスした場合のみ、固定ページ(/home)へリダイレクト
  if( location.pathname === '/' ) {
    location.replace('/home');
  }
</script>

これで、

URL/

にアクセスすると、自動的に

URL/home

へリダイレクトされるようになります。

つまり、トップページが固定ページのホームとして機能するようになります。

実際に作ったホームページ

この構造で作ったホームページは次の3サイトです。

それぞれのサイトで、トップは固定ページのホーム、記事一覧は /archive という構造を採用しています。

まとめ

はてなブログは初期状態ではトップページが記事一覧ですが、ブログが成長してくると、この構造では導線が弱くなることがあります。

その場合は、トップページを固定ページのホームに変更し、/archive を記事一覧としてグローバルメニューに残す構造にすると、サイトの入口と記事一覧の役割を分けることができます。

この方法は、ブログをサイト型にしたい場合や、回遊率を改善したい場合に特におすすめです。

記事数が増えてきたブログでは、トップページの設計を見直すだけでもサイト全体の導線が大きく改善する可能性がありますよ!

 

最後までご覧くださいましてありがとうございました。

じぇいぴー