> ## Documentation Index
> Fetch the complete documentation index at: https://docs.waffo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# チェックアウトカスタマイズ

> カスタムカラー、ロゴ、ウェブサイトスタイルインポートでブランドチェックアウト体験を構築

## カスタマイズ概要

チェックアウトページをあなたのブランドに合わせましょう。手動でカラーをカスタマイズするか、ウェブサイトのURLからスタイルを直接インポートできます。

## チェックアウト設定へのアクセス

1. ダッシュボード → 設定に移動
2. 「チェックアウト」タブを選択
3. リアルタイムでカスタマイズとプレビュー
4. 保存してライトテーマとダークテーマの両方に適用

***

## ウェブサイトURLからインポート

最速のブランドカスタマイズ方法 — ウェブサイトのURLを貼り付けるだけで、Waffo Pancakeがブランドカラー、角丸、ファビコンを自動抽出します。

<Steps>
  <Step title="ウェブサイトURLを入力">
    チェックアウト設定パネルの「ウェブサイトからインポート」セクションに、ウェブサイトのURL（例：`https://yoursite.com`）を貼り付けます。
  </Step>

  <Step title="抽出をクリック">
    **抽出**ボタンをクリック。システムがウェブサイトのCSSを分析してブランドカラーを抽出します。
  </Step>

  <Step title="確認して調整">
    抽出されたカラーが現在のテーマモードに適用されます。ライブプレビューを確認し、必要に応じて微調整します。
  </Step>
</Steps>

### 仕組み

スタイル抽出は最高の精度を得るために3層戦略を使用します：

| 層     | 方法        | 抽出内容                                                   |
| ----- | --------- | ------------------------------------------------------ |
| **1** | CSS変数     | `--primary`、`--brand`、`--accent` などのCSSカスタムプロパティ       |
| **2** | CSSルール解析  | ボタン背景、見出しカラー、bodyスタイルなどの実際のCSSルール                      |
| **3** | AIフォールバック | 層1-2で十分な結果が得られない場合、AIモデルがHTML/CSSコンテキストを分析してブランドカラーを特定 |

### 抽出されるプロパティ

| プロパティ    | ソース                     |
| -------- | ----------------------- |
| プライマリカラー | ボタンやCTAのブランド/アクセントカラー   |
| 背景カラー    | ページ背景色                  |
| カードカラー   | 背景カラーから派生（やや明るい/暗い）     |
| テキストカラー  | 本文テキストカラー               |
| 角丸       | サイトで最も一般的なborder-radius |
| ロゴ       | サイトのファビコン（base64に変換）    |

<Tip>
  ストア設定でウェブサイトURLがすでに設定されている場合、自動的に入力されます。
</Tip>

<Note>
  AI支援による抽出は1ストアあたり1日10回に制限されています。CSSベースの抽出（層1-2）には制限はありません。
</Note>

***

## ロゴ

チェックアウトページに表示するブランドロゴをアップロード。

| 設定        | 仕様            |
| --------- | ------------- |
| フォーマット    | PNG, JPG, SVG |
| 推奨サイズ     | 200 × 50 px   |
| 最大ファイルサイズ | 2 MB          |
| 背景        | 透明推奨          |

<Tip>
  横長のロゴが最も効果的です。ウェブサイトURLからインポートする際、サイトのファビコンが自動的にロゴとして使用されます。
</Tip>

***

## テーマモード

各テーマは独立したカラー値を維持します。モードを切り替えてそれぞれを個別にカスタマイズできます。

<CardGroup cols={2}>
  <Card title="ライトテーマ" icon="sun">
    白い背景、暗いテキスト。ほとんどのブランドに適合。プロフェッショナルな外観。
  </Card>

  <Card title="ダークテーマ" icon="moon">
    暗い背景、明るいテキスト。モダンな美学。目の疲れを軽減。
  </Card>
</CardGroup>

***

## カラー設定

現在のテーマモードのチェックアウト配色をカスタマイズ：

| 設定           | フィールド名                    | デフォルト（ライト） | デフォルト（ダーク） |
| ------------ | ------------------------- | ---------- | ---------- |
| **プライマリカラー** | `checkoutColorPrimary`    | #111111    | #FEFDFD    |
| **背景カラー**    | `checkoutColorBackground` | #F4F4F4    | #111315    |
| **カードカラー**   | `checkoutColorCard`       | #FFFFFF    | #181A1B    |
| **テキストカラー**  | `checkoutColorText`       | #111111    | #FFFFFF    |

カラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力します。

<Note>
  アクセシビリティのために、テキストと背景色の間に十分なコントラストがあることを確認してください。WCAGでは最低4.5:1のコントラスト比を推奨しています。
</Note>

### 角丸

`checkoutBorderRadius` 設定でUI要素の丸みを制御します。

| 値      | スタイル      |
| ------ | --------- |
| `0px`  | 直角        |
| `4px`  | わずかな丸み    |
| `8px`  | 標準（デフォルト） |
| `12px` | 大きな丸み     |
| `16px` | 特大の丸み     |

***

## ライブプレビュー

プレビューパネルは変更に応じてリアルタイムでチェックアウトページを表示します。

* **デスクトップビュー** — フル幅のチェックアウトレイアウト
* **モバイルビュー** — スマートフォンサイズのチェックアウトレイアウト
* **プロダクト選択** — ストアの異なるプロダクトでプレビュー

変更は保存せずにプレビューに即座に反映されます。

***

## APIリファレンス

チェックアウト設定はストアの `checkoutSettings` オブジェクトとして保存されます：

```json theme={"system"}
{
  "checkoutSettings": {
    "light": {
      "checkoutLogo": "https://...",
      "checkoutColorPrimary": "#111111",
      "checkoutColorBackground": "#F4F4F4",
      "checkoutColorCard": "#FFFFFF",
      "checkoutColorText": "#111111",
      "checkoutBorderRadius": "8px"
    },
    "dark": {
      "checkoutLogo": null,
      "checkoutColorPrimary": "#FEFDFD",
      "checkoutColorBackground": "#111315",
      "checkoutColorCard": "#181A1B",
      "checkoutColorText": "#FFFFFF",
      "checkoutBorderRadius": "8px"
    }
  }
}
```

[API リファレンス](/ja/api-reference/introduction) で `checkoutSettings` の更新方法を確認できます。

***

## ストア情報

| オプション     | 説明                  |
| --------- | ------------------- |
| ストア名      | チェックアウトヘッダーに表示      |
| サポートメール   | 顧客問い合わせ用            |
| 利用規約リンク   | 利用規約へのリンク（必須）       |
| プライバシーリンク | プライバシーポリシーへのリンク（必須） |

***

## ベストプラクティス

<AccordionGroup>
  <Accordion title="ブランドの一貫性">
    * **ウェブサイトからインポート**機能でサイトのカラーを自動的にマッチ
    * メインサイトと同じロゴを使用
    * 一貫した配色で信頼を構築
  </Accordion>

  <Accordion title="両方のテーマをカスタマイズ">
    * 多くの顧客がダークモードを使用 — ライトとダークの両テーマをカスタマイズ
    * ロゴがライトとダークの両方の背景で正常に表示されることを確認
    * 両方のモードでカラーコントラストをテスト
  </Accordion>

  <Accordion title="モバイル最適化">
    * モバイルプレビューでレイアウトを確認
    * 小さい画面でロゴが正しくスケールすることを確認
    * タッチターゲットが十分な大きさか確認
  </Accordion>

  <Accordion title="アクセシビリティ">
    * 十分なカラーコントラストを維持（最低4.5:1）
    * 読みやすいフォントサイズ
    * 異なる色覚プロファイルでテスト
  </Accordion>
</AccordionGroup>

***

## デフォルトにリセット

現在のテーマモードをデフォルトにリセット：

1. チェックアウト設定で「リセット」をクリック
2. 現在のモード（ライトまたはダーク）がデフォルトのWaffo Pancakeカラーに戻ります

<Warning>
  リセットは取り消せません。そのテーマモードの現在のカスタマイズが失われます。
</Warning>

***

<h2 id="checkout-language">
  チェックアウトの言語
</h2>

チェックアウトの言語はここで設定する必要はありません —— 購入者のブラウザー言語に自動で追従し、購入者自身で切り替えることもできます。対応する 19 言語と優先順位は[多言語サポート](/ja/features/checkout#checkout-language)をご覧ください。