映画『ホウセンカ』

1. 01

   ヘッダー

   左に手描き風のタイトルロゴと英題「The Last Blossom」、右に トップ〜上映劇場 の2段のテキストナビ。スクロール中も固定表示。

2. 02

   ヒーロー

   黒枠で囲んだKVのスライダーを中央に、左に丸いバッジ（Blu-ray & DVD / Netflix）とキャスト・スタッフのクレジット、上に映画祭のロゴ、右端にピンクの縦書きセリフの帯とサムネイル3枚、右下に白地のキャッチコピー。

3. 03

   ムービー・バナー

   本予告・特報・特別映像のサムネイルを横に並べ、コメント・主題歌・舞台挨拶・ノベライズのバナーと前売券の購入ボタンを続ける。

4. 04

   ニュース

   夜の庭の背景に、日付を赤、見出しを黒にした白いカードを縦に並べる。

5. 05

   イントロダクション・ストーリー

   小さなアイコンで挟んだ見出しの下に、白い明朝の中央揃えで作品紹介とあらすじ。人名や作品名は水色で強調する。

6. 06

   キャラクター

   顔アイコンでキャラクターを切り替え、左に立ち絵、右に名前・プロフィール・CV。立ち絵は「過去」「現在」のボタンで切り替える。

7. 07

   キャスト・スタッフ

   名前を大きな明朝で中央に並べ、スタッフの役職は赤の小さなラベルで添える。

8. 08

   配信情報・商品情報

   Netflix へのボタンと、Blu-ray & DVD・サウンドトラック・劇場グッズのカード。

9. 09

   コメント・フッター

   寄せられたコメントを縦に長く並べ、フッターで締める。

• 固定ヘッダーのナビは、いま見ているセクションの項目が水色に変わる（スクロールスパイ）。IntersectionObserver で現在地のクラスを切り替えると再現可能
• KV は右のサムネイルと連動するスライダー。技術スタックの Swiper の thumbs 機能で作れる
• 夜の庭の背景画像はセクションをまたいで固定されたまま、上をテキストが流れていく。position: sticky か background-attachment: fixed で再現できる
• 右下にページトップへ戻る丸ボタンを常時表示している

スクロールのコマ撮り200–1000ms

検出された技術:SwiperGoogle Fonts

• 01キャラクターやキービジュアルは作品の権利物のため流用しない。オリジナルのイラストや写真に差し替え、ポスター的な情報配置の考え方だけを取り入れる
• 02FV はメインビジュアルを中央に、左にクレジット、右に縦書きのコピー帯を置き、劇場ポスターの情報量を1画面に収める
• 03背景は黒ではなく #272f45 前後の群青にし、強調色は水色と赤の2色だけに絞る
• 04本文は明朝の中央揃えで、強調したい固有名詞だけ色を変えて拾い読みできるようにする

1---
2title: "映画『ホウセンカ』 再現用デザイン仕様書"
3source: https://anime-housenka.com/
4katapick: https://katapick.com/sites/anime-housenka
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, セリフ体, 縦書き, ダーク, カルーセル, 固定ナビ]
8launched: 2025-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 映画『ホウセンカ』 — 再現用デザイン仕様書
17 
18> クレジットも映画祭の月桂樹も、FVに全部のせ。アニメ映画『ホウセンカ』の公式サイトは、KVの周りに明朝のキャスト・スタッフ表記と映画祭のロゴ、丸いバッジを配し、劇場ポスターの情報量をそのままFVに移している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22