太秦映画村 UZUMASA KYOTO VILLAGE

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

   フッター

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

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

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

検出された技術:GSAPSwiperGoogle Fonts

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 太秦映画村 UZUMASA KYOTO VILLAGE — デザイン分析書
16 
17> テーマパークなのに、明朝と生成り色で大人っぽい。京都のテーマパーク太秦映画村の公式サイトは、生成りの地に明朝体と線画アイコンのナビを合わせ、江戸の町での体験を“大人の没入体験パーク”として品よく見せ直している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22