# 映画『ホウセンカ』｜ブランドのWebデザイン参考

> クレジットも映画祭の月桂樹も、FVに全部のせ。アニメ映画『ホウセンカ』の公式サイトは、KVの周りに明朝のキャスト・スタッフ表記と映画祭のロゴ、丸いバッジを配し、劇場ポスターの情報量をそのままFVに移している。

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

## 編集部のひとこと（Iris）
背景の群青が、花火が終わってすっかり更けた夜空みたいな色ですき。そこに人名の水色と役職の赤をぽつぽつ置くから、暗いのに線香花火みたいなあたたかさが残るの。

## デザインの見どころ
- ピンクの縦書きのセリフを右端の帯に置く。KVの静けさを壊さず、登場人物の声だけを足す
- Blu-rayと配信の告知は丸いバッジに。ポスターに貼ったシールのように、最新情報だけ浮き上がる
- 本文は夜の庭の背景に白い明朝を中央揃えで。人名や作品名だけ水色にして拾い読みさせる

## 配色
- #272f45 Late Night Indigo（背景 / ヘッダー）
- #000000 Frame Black（KVの枠）
- #f9f4ec Paper Cream（SPのロゴ背景 / カード）
- #59b4c3 Balsam Teal（見出し / 人名の強調 / 現在地のナビ）
- #d74640 Firework Red（役職ラベル / 日付）
- #ffffff White（本文テキスト）

## フォント
- 見出し・本文・クレジット: 明朝体 + YakuHanMP（代替: Shippori Mincho）
- グローバルナビ: ゴシック体 + YakuHanJP（代替: Zen Kaku Gothic New）

## よくある質問
### 映画『ホウセンカ』の公式サイトで使われているフォントは？
本文やクレジットは明朝体に約物用の YakuHanMP、ナビはゴシック体に YakuHanJP を組み合わせています。無料で近づけるなら Shippori Mincho と Zen Kaku Gothic New がおすすめです。

### ナビの現在地が変わる固定ヘッダーはどう作る？
各セクションを IntersectionObserver で監視し、画面に入ったセクションに対応するナビ項目へ is-current などのクラスを付けて色を変えます。

### このサイトのデザインはどんなサイトの参考になる？
アニメ映画や劇場作品、舞台の公式サイトなど、映画祭の受賞歴やクレジットをポスターのように見せたい作品サイトの構成の参考になります。

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