BrandJapan
太秦映画村 UZUMASA KYOTO VILLAGE
ブランドのWebデザイン参考 — テーマパーク・観光施設

Editor's note — 編集部の視点
テーマパークなのに、明朝と生成り色で大人っぽい。
京都のテーマパーク太秦映画村の公式サイトは、生成りの地に明朝体と線画アイコンのナビを合わせ、江戸の町での体験を“大人の没入体験パーク”として品よく見せ直している。

営業時間の帯をヒーローのすぐ下に置いてるのがうまいんだよね。観光サイトで一番聞かれる「今日は何時まで?」に、スクロール前から答えてる。一部エリアは18時まで、の注記まで添えてるのも親切。
- 1ナビはイベントや着物を線画アイコンで並べる。和の小物のような絵柄が、探す手間ごと楽しくする
- 2壱・弐・参と漢数字で章を振り、縦書きの英字を添える。長いトップでも巻物のように順に読める
- 3江戸の町の章は濃いグレーに沈め、下端を弧で切って生成りへ戻す。舞台の場面転換のような切り替え
Color
太秦映画村 UZUMASA KYOTO VILLAGEの配色
Typography
使用フォントと無料の代替
和文見出し・本文・ナビ
Aa あア
- 使用
- Noto Serif JP
- 代替
- Noto Serif JP
英字ロゴ・英字見出し(TICKET / SHOW 等)
Aa あア
- 使用
- Cormorant
- 代替
- Cormorant
実測タイプスケール1440px幅 · 2026-09-26 計測
- 見出しKatapick 型40px · 1.1 · 400
- 小見出しKatapick 型16px · 1 · 400
- 本文The quick brown fox — 参考を型にする16px · 1.4 · 400
- ボタンKatapick 型18px · 1 · 600
Structure
ページ構成(上から順)
- 01
ヘッダー
左に英字ロゴ、中央にイベント・ショー / アトラクション / フード・ショップ / 文化体験・着物 / 営業時間・料金 / 交通アクセスを線画アイコン付きで並べ、右によくあるご質問・Language・MENU。
- 02
ヒーロー
江戸の町並みで着物姿の来園者が笑う写真を全幅で敷き、中央に字間の広い英字ロゴと「太秦映画村」。直下に告知と、本日の営業時間・TICKET・SHOWを並べた焦げ茶の帯。
- 03
PICK UP
縦書きの「PICK UP おすすめ情報」の横に、茶道・和装レンタル・茶屋などの写真カードを横に並べるスライダー。
- 04
目的別バナー
「夜も楽しめる映画村」「家族で映画村を楽しもう」など、写真に英字の小見出しと大きな明朝の見出しを重ねた横長バナー。
- 05
カテゴリ別の章
壱〜肆の漢数字と縦書きの英字を振った、イベント&ショー・アトラクション・文化体験・着物・フード・ショップの各章。写真カードのスライダーと一覧へのリンクを置く。
- 06
江戸の町
濃いグレーの背景に町並みの写真を横に並べ、下端を弧で切り取って生成りの次の章へつなぐ。
- 07
映画村の楽しみ方
マガジン「映画村浮世文々」の記事一覧と、誰と楽しむ? などを円形ボタンで選んでプランを探す「うずまさ案内帖」を左右に並べる。
- 08
楽しみ方から探す・お知らせ・ABOUT
円形のタグボタンが並ぶ「CHOOSE YOUR EXPERIENCE」、お知らせ一覧、施設紹介と団体旅行の案内。
- 09
フッター
アクセスやよくある質問への導線、施設情報を置いて締める。
Interaction
アニメーション・インタラクション
- PICK UP やカテゴリ別の写真カードは Swiper による横スライダー
- 「うずまさ案内帖」は、誰と/いつ/どんな風に の質問を円形ボタンで選び進めるステップ形式。タブや状態管理の切り替えで再現可能
- ヘッダーと右下の TICKET ボタンはスクロール中も固定表示される
- 見出しや写真のフェードインは GSAP の ScrollTrigger によるものと思われる
スクロールのコマ撮り200–50000ms
検出された技術:GSAPSwiperGoogle Fonts
Reproduce
再現するときのポイント
- 01背景は純白ではなく #fffaea の生成りにし、文字色も純黒ではなく #262220 の焦げ茶に寄せる
- 02和文は Noto Serif JP、英字は Cormorant で統一し、ロゴの英字は字間を大きく開ける
- 03ナビのアイコンは細い線画でそろえ、テーマパークらしいにぎやかさを絵柄の小ささで抑える
- 04章番号に漢数字(壱・弐・参)と縦書きの英字を添え、長いページに目次の役割を持たせる
再現MDに含まれるもの
実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト
Katapick の再現MDは何がすごい? →1---2title: "太秦映画村 UZUMASA KYOTO VILLAGE 再現用デザイン仕様書"3source: https://eigamura.com/4katapick: https://katapick.com/sites/uzumasa-kyoto-village5category: ブランド6region: 国内 (JP)7tags: [セリフ体, 写真主体, 固定ナビ, ロングページ, くすみカラー, 縦書き]8launched: 2026-039verified: 2026-09-2610measured: 2026-09-26 (Chromium 1440x900)11difficulty: 3/512estimated_hours: 2813generator: Katapick14---1516# 太秦映画村 UZUMASA KYOTO VILLAGE — 再現用デザイン仕様書1718> テーマパークなのに、明朝と生成り色で大人っぽい。京都のテーマパーク太秦映画村の公式サイトは、生成りの地に明朝体と線画アイコンのナビを合わせ、江戸の町での体験を“大人の没入体験パーク”として品よく見せ直している。1920このファイルは Katapick(https://katapick.com)が作成した、デザインを学び・参考にするための仕様書です。21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です(2026-09-26 計測)。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。22
太秦映画村 UZUMASA KYOTO VILLAGEについてよくある質問
太秦映画村のサイトで使われているフォントは?
和文に Noto Serif JP、英字のロゴや見出しに Cormorant が使われています。どちらも Google Fonts で無料で利用できます。
太秦映画村のサイトはどんな構成?
アイコン付きのナビ、写真のヒーローと営業時間・チケットの帯、PICK UP、目的別バナー、漢数字で振ったカテゴリ別の章、楽しみ方の提案、お知らせと施設紹介の順に並ぶロングページです。
どんな業種の参考になる?
テーマパークや観光施設、体験型の文化施設、温泉街や地域の観光サイトなど、にぎやかな体験を落ち着いたトーンで見せたいサイトの参考になります。
太秦映画村 UZUMASA KYOTO VILLAGEに似た参考サイト
出典: Katapick編集部(2026年9月26日 確認)。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。










