# 360 Lexington Ave｜LPのWebデザイン参考

> スペックより先に「駅まで2分」を言い切る。ニューヨークのオフィスビル360 Lexington Aveのリーシングサイトは、FVの一文で立地を示し、番号付きのカードと地図で入居の決め手を順に確かめさせる。

- URL: https://360lexingtonave.com/
- 解説ページ: https://katapick.com/sites/360-lexington-ave
- カテゴリ: LP / 地域: 海外（US）/ 業種: オフィス賃貸（ニューヨーク・ミッドタウン）
- テイスト: 写真主体、ライト、余白、固定ナビ、スクロール演出
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

## 編集部のひとこと（Bruno）
ヘッダーの左右が「Available Offices」と「Contact Us」なんだよね。空室を見る、問い合わせる。借りる人がやりたいことはこの2つだけで、それがずっと画面の上にある。これはうまい。

## デザインの見どころ
- FVは内装のカットに「Built For Difference Makers」を1行。スペックより先に入居者像を言い切る
- 「01」「03」と大きな番号を振ったカードが順に現れる。売りを数えさせ、比較検討の材料に変える
- 地図には近くの店を番号付きピンで打ち、横のリストと対応させる。2分の近さを体感で納得させる

## 配色
- #ffffff Gallery White（背景）
- #f5f5f5 Lobby Gray（セクション背景 / カード）
- #111213 Midtown Black（テキスト / Contact ボタン）
- #d7d7d7 Concrete（サーフェス / 大きな「Gallery」の文字）
- #18253a Lexington Navy（特徴カードの背景）
- #2e2520 Walnut（写真まわりの暗部）

## フォント
- 見出し・本文・ナビ全般: Instrument Sans（代替: Instrument Sans）

## よくある質問
### 360 Lexington Aveのサイトで使われているフォントは？
見出しから本文まで Instrument Sans が使われています。Google Fonts で無料で利用できます。

### 番号付きのカードが重なっていく演出はどう作る？
各カードに position: sticky を指定し、top の値を少しずつずらして並べると、スクロールに合わせてカードが積み重なる表現になります。Framer ではスクロール連動のエフェクトで同様の動きを作れます。

### どんな業種の参考になる？
オフィスビルのリーシング、コワーキングスペース、商業施設のテナント募集など、立地とアメニティで選ばれる不動産のLPの参考になります。

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