ある日、森のなか。［長野県信濃町］

1. 01

   ヒーロー

   森の地面の写真に、動物が積み重なった白い切り絵、縦書きの「信濃町」「自然とともに未来を考えられる」と英文、左下にメディア名、右下にイベント・移住相談の告知カード。上部に 遊ぶ・学ぶ・行く・暮らす・読む のナビと「探索する」ボタン。

2. 02

   お知らせ帯

   サイトのリニューアルや仕事情報の更新を2行で伝える細い帯。

3. 03

   イントロダクション

   「旅する人も、暮らす人も、森の物語の登場人物。」から始まる文章と、田園・湖・雪山の写真を左右交互に配置する。

4. 04

   町の紹介

   舞い落ちる葉のイラストから、山並みとトウモロコシ畑の写真へ。町の概要文と「信濃町を学ぶ」の導線。

5. 05

   数字の帯

   人口、東京からの所要時間、夏の平均気温などを、大きな数字で横に並べて町を紹介する。

6. 06

   あそぶ / くらす

   写真と白い切り絵、縦書きの見出しを組み合わせた目的別の入口を、左右を入れ替えながら並べる。

7. 07

   風景バナー

   「自然とともに未来を考えられる信濃町」のバナーと、湖の横長写真。

8. 08

   よみもの

   縦書きの紹介文と切り絵の見出しの下に、少しずつ傾けた記事カードを横に並べる。

9. 09

   お知らせ・空き家と仕事・掲示板・フッター

   お知らせとイベント、空き家・土地や仕事の情報、「ちょうみん掲示板」を経てフッターへ。

• 舞い落ちる葉のイラストはスクロールに合わせて動くと思われる。GSAP ScrollTrigger で y と rotate を scrub で補間すると再現可能
• よみものの記事カードは少しずつ傾けたカルーセル。Swiper のスライドに rotate を付けて再現できる
• ヘッダーはスクロール後、半透明の帯として固定表示される
• 写真と文章は交互にずらして配置され、スクロールでフェードインすると思われる

スクロールのコマ撮り400–6000ms

検出された技術:GSAPSwiperWordPressGoogle Fonts

• 01切り絵は白一色のSVGで作り、写真の上に重ねる。線の太さと切り込みの角度を揃えると統一感が出る
• 02見出しは writing-mode: vertical-rl の縦書きにし、英文を小さく横に添える
• 03背景は生成り（#edebe9）に紙のようなテクスチャを薄く敷き、文字は焦げ茶（#4c3422）にする
• 04統計の数字は Averia Serif Libre のような丸みのあるセリフで組み、数字も読み物のトーンに寄せる

1---
2title: "ある日、森のなか。［長野県信濃町］ 再現用デザイン仕様書"
3source: https://shinanomachi-iju.jp/
4katapick: https://katapick.com/sites/shinanomachi-iju
5category: メディア
6region: 国内 (JP)
7tags: [縦書き, イラスト, 写真主体, くすみカラー, 余白, ロングページ]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# ある日、森のなか。［長野県信濃町］ — 再現用デザイン仕様書
17 
18> 町の案内なのに、主役は動物の切り絵。長野県信濃町の案内所メディア「ある日、森のなか。」は、森の写真に白い切り絵の動物と縦書きのコピーを重ね、移住の案内を“森の物語”の入口から始めている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22