Landing PageOverseas / NLPicked 2026.09.26

Radian EXR

LPのWebデザイン参考 — 電動オートバイ（エンデューロ）

出典: rideradian.com

Editor's note — 編集部の視点

黄色を、車体と予約ボタンだけに絞ってる。

電動エンデューロバイクの製品ローンチLP「Radian EXR」は、グレーの背景に車体を正面から据え、同じ黄色の予約ボタンへ視線を一直線に運んでいる。

LunaType & Whitespace

ロゴだけ字間をがばっと開けて、あとはInstrument Sansで淡々と組む。ラベルは等幅で添えるだけ。書体2つで足りるって、わかってる人の仕事。……いいね！！

1FVは車体の正面だけで画面を埋める。スペックを読ませる前に、この顔つきで記憶させる
2特徴の見出し7つのうち、読んでいる1項目だけを濃く。長いリストでも現在地がぶれない
3ダーク面では細い線が写真をルートのようにつなぎ、隅に等幅の座標。走る場所を地図の言葉に置き換える

Color

Radian EXRの配色

Typography

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

見出し・本文・ナビ

Aa あア

使用: Instrument Sans
代替: Instrument Sans

小見出しラベル・座標表記

Aa あア

使用: IBM Plex Mono
代替: IBM Plex Mono

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

特大見出しKatapick 型60px · 1 · 500
見出しKatapick 型48px · 1.1 · 500
小見出しKatapick 型36px · 1.05 · 500
本文The quick brown fox — 参考を型にする13.5px · 1.24 · 500
ボタンKatapick 型13.5px · 1.2 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に「Discover EXR」、中央に字間の広いロゴ、右に Our story・Support・Careers と黄色の「Pre-order」ボタン。スクロール中も固定される。
02
ヒーロー
グレーの背景に車体の正面を大きく配置。左下に等幅のラベル、2行の大見出し、サブコピー、白と黄色のピル型ボタン、中央下に Scroll の表示、右下に再生時間付きの発表映像サムネイル。
03
製品シーケンス
明るいベージュの面。キャプチャではこの区間が空白で写っており、スクロール連動で車体の画像が切り替わるシーケンスと思われる。
04
Radian EXR の特徴
左上に製品名、左に特徴の見出し7つ（Swap in 30 seconds など）を縦に並べ、右に対応する車体の写真と短い説明を置く。
05
ステートメント
林道を走る映像を全面に敷き、左上に白い見出しと短い理念文、右に「Our story」ボタンを置く。
06
Built for enduro・Ready for racing
ダークの面に細いルート状の線を走らせ、その線上に走行写真を点在させる。見出しと説明文を写真の脇に置き、右上に等幅の座標表記。
07
写真ギャラリー・開発者メッセージ
走行写真を横一列に並べ、罫線の下で「Built by engineers. Driven by riders.」の見出しと2段組の文章を置く。
08
予約・フッター
森の写真に「Be the first on the line」を重ねた予約セクションの冒頭まではキャプチャで確認できる。フルページが9000pxで切れているため、以降の予約の詳細、「Explore beyond limits.」、ニュースレター登録は抽出データの見出しのみで確認。

Interaction

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

抽出データに GSAP と Lenis があり、製品シーケンスは ScrollTrigger で連番画像または動画の再生位置をスクロール進捗に紐づけていると思われる
特徴リストは、現在のステップの見出しだけ opacity を1、他を0.3程度に下げるハイライトで、ScrollTrigger の onEnter / onLeave か IntersectionObserver で切り替えられる
ルート状の線は SVG の path を stroke-dashoffset でスクロールに合わせて描いていると思われる
Barba.js が検出されており、ページ遷移をフェードなどでつなぐ構成と思われる。走行写真の横並びは Swiper の可能性がある

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

検出された技術:GSAPLenisSwiperBarba.jsWebflow

Reproduce

再現するときのポイント

01黄色（#fdeb07）は車体とCTAボタンだけに使い、それ以外はグレー・ベージュ・深い緑黒に抑える
02見出しは Instrument Sans の細めのウェイトを大きく、字間を詰めて組む。ラベルと座標は等幅で添える
03ライト面とダーク面を交互に置き、製品の説明（ライト）と走行のイメージ（ダーク）を切り分ける
04ヘッダーの Pre-order を黄色で常に見せ、FV・予約セクションでも同じ色のボタンを繰り返す

再現MDに含まれるもの

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

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

radian-exr.katapick.md

1---
2title: "Radian EXR 再現用デザイン仕様書"
3source: https://www.rideradian.com/
4katapick: https://katapick.com/sites/radian-exr
5category: LP
6region: 海外 (NL)
7tags: [写真主体, スクロール演出, ダーク, ミニマル, 固定CTA, 等幅フォント]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# Radian EXR — 再現用デザイン仕様書
17 
18> 黄色を、車体と予約ボタンだけに絞ってる。電動エンデューロバイクの製品ローンチLP「Radian EXR」は、グレーの背景に車体を正面から据え、同じ黄色の予約ボタンへ視線を一直線に運んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22