[ma91n]

close #471

12 件のうち、いちばん見た目が変わる PR。マージ前に見比べてほしい。 VitePress のドキュメントサイトらしい「青い現在地」が無くなるので、良し悪しの判断が要る。

何が問題か

--vp-c-brand-1（#403 で置いた #0a58ca）が、本文の参照リンクの色と、レイアウトの部品の hover / 現在地の両方に使われている。技術ブログ #2893 の「青は読み物の中のリンクの色。レイアウトの導線には使わない」に当たる。

もう 1 つ、現在地を色だけで示している。--vp-c-brand-1 と地の文（--vp-c-text-1）の比は 1.70 しかない。技術ブログが #2722 で「色と太さを同時に動かすと現在地だけ浮く」として色を動かさない側に寄せた、その逆の形になっている。

入れたもの

hover は文字を一段濃く（text-2 → text-1）、現在地は太さ（700）で示す。もともと持っている印（サイドバーの左のバー・目次のマーカー）だけブランドのネイビーで塗る。新しい面も色も足していない。

部品	before	after
ヘッダーのナビ（VPFlyout）	静止 text-1 / hover で text-2（濃さが逆に動く）/ 現在地は青	静止 text-2 / hover text-1 / 現在地 text-1 ＋ 700
ドロップダウンの行	hover で面 ＋ 青 / 現在地は青	hover は面だけ（既定のまま）/ 現在地は text-1 ＋ 700
サイドバーの行	hover で青 / 現在地は青 ＋ 左のバーが青	hover text-1 / 現在地 text-1 ＋ 700 ＋ バーはネイビー
右の目次	現在地は青 ＋ マーカーが青	現在地 text-1 ＋ 700 ＋ マーカーはネイビー
ページャ	題が静止で青 / hover で枠が青	題は text-1 / hover で題に下線（枠は動かさない）
編集リンク	静止で青	text-2 / hover で text-1 ＋ 下線

• ページャの枠と下線を同時に動かさないのは、1 部品に 2 つの反応を付けないため。当たり判定（カード全体）が反応（題の下線）より広いのは技術ブログのカードと同じ形
• 暗い側はバーとマーカーを明るい線に替える。 --vp-c-brand-3 は暗い側が #0a58ca で、地の上で 2.67 と非テキストの 3:1 に届かない（フォーカスリング フォーカスリングとスキップリンクを技術ブログと同じ形にする #437 と同じ向き）
• ホームの 3 枚（VPFeature）は触っていない。hover の枠は .VPFeature.link にしか当たらず、このサイトの 3 枚は link を持たない（押せない）ので、もともと反応しない
• scoped style が (0,7,0) まで積むので #app を前置して id で勝たせている

静止時の文字の比は --vp-c-text-2 が白地 5.62 / 暗地 5.99、ネイビーのバーは白地 16.24。

見比べるところ

documents/ の任意のページで、

1. 左サイドバー … いま開いているページの行（現在地）と、カーソルを乗せた行
2. 右の目次 … 読んでいる節（マーカーと文字）
3. ヘッダーの Guidelines … 静止と hover、開いたときのドロップダウンの行
4. ページ下部 … 前後のページのカード、編集リンク
5. ライト・ダークの両方

判断してほしいのは 1 と 2。 青い現在地は VitePress の通り相場で、読者はそれを「今ここ」と読み慣れている。太さ＋ネイビーのバーだけで所在が読めるかを見てほしい。読めないなら、この PR を閉じて「現在地に太さを足すだけ（青は残す）」の狭い版に切り直す。

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[ma91n]

根拠が持たなかったので閉じる。実装を確かめ直したところ、issue #471 に書いた 2 点とも誤りだった。

「現在地を色だけで示している」は事実と違う。 サイドバーにも右の目次にも 2px のバーが既にある（.indicator は行の左 -17px、.outline-marker は目次の罫線上を動く）。色以外の手がかりが無いという前提が成り立たず、WCAG 1.4.1 の話も当たらない。

技術ブログは「太字＋バー」で現在地を示していない。 ブログの実装は「的を持つ部品の現在地は面」で、サイドバーの目次は hover と同じ面（surface-mute、#2909）、ページャはネイビーの塗り、タブはネイビーの下線＋太字。この PR が入れた太字＋ネイビーのバーは、そのどれにも対応していない。

#2893 の射程を広げすぎていた。 「青はレイアウトに使わない」は、読み物の中の導線（.more-link）が本文の参照リンクと同じ青だと紛らわしい、という話。ドキュメントサイトのサイドバーの現在地は対象外で、VitePress の青い現在地はそれ自体が一貫した別の体系。

実際に残る不具合は 1 つだけなので、そちらを別に切る。