Landing PageOverseas / ESPicked 2026.09.26

ERA Residence

LPのWebデザイン参考 — 不動産（分譲レジデンス）

出典: era-residence.com

Editor's note — 編集部の視点

物件写真は後回しで、まず赤紫の画面にロゴだけ。

スペイン・エステポナのブティックレジデンスERA ResidenceのLPは、赤紫・空色・生成りの3色と細身のセリフ体で、地中海の暮らしの格から語り始める。

IrisColor & Brand

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

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

Color

ERA Residenceの配色

Typography

使用フォントと無料の代替

ロゴ・見出し

Aa あア

使用: Ambroise Francois
代替: Bodoni Moda

本文・ラベル・ナビ

Aa あア

使用: Maison Neue Extended
代替: Archivo（Expanded）

筆記体（地名・装飾）

Aa あア

使用: Sloop Script
代替: Pinyon Script

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型172.8px · 0.87 · 400
小見出しKatapick 型56.7px · 0.88 · 400
本文The quick brown fox — 参考を型にする11.7px · 1.38 · 400

Structure

ページ構成（上から順）

01
オープニング
赤紫の地に花の紋章、中央に「ERA RESIDENCE」のロゴと筆記体の「Estepona」。左右に字間を大きく開けた「COSTA」「DEL SOL」を置き、背景に大きな筆記体を透かしで敷く。
02
ヒーロー
アーチ型に切り抜いた青空と白い低層棟のパースに、「A PLACE / TO RETURN TO」と BY DAY / BY NIGHT の切り替えを重ねる。左に円形のエンブレム、右上に「SELECT AN APARTMENT」「BOOK A CALL」「CONTACT」を固定。
03
Three reasons
空色の大きなアーチに「THREE REASONS TO CHOOSE ERA」を弧状に組み、Real-Life Location / Built to stay / Boutique concept を画像スライダーと短い本文で見せる。
04
The concept
生成りの地にブーゲンビリアの写真を添え、25戸のゲーテッドコミュニティであることを大文字のステートメントで語る。
05
ロケーション・住戸
New Golden Mile の立地と、104〜244㎡の住戸タイプ（Ground floor + basement / Penthouse duplex など）を紹介。
06
共用施設
Gated community / Swimming Pool / Parking area / Spa & gym / Landscaping を並べる。
07
Architecture・Perfect sea views
地中海建築と現代的なラインを両立させた設計の考え方と、ルーフテラスからの海の眺めを見せる。
08
Sales Office・Book a call
販売事務所の案内と通話予約への導線。「Crafted to Endure」「Light & Flow」「Your Private Sanctuary」のパートで締める。

Interaction

アニメーション・インタラクション

技術スタックに GSAP と Lenis があり、FVからアーチ状の写真へ切り替わるピン留め演出は ScrollTrigger と思われる。写真の clip-path をスクロール進捗に紐づけると再現可能
Barba.js によるページ遷移で、サイト内の移動をリロードなしのトランジションでつないでいる
弧状の見出しは SVG の textPath で組んでいると思われる。path に沿って text を配置すれば再現可能
Lottie もスタックにあり、紋章やエンブレムまわりの小さなアニメーションに使われていると思われる

スクロールのコマ撮りLenis · 400–32000ms

検出された技術:GSAPLenisBarba.jsWebflowAdobe FontsLottie

Reproduce

再現するときのポイント

01章ごとに #340c24・#b5cedb・#f3f3ec の背景を切り替え、文字色は #17233b と白の2つに絞る
02見出しは細身のセリフ体を大文字で組み、地名など感情を乗せたい語だけ筆記体にする
03写真や見出しをアーチや円弧の形で切り取り、地中海建築のモチーフを画面の形にも持ち込む
04物件選択・通話予約・問い合わせの3導線を右上に固定し、読み物の途中でも行動できるようにする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

era-residence.katapick.md

1---
2title: "ERA Residence 再現用デザイン仕様書"
3source: https://www.era-residence.com/
4katapick: https://katapick.com/sites/era-residence
5category: LP
6region: 海外 (ES)
7tags: [セリフ体, 手書き文字, 余白, スクロール演出, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# ERA Residence — 再現用デザイン仕様書
17 
18> 物件写真は後回しで、まず赤紫の画面にロゴだけ。スペイン・エステポナのブティックレジデンスERA ResidenceのLPは、赤紫・空色・生成りの3色と細身のセリフ体で、地中海の暮らしの格から語り始める。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

ERA Residenceについてよくある質問

ERA Residenceのサイトで使われているフォントは？

ロゴと見出しに Ambroise François（Adobe Fonts）、本文とラベルに Maison Neue Extended、筆記体に Sloop Script が使われています。無料で近づけるなら Bodoni Moda、Archivo の Expanded、Pinyon Script の組み合わせがおすすめです。