# 大きなメニュー — Style Reference > 白い紙のページ。見出しに触れると、上から大きな案内が高さを伸ばして降り、後ろのページは暗くなって少し沈む。 **Theme:** light **Series:** PARTS 085 **World:** 種から育てた草花だけを扱う花屋「Hanaya」の案内。 ## Concept メニューを開く動作で画面全体が切り替わる。パネルは上辺から下へ伸び、中の項目は少し遅れて浮き上がり、後ろのページは暗く沈んで奥へ下がる。白い紙と藍の一色。写真を使わず、文字の階層と一枚の藍の板だけで案内を組む。 ## Signature Technique **clip-path による高さアニメーション + 背景の暗転と後退。** ライブラリなし。 1. パネル `.mega` は `position:fixed; top: nav-h` で常に置き、`clip-path: inset(0 0 100% 0)` で隠す。開くと `inset(0 0 0 0)` へ 700ms `cubic-bezier(.76,0,.24,1)`。高さそのものは変えないので中身の再レイアウトが起きない。 2. 中の項目 `.item` は `opacity 0 / translateY(14px)` から、列ごとに `transition-delay` 120 → 360ms で順に浮く。 3. 後ろのページ `.page` は `transform-origin: 50% 0` で `translateY(12px) scale(.985)` + `filter: brightness(.62)`。ページ自体を暗くするので、ナビの白さが残る。 4. 開閉: ボタン click、hover 対応端末では pointerenter で開き、離れて 260ms 後に閉じる。Esc で閉じてボタンへフォーカスを戻す。`focusin` がメニュー外へ出たら閉じる。`aria-expanded` / `aria-controls` を付ける。 5. 900px 以下ではパネルを画面下端の 44px 手前まで伸ばし(`bottom:calc(44px + safe-area)`、縦スクロール)、1 列にする。空けた帯にパーツ名を置き、メニュー項目と重ねない。 6. reduced-motion ではすべての遷移を切る。window の load と、その後 2 フレーム置いた `document.fonts.ready` を待ち、その 0.9 秒後、未操作なら開いて 7 秒保ってから閉じる(読み込み3秒後の静止画に開いた状態が入る)。背後のページは見出しの塊を下寄せにし、開いたパネル(下端 約500px)の下に見出しが切れずに残るようにする。 ## Color Palette | Token | HEX | Role | |---|---|---| | --paper | #FFFFFF | ページとパネルの地 | | --fog | #F3F3F1 | ナビの hover、色見本の地 | | --ink | #131313 | 見出し、本文、黒いボタン | | --ink-2 | #55554F | 本文の補足 | | --muted | #8C8C86 | 列見出しと説明と注の文字 | | --rule | #E3E3DF | ナビとパネルの下罫 | | --indigo | #223A8F | ロゴと注文ボタンと特集の板 | | --indigo-2 | #EEF1FA | パネル内リンクの hover | ## Typography - **Zen Kaku Gothic New 400/500/700**: ページ見出し `clamp(34px, 4.4vw, 68px)` 700 行間 1.15 字間 −.02em、ナビ 14px 500、リンク名 15px 500、説明 13px、特集見出し 22px 700、本文 16px。 - **Inter 400/500**: 列見出しとラベル 11px 字間 .2em 大文字。 - `font-feature-settings:"palt"`。 ## Spacing & Layout - ナビ高さ 64px。パネル内側 40px / 48px、4 列 grid(1.1fr 1fr 1fr 1.3fr、gap 40px)、最大幅 1240px。 - リンクは 10px 12px の内側、角丸 10px、マイナスマージンで文字を揃える。 - 特集の板: 角丸 16px、内側 26px、最小高さ 260px。 - 900px 以下: 1 列、gap 28px、ナビの中間項目は非表示。 ## Motion - パネル 700ms `cubic-bezier(.76,0,.24,1)`。項目 500/600ms、遅延 120〜360ms。 - ページの後退 700ms 同イージング。矢印の回転 400ms。 - 閉じるときは同じ時間で逆再生。 - reduced-motion: 遷移なし。 ## Components - **nav**: 固定で白地、下罫 1px。ロゴ(藍 18px 700)、項目はピル(hover で薄灰)、右に藍の「注文する」。 - **mega**: 3 列のリンク(名前 + 説明)+ 藍の特集の板(右上に白い光の円、白いピルのリンク)。下に注と「Esc で閉じる」。 - **scrim**: 開いている間だけ全面に置く透明層。クリックで閉じる。 - **badge**: 右下固定 `VALE / PARTS 085 / 大きなメニュー`。 ## Do / Don't **Do** - パネルは clip-path で開く。height のアニメーションは中身を再配置して重い。 - ページを暗くするときはページ自体に filter をかけ、ナビは白いまま残す。 - hover で開くなら、閉じるまでに 200ms 以上の猶予を置く。 - リンクには説明を 1 行添える。名前だけの列は読まれない。 **Don't** - パネルに写真を敷かない。板 1 枚と文字で足りる。 - 列を 5 つ以上にしない。 - 開いた状態でページをスクロールさせない。 - 藍以外の色を足さない。 ## References - **Stykka** (Refero): 白い光の下の工房のように、黒 1 色の文字と細い罫だけで組む静かさを参考にした。写真の代わりに文字の階層で案内を作った。 - **Flowers For Society** (Refero): 白い紙に深い藍一色を置く編集的な配色を抜き出した。藍は `#223A8F` に変え、ロゴ・ボタン・特集の板の 3 か所だけに使った。 ## Usage 1. `.nav`、`.mega`、`.scrim` を切り出す。`