Landing PageOverseas / USPicked 2026.09.26

360 Lexington Ave

LPのWebデザイン参考 — オフィス賃貸（ニューヨーク・ミッドタウン）

出典: 360lexingtonave.com

Editor's note — 編集部の視点

スペックより先に「駅まで2分」を言い切る。

ニューヨークのオフィスビル360 Lexington Aveのリーシングサイトは、FVの一文で立地を示し、番号付きのカードと地図で入居の決め手を順に確かめさせる。

BrunoStructure & IA

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

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

Color

360 Lexington Aveの配色

Typography

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

見出し・本文・ナビ全般

Aa あア

使用: Instrument Sans
代替: Instrument Sans

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

小見出しKatapick 型48px · 1 · 400
本文The quick brown fox — 参考を型にする16px · 1 · 400
ボタンKatapick 型12px · — · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に「Available Offices」、中央に正方形の「360 LEX」ロゴ、右に「Contact Us」のボタン。スクロール後も固定表示。
02
ヒーロー
内装の写真を全面に敷き、「Built For Difference Makers」と、グランド・セントラル駅から徒歩2分という立地の一文。右下に写真付きの「Explore Offices」カード。
03
特徴カード
「Prime Midtown Location」「Built-Out Office Suites」など、01〜03の大きな番号付きカードをスクロールに合わせて順に見せる。
04
ステートメント
「360 Lex has been thoroughly reimagined」を中央に置き、ファサード・アメニティ・内装の刷新を1文で伝える。
05
アメニティ・オフィス
「Hospitality-Inspired Amenities」と「Built-Out Office Suites」の2枚の写真カードを横に並べる。
06
周辺マップ
左に「Explore Nearest Locations」の番号付きリスト、右に番号ピンを打ったモノクロの地図。
07
立地・生活の3ブロック
「2-Minute Walk to Grand Central」「Surrounded By Dining & Entertainment」「Convenience Enhances Lifestyle」を、大見出し・箇条書き・写真の組で縦に並べる。
08
ギャラリー・お問い合わせ
画面幅いっぱいの薄いグレーの「Gallery」の文字の下に写真を散らし、「SCHEDULE A TOUR」へつなぐ。

Interaction

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

01〜03の特徴カードは全画面キャプチャ上でずれて重なって見えるため、position: sticky で積み重ねるスタッキングカードと思われる。カードごとに top をずらして重ねると再現可能
スタックに Framer と Lenis があり、Framer のスクロール連動エフェクトと慣性スクロールで組まれていると思われる
PCとSPのFVで写っている内装が異なるため、ヒーローは映像かスライドショーで複数のカットを切り替えていると思われる
地図のピンと左のリストは同じ番号で対応している。ホバーやクリックでピンとリストを連動させると再現可能

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

検出された技術:LenisFramer

Reproduce

再現するときのポイント

01書体は Instrument Sans の1ファミリーだけ。見出しは大きく細めに、本文は小さなグレーにして差をつける
02特徴カードには「01」のような大きく薄い番号を左下に置き、読む順番を明示する
03背景は #ffffff と #f5f5f5 を交互に使い、カードだけに #18253a などの濃い色を差す
04地図はグレースケールにし、ピンと番号だけを黒で強調する

再現MDに含まれるもの

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

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

360-lexington-ave.katapick.md

1---
2title: "360 Lexington Ave 再現用デザイン仕様書"
3source: https://360lexingtonave.com/
4katapick: https://katapick.com/sites/360-lexington-ave
5category: LP
6region: 海外 (US)
7tags: [写真主体, ライト, 余白, 固定ナビ, スクロール演出]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# 360 Lexington Ave — 再現用デザイン仕様書
17 
18> スペックより先に「駅まで2分」を言い切る。ニューヨークのオフィスビル360 Lexington Aveのリーシングサイトは、FVの一文で立地を示し、番号付きのカードと地図で入居の決め手を順に確かめさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22