# Moto｜サービス / SaaSのWebデザイン参考

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

- URL: https://www.moto-card.com/
- 解説ページ: https://katapick.com/sites/moto
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: フィンテック・会員制クレジットカード
- テイスト: ダーク、モノクロ、3D/WebGL、スクロール演出、大胆なタイポ、写真主体
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 48 時間）

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

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

## 配色
- #080808 Onyx（背景（ダークセクション）/ テキスト）
- #ffffff White（背景（ライトセクション）/ 見出し）
- #edefef Mist Gray（セクション背景（通貨パート））
- #e1e5e5 Silver（CTAボタン / 見出しテキスト）
- #12191c Graphite（ヘッダーのCTAボタン）
- #666f76 Slate（補助テキスト）

## フォント
- 見出し（大文字）: Neue Montreal（代替: Inter Tight）
- 本文・ナビ・ボタン: Neue Montreal（代替: Inter）

## よくある質問
### Motoのサイトで使われているフォントは？
見出しから本文まで Neue Montreal 1書体で統一しています。無料で近い雰囲気にするなら Inter Tight（見出し）と Inter（本文）の組み合わせが使えます。

### Motoのような3Dのカード表現はどう作る？
Three.js でカードの板状モデルに金属マテリアルと環境マップを当て、台座と一緒に配置します。GSAP ScrollTrigger でスクロール量に合わせてカメラやカードの角度を動かすと、同様の演出に近づきます。

### Motoのデザインはどんな業種の参考になる？
プレミアムカード、プライベートバンク、会員制サービスなど、機能よりも“格”や静けさを伝えたい金融・ラグジュアリー系のサイトに向いています。

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