劇場版 魔法少女まどか☆マギカ〈ワルプルギスの廻天〉

1. 01

   キービジュアル

   縦長のKVを全幅で置き、スクロールで下端まで見せる。右上に MENU、右下に円形の「来場者特典」バナーを固定する。

2. 02

   タイトル・公開日

   KVの下端をグラデーションで背景色に溶かし、タイトルロゴと「2026年8月28日(金)公開」を金色で。下に関連サイトのバナーを並べる。

3. 03

   MOVIE

   上下をフィルムの穴の帯で挟み、予告編のサムネイルを横に並べる。

4. 04

   VISUAL・リード・NEWS

   金の装飾フレームの横長バナー（Key Visual / Teaser Visual）に ZOOM+ を添え、スタッフ陣を紹介する一文、日付付きのニュース3件、楕円枠の MORE ボタンを続ける。

5. 05

   INTRODUCTION

   暗い茶色の背景に大きな英字「INTRODUCTION」を透かしで敷き、中央揃えの長文で作品の歩みを語る。

6. 06

   STORY

   KVを背景に、金のリボン見出しとアーチ型の白いパネル。人物名や要所を金色で強調したあらすじを中央揃えで組む。

7. 07

   STAFF

   「STAFF ★ STAFF ★」と繰り返す金色の大きな英字の下に、役職を金、名前を黒の明朝で3列に並べる。

• MENU ボタンと「来場者特典」の円形バナーはスクロール中も固定表示されている
• 技術スタックに Swiper があり、関連バナーや予告編サムネイルの横送りに使われていると思われる
• STAFF の英字は画面端で切れて繰り返しているため、横に流れるマーキーと思われる。translateX の無限ループで再現可能
• 技術スタックに GSAP があり、KV の視差や各セクションのフェードインに使われていると思われる

スクロールのコマ撮り300–10000ms

検出された技術:GSAPSwiper

• 01キャラクターやキービジュアルは作品の権利物のため流用しない。オリジナルのイラスト・写真に差し替えて、構成と演出だけを取り入れる
• 02FVには文字を置かず、縦長のメインビジュアルを全幅で見せ、下端を背景色へのグラデーションでタイトルにつなぐ
• 03色はグレージュの背景に金（#997d26 前後）と黒だけに絞り、装飾フレームや楕円ボタンも金の細線で統一する
• 04長文は明朝の中央揃えで行間を広くとり、キーワードだけ金色にして拾い読みできるようにする

1---
2title: "劇場版 魔法少女まどか☆マギカ〈ワルプルギスの廻天〉 再現用デザイン仕様書"
3source: https://www.madoka-magica.com/wr/
4katapick: https://katapick.com/sites/madoka-magica-wr
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, セリフ体, ロングページ, マーキー, 固定ナビ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 劇場版 魔法少女まどか☆マギカ〈ワルプルギスの廻天〉 — 再現用デザイン仕様書
17 
18> 縦長のKVを、スクロールで上から下まで見せる。劇場版『魔法少女まどか☆マギカ〈ワルプルギスの廻天〉』の公式サイトは、FVにロゴも日付も置かずKVだけを見せ、スクロールの先でタイトルと公開日に着地させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22