カートドロワー
Plain Jane および Plain Jane Interactive 向け
学べること
スライドアウト式カートドロワーの有効化とスタイル設定方法
背景やFOMOタイマーを含む高度なカスタマイズオプション
より高いコンバージョンのためにカート体験を最適化する方法
📋 概要
この カートドロワー は、顧客が商品をカートに追加したときに表示されるスライドアウトパネルです。現在のページを離れずにカート内容を確認できることで購入フローが改善され、コンバージョン率の向上とユーザー体験の強化につながります。
💡 注意：これは従来のカートページに代わるものです。カートドロワーまたはカートページのいずれか一方を使用できますが、同時に両方を使用することはできません。
🔧 有効化方法
移動先： テーマ設定 > カートドロワー
切り替え： カートドロワーを有効にする を
オンにする以下のカスタマイズオプションを設定してください
🎨 基本のスタイリングオプション
色と外観
背景色
メインドロワーパネルの背景をカスタマイズ
デフォルト：
#ffffff（白）任意の16進カラー値をサポートします
テキスト色
ドロワー内の一般的なテキスト色を制御します
デフォルト：
#000000（黒）商品名、数量、および一般的なコンテンツに影響します
ボタンのスタイリング
ボタンカラー：主要アクションボタンの背景（カートに追加、チェックアウト）
ボタン文字色：ボタン上のテキスト色
デフォルト：黒背景に白テキスト
ドロワーの寸法
ドロワー幅
幅は300pxから320pxまで調整可能
デフォルト：
320pxモバイルとデスクトップの閲覧に最適化されています
⏰ FOMOタイマーフィーチャー
組み込みのFOMO（取り残される不安）タイマーで緊急性を作り、購入の意思決定を促進します。
タイマー設定
FOMOタイマーを表示
緊急性タイマーを有効/無効にするトグル
デフォルト：有効
タイマースタイリング
FOMOタイマー背景色：アラートバナーの背景（デフォルト：
#ffeb3b− 黄色）FOMOタイマーテキスト色：タイマーテキストの色（デフォルト：
#333333− 濃いグレー）
タイマーの内容
FOMOタイマーテキスト：カスタマイズ可能な緊急メッセージ
デフォルト：「オファーは以下で終了します：」
例：「期間限定オファー！」「カートはまもなく期限切れ！」「急いで！残りわずか！」
タイマーの期間
FOMOタイマーの持続時間：カウントダウン時間を設定（1〜72時間）
デフォルト：24時間
タイマーは新しいカートセッションごとにリセットされます
💰 価格と通貨のオプション
通貨表示
通貨付きで価格を表示
価格に通貨記号/コードを表示するトグル
デフォルト：無効（通貨表示なしで価格を表示）
国際的なストアや複数通貨の設定に便利です
🖼️ 高度な背景カスタマイズ
カートアイテムの背景
カートドロワーをカスタム背景画像で変身させます：
背景画像
カートアイテム領域のカスタム背景画像をアップロード
標準的な画像形式（JPG、PNG、WebP）に対応
推奨サイズ：500x600px以上
背景サイズのオプション
カバー：領域全体を覆うように画像を拡大（切り抜かれる場合があります）
コンテイン：領域内に収まるように画像を縮尺（画像全体が表示されます）
自動：画像の自然なサイズを使用
背景の位置
中央：利用可能なスペースで画像を中央に配置
左上：画像を左上隅に配置
右上：画像を右上隅に配置
左下：画像を左下隅に配置
右下：画像を右下隅に配置
🚀 ベストプラクティス
デザインの推奨事項
色の調和
全体のテーマに合う色を使用してください
アクセシビリティのために十分なコントラストを確保する
異なるデバイスでの可読性をテストしてください
FOMOタイマーの使用
効果を維持するために控えめに使用してください
差し迫った印象は与えるが攻撃的でないメッセージを選んでください
オーディエンスに合わせて異なる期間設定をテストしてください
背景画像
テキストの妨げにならない微妙で低コントラストの画像を使用してください
読み込みを速くするために画像ファイルサイズを最適化してください
モバイルでの表示体験を考慮してください
コンバージョン最適化
明確なコールトゥアクション
チェックアウトボタンを目立つようにし、アクセスしやすくしてください
重要なボタンには対照的な色を使用してください
購入までの流れをシンプルで明確に保ってください
モバイル体験
実際のモバイルデバイスでドロワー機能をテストしてください
タッチターゲットのサイズが適切であることを確認してください
小さい画面でもテキストが読みやすいことを確認してください
読み込みパフォーマンス
背景画像をウェブ向けに最適化してください
遅い接続でのドロワーの開く速度をテストしてください
サイト全体のパフォーマンスへの影響を監視してください
🔧 トラブルシューティング
よくある問題
ドロワーが表示されない場合
「カートドロワーを有効にする」がオンになっていることを確認してください
カートページが競合していないか確認してください
ドロワーをトリガーするために商品を追加してテストしてください
FOMOタイマーが動作しない場合
設定でタイマーが有効になっていることを確認してください
ブラウザのlocalStorageサポートを確認してください
タイマーの期間が正しく設定されていることを確認してください
背景画像の問題
画像が正しくアップロードされていることを確認してください
画像のファイルサイズと形式を確認してください
異なる背景サイズの設定をテストしてください
モバイル表示の問題
実際のモバイルデバイスでテストしてください
小さい画面でのドロワー幅を確認してください
タッチ機能が正しく動作していることを確認してください
📱 モバイルに関する考慮点
ドロワーは自動的にモバイル画面サイズに適応します
タッチに優しいコントロールとボタン
指で操作しやすいように最適化された間隔
小さい画面向けに簡略化されたレイアウト
⚡ パフォーマンスのヒント
可能な場合は背景画像を200KB以下に保ってください
より良い圧縮のためにWebP形式を使用してください
さまざまなネットワーク速度で読み込み時間をテストしてください
サイト全体のパフォーマンスへの影響を監視してください
最終更新