# ERA Residence｜LPのWebデザイン参考

> 物件写真は後回しで、まず赤紫の画面にロゴだけ。スペイン・エステポナのブティックレジデンスERA ResidenceのLPは、赤紫・空色・生成りの3色と細身のセリフ体で、地中海の暮らしの格から語り始める。

- URL: https://www.era-residence.com/
- 解説ページ: https://katapick.com/sites/era-residence
- カテゴリ: LP / 地域: 海外（ES）/ 業種: 不動産（分譲レジデンス）
- テイスト: セリフ体、手書き文字、余白、スクロール演出、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

## 編集部のひとこと（Iris）
生成りのページにだけブーゲンビリアのピンクを差してるのがすき。赤紫でも空色でもない花の色が「ここからは暮らしの話だよ」って合図してるみたい。色数を絞ったぶん、花がちゃんと主役になるのがいい。

## デザインの見どころ
- FVは赤紫の地にセリフ体のロゴと筆記体「Estepona」だけ。売り文句より先に、ブランドの格を渡す
- 章ごとに赤紫・空色・生成りへ背景を塗り替える。長いLPでも、場面が変わる手応えが続く
- 「THREE REASONS TO CHOOSE ERA」はアーチの弧に沿って組む。見出しの形まで建築のモチーフになる

## 配色
- #340c24 Bordeaux Night（背景（FV・導入））
- #f3f3ec Linen（背景（コンセプト以降））
- #b5cedb Costa Sky（セクション背景）
- #17233b Deep Navy（見出し / 本文）
- #ffffff White（ロゴ / 暗背景のテキスト）

## フォント
- ロゴ・見出し: Ambroise Francois（代替: Bodoni Moda）
- 本文・ラベル・ナビ: Maison Neue Extended（代替: Archivo（Expanded））
- 筆記体（地名・装飾）: Sloop Script（代替: Pinyon Script）

## よくある質問
### ERA Residenceのサイトで使われているフォントは？
ロゴと見出しに Ambroise François（Adobe Fonts）、本文とラベルに Maison Neue Extended、筆記体に Sloop Script が使われています。無料で近づけるなら Bodoni Moda、Archivo の Expanded、Pinyon Script の組み合わせがおすすめです。

### ERA Residenceのようにアーチ状に写真が広がる演出はどう作る？
写真の枠に clip-path（ellipse や inset の round）をかけ、GSAP ScrollTrigger でスクロール量に合わせて範囲を広げる方法が一般的です。Lenis の慣性スクロールと組み合わせると動きが滑らかになります。

### ERA Residenceのデザインはどんな業種の参考になる？
分譲マンションやヴィラ、リゾートホテル、ウェディング会場など、間取りや設備より先に空気感と格を伝えたい不動産・宿泊系のLPの参考になります。

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