Service / SaaSOverseas / USPicked 2026.09.26

Moto

サービス / SaaSのWebデザイン参考 — フィンテック・会員制クレジットカード

出典: moto-card.com

Editor's note — 編集部の視点

黒い岩の前に、金属カードを1枚だけ飾ってる。

会員制クレジットカードMotoのサービスサイトは、黒い岩肌の前に3Dの金属カードを展示品のように置き、無彩色だけで、持つことの特別さを静かに語っている。

LeoMotion & Direction

下から地球がぐわっとせり上がって、まわりに「決済完了」の通知がポンポン浮かぶ！SF映画のオープニングかと思った、鳥肌！カード1枚の話が、いきなり地球規模になる展開が熱い！

1色は黒から白までの無彩色だけ。金属の反射と岩肌の質感に、ブランドの格の高さを代弁させる
2¥・CHF・£・₩の金額を薄いグレーで散らす。海外手数料ゼロという説明を、数字の群れで先に見せる
3コンシェルジュの項では各都市の時刻を一列に。24時間対応を、言葉より時計で納得させる

Color

Motoの配色

Typography

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

見出し（大文字）

Aa あア

使用: Neue Montreal
代替: Inter Tight

本文・ナビ・ボタン

Aa あア

使用: Neue Montreal
代替: Inter

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

特大見出しKatapick 型64px · 1 · 500
見出しKatapick 型64px · 1 · 500
小見出しKatapick 型18px · 1.3 · 500
本文The quick brown fox — 参考を型にする16px · 1.3 · 500
ボタンKatapick 型20px · 1.3 · 500

Structure

ページ構成（上から順）

01
ヒーロー
黒い岩肌の背景に、中央上部の2行の大文字見出し、中央に台座へ立てた金属カードの3D、下部に明るいグレーの丸型CTA。ヘッダーは左ロゴ・中央2項目のナビ・右に濃色の丸型CTA。
02
インフラストラクチャー
黒背景の中央に見出し・短い説明・CTAを置き、下から地球の画像がせり上がる。地球の周囲に「決済完了」「予約済み」などの通知チップを浮かべる。
03
カード体験のストーリー
高さ2250pxのセクション。キャプチャではほぼ黒く、縦線・通知チップ・薄いサムネイル列のみ写っており、スクロール連動で描画される演出と思われる。
04
海外決済
淡いグレーのグラデーション背景に、複数通貨の金額を左右の列に薄く散らし、中央に見出しと3行の特徴を置く。
05
コンシェルジュ・特典
暗いトーンの写真を全面に敷き、左上に4行の大文字見出し、左下にサービス項目、下端に各都市の時刻を並べたバー。写真を切り替えながら特典項目を重ねていく。
06
利用シーン一覧
白背景に2行の見出し、01〜05の番号付きリスト（ホテル・ダイニング・トラベル・体験・ウェルネス）を細い罫線で区切り、右列に説明文を置く表形式。
07
ネットワーク・FAQ
フルページキャプチャが9000pxで切れているため、抽出データの見出しのみ確認。「ACCESS OUR NETWORK」と、3カテゴリ（ABOUT / COSTS & BENEFITS / Usage）に分かれたFAQが続く。
08
フッター
見出しのみ確認。締めのステートメント、早期アクセス申込み、メンバーシップ案内で構成される。

Interaction

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

抽出データに Three.js / WebGL があり、FVの金属カードはリアルタイム3Dでライティングされていると思われる。反射の強いマテリアル（MeshPhysicalMaterial の metalness / roughness）と環境マップで質感を出す
GSAP と Lenis の組み合わせから、長いセクションは ScrollTrigger の pin で固定し、通知チップや写真をスクロール量に応じて出し入れしていると思われる（静止キャプチャでは描画されない部分がある）
通貨の金額リストは列ごとに異なる速度で動くパララックスと思われる。不透明度を上下端で落とすマスク（mask-image の linear-gradient）で奥行きを出している
都市ごとの時刻表示は秒まで表示されており、Intl.DateTimeFormat の timeZone 指定で毎秒更新していると思われる
ヘッダーは固定で、右上の「Apply for Access」が常に見える

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

検出された技術:GSAPThree.jsLenisWebflowWebGL

Reproduce

再現するときのポイント

01色は黒・白・グレーの無彩色のみに絞り、カードの金属反射を唯一の光源のように見せる
02見出しはすべて大文字のグロテスク体で字間を詰め、2〜4行に改行して積む
03CTAは明るいグレー（ダーク面）と濃いグラファイト（ヘッダー）の丸型で役割を分ける
04機能説明は長文にせず、通貨の羅列・時刻表示・通知チップなど“画面上の小道具”で伝える

再現MDに含まれるもの

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

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

moto.katapick.md

1---
2title: "Moto 再現用デザイン仕様書"
3source: https://www.moto-card.com/
4katapick: https://katapick.com/sites/moto
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ダーク, モノクロ, 3D/WebGL, スクロール演出, 大胆なタイポ, 写真主体]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 48
13generator: Katapick
14---
15 
16# Moto — 再現用デザイン仕様書
17 
18> 黒い岩の前に、金属カードを1枚だけ飾ってる。会員制クレジットカードMotoのサービスサイトは、黒い岩肌の前に3Dの金属カードを展示品のように置き、無彩色だけで、持つことの特別さを静かに語っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22