> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.
# デザインとテーマのカスタマイズ
> チェックアウト、ストアフロント、カスタマーポータルの外観を1か所でカスタマイズします。事前構築されたテーマを選択し、タイポグラフィやカラーを設定し、セクションごとのオーバーライドを適用しながらライブプレビューで確認できます。
デザインページは、チェックアウト、ストアフロント、カスタマーポータルのすべての顧客向け画面のブランディングを統合管理するハブです。変更は3つすべてに即時適用され、保存前にリアルタイムでプレビューできます。
## 主要なハイライト
1. **統合デザインハブ** - チェックアウト、ストアフロント、カスタマーポータルの外観を1ページで設定
2. **事前構築テーマ** - キュレーションされたテーマからスタートしてカスタマイズ
3. **ライト＆ダークモード** - 各モード用に別個のカラーパレットを定義
4. **ライブプレビュー** - 保存前にチェックアウト、カスタマーポータル、ストアフロントで変更を確認
5. **セクションごとのオーバーライド** - 他を変更せずに個別セクション（チェックアウト、ストアフロント、カスタマーポータル）を微調整
6. **プログラムによる制御** - API または Checkout SDK を使ってチェックアウト時にテーマをオーバーライド
## はじめに
マーチャントダッシュボードで**設定 → デザイン**に移動します。デザインページには4つのタブがあります:
| タブ | 目的 |
| ------------- | ------------------------------ |
| **一般** | ビジネス名、ロゴ、テーマ選択、およびグローバルな高度な設定 |
| **チェックアウト** | チェックアウトページ専用にテーマ設定をオーバーライド |
| **ストアフロント** | テーマ設定をオーバーライドし、ストアフロントレイアウトを構成 |
| **カスタマーポータル** | カスタマーポータル専用にテーマ設定をオーバーライド |
## 一般設定
**一般**タブでは、ベースとなるブランドアイデンティティとグローバルテーマを管理します。
### 基本構成
| 設定 | 説明 |
| ---------- | --------------------------------- |
| **ビジネス名** | チェックアウト、ストアフロント、カスタマーポータルに表示される名称 |
| **ビジネスロゴ** | すべての顧客向けページで表示されるブランドロゴ |
| **テーマ** | 出発点として事前構築テーマを選択 |
### 高度な設定
**高度な設定**を展開すると、詳細なコントロールにアクセスできます：
#### タイポグラフィ
| 設定 | オプション | 説明 |
| ------------- | --------------------------------------- | --------------------- |
| **プライマリフォント** | 任意の Google Font | 見出しと本文のメインフォント |
| **セカンダリフォント** | 任意の Google Font | ラベルや補助テキスト用のアクセントフォント |
| **フォントサイズ** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | グローバルベースのフォントサイズ |
| **フォントウェイト** | `normal`, `medium`, `bold`, `extraBold` | デフォルトのフォントウェイト |
#### カラー構成
**ライトモード**と**ダークモード**で別々のカラーパレットを定義します。各モードは以下のプロパティをサポートします：
| プロパティ | 説明 |
| ------------------ | --------------- |
| **背景（プライマリ）** | メイン背景色 |
| **背景（セカンダリ）** | セカンダリ背景（タブ、カード） |
| **テキスト（プライマリ）** | メインテキスト色 |
| **テキスト（セカンダリ）** | ミュートされたテキスト色 |
| **ボタン（プライマリ）** | プライマリボタンの背景 |
| **ボタン（プライマリテキスト）** | プライマリボタンのテキスト色 |
| **ボタン（セカンダリ）** | セカンダリボタンの背景 |
| **ボタン（セカンダリテキスト）** | セカンダリボタンのテキスト色 |
| **ボーダー（プライマリ）** | メインボーダー色 |
| **ボーダー（セカンダリ）** | アクセントボーダー色 |
#### ボーダー
| 設定 | 説明 |
| ---------- | ------------------------------------------------------- |
| **ボーダー半径** | 入力欄、ボタン、タブ、カードの角丸度を制御（例：`0`でシャープな角、`8px`で丸み、`16px`でピル型） |
## 事前構築テーマ
Dodo Paymentsでは4つのキュレーションテーマを提供しています。一般タブの**テーマ**ドロップダウンから1つ選択すると、チェックアウト、ストアフロント、カスタマーポータル全体に統一されたデザインが即座に適用されます。
### Dodo Pulses
デフォルトの Dodo Payments テーマ。ライムグリーンのアクセントでエネルギッシュかつフレッシュな雰囲気。余裕のある間隔を持つクリーンなサンセリフタイポグラフィ。
### Terminal
等幅タイポグラフィとロイヤルブルーのアクセントを持つ開発者向けテーマ。シャープな角とテクニカルな美学で、開発ツールやAPIファースト製品と相性が良い。
### Bumblebee
温かみのあるアンバーとゴールドのアクセントに丸みを帯びたモダンなスタイル。太く高コントラストで、プレミアムな印象を与えたいコンシューマー向け製品に最適。
### Bubblegum
遊び心のあるピンクとマゼンタのアクセントに完全な丸み。クリエイティブツール、デザイン製品、ライフスタイルブランドにマッチするモダンで親しみやすいルック。
事前構築されたテーマを選択した後、**高度な設定**で個別プロパティをさらにカスタマイズできます。未指定のプロパティはテーマのデフォルトにフォールバックします。
## セクションごとのオーバーライド
各セクションタブ（チェックアウト、ストアフロント、カスタマーポータル）には**テーマをオーバーライド**のトグルがあります。有効にすると、そのセクションの外観をグローバルテーマとは独立してカスタマイズできます。
### チェックアウトタブ
チェックアウト体験専用にタイポグラフィ、カラー、ボーダー設定をオーバーライドします。ライブプレビューには以下が表示されます：
* 商品情報と価格
* エクスプレスチェックアウトオプション（Apple Pay、Google Pay）
* 支払い方法の選択とカードフォーム
* 割引コード入力と価格内訳
### ストアフロントタブ
ストアフロント固有の設定を構成します：
| 設定 | 説明 |
| --------------- | --------------------------------------------------- |
| **ストアURL** | ストアフロントのアドレス（例：`store.dodopayments.com/your-store`） |
| **ストア名** | ストアフロントに表示する名称を表示/非表示に切り替え |
| **ストアロゴ** | ヘッダーに表示するロゴを表示/アップロード |
| **ストアバナー** | バナー画像を表示/アップロード |
| **商品説明** | カード上の説明文を表示/非表示に切り替え |
| **テーマをオーバーライド** | ストアフロントのタイポグラフィ、カラー、ボーダーのみをカスタマイズするために有効化 |
### カスタマーポータルタブ
カスタマーポータルのテーマをオーバーライドします。ポータルには以下が含まれます：
* サブスクリプション管理
* 請求履歴
* 支払い方法
* ウォレットとクレジット
## 関連リソース
通貨、言語、税金、割引などを含むチェックアウト機能。
チェックアウトをページ上のモーダルオーバーレイとして埋め込む。
チェックアウトをページレイアウトに直接埋め込む。
ブランド化されたストアフロントを設定および管理。
サブスクリプションと請求の顧客セルフサービスポータル。
別ブランドのブランディングをそれぞれ設定して1つのアカウントで複数ブランドを運用。