[🛠] モバイルメニューとcategory overviewでブログ探索を復旧する

✨ GPT-5.5の要約 　

モバイルでカテゴリをすぐ開けるようにし、/categories/を全記事ダンプではなくブログ構造を見せるoverview画面へ変えた記録。

sidebarにカレンダーを付けてみると、今度はもっと大きな探索問題が見えた。

デスクトップにはsidebarがある。カテゴリも見えるし、カレンダーも見える。

けれどモバイルでは話が違う。上部メニューを開いても、ブログの実際のカテゴリ構造がすぐには出てこなかった。記事はまた積み上がり始めたのに、小さな画面ではどこに何があるのか探しにくい。

/categories/も同じだった。

基本のカテゴリarchiveは、機能的には合っている。けれど記事が増えたブログでは、ただ長い記事リストのように見える。Daily Review、開発日誌、日記、GPT-5.5会話、聖書黙想、Tipsが混ざっているブログで、単純なリストは構造を説明できない。

だから今日午後の作業は明確だった。

モバイルメニューとカテゴリページを、ブログ構造を見せる探索画面へ変える。

モバイルメニューにカテゴリパネルを付けた

最初のコミットはa1efaa1だった。

a1efaa1  [Fix] | Mobile nav: Show category panel

修正したファイルは二つだ。

_includes/masthead.html
_sass/custom/customOverride.scss

既存のモバイルメニューは、Minimal Mistakesのgreedy nav構造の上にあった。上部リンクは見えるが、このブログの核心であるsidebarカテゴリ構造はすぐ開かなかった。

そこでmasthead.htmlの中に、モバイル専用カテゴリパネルを追加した。

<nav class="masthead-mobile-menu" aria-label="モバイルカテゴリ">
  <div class="masthead-mobile-menu__quick">
    {%- for link in site.data.navigation.main -%}
      <a href="{{ link.url | relative_url }}">{{ link.title }}</a>
    {%- endfor -%}
  </div>
  <div class="masthead-mobile-menu__categories">
    {%- for nav in site.data.navigation.sidebar-categories -%}
      ...
    {%- endfor -%}
  </div>
</nav>

核心は_data/navigation.ymlのsidebar-categoriesをそのまま使ったことだ。

sidebarとモバイルメニューが別々のデータを見ると、いつか必ずずれる。カテゴリを一つ追加したのに、デスクトップには見えてモバイルには見えない、という問題が起きる。

だからモバイルメニューも同じ原本を見るようにした。

さらにsidebar-nav-stats.htmlも一緒に入れた。おかげでモバイルメニューの中でも、各カテゴリの記事数と最新記事の日付を見られる。

これは小さな差だが、実際の探索では大きい。

カテゴリ名だけが見えると、「ここに記事があるのか？」を押してみないと分からない。記事数と最新日付が見えれば、ユーザーは生きているカテゴリと長く止まったカテゴリをすぐ区別できる。

既存のhidden-linksはモバイルで切った

SCSSでは、モバイルで既存の.hidden-linksを隠し、toggleが開いた状態で新しいメニューを見せるようにした。

.greedy-nav .hidden-links {
  display: none !important;
}

.greedy-nav__toggle.close ~ .masthead-mobile-menu {
  display: block;
}

新しいメニューは、上部バーのすぐ下に開くパネルにした。

.masthead-mobile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: min(72vh, 32rem);
  overflow-y: auto;
}

モバイルで重要なのは、一度に全部見せることではない。

小さな画面でもカテゴリ全体を見られる必要はあるが、本文をずっと押し下げてはいけない。だからパネルは開いたときだけ見え、長くなったら内部でスクロールするようにした。

/categories/を記事リストからoverviewへ変えた

二つ目のコミットはee7c436だった。

ee7c436  [Fix] | Categories: Replace full post archive with overview

既存の_layouts/categories.htmlはtaxonomy includeをそのまま使っていた。

{% include posts-taxonomy.html taxonomies=site.categories %}

これを新しいincludeに変えた。

{% include category-overview.html %}

そして_includes/category-overview.htmlを作った。

このincludeはsite.postsと_data/navigation.ymlを基準に、ブログのカテゴリ構造を計算する。

計算する値はこういうものだ。

全記事数
運用中のleaf category数
今年書いた記事数
最新公開日
最も大きいカテゴリ
各カテゴリの記事数
各カテゴリの最新記事日付と最新記事タイトル

この時点のcategory overviewには、カテゴリ占有率barも入った。

{% assign category_share = category_post_count | times: 100 | divided_by: total_post_count %}

まだ完璧な画面だとは言いにくい。けれど方向は合っていた。

/categories/はもう「カテゴリ別の長い記事リスト」ではなく、このブログがどんな構造で動いているのかを見せる最初の画面になった。

なぜoverviewが必要だったのか

このブログは単一テーマのブログではない。

Daily Reviewがあり、開発日誌があり、日記があり、AI会話アーカイブがあり、聖書黙想もある。もう一度GitHub Pagesブログを運用するなら、この混合構造が弱点にならないようにしなければならない。

すべての記事を単に時系列で積み上げるだけだと、読み進めるほど構造がぼやける。

逆にカテゴリoverviewがあれば、読者はまず地図を見る。

どんなカテゴリがあるのか
どのカテゴリが実際に運用中なのか
最近の記事はどこに積み上がっているのか
一番大きな軸は何なのか

これはポートフォリオの観点でも重要だ。

ブログを直すということが、単に記事を書くことではなく、情報構造をもう一度作ることだと示せる。Jekyllの基本機能だけを使えば、記事リストはできる。けれど実際の読者が迷わないようにするには、ブログ全体を一つの探索可能な製品のように見る必要がある。

今日変わったこと

今日午後の核心コミットは二つだ。

a1efaa1  モバイルメニューでカテゴリパネルを表示
ee7c436  /categories/を全記事リストからoverviewへ置き換え

ファイルで見ると、範囲はこうだ。

_includes/masthead.html
_includes/category-overview.html
_layouts/categories.html
_sass/custom/customOverride.scss

モバイルメニューは_data/navigation.ymlのsidebar-categoriesをそのまま再利用する。カテゴリoverviewも同じnavigationデータを基準にleaf categoryを計算する。

ここが今日の作業でいちばん気に入っている部分だ。

新しいデータソースを作らなかった。ブログがすでに持っているカテゴリ定義を再利用した。だからデスクトップsidebar、モバイルメニュー、カテゴリoverviewが同じ構造を共有する。

結果

これでモバイルでもカテゴリを開ける。

上部メニューを押すと、基本navigationとカテゴリグループが一緒に見える。各カテゴリには記事数と最新記事の日付も付く。

/categories/も長い記事ダンプではなく、ブログ構造を見せるoverviewになった。全記事数、運用カテゴリ数、今年の記事数、最新公開日、カテゴリ別の最新記事を見られる。

まださらに整える部分はある。

category overviewに入れたbarが実際の探索に役立つかは、もう少し見なければならない。モバイルメニューの密度も、実画面で引き続き確認する必要がある。けれど今日の核心はつかめた。

ブログがまた大きくなるには、記事を書くことだけでは足りない。

積み上がった記事を、もう一度見つけられなければならない。今日の作業は、その問題をモバイルメニューとcategory overviewから先に解いたものだ。