# 製品ロゴセクション > **学べること** > > * ブランド表示とカート表示のための製品ロゴセクションの設定方法 > * ロゴ、カート、タイムゾーン機能の高度なカスタマイズオプション > * カートカウンターのスタイリングとプロモーション時間表示の設定方法 > * 商品ページヘッダーの最適化とユーザー体験のベストプラクティス *** ## 🎯 製品ロゴセクションとは？ この **製品ロゴセクション** は、ブランディング、カート機能、およびオプションのタイムゾーン表示を組み合わせた、製品ページ専用に設計された専門的なヘッダーコンポーネントです。従来のページヘッダーとは異なり、このセクションは製品のショッピング体験に最適化されており、統合されたカートカウンターやリアルタイム情報表示を含みます。 **主な機能：** * 製品専用のロゴ表示（カスタムサイズ対応） * カスタマイズ可能なスタイルのライブカートカウンター * タイムゾーン対応のオプション日付/時刻表示 * 製品ページ向けに最適化された簡潔なヘッダーデザイン * モバイル対応のレイアウトと操作性 * グローバルなカート機能との統合 利用可能： * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **注意**：このセクションは特に製品ページに表示され、製品レイアウトと連携して最適なショッピング体験を提供します。 *** ## 🔧 製品ロゴセクションの追加方法 1. 移動先： **オンラインストア > テーマ > カスタマイズ** 2. に移動 **商品 > デフォルト商品** 3. クリック： **「セクションを追加」** 4. を選択します **ロゴ、カート、＆時計** （製品ロゴセクション） 5. ロゴ、カート、およびタイムゾーン設定を構成する 6. セクションを製品ページレイアウトの上部に配置する > ⚠️ **重要**：このセクションは特に製品ページ向けに設計されており、製品購入フローと統合されたカート機能を含みます。 *** ## 🏢 ロゴ設定 ### **製品ページのロゴ表示** **製品ロゴを表示** * 製品ページでのロゴ表示を有効/無効にする * テーマ設定 → ロゴ → 「製品ページのロゴを表示」で制御 * 他のページロゴ（ホームページ、コレクションなど）とは独立している **ロゴ画像のソース** * テーマ設定 → ロゴ → 「製品ページのロゴ」にアップロードしたロゴを使用 * 製品専用ロゴが設定されていない場合はデフォルトロゴにフォールバック * PNG、JPG、SVG形式をサポート **ロゴサイズ設定** * **製品画面のロゴサイズ**：テーマ設定で調整可能 * 通常の幅の範囲は50〜200px * アスペクト比を自動的に維持 * モバイルデバイス向けにレスポンシブに拡大縮小 ### **ロゴのリンクとナビゲーション** **ホームページへのリンク** * ロゴは自動的にストアのホームページ（routes.root\_url）へリンクされる * 製品ページからの一貫したサイトナビゲーションを提供 * 同じウィンドウで開き、シームレスなユーザー体験を実現 **アクセシビリティ機能** * スクリーンリーダー用の適切なalt属性を含む * キーボードナビゲーション対応 * モバイル用のタッチフレンドリーなサイズ設計 *** ## 🛒 カートカウンター統合 ### **ライブカート表示** **リアルタイム更新** * 現在のカート内アイテム数を表示 * 商品が追加/削除されると自動的に更新される * すべてのページ操作で同期される * 更新にページリフレッシュは不要 **カートテキストのカスタマイズ** * **カートのテキストカラー**："カート"ラベルテキストの色 * デフォルト：#000000（ブラック） * セクションの背景と十分なコントラストがあるべき ### **カート数量表示** **カートカウントバッジ** * **カート数量の色**：数量数字のテキスト色 * デフォルト：#FFFFFF（ホワイト） * **カート数量の背景色**：バッジの背景色 * デフォルト：#000000（ブラック） **バッジのスタイリング** * 視認性を高める円形バッジデザイン * カートテキストに相対的に自動配置される * モバイル表示に適切にスケーリングされる * アクセシビリティ準拠のため高コントラスト ### **カートの操作** **カートへのアクセス** * カート領域をクリックするとカートドロワーが開くことがある（有効な場合） * テーマのカート機能と統合 * 製品ページを離れずにカートの概要を素早く確認できる * コンバージョンとユーザー体験に最適化 *** ## ⏰ 日付＆時刻表示 ### **タイムゾーン情報** **日付/時刻表示の切替** * **日付/時刻を表示**：タイムゾーン表示を有効/無効にする * デフォルト：有効 * 緊急性を演出したり店舗コンテキストを提供するのに有用 **日付表示** * **日付カラー**：日付テキストのカスタマイズ可能な色 * デフォルト：#000000（ブラック） * ストアのタイムゾーンで現在の日付を表示 * 每日自動的に更新される **時刻表示** * **時刻カラー**：時刻テキストのカスタマイズ可能な色 * デフォルト：#000000（ブラック） * ストアのタイムゾーンで現在の時刻を表示 * リアルタイムで更新される ### **配置オプション** **日付/時刻の位置設定** * **配置**：左、中央、または右の配置 * デフォルト：右寄せ * ロゴやカートの配置と調整可能 * モバイルデバイスでのレスポンシブ動作 *** ## 🎨 レイアウト＆デザイン設定 ### **セクションの位置決め** **ヘッダー構造** * ロゴは左側に配置 * カートカウンターは右側に配置 * 日付/時刻表示はカート領域と統合 * クリーンでミニマルなデザイン美学 **Zインデックスとレイヤー** * 適切なレイヤー表示のためにセクションはz-index: 2で配置 * 他のページ要素より上に表示されることを保証 * 対話要素のアクセシビリティを維持 ### **間隔とパディング** **セクションのパディング** * 上部パディング：25px（デスクトップ） * 下部パディング：10px（デスクトップ） * モバイルデバイス向けのレスポンシブ調整 **ロゴのマージン** * 上部マージン：5px * 下部マージン：10px * 適切な視覚的な間隔を提供 **カートテキストの位置調整** * ロゴとそろえるための上部マージン：10px * 日付/時刻要素との調整された間隔 *** ## 📱 モバイル最適化 ### **レスポンシブデザイン** **モバイルレイアウト** * ロゴは小さい画面でも適切にスケールする * カートカウンターはタッチフレンドリーなサイズを維持 * 日付/時刻表示は利用可能なスペースに合わせて適応 * すべてのデバイスで機能性を維持 **タッチ操作** * カート領域はタッチ操作に最適化 * ロゴリンクはモバイルでのタップに適したサイズ * ユーザーのフラストレーションを引き起こすような小さなタッチ対象はない **パフォーマンスに関する考慮事項** * リアルタイム更新のための最小限のJavaScript * スムーズなアニメーションのための効率的なCSS * ページ速度に影響を与えない高速な読み込み *** ## 🔄 製品体験との統合 ### **ショッピングフローの向上** **コンバージョン最適化** * カートカウンターは即時のフィードバックを提供 * ロゴはショッピング中もブランドの存在感を維持 * 日付/時刻は限定オファーの緊急性を生むことができる * 簡潔なヘッダーは注意をそらす要素を削減 **ユーザー体験の利点** * ショッピングプロセス全体で一貫したブランディングを維持 * 製品ページを離れずに簡単にカートへアクセス可能 * ホームページへの明確なナビゲーション * プロフェッショナルで信頼できる外観 ### **製品セクションとの調整** **レイアウトの調和** * すべての製品セクションレイアウト（ショーケース、サムネイル）で動作 * 一貫したヘッダー体験を維持 * 製品画像ギャラリーを妨げない * 製品ページのタイポグラフィと調整 *** ## 💡 高度なカスタマイズのヒント ### **ブランドの一貫性** **ロゴの調整** * ホームページと異なる場合は製品専用ロゴを使用する * 製品ページ全体で一貫したサイズを維持する * すべての画面サイズでロゴの品質を確保する * さまざまな製品画像に対するロゴの視認性を考慮する **色の戦略** * カートの色を製品ページ要素と調整する * アクセシビリティのために十分なコントラストを確保する * 日付/時刻の色を全体のテーマに合わせる * 異なる製品背景で色の組み合わせをテストする ### **マーケティングとの統合** **プロモーションのタイミング** * フラッシュセールに日付/時刻表示を使用する * カウントダウンメッセージで緊急性を演出する * 期間限定オファーと連携させる * 季節キャンペーンを強化する **カートの心理学** * 注目を集めるために対照的なカートバッジ色を使用する * 簡単にアクセスできるようにカートを目立つ位置に配置する * 製品閲覧中もカートの視認性を維持する * 明確な指標でカート完了を促す *** ## 🔧 トラブルシューティング ### **ロゴが表示されない** **よくある問題** * テーマ設定 → ロゴ → 製品ページのロゴがアップロードされていない * 「製品ページのロゴを表示」設定が無効 * 画像ファイル形式がサポートされていない * ロゴサイズ設定が小さすぎて見えない **解決策** * まずテーマ設定にロゴをアップロードすること * 「製品ページのロゴを表示」トグルを有効にする * PNG、JPG、またはSVG形式を使用する * ロゴサイズ設定を大きくする * 変更後にブラウザのキャッシュをクリアする ### **カートカウンターが更新されない** **考えられる問題点** * 他のアプリとのJavaScript競合 * テーマキャッシュがリアルタイム更新を妨げている * カートドロワーがセクションと競合している * ブラウザの互換性の問題 **解決策** * テーマコード内のアプリ競合を確認する * テーマキャッシュとブラウザキャッシュをクリアする * 競合するカートアプリを一時的に無効にする * 異なるブラウザでテストする * テーマ設定でカート機能が有効になっていることを確認する ### **日付/時刻表示の問題** **よくある問題** * Shopify設定でタイムゾーンが正しく設定されていない * 日付/時刻の色が薄すぎて見えない * テキストの位置が他の要素と競合している * モバイル表示のフォーマットに問題がある **解決策** * Shopify管理画面 → 設定 → 一般でタイムゾーンを確認する * 視認性を高めるために色のコントラストを上げる * より良い配置のために整列設定を調整する * フォーマットのために実際のモバイルデバイスでテストする * 多言語を使用している場合は日付/時刻の翻訳設定を確認する *** ## 📊 パフォーマンスへの影響 ### **読み込み効率** **最小限のリソース使用** * 最小限のJavaScriptを使用した軽量セクション * 高速レンダリングのためのCSSベースのスタイリング * ロゴ以外の追加画像読み込みはなし * 効率的なカートカウンターの更新 **SEOに関する考慮事項** * ロゴは検索エンジン向けに適切なブランディングを提供 * クリーンなHTML構造がSEOをサポート * ページ速度スコアに悪影響を与えない * 適切な見出し階層を維持 *** ## 🎯 ベストプラクティスまとめ ### **セットアップチェックリスト** ``` ✅ テーマ設定に製品専用ロゴをアップロードする ✅ 「製品ページのロゴを表示」設定を有効にする ✅ カートテキストとバッジの色を設定する ✅ モバイル表示に適したロゴサイズを設定する ✅ ストアのニーズに応じて日付/時刻表示を選択する ✅ 実際の商品でカートカウンターの機能をテストする ✅ アクセシビリティのため色のコントラストを確認する ✅ モバイル表示とタッチ操作を確認する ✅ 製品ページデザインと色を調整する ✅ ロゴのホームページへのリンク機能をテストする ``` ### **継続的な最適化** **定期的なレビュー** * 高トラフィック時のカートカウンターのパフォーマンスを監視する * 新しい製品画像でロゴの視認性をテストする * ブランドガイドラインを更新する際に色を更新する * タイムゾーン変更時の日付/時刻の正確性を確認する **コンバージョン最適化** * 視認性向上のためにカートバッジ色をA/Bテストする * セクション有効時のカート離脱率を監視する * ホームページへのロゴクリック率を追跡する * 日付/時刻情報に対するユーザーの操作を分析する *** ## 🚀 高度なユースケース ### **季節ごとのカスタマイズ** **ホリデーブランディング** * 特別なイベントに合わせて季節ロゴに切り替える * カートの色をホリデーテーマに合わせて調整する * セールへのカウントダウンに日付/時刻表示を使用する * 統一された季節のショッピング体験を作成する ### **限定版キャンペーン** **緊急性の演出** * フラッシュセールのために現在時刻を強調する * 限定数量を強調するためにカートのスタイリングを使用する * 製品の希少性メッセージと連携する * プレミアム製品のプレゼンテーションを強化する ### **国際的なストア** **複数地域の設定** * ターゲット市場に適したタイムゾーンを設定する * ロゴ配置に対する文化的嗜好を考慮する * 異なる地域でカート機能をテストする * 日付形式が現地の慣習に合っていることを確認する *** 製品ロゴセクションは、製品ページに不可欠なブランディングと機能を提供し、信頼を築きコンバージョンを促進しながら、顧客の購買ジャーニー全体でブランドの存在感を維持する統一されたショッピング体験を作ります。 ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/product-logo-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.