Landing PageOverseas / USPicked 2026.09.26

Selkirk OMNI Paddle

LPのWebデザイン参考 — ピックルボール用品

出典: selkirk.com

Editor's note — 編集部の視点

パドルが空を飛びながら、性能を説明してくる。

ピックルボール用品ブランドSelkirkの新作パドルOMNIの製品LPは、青空に浮かぶパドルに機能を1つずつ語らせ、最後は旧モデルとの比較表で選ぶ理由を言い切る。

BrunoStructure & IA

ヒーローで「OMNI [definition: “of all things”]」って辞書みたいな注釈を先に置いてるのがうまいんだよね。製品名の意味を最初に渡しておくから、後に続く“全部できる”って話がすっと入ってくる。

1見出しは極太のワイド書体と白抜きのアウトラインを行ごとに交互に。スポーツ用品らしい勢いが一行目から出る
2POWER・CONTROL・SPINなど機能ごとにパドルを1本ずつ配置。スペック表を、スクロールの見せ場に分解した
3旧モデルとの比較は左右にパドル、中央に項目の表。迷っている人の問いに、図で答える

Color

Selkirk OMNI Paddleの配色

Typography

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

見出し

Aa あア

使用: Owners XWide（owners-xwide）
代替: Unbounded

本文・UI

Aa あア

使用: Space Grotesk
代替: Space Grotesk

一部のボタン

Aa あア

使用: Conthrax
代替: Orbitron

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

特大見出しKatapick 型40px · — · 700
見出しKatapick 型36px · 1 · 700
小見出しKatapick 型14px · 1.2 · 700
本文The quick brown fox — 参考を型にする15px · 1.5 · 600
ボタンKatapick 型13.3px · — · 700

Structure

ページ構成（上から順）

01
アナウンスバー・ヘッダー
赤い帯に送料無料と保証の告知、黒いヘッダーにロゴ・カテゴリナビ・検索・カート。
02
ヒーロー
コートのライン模様を敷いた紺地に「OMNI [definition: “of all things”]」の注釈と「ALL-COURT PERFORMANCE, REDEFINED」の3段見出し、中央に大きなパドル、右下に「EXPLORE」の誘導。
03
VERSATILITY TO WIN
「POWER ✦ CONTROL」のテキスト帯を境に、導入文とパドルを置いて機能紹介へつなぐ。
04
機能紹介
青空の背景に、POWER / CONTROL / SPIN、REACTCORE™、ADJUSTABLE MOI TUNING SYSTEM、INFINIGRIT® SURFACE、LASTING DURABILITY を、角度を付けたパドル画像と白い極太見出しで1つずつ見せる。
05
WHAT'S BEHIND THE OMNI VERSATILITY?
紺のパネルに白抜き＋塗りの見出しと、オールコート性能の考え方を説明する短い文章。
06
比較
「HOW THE OMNI COMPARES TO PROJECT BOOMSTIK®」の見出しの下、左右に2本のパドル、中央に項目ごとの比較表を置く。
07
購入エリア
商品画像のギャラリーと、形状・コア・限定カラーの選択、価格、カートボタン、保証アイコン、質問を入力できるチャット欄。
08
INSIDE THE OMNI・フッター
紺の曲線で切り替わる内部構造のパートとコートの演出セクションを経て、フッターへ。

Interaction

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

パドル画像の配置や角度はスクロールに合わせて動くと思われる。GSAP ScrollTrigger で transform（位置・回転）を scrub で補間すると再現可能
技術スタックに Rive があり、構造図やアイコンなどのベクターアニメーションに使われていると思われる
形状・コア・カラーを選べるカート追加パネルが、スクロール中も画面右側に固定表示される
「POWER ✦ CONTROL」のテキスト帯は横に流れるマーキーと思われる。@keyframes で translateX をループさせる

スクロールのコマ撮り150–30000ms

Selkirk OMNI Paddleをスクロールしたときのフレーム1 — 01

Selkirk OMNI Paddleをスクロールしたときのフレーム2 — 02

Selkirk OMNI Paddleをスクロールしたときのフレーム3 — 03

Selkirk OMNI Paddleをスクロールしたときのフレーム4 — 04

Selkirk OMNI Paddleをスクロールしたときのフレーム5 — 05

Selkirk OMNI Paddleをスクロールしたときのフレーム6 — 06

検出された技術:GSAPShopifyAdobe FontsRive

Reproduce

再現するときのポイント

01見出しはワイドな極太書体の塗りと、-webkit-text-stroke のアウトラインを行ごとに切り替えて組む
02機能1つにつき1画面を割き、透過のパドル画像を斜めに配置して、見出し＋2〜3行の説明に絞る
03背景は紺（#000924）→空色→紺と大きく切り替え、章の区切りを色で見せる
04購入パネルを固定し、どのセクションからでもカートに入れられるようにする

再現MDに含まれるもの

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

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

selkirk-omni-paddle.katapick.md

1---
2title: "Selkirk OMNI Paddle 再現用デザイン仕様書"
3source: https://www.selkirk.com/pages/omni-pickleball-paddle
4katapick: https://katapick.com/sites/selkirk-omni-paddle
5category: LP
6region: 海外 (US)
7tags: [大胆なタイポ, ブルー基調, スクロール演出, 固定CTA, マーキー, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Selkirk OMNI Paddle — 再現用デザイン仕様書
17 
18> パドルが空を飛びながら、性能を説明してくる。ピックルボール用品ブランドSelkirkの新作パドルOMNIの製品LPは、青空に浮かぶパドルに機能を1つずつ語らせ、最後は旧モデルとの比較表で選ぶ理由を言い切る。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22