# うみべのいえプロジェクト｜コーポレートのWebデザイン参考

> 海辺の町を、まるごと一軒の家に見立ててる。三重・南伊勢町の空き家再生「うみべのいえプロジェクト」のサイトは、水色の地に港町の写真と手描きの町の地図を重ね、施設をまちの“部屋”として紹介している。

- URL: https://umibeno-ie.com/
- 解説ページ: https://katapick.com/sites/umibeno-ie
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 地域づくり・空き家活用
- テイスト: ブルー基調、イラスト、写真主体、余白、固定CTA
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

## 編集部のひとこと（Bruno）
右下に南伊勢の気温と天気を出してるの、小さいけど効いてるんだよね。行き方の案内より前に“今日の海辺”を知らせて、訪ねる理由を1つ増やしてる。これはうまい。

## デザインの見どころ
- FVは左に港町の写真、右に紙のような水色の地と小さな写真。町の空気ごと画面を包む
- 施設をキッチン・リビング・アトリエと家の部屋名で呼ぶ。サービス一覧が、そのまま物語になる
- 入口は「住んでみたい！」「遊びに行きたい！」の2つの円。移住と観光の人を最初に振り分ける

## 配色
- #dcecf4 Sea Mist（背景）
- #21acd7 Harbor Blue（アクセント / セクション背景）
- #343f46 Slate Ink（テキスト）
- #b5e3f6 Shallow Water（サブ背景）
- #6a9bb4 Dusk Blue（補助色）
- #ffffff White（カード / 白抜き文字）

## フォント
- 見出し・本文: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 英字・ナビ・天気表示: Sora（代替: Sora）

## よくある質問
### うみべのいえプロジェクトのサイトで使われているフォントは？
見出しと本文に Zen Kaku Gothic New、英字やナビ、天気表示に Sora が使われています。どちらも Google Fonts で無料で利用できます。

### 地域プロジェクトのサイトで施設をわかりやすく見せるには？
このサイトのように、町全体を1軒の家に見立てて施設を「キッチン」「リビング」などの部屋名で呼び、イラストマップ上に配置すると、施設同士の関係と役割が一度に伝わります。

### どんな業種の参考になる？
地域おこし・移住促進・空き家活用のプロジェクト、ゲストハウスやコワーキングを運営する団体など、町の雰囲気と活動をやわらかく伝えたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/umibeno-ie からダウンロードできます。
出典: Katapick（https://katapick.com）