うみべのいえプロジェクト

1. 01

   ファーストビュー

   左半分に港町と海の写真（下端を波形に切る）、右に紙のような質感の水色の地と小さな写真3枚、見出し「“うみべのいえ”から広がる物語。」。右上にカッコで挟んだ Menu とアンカーリンク、右下に南伊勢の気温と天気の表示。

2. 02

   Message（なつかしさ残る、南伊勢。）

   波線のイラストを散らした地に、写真を点在させながら町の暮らしを語る本文。続けて「南伊勢に…」から「住んでみたい！」「遊びに行きたい！」の円形ボタンで行き先を分ける。

3. 03

   うみべのいえプロジェクトとは？

   濃い水色の地に白抜きの見出しで、町を家に見立てる考え方を説明。下に、リビング・キッチン・作業場などの吹き出しを描き込んだ町並みのイラストマップ。

4. 04

   できること（Service）

   縦書きの見出し「うみべのいえでできること」とイラストに続き、キッチン・リビング・クローゼット・アトリエを写真と説明で紹介し、「チャレンジしたい人を応援しています。」で締める。

5. 05

   行き方（Access）

   「お車でお越しの方」「公共交通機関でお越しの方」「車がなくても楽しめます！」の3つに分けてアクセスを案内する。

6. 06

   私たちについて（Our Story）

   「結果より、どれだけ試したかを大切に」を掲げ、運営チームを紹介する。

7. 07

   うみべのいえ ノート

   活動の記事への入口。

8. 08

   お問い合わせ

   視察・見学を考える人に向けた問い合わせの案内。

9. 09

   フッター

   ロゴとリンクで締める。

• スタックに Lenis があり、慣性スクロールで写真の点在するページをゆったり流す
• FVのセクションは縦に長く確保されており、スクロールに合わせて写真や見出しが切り替わるピン留め演出と思われる（position: sticky とスクロール進捗で再現可能）
• 写真の下端やセクションの境目は波形。SVG の path を mask にするか、波形SVGを重ねて切り替える
• 右端の「お問い合わせはこちら」（封筒アイコン付き）とメニューは固定表示で、どこからでも問い合わせに進める

スクロールのコマ撮りLenis · 300–2500ms

検出された技術:LenisWordPressGoogle Fonts

• 01背景は白ではなく淡い水色にし、紙のようなノイズを重ねて手触りを出す
• 02写真は大きさをばらばらにして余白に点在させ、下端だけを波形に切る
• 03施設やサービスを「キッチン」「リビング」など家の部屋名で呼び、イラストマップで位置関係を見せる
• 04移住・観光など目的の違う訪問者を、円形の大きなボタンで早めに振り分ける

1---
2title: "うみべのいえプロジェクト 再現用デザイン仕様書"
3source: https://umibeno-ie.com/
4katapick: https://katapick.com/sites/umibeno-ie
5category: コーポレート
6region: 国内 (JP)
7tags: [ブルー基調, イラスト, 写真主体, 余白, 固定CTA]
8launched: 2026-08
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