UX
迷わないナビゲーションと関連導線を作る
ナビゲーションはページ移動の部品ではなく、サイトの優先順位を示す構造です。重要なページへHTMLリンクで到達できる状態を保ちます。
ui.design: seo-basicui.design: llm-visual
まず確認する症状
- 重要ページがフッターや本文から辿れない。
- 同じ意味のリンクが複数名で存在し、ユーザーが迷う。
- PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
- カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。
なぜ問題か
- 内部リンクはユーザーの回遊だけでなく、検索エンジンの理解にも影響します。
- 関連導線が弱いと、診断結果から改善方法へ進めません。
- UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
- AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。
診断で見る指標
主要ページへのクリック深度
アンカーテキストの具体性
パンくずの有無
関連ページリンク
スマホ390px/320pxでの読了と操作
視覚順とDOM順の一致
主CTAまでのスクロール量
エラーや待ち時間からの復帰率
主要ページのクリック深度
同義リンクの統一
パンくず
関連ページの網羅
修正方法
最小修正
重要ページをフッターに追加する
Scan、方法論、Learn、法務など、常に必要なページを辿れるようにします。
推奨修正
カテゴリと記事の親子関係を揃える
URL、見出し、パンくず、内部リンクの分類を一致させます。
さらに改善
診断結果から直接つなぐ
所見カードやreport.mdから該当するLearn記事へリンクします。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
- 05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
- 06重要ページがヘッダー、フッター、本文、関連リンクのいずれかから通常のHTMLリンクで辿れる。
- 07同じリンク先には、文脈が違っても遷移先の内容が分かる具体的なアンカーテキストを使っている。
コーディングエージェント向け修正指示
目的: 主要ページがヘッダー、フッター、本文リンクから辿れるようにし、リンク文言を具体化してください。Learn記事にはカテゴリトップと関連ページへのリンクを入れてください。 追加確認: サイト内の重要URLを一覧化し、どのページから何クリックで到達できるかを確認してからリンク追加してください。
参考資料
よくある失敗
- JavaScript実行後だけ表示される導線に依存する。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- FigmaやPC表示だけで判断し、実際のスマホ幅、キーボード表示、読み込み待ちを見ない。
- 密度を下げるために必要な説明まで削り、判断材料を不足させる。