Katapick

BrandJapan

太秦映画村 UZUMASA KYOTO VILLAGE

ブランドのWebデザイン参考 — テーマパーク・観光施設

出典: eigamura.com
太秦映画村 UZUMASA KYOTO VILLAGEのPC版ファーストビュー

Editor's note — 編集部の視点

テーマパークなのに、明朝と生成り色で大人っぽい。

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

BrunoStructure & IA
営業時間の帯をヒーローのすぐ下に置いてるのがうまいんだよね。観光サイトで一番聞かれる「今日は何時まで?」に、スクロール前から答えてる。一部エリアは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

ページ構成(上から順)

  1. 01

    ヘッダー

    左に英字ロゴ、中央にイベント・ショー / アトラクション / フード・ショップ / 文化体験・着物 / 営業時間・料金 / 交通アクセスを線画アイコン付きで並べ、右によくあるご質問・Language・MENU。

  2. 02

    ヒーロー

    江戸の町並みで着物姿の来園者が笑う写真を全幅で敷き、中央に字間の広い英字ロゴと「太秦映画村」。直下に告知と、本日の営業時間・TICKET・SHOWを並べた焦げ茶の帯。

  3. 03

    PICK UP

    縦書きの「PICK UP おすすめ情報」の横に、茶道・和装レンタル・茶屋などの写真カードを横に並べるスライダー。

  4. 04

    目的別バナー

    「夜も楽しめる映画村」「家族で映画村を楽しもう」など、写真に英字の小見出しと大きな明朝の見出しを重ねた横長バナー。

  5. 05

    カテゴリ別の章

    壱〜肆の漢数字と縦書きの英字を振った、イベント&ショー・アトラクション・文化体験・着物・フード・ショップの各章。写真カードのスライダーと一覧へのリンクを置く。

  6. 06

    江戸の町

    濃いグレーの背景に町並みの写真を横に並べ、下端を弧で切り取って生成りの次の章へつなぐ。

  7. 07

    映画村の楽しみ方

    マガジン「映画村浮世文々」の記事一覧と、誰と楽しむ? などを円形ボタンで選んでプランを探す「うずまさ案内帖」を左右に並べる。

  8. 08

    楽しみ方から探す・お知らせ・ABOUT

    円形のタグボタンが並ぶ「CHOOSE YOUR EXPERIENCE」、お知らせ一覧、施設紹介と団体旅行の案内。

  9. 09

    フッター

    アクセスやよくある質問への導線、施設情報を置いて締める。

Interaction

アニメーション・インタラクション

  • PICK UP やカテゴリ別の写真カードは Swiper による横スライダー
  • 「うずまさ案内帖」は、誰と/いつ/どんな風に の質問を円形ボタンで選び進めるステップ形式。タブや状態管理の切り替えで再現可能
  • ヘッダーと右下の TICKET ボタンはスクロール中も固定表示される
  • 見出しや写真のフェードインは GSAP の ScrollTrigger によるものと思われる

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

太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム1
01
太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム2
02
太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム3
03
太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム4
04
太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム5
05
太秦映画村 UZUMASA KYOTO VILLAGEをスクロールしたときのフレーム6
06

検出された技術:GSAPSwiperGoogle Fonts

Reproduce

再現するときのポイント

  • 01背景は純白ではなく #fffaea の生成りにし、文字色も純黒ではなく #262220 の焦げ茶に寄せる
  • 02和文は Noto Serif JP、英字は Cormorant で統一し、ロゴの英字は字間を大きく開ける
  • 03ナビのアイコンは細い線画でそろえ、テーマパークらしいにぎやかさを絵柄の小ささで抑える
  • 04章番号に漢数字(壱・弐・参)と縦書きの英字を添え、長いページに目次の役割を持たせる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい? →
uzumasa-kyoto-village.katapick.md
1---
2title: "太秦映画村 UZUMASA KYOTO VILLAGE 再現用デザイン仕様書"
3source: https://eigamura.com/
4katapick: https://katapick.com/sites/uzumasa-kyoto-village
5category: ブランド
6region: 国内 (JP)
7tags: [セリフ体, 写真主体, 固定ナビ, ロングページ, くすみカラー, 縦書き]
8launched: 2026-03
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15
16# 太秦映画村 UZUMASA KYOTO VILLAGE — 再現用デザイン仕様書
17
18> テーマパークなのに、明朝と生成り色で大人っぽい。京都のテーマパーク太秦映画村の公式サイトは、生成りの地に明朝体と線画アイコンのナビを合わせ、江戸の町での体験を“大人の没入体験パーク”として品よく見せ直している。
19
20このファイルは 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、目的別バナー、漢数字で振ったカテゴリ別の章、楽しみ方の提案、お知らせと施設紹介の順に並ぶロングページです。

どんな業種の参考になる?

テーマパークや観光施設、体験型の文化施設、温泉街や地域の観光サイトなど、にぎやかな体験を落ち着いたトーンで見せたいサイトの参考になります。

出典: Katapick編集部(2026年9月26日 確認)。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。