第14回 ゆまラボのヘッダー導線とサイト内検索を追加―横長の表とsitemap.xmlも修正

第13回では、個別タグページへnoindexを設定し、フッターへお問い合わせ、プライバシーポリシー、免責事項への導線を追加した。

その後も公開中のサイトを確認していると、まだ修正したいところが4つあった。

• ヘッダーからカテゴリ、連載、タグへ直接移動できない
• 記事が増えてきたが、サイト内をキーワードで検索する方法がない
• 横に長い表はスクロールできるものの、操作が少し分かりにくい
• https://bringain.com/sitemap.xmlが404になる

今回はこの4点を修正する。

ヘッダーからカテゴリ・連載・タグへ移動できるようにする#

修正前のヘッダーは、

Home
記事一覧
About

の3つだけ。

サイトを作り始めた頃はこれで十分。ただ、第9回、第10回で記事の分類方法を追加したことで状況が変わった。

現在は、

カテゴリ
サブカテゴリ
連載
タグ

を使って記事を探せる。

ただし、その入口は記事一覧ページの上部に置いていた。

記事一覧を開けば、

記事一覧 / カテゴリ / 連載 / タグ

へ移動できる。

逆にトップページや記事詳細からカテゴリを見たい場合は、一度記事一覧へ移動してからカテゴリを選ぶ必要がある。

カテゴリやタグ自体はすでに作っているので、新しい分類機能を追加する必要はない。今回は、既存ページへの入口をヘッダーへ追加する。

修正後は、

Home
記事一覧
カテゴリ
連載
タグ
About

をヘッダーへ表示するようにした。

これでトップページ、記事一覧、記事詳細のどこからでも、カテゴリ、連載、タグへ直接移動できる。

第13回では、お問い合わせやプライバシーポリシーのように普段の記事閲覧で常に使うわけではないリンクはフッターへ追加した。今回は逆で、記事を探すために頻繁に使うリンクなのでヘッダーへ追加している。

ヘッダーに何でも追加するのではなく、

記事を探すための入口
→ ヘッダー

運営情報や固定ページ
→ フッター

という分け方にした。

サイト内検索をヘッダーへ追加#

記事一覧、カテゴリ、連載、タグがあれば、ある程度は目的の記事を探せる。

ただ、記事数が増えてくると「以前どの記事でこの単語を書いたか」を探したい場面も出てくる。

現在のゆまラボにはAIの記事とWeb制作の記事があり、同じAstroやCloudflareでも複数の記事に登場する。カテゴリだけでは探しにくいケースもあるので、ヘッダーへサイト内検索を追加した。

修正後のヘッダー右側には「サイト内を検索」を表示する。

ここを押すと、画面中央に検索欄が開く。

検索画面は別ページへ移動せず、現在のページの上へ重ねて表示する。

背景は暗くなり、検索欄へそのまま入力できる。検索だけ行いたい場合にページを移動しなくてよい。

実際にGPT-6と入力して確認した。

画面にはGPT-6の2件の検索結果と表示され、該当する記事が出ている。

検索結果には記事タイトルに加え、記事内の見出しと周辺の文章も出る。

今回の画面では、

• GPT-6 AstraとClaude Fable 5.1を並べてみた。数字は似ているのに、任せたい仕事が少し違う
• GPT-6 Astraを調べてみた。気になったのは性能より「仕事の任せ方」の変化

の2記事が検索結果に出た。

さらに1つの記事の中でも、

Astraは「考えるAI」より「動いて終わらせるAI」に見える
ベンチマークを見ると「Astraが上」「Fableが上」では終わらない
参考

など、検索語が含まれる箇所が候補として表示されている。

記事タイトルだけを検索するより、本文中のどこに書いたかまで探せる方が使いやすい。

サイトを作り始めた時点では検索機能がなくても困らなかったが、記事が増えたことで必要性が出てきた機能になる。

横長の表を表だけスクロールできるように修正#

ゆまラボでは、設定値や製品比較を書くときにMarkdownの表を使うことがある。

例えばGPT-6 AstraとClaude Fable 5.1の記事では、開発元、リリース日、コンテキスト、API料金などを横に並べている。

修正前の状態はこちら。

列数が多いため、画面幅に収まらない部分は横スクロールで確認する形になっていた。

横スクロール自体をなくして、すべての列を画面幅へ無理に押し込む方法もある。ただ、その方法では列幅が狭くなり、長い文字列が不自然に折り返される。

特に、

1,050,000トークン
$10 / 100万トークン
Computer Use

のような値は、列幅を狭くしすぎると読みにくい。

横スクロール自体は残し、横長の表を横長のまま扱いやすくする方向で修正した。

対応したのは次の5点。

1. 表だけを囲む横スクロール領域
2. キーボードフォーカス対応
3. 表示されるスクロールバー
4. 列内の不自然な1文字折り返し防止
5. ページ全体の横スクロール防止

表だけを横スクロールさせる#

一番避けたいのは、表が本文幅を押し広げてページ全体が左右へ動く状態。

本文、見出し、画像まで一緒に横へ動くと読みづらい。

そこで、スクロール対象を表の領域だけにする。

記事本文

┌────────────────────┐
│ 横長の表              → │
└────────────────────┘

記事本文

表が画面幅を超えても、その外側の記事レイアウトには影響させない。

横に動かせることを画面上に表示#

スクロールできても、利用者が気付かなければ意味がない。

修正後は表の右上に、

横にスクロールできます

と表示するようにした。

下部のスクロールバーも表示したままにしている。

これで、表の右側に続きがあることを、文章とスクロールバーの両方から確認できる。

キーボードでも操作できるようにする#

マウスやタッチ操作だけを前提にせず、横スクロール領域へキーボードフォーカスを移せるようにもした。

PCでキーボードを使っている場合も、表のスクロール領域を操作できる。

見た目だけでは分かりにくい部分だが、表を独立した操作領域として扱うために追加した対応になる。

列を無理に細くしない#

表を画面内へ収めるために、すべてのセルを強制的に細くすることもしない。

列内の文字が、

C
o
m
p
u
t
e
r

のように1文字単位で折り返される方が、横スクロールより読みにくい。

必要な列幅は残し、入りきらない分を表の中で横に移動して読む形にした。

表を小さくするのではなく、横長の表を横長のまま扱いやすくする対応。

404になっていたsitemap.xmlを追加#

もう1つはサイトマップ。

https://bringain.com/sitemap.xmlへアクセスすると、修正前は404。

サイト自体は表示でき、記事一覧やカテゴリページも動いている。それでもsitemap.xmlは別なので、ファイルやルートが用意されていなければ404になる。

今回は/sitemap.xmlでXMLを返せるように追加した。

修正後はこちら。

ブラウザ上部には、

This XML file does not appear to have any style information associated with it.

と表示されている。

これはHTMLページのような見た目を付けていないXMLをブラウザで直接開いたときの表示で、404ではない。

その下にはurlsetが表示され、locとしてサイト内URLが並んでいる。

画面上でも、

https://bringain.com/
https://bringain.com/about/
https://bringain.com/blog/
https://bringain.com/blog/01-why-astro-and-cloudflare/
https://bringain.com/blog/02-build-astro-on-windows/
...

を確認できる。

第1回から続けてきたAstro＋Cloudflareの連載記事だけでなく、AI関連の記事URLも含まれている。

修正前は「サイトマップがない」状態。これでhttps://bringain.com/sitemap.xmlを直接開いて内容を確認できるようになった。

公開画面で4点を確認#

修正後の公開画面では、以下を確認した。

ヘッダー
→ Home / 記事一覧 / カテゴリ / 連載 / タグ / About を表示

サイト内検索
→ ヘッダーから検索画面を開ける
→ GPT-6で2件の記事を検索できる
→ 記事内の該当見出しも検索結果へ表示

横長の表
→ 表の領域だけ横スクロール
→ 「横にスクロールできます」を表示
→ スクロールバーを表示
→ ページ全体は横へ動かさない

sitemap.xml
→ 404を解消
→ XMLとしてサイト内URLを確認できる

第9回、第10回でカテゴリ、連載、タグを作ったあと、それらへの入口をヘッダーへ移した。記事数の増加に合わせて、サイト内検索も追加している。

横長の表は、CSSで無理に縮めず、表だけを操作できる形へ変更している。

sitemap.xmlについても404のままにせず、公開URLで内容を確認できるところまで対応した。

追加した機能は別々に見えるが、どれも記事が増えたことで必要になった修正。