# 劇場版 魔法少女まどか☆マギカ〈ワルプルギスの廻天〉｜ブランドのWebデザイン参考

> 縦長のKVを、スクロールで上から下まで見せる。劇場版『魔法少女まどか☆マギカ〈ワルプルギスの廻天〉』の公式サイトは、FVにロゴも日付も置かずKVだけを見せ、スクロールの先でタイトルと公開日に着地させる。

- URL: https://www.madoka-magica.com/wr/
- 解説ページ: https://katapick.com/sites/madoka-magica-wr
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: アニメ映画
- テイスト: イラスト、セリフ体、ロングページ、マーキー、固定ナビ
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

## 編集部のひとこと（Leo）
STAFFの英字が★で区切られて横に続いていくの、エンドロールが始まる合図みたい！その下は役職が金、名前が黒の明朝で3列。スクロールするほど上映後の余韻が来る、鳥肌！

## デザインの見どころ
- FVは文字を置かず、縦長KVの上端だけを全面に。スクロールしてはじめて全体とタイトルが現れる
- 予告編の列は、上下をフィルムの穴の帯で挟む。映画のサイトだと、帯1本で伝わる
- ストーリーは金の縁取りのアーチ窓に収め、要所だけ金色に。長文でも筋の要点を拾える

## 配色
- #eeeeea Parchment Gray（背景）
- #000000 Soot Black（テキスト）
- #997d26 Antique Gold（ロゴ / 見出し / 強調）
- #ffffff Arch White（パネル / MENUボタン）
- #562811 Umber Dusk（INTRODUCTION の背景）

## フォント
- 和文見出し・本文: Shippori Mincho（代替: Shippori Mincho）
- 本文の強調: Shippori Mincho B1（代替: Shippori Mincho B1）
- 英字（MENU・MORE・日付）: Cardo（代替: Cardo）

## よくある質問
### 劇場版まどか☆マギカ〈ワルプルギスの廻天〉のサイトで使われているフォントは？
和文に Shippori Mincho と Shippori Mincho B1、英字に Cardo が使われています。いずれも Google Fonts で無料で利用できます。

### 映画の公式サイトのように、KVからタイトルへつなぐ構成はどう作る？
FV に縦長のビジュアルを全幅で置き、その下端に背景色への linear-gradient を重ねてタイトルロゴと公開日を続けます。KV は自作のイラストや写真に差し替えて使ってください。

### このサイトのデザインはどんなサイトの参考になる？
アニメ映画や劇場作品の公式サイト、舞台・展覧会の特設サイトなど、1枚のメインビジュアルで作品の空気を伝えたいサイトの構成の参考になります。

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