前回で 検索ページ がサイトに載りました

トップやナビにも検索窓はありましたが、結果を一覧する専用のページ ができました — サイトのページが1つ増えたイメージです
前回の中心は Fuse.js で動かす ところで、結果画面の見た目も直しましたが、実装寄りの回 でした

今回は ページのデザイン の話です
今回デザインするのは、あるある詳細ページ — 一覧から開く、症状・原因・対処を読むページ

前回の末尾でも書きました — 詳細も黄ヒーローだと 読むとき「またトップ？」 になります
検索ページを足したタイミングで、ページ型ごとに見た目を分ける 必要性がはっきりしました

ウェイファインディングを意識してデザインする

ウェイファインディング（wayfinding）は、いまどのページにいるか、遷移したと気づけるか をユーザーに伝える考え方です
建物の案内板と同じ発想で、Web ではパンくずや URL も効きますが、ページ型ごとに見た目を変える のも大きな手がかりになります

前回で検索ページをデザインしました（細かい話はあちら）
ページが増えるたび、ウェイファインディングを意識して 型を足していく — 今回は 詳細ページ です

トップ・検索・詳細で 上から見える形が違う ようにする
同じサイトなのに、いま詳細を読んでいる とわかる状態を目指しました

詳細ページは、ウェイファインディングが弱いままだった

検索ページで一度「ページ型を分ける」をやったあと、詳細を開くと違和感が強くなります
ウェイファインディング の観点では、トップと同じ黄ヒーローが続くのがいちばんの問題です

※ スクショは一般的な PC ブラウザの1画面分で切り出しています

詳細なのにトップと同じ黄ヒーロー（ライト・Before）

上段 — トップ用のランドマークを載せない

本文 — 検索結果と同系の「読むゾーン」

症状/原因/対処 — qflow--flat

番号付きタイムライン案は 不採用 — ウェイファインディングを複雑にしない

トップ・検索・詳細で形が分かれたので、ページを遷移したことがわかります

詳細ページをデザインしたあと（ライト・After）

ページが増えるたびに ウェイファインディングを意識して型を1つ足す — 全部同じ部品で揃えない

ファイル	意図
`HeroDetail.astro`	詳細から黄帯を外し、トップとランドマークを分ける
`aruaru/[slug].astro`	詳細ページ型＝`entry-sheet` + `qflow--flat`
`global.css`	シート・フラット qflow・対処の左黄線

検索ページと詳細ページのコードは、開発では同じタイミングで入っています
記事は分けています — 前回は検索ページの実装、今回は詳細ページのデザイン

ウェイファインディングを意識して、詳細ページのデザインを決める