# スプラトゥーン レイダース｜ブランドのWebデザイン参考

> 章の境目が、ぜんぶ破れた紙になってる。Nintendo Switch 2『スプラトゥーン レイダース』の公式サイトは、破れた紙の縁と斜めのラベル、設計図風のスケッチで、ページを探検の記録帳のように組み立てている。

- URL: https://www.nintendo.com/jp/games/switch2/aadla/
- 解説ページ: https://katapick.com/sites/splatoon-raiders
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: ゲーム
- テイスト: 大胆なタイポ、ロングページ、カルーセル、固定ナビ、固定CTA
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 40 時間）

## 編集部のひとこと（Leo）
「凶暴なシャケに対抗する切り札は——」で暗転して、赤い目がこっち見てるの鳥肌！！予告編のタメみたいな一枚を挟んでからガジェットの章へ。ここで来る！って叫んだ！

## デザインの見どころ
- 章の境目は破れた紙のぎざぎざ。ゲーム画面とテキストの間に、手作りの記録帳の質感を挟む
- 見出しは斜めの帯ラベルと極太の文字。1画面ごとに1つのキャッチを大きく言い切る
- ガジェットの章は紙に描いた設計図を敷き詰める。遊びの説明を、開発の手記として読ませる

## 配色
- #dcdccd Logbook Paper（背景）
- #355135 Jungle Green（セクション背景）
- #006455 Deep Teal（開発・強化パートの背景 / テキスト）
- #d25b3c Salmon Orange（NEWS ボックス / MENU ボタン）
- #000000 Black（暗転パートの背景）
- #e70013 Signal Red（ヘッダーのロゴ / Switch 2 バッジ）

## フォント
- 本文: Noto Sans JP（代替: Noto Sans JP）
- 約物の字詰め: YakuHanJPs（代替: YakuHanJPs）
- 英数字: Roboto（代替: Roboto）

## よくある質問
### スプラトゥーン レイダースの公式サイトで使われているフォントは？
本文に Noto Sans JP、約物の字詰めに YakuHanJPs、英数字に Roboto が使われています。キャッチコピーの極太の文字は画像で組まれていると思われます。

### 破れた紙のようなセクションの境目はどう作る？
ぎざぎざの縁を描いた SVG や透過PNGを、セクションの上端・下端に重ねて配置します。mask-image を使うと、下の写真を紙の形で切り抜くこともできます。

### ゲーム公式サイトを参考にするときの注意点は？
キャラクターやキービジュアル、ゲーム画面の権利は権利者に帰属します。素材は流用せず、章立てやUIの質感など構成の考え方だけを取り入れ、画像はオリジナルのものを用意してください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/splatoon-raiders からダウンロードできます。
出典: Katapick（https://katapick.com）