明日香村観光 あすか時間

1. 01

   ヘッダー

   左に言語切替（JP / EN / KO / CN / TW）とSNS、右に「旅行会社・メディア・学校関係者の皆様へ」と二重線のメニュー。

2. 02

   FV

   青磁色の和紙に「明日香村観光サイト あすか時間 VISIT ASUKA」の題字と円形の世界遺産登録バッジ。下半分に蛍の舞う渓流の写真、お知らせカード、UN Tourism のロゴ。

3. 03

   01 日本の国の原点

   棚田の夕景を全幅で見せ、村の成り立ちを語るテキストとフィールドミュージアムへのボタンを置く。

4. 04

   02 世界文化遺産「飛鳥・藤原の宮都」

   広い余白の中に登録の解説と、宮都の紹介・ダイジェストコースへの2つのボタン。

5. 05

   四季の風景

   丸みのある形に切り抜いた季節の写真を、手描きの流線とともに散らす。

6. 06

   明日香の地図帖

   高松塚・石舞台・飛鳥京などエリアごとの解説リストと、イラストマップを左右に並べる。

7. 07

   めぐりかた・ツアーガイド

   スタンダード、ダイジェスト、サイクリング、堪能コースの4つのモデルコースと、ツアーガイドの案内。

8. 08

   来訪ガイドライン・イベント・お知らせ

   「訪れるみなさまと大切にしたいこと」と、今後のイベント、特集記事。

9. 09

   アクセス・FAQ・フッター

   交通アクセス、よくある質問・お問い合わせ、カテゴリやエリアから探す導線を並べたフッター。

• Lenis の慣性スクロールに合わせて、写真やテキストがスクロールで現れる出現演出と思われる（IntersectionObserver でクラスを付与して再現可能）
• 写真の有機的な切り抜きは SVG の clipPath か CSS の mask-image、写真をつなぐ流線は SVG の stroke-dashoffset アニメーションで描くと近づく
• 背景の和紙は繊維の入ったテクスチャ画像を敷いている。SPでは上部に世界遺産登録の告知バーを置く

スクロールのコマ撮りLenis · 350–2000ms

検出された技術:LenisWordPressGoogle Fonts

• 01本文・見出しは Shippori Mincho B1 に YakuHanMP を重ね、括弧や句読点の間延びを詰める
• 02地は #ebe3cc の生成り、FVだけ #afd5d3 の青磁色の和紙にして入口の空気を変える
• 03ボタンは墨色 #2c2c24 の矩形に白文字と細い矢印だけ。装飾を抑え、紙と写真に主役を譲る
• 04見出しに「01」「02」の小さな番号を振り、長いページを章立てで読ませる

1---
2title: "明日香村観光 あすか時間 再現用デザイン仕様書"
3source: https://asukamura.com/
4katapick: https://katapick.com/sites/asuka-jikan
5category: メディア
6region: 国内 (JP)
7tags: [セリフ体, 余白, 写真主体, くすみカラー, スクロール演出, ロングページ]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# 明日香村観光 あすか時間 — 再現用デザイン仕様書
17 
18> 和紙の地に明朝の題字だけで、時間がゆっくりになる。明日香村の観光サイト「あすか時間」は、生成りの紙色と広い余白、有機的に切り抜いた風景写真で、世界遺産の村を急がずに巡らせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22