アウトドア用品店（カッコイイ系・紫）

だれに向けたページか

2〜3回目の山行で、安い道具から「ちゃんとした物」に買い替えたい30〜40代。値段の安さより「この店の選んだ物なら確か」と思えるかで決める人。 黒い夕暮れの山に道具が浮かぶ、力のある最初の画面で、店の目利きを伝える。

色

文字

• 巨大な英字：Big Shoulders Display（900・縦長で太い）
• 日本語：Noto Sans JP（見出し 900・本文 400）
• 数字・型番：Big Shoulders Display 800

ページの構成と演出

1. メインビジュアル（A09 コラージュ）：黒紫の地に、巨大な「GEAR FOR THE LONG WAY」。その上に、斜めに切った山の写真の破片2枚・紫の多角形・細い等高線・切り抜きのザック／登山靴／ランタン。スクロールすると奥（文字・写真の破片）はゆっくり、手前（道具）は速く動く。読み込み時は破片が直線的に「パッ」と定位置へ（0.5秒・power4.out）
2. 店の考え（F01）：「十年使える物だけ」。焚き火の写真が、次の区切り（明るい紫灰）との境目をまたいで置かれる
3. 選ぶ基準（F04）：3つの基準。それぞれの写真が六角形・矢じり形・斜めに角を落とした形で切り抜かれ、画面に入ると下から形が伸びて現れる
4. カテゴリ：ザック／靴／灯り／テント。切り抜きの道具と大きな番号。黒紫の区切り
5. 修理と点検（F01）：ランタンの切り抜きが、黒い区切りとの境目をまたぐ
6. 店舗とオンライン：二つのボタン
7. フッター

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま組み上がった形。F04 の写真は最初から形に切り抜かれて見えている。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 動きは速く短く（0.4〜0.7秒・power4.out）。揺れ続けるものは置かない
• clip-path は GSAP に数字の polygon で渡す（none から動かさない）

写真（codex 3枚＋写真庫4枚）

切り抜き：ザック・登山靴・ランタン。写真庫から：霧の山あい（006）・森のテント（048）・焚き火（048）・朝のマグ（048）。

見本の値（会員が本物に替える）

価格・保証年数・店の住所・電話はすべて〇〇。

下層ページを作るときの決まり

• 見出しは Big Shoulders Display の大文字＋Noto Sans JP 900 の和文
• 地は黒紫。明るい区切り（#f3f0f9）は1ページに2回まで
• 写真は直線の多角形で切る（丸は使わない）。商品は切り抜きで、境目をまたいで置く