カラーカスタマイズガイド

VTO Widgetのテーマをブランドカラーに合わせてカスタマイズしましょう。

概要

VtoWidget は init() メソッドで colors パラメータを受け取り、 Widgetのテーマカラーをリアルタイムでカスタマイズできます。

全7つの色要素に対応しており、Hex形式（#RRGGBB）で指定します。 指定されない項目はデフォルト値（紫系テーマ）が適用されます。

初期化例

<script src="https://asp.kitemir.jp/API/widget/vto-widget.js"></script>
<script>
VtoWidget.init({
    tokenEndpoint: '/your_server/api/proxy_token.php',
    apiBase: 'https://asp.kitemir.jp/API_SERVICES',
    colors: {
        primary: '#3D2B1F',      // メインカラー（ボタン・テキスト）
        accent: '#D4AC0D',       // アクセントカラー（強調・ホバー）
        primaryDark: '#2A1F15',  // ダークカラー（背景）
        bg: '#FAF8F5',           // 背景色（ライト）
        text: '#3D2B1F',         // テキストカラー
        cartBg: '#F3F4F6',       // カート背景色
        cartHover: '#E5E7EB'     // カートホバー色
    }
});
</script>

カラーオプション一覧

primary

Widgetのメインカラーです。ボタン、テキスト、フォーカス状態等に使用されます。

デフォルト: #6C3483 (紫)

推奨: ブランドの基調色

accent

強調色です。CTAボタン、アクティブ状態、ホバー効果に使用されます。 コントラストの高い色を推奨します。

デフォルト: #D4AC0D (ゴールド)

推奨: ブランドのアクセントカラー

primaryDark

ダーク背景色です。ヘッダーやフッター等の背景に使用されます。 primaryより濃い色で統一感を保ちます。

デフォルト: #4A2A5C (濃い紫)

推奨: primaryの濃度を上げた色

bg

ライト背景色です。Widgetのメインコンテンツ背景に使用されます。 テキスト視認性を確保するためライト色を推奨します。

デフォルト: #F9F3F0

推奨: テキスト色に合わせたライト色

text

テキスト色です。説明文やラベルに使用されます。 背景色とのコントラストが重要です。

デフォルト: #333333

推奨: ダーク色（背景に対して視認性が高い色）

cartBg

カート/サマリーセクションの背景色です。 メインコンテンツと区別するために異なる色を推奨します。

デフォルト: #F3F4F6

推奨: bg より若干濃いライト色

cartHover

カート内アイテムのホバー状態の背景色です。 ユーザーのインタラクションをまることを強調します。

デフォルト: #E5E7EB

推奨: cartBg より濃い色

プリセットテーマ

ラグジュアリーテーマ

primary: #1a1a1a
accent: #C0A080
bg: #F5F5F0

高級感を演出する落ち着いたカラー。ハイエンドブランド向け。

colors: {
  primary: '#1a1a1a',
  accent: '#C0A080',
  primaryDark: '#0d0d0d',
  bg: '#F5F5F0',
  text: '#1a1a1a',
  cartBg: '#EFEFEA',
  cartHover: '#E8E8E0'
}

モダンテック

primary: #0052CC
accent: #FF5630
bg: #F7F8FA

明るく活動的な雰囲気。テック企業向け。

colors: {
  primary: '#0052CC',
  accent: '#FF5630',
  primaryDark: '#003399',
  bg: '#F7F8FA',
  text: '#172B4D',
  cartBg: '#DEEBFF',
  cartHover: '#CCE0FF'
}

ウォーム・ナチュラル

primary: #8B6F47
accent: #E8A500
bg: #FFFBF0

温かく優しい雰囲気。ファッション/ビューティ向け。

colors: {
  primary: '#8B6F47',
  accent: '#E8A500',
  primaryDark: '#5C4620',
  bg: '#FFFBF0',
  text: '#5C4620',
  cartBg: '#FFF5E6',
  cartHover: '#FFEAA7'
}

CSSカスタムプロパティ

Widgetは内部で以下のCSS変数を使用しています。 必要に応じて、:root セレクタでオーバーライドすることも可能です。 

:root {
    --vto-color-primary: #6C3483;
    --vto-color-primary-dark: #4A2A5C;
    --vto-color-accent: #D4AC0D;
    --vto-color-bg: #F9F3F0;
    --vto-color-text: #333333;
    --vto-color-cart-bg: #F3F4F6;
    --vto-color-cart-hover: #E5E7EB;
    --vto-color-border: #E5E7EB;
    --vto-color-error: #DC2626;
    --vto-color-success: #10B981;
}

💡 ヒント: Widget内のスタイルをより細かくカスタマイズしたい場合、 Widget初期化後に getWidget() メソッドで要素を取得し、直接CSSを適用することも可能です。

ベストプラクティス

カスタマイズにお困りですか？

色選びやテーマ設計についてご相談があれば、 デザインチームがサポートいたします。Proプランご利用のお客様には カスタムテーマの提案も可能です。

デザイン相談する