スタイルガイドに「幅」と「時間」を足し、実装のずれを直す

[ma91n]

スタイルガイドに「幅」と「時間」の節を足す。新しいデザインシステムは作らず、既にある判断を色・間隔と同じ文法で固定した。書く前に、文書と食い違っていた実装を先に直している。

先に直した実装

コミット	内容
ドロップダウンを畳む幅をナビの切替に合わせる	引き出しは 991px 以下なのに、開いたパネルを畳む規則が 1025px 以上で囲われていた。992〜1024px では帯にナビが横並びなのに効かず、押して開いたパネルが離れても残っていた
サイドバーの枠を隠す幅を他の md 境界にそろえる	同じ境界の他4本が 767px なのに、探索の枠だけ 768px。768px ちょうどで「枠を隠す」と「カテゴリ一覧を2列にする」が同時に当たっていた。この2本だけに付いていた screen and も落とす
状態の変化の速さを1つに寄せる	0.12 / 0.15 / 0.18 / 0.2s が部品ごとに散っていた。1つの役に4つの値があり、0.02〜0.05s の差は見分けられない。tab-speed を state-speed に改名して、ドロップダウンと検索ヒントのフェード・検索窓の伸縮・折りたたみの三角もここから引く。ヘッダーのカレットの回転は hover-speed から移した（指しているパネル本体は state-speed で、同じ「開く」が2つの速さで動いていた）
動きを減らす設定で状態の変化を止める	止まっていたのはフッターの下線とタブの3箇所だけで、三角・三本線・カレットの回転、折りたたみの高さ、検索窓の伸縮、パネルのフェードはそのまま動いていた。状態の変化はすべて瞬時にし、0.05秒の色・面・下線は残す
効いていない旧テーマの変数を落とす	参照0の11個（mq-mobile / mq-tablet / mq-normal / mobile-nav-width / column-width / gutter-width / columns ほか）。479 / 480px という実装に無いブレークポイントがここにだけ残っていた。 CSS の出力は1バイトも変わらない
リンクプレビューの反応のコメントを実装に合わせる	「持ち上がりだけにする」と書いてあるが、影は #2747 で0段。実際の反応はすぐ上の「中身が一段引く」

CSS は各コミットごとに make css の出力を差分で確認し、意図した行だけが変わっていること（旧変数の削除は0行）を確かめた。make lint-css は通る。

足した節

• 幅: ページの種類で最大幅を変えない／切り替わる点は 576・768・992・1025px の4つ（それぞれ何が変わるか）／中間の幅を作らない理由／はみ出してよいのは画像・表・コードと note だけ／左右の空き 12px・列の溝 24px・本文とサイドバーの間 44px が間隔の4px刻みに乗っていること
• 時間: 反応 0.05 秒と状態の変化 0.18 秒の2つ、フッターの 0.25 秒は例外として外に置く／イージングは触らない／位置と大きさが動くのは開いたことを示す部品だけ／動きを減らす設定では状態の変化を瞬時にし、反応は残す
• 「形と反応」に散っていた秒数の根拠はこちらへ移し、あちらは何が動くかだけを言う形にした

CLAUDE.md にも同じ2つの決まりを足した（境界の書き方、992px と 1025px を寄せない理由、reduced-motion の線引き）。

確認

• /specials/styleguide/ … 「間隔」の後ろに「幅」、「形と反応」の後ろに「時間」。表とリンクの描画、目次への出方
• 992〜1024px でヘッダーのドロップダウンを押して開き、カーソルを外して畳むこと
• 折りたたみ・タブ・検索窓・引き出しの開閉の速さ（すべて 0.18 秒）
• OS の「視差効果を減らす」を入れて、開閉が瞬時になり hover の色の送りは残ること

🤖 Generated with Claude Code