スプラトゥーン レイダース

1. 01

   グローバルヘッダー

   左に任天堂のロゴ、右にストア・さがす・ログイン。右上に赤い Nintendo Switch 2 のバッジ。

2. 02

   ヒーロー

   ジャングルの島を背景にしたキービジュアル、右下にタイトルロゴ、左下に斜めの帯で「2026.7.23（木）発売」。下端は破れた紙の縁。

3. 03

   NEWS・バナー

   紙色の地に、オレンジの NEWS ボックス、「みんなで闘う」の動画バナー、開発者インタビューへの導線、4コマ漫画連載のバナーを並べる。

4. 04

   イントロ

   嵐の島の場面に、斜めのラベル「謎がうずまく島で」と極太のコピー「シャケをシバいて オタカラ・ハント！」、短い導入文。

5. 05

   キャラクター・勢力

   青空を背景に主人公側の人物と勢力を斜めのラベル付きで紹介し、ゲーム画面の写真を傾けて並べる。

6. 06

   舞台と目的

   「“シャケの秘宝”が眠る島!?」「狙うは一攫千金!!」のキャッチを、ゲーム画面と乗り物のアートで展開する。

7. 07

   暗転パート

   暗い背景に赤く光る目と「凶暴なシャケに対抗する切り札は——」の一文だけを置く。

8. 08

   ガジェット（開発・強化）

   紙に描いた設計図のスケッチを敷き詰め、「特別な道具 ガジェット」を紹介。続く深緑のパートで、動画スライダーの「開発」と、パーツの組み合わせを見せる「強化」を展開する。

• GSAP と Swiper を使用。「開発」パートは動画サムネイルのスライダーで、左右の矢印とドットで切り替える
• 右端に丸いオレンジの MENU ボタンを固定し、右下に「購入する」ボタンを常設している
• 見出しタグが検出されず、キャッチコピーは画像で組まれていると思われる
• 破れた紙の縁は、SVG や透過PNGのマスクをセクションの上下に重ねると再現可能

スクロールのコマ撮り100–15000ms

検出された技術:GSAPSwiperGoogle Fonts

• 01キャラクター・キービジュアル・ゲーム画面は権利物。流用せず、オリジナルのイラストや写真に差し替えて、構成と質感の考え方だけを参考にする
• 02背景は #dcdccd の紙色を基本にし、章ごとに深緑・黒・空色の場面写真と交互にして緩急をつける
• 03境目は破れた紙、ラベルは傾けた帯、ボタンは縁取りの丸と、UIパーツを“手作りの道具”の文法でそろえる
• 041画面1キャッチ。極太の見出しを大きく置き、説明文は3〜4行に抑える

1---
2title: "スプラトゥーン レイダース 再現用デザイン仕様書"
3source: https://www.nintendo.com/jp/games/switch2/aadla/
4katapick: https://katapick.com/sites/splatoon-raiders
5category: ブランド
6region: 国内 (JP)
7tags: [大胆なタイポ, ロングページ, カルーセル, 固定ナビ, 固定CTA]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# スプラトゥーン レイダース — 再現用デザイン仕様書
17 
18> 章の境目が、ぜんぶ破れた紙になってる。Nintendo Switch 2『スプラトゥーン レイダース』の公式サイトは、破れた紙の縁と斜めのラベル、設計図風のスケッチで、ページを探検の記録帳のように組み立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22