# Radian EXR｜LPのWebデザイン参考

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

- URL: https://www.rideradian.com/
- 解説ページ: https://katapick.com/sites/radian-exr
- カテゴリ: LP / 地域: 海外（NL）/ 業種: 電動オートバイ（エンデューロ）
- テイスト: 写真主体、スクロール演出、ダーク、ミニマル、固定CTA、等幅フォント
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 40 時間）

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

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

## 配色
- #121714 Forest Black（背景（ダーク面）/ テキスト）
- #f5f3ef Bone（背景（ライト面）/ ダーク面の文字）
- #212623 Moss Charcoal（サーフェス / 黒いボタン）
- #fdeb07 Radian Yellow（アクセント / Pre-order・Configure のボタン）
- #7a7a7a Studio Gray（FVの背景（スクショから採色））

## フォント
- 見出し・本文・ナビ: Instrument Sans（代替: Instrument Sans）
- 小見出しラベル・座標表記: IBM Plex Mono（代替: IBM Plex Mono）

## よくある質問
### Radian EXRのサイトで使われているフォントは？
抽出データでは見出しと本文に Instrument Sans、ラベルに IBM Plex Mono が使われています。どちらも Google Fonts で無料で利用できます。

### Radian EXRのような、スクロールで製品が動くLPはどう作る？
製品を回転させた連番画像を canvas に描き、GSAP ScrollTrigger の進捗に応じて表示するフレームを切り替える方法が一般的です。Lenis で慣性スクロールを加えると動きが滑らかになります。

### Radian EXRのデザインはどんなサイトの参考になる？
電動モビリティ、アウトドア用品、ハードウェアなど、1つの製品の構造と使用シーンを見せて予約や購入につなげたい製品ローンチLPの参考になります。

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