# 商品ヘッダーセクション > **学べること** > > * ブランディングとナビゲーションのために製品ヘッダーセクションを設定する方法 > * 製品のテキスト要素に対する高度なタイポグラフィと色のカスタマイズオプション > * 価格表示の書式設定とセール価格のスタイリングを設定する方法 > * 製品ページのテキスト階層と可読性に関するベストプラクティス *** ## 🎯 製品ヘッダーセクションとは？ この **商品ヘッダーセクション** は、製品ページ向けに特化して設計された高度なタイポグラフィおよび色制御システムです。従来のページヘッダーとは異なり、このセクションはタイトル、説明、価格、セール指標などの主要な製品情報要素の視覚的スタイリングに焦点を当てます。 **主な機能：** * 製品タイトルと説明のための高度なタイポグラフィ制御 * 通貨オプションを含むカスタマイズ可能な価格表示フォーマット * ハイライトカラーを用いたセール価格のスタイリング * すべての製品要素で一貫したテキストカラー管理 * モバイル対応のタイポグラフィスケーリング * 製品ページレイアウトとの統合 利用可能： * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **注意**：このセクションはレイアウト構造ではなく、製品のテキスト要素のスタイリングを制御します。製品セクションのレイアウトと連携して動作します。 *** ## 🔧 製品ヘッダーセクションの設定方法 1. 移動先： **オンラインストア > テーマ > カスタマイズ** 2. に移動 **商品 > デフォルト商品** 3. を探してください **商品ヘッダー** または **テキストカラー** セクション 4. タイポグラフィとカラー設定を構成する 5. 変更を異なる製品でプレビューして一貫性を確認する > ⚠️ **重要**：このセクションは、すべての製品ページレイアウト（ショーケース、サムネイルなど）にわたる製品テキスト要素のスタイリングに影響します。 *** ## ✏️ タイポグラフィとカラーのコントロール ### **製品タイトルのスタイリング** **商品タイトルの色** * 製品名の主要カラーを設定する * ページ背景に対して強いコントラストを提供するべきです * 通常はブランドの主要色または中立の濃い色を使用します * デフォルト：#000000（ブラック） **ベストプラクティス：** * アクセシビリティのために高コントラストの色を使用する * ブランド全体のカラースキームとの一貫性を維持する * 明るい背景と暗い背景の両方で可読性をテストする * モバイルでの閲覧条件を考慮する ### **製品説明のスタイリング** **製品説明のカラー** * 製品説明テキストの色を制御する * 階層を示すために通常はタイトルより少し明るめの色合いを使用する * タイトルより目立たない一方で高い可読性を保つべきです * デフォルト：#000000（ブラック） **コンテンツガイドライン：** * 説明は簡潔でスキャンしやすく保つ * 製品間で一貫したトーンと声を使用する * 主要な特徴と利点を含める * モバイルでの読みやすさを最適化する *** ## 💰 価格表示の構成 ### **主要価格のスタイリング** **価格カラー** * 通常価格の色を設定する * 一貫性のために商品タイトルの色と合わせることが多い * 価格を強調するためにブランドのアクセントカラーを使用する場合がある * デフォルト：#000000（ブラック） **価格のフォントサイズ** * 調整可能範囲：10〜30px * デフォルト：24px * 簡単に見えるように十分目立つべきです * 購入判断における価格の重要性を考慮する ### **通貨フォーマットのオプション** **通貨表示設定** * **通貨あり**：通貨記号をフルで表示します（例：「$24.99」） * **通貨なし**：数値のみを表示します（例：「24.99」） * デフォルト：通貨なし **各フォーマットを使用する場合：** * **通貨あり**：国際的なストア、複数通貨、新規顧客への明確さのため * **通貨なし**：クリーンでミニマルな美観、国内向けストア、スペース制約の場合 *** ## 🏷️ セール価格とプロモーションのスタイリング ### **セールテキストの構成** **セールテキストカラー** * 取り消し線付き価格の前に付く「Was」や「Originally」などのテキストの色 * 通常は中立的なグレーまたは落ち着いた色 * 読みやすく、セール価格より目立たないようにするべきです * デフォルト：#000000（ブラック） **典型的なセールテキストの例：** * 「Was $XX.XX」 * 「Originally $XX.XX」 * 「MSRP $XX.XX」 * 「Compare at $XX.XX」 ### **セール価格のスタイリング** **セール価格カラー** * 強調されたセールまたは割引価格の色 * 一般的に赤、オレンジ、またはブランドのアクセントカラーを使用する * 可読性を保ちながら視覚的な緊急性を生むべきです * デフォルト：#FF0000（赤） **セール価格のフォントサイズ** * 調整可能範囲：10〜30px * デフォルト：16px * 比較を示すために通常の価格より小さめの場合が多い * 現在の価格と視覚的階層を維持するべきです *** ## 🎨 ビジュアル階層のベストプラクティス ### **色の戦略** **情報優先順：** 1. **商品タイトル** - 最も高いコントラストで最も目立つ 2. **現在価格** - 太字、明確、ブランドカラー 3. **商品説明** - 読みやすいが二次的 4. **セール価格** - 注目を引くアクセントカラー 5. **セールテキスト** - 落ち着いた補助的情報 ### **タイポグラフィの階層** **フォントサイズの推奨：** * **商品タイトル**：最大、通常デスクトップで24〜32px * **現在価格**：目立つ、デスクトップで20〜28px * **説明**：読みやすい、デスクトップで14〜16px * **セール価格**：補助的、デスクトップで14〜18px ### **色のコントラストガイドライン** **アクセシビリティ基準：** * 通常テキストの最低コントラスト比は4.5:1 * 大きなテキスト（太字18px以上または24px以上）の最低コントラスト比は3:1 * WebAIMコントラストチェッカーなどのアクセシビリティツールでテストする * 色覚異常のあるユーザーのために十分な明度差を考慮する *** ## 📱 モバイル最適化 ### **レスポンシブタイポグラフィ** **モバイルに関する考慮事項：** * すべてのフォントサイズはモバイルデバイス向けに自動的にスケールします * テキスト階層は画面サイズに関係なく一貫性を保ちます * クリック可能要素の周囲にタッチに優しいスペーシングが維持されます * モバイル閲覧に最適な読書距離を考慮する **モバイル特有の調整：** * スペース効率のためにやや小さめのフォントサイズ * 読みやすさを向上させるための行間の増加 * 屋外での閲覧条件に最適化された色のコントラスト * テキスト要素周辺の親指操作を考慮する ### **モバイルパフォーマンス** **読み込みの最適化：** * CSSの色値はページと同時に即座に読み込まれます * テキストスタイリングのために追加の画像資産は不要です * ページ読み込み速度への影響は最小限 * すべてのモバイルデバイスで効率的にレンダリングされます *** ## 🔄 製品レイアウトとの統合 ### **ショーケースレイアウトの統合** 製品セクション（ショーケース）を使用する場合： * テキストカラーは従来のレイアウトに一貫して適用されます * タイポグラフィは並列表示に適したスケーリングを行います * 価格のスタイリングはサムネイルギャラリーの配置と統合されます * 説明のフォーマットは拡張テキスト領域と連携します ### **サムネイルレイアウトの統合** 製品セクション（サムネイル）を使用する場合： * カラーはモダンなグリッドベースのレイアウトとシームレスに機能します * タイポグラフィはモバイルでの下部モーダル体験に最適化されます * 価格表示は高度なバリアント選択に適応します * セール価格はバッジシステムと統合されます *** ## 💡 高度なカスタマイズのヒント ### **ブランドの一貫性** **カラーコーディネーション：** * 製品タイトルの色をブランドの主要色に合わせる * プロモーションブランディングに合うセール価格の色を使用する * ボタンの色やアクセント要素と調整する * すべての製品ページで一貫性を維持する **タイポグラフィの調整：** * フォントサイズをテーマ全体のタイポグラフィスケールに合わせる * 製品テキストがセクションヘッダーとどう関係するかを考慮する * ページ全体で読みやすい階層を維持する * さまざまな製品タイトルの長さでテストする ### **コンバージョン最適化** **価格の心理学：** * セール価格には緊急性を生むために赤またはオレンジを使用する * 通常価格を目立たせて信頼感を与える * よりクリーンな美観のために通貨記号を非表示にすることを検討する * コンバージョンへの影響を確認するために異なる色の組み合わせをテストする **ユーザーエクスペリエンス：** * 主要情報が素早くスキャンできるようにする * 外出中の購入者のためにモバイルでの可読性を優先する * 価格情報を即座に明確で信頼できるものにする * タイトルから価格、アクションへの視覚的な流れを作る *** ## 🔧 トラブルシューティング ### **色が適用されない場合** **よくある問題：** * 色を変更した後にブラウザのキャッシュをクリアする必要がある場合がある * 一部のサードパーティ製アプリがテーマカラーを上書きすることがある * カスタムCSSがテーマ設定と競合している可能性がある * 変更が保存され公開されていることを確認する **解決策：** * ブラウザのキャッシュをクリアしてページを更新する * テーマコード内のアプリ競合を確認する * カラー上書きがないかカスタムCSSを確認する * シークレット/プライベートブラウジングモードでテストする ### **テキストの可読性の問題** **アクセシビリティの問題：** * テキストと背景のコントラストが不十分 * 快適に読むにはフォントサイズが小さすぎる * 色の組み合わせが色覚異常のユーザーにとって困難 * モバイルでの表示に関する課題 **解決策：** * アクセシビリティを検証するためにコントラストチェックツールを使用する * 実際のモバイルデバイスでフォントサイズをテストする * 色覚異常に配慮したカラーパレットを検討する * アクセシビリティの必要があるユーザーからフィードバックを得る ### **モバイル表示の問題** **一般的な問題：** * モバイルデバイスでテキストが小さすぎるように表示される * 明るい照明下で色のコントラストが不十分 * 小さい画面でタイポグラフィの階層が不明瞭 * タッチターゲットがテキスト要素に近すぎる **解決策：** * ブラウザのサイズ変更だけでなく実際のモバイルデバイスでテストする * モバイルでの可読性が低い場合はフォントサイズを大きくする * さまざまな照明条件で色のコントラストを確認する * クリック可能要素の周囲に十分なスペースを確保する *** ## 📊 パフォーマンスへの影響 ### **読み込み効率** **最小限のリソース使用：** * テキストスタイリングは効率的なCSSプロパティを使用する * 追加の画像やフォントの読み込みは不要 * 色の変更が即座に適用される * 基本機能にはJavaScriptを必要としない **SEOの利点：** * クリーンなHTML構造により検索エンジンの可読性が維持される * 適切な見出し階層がSEOをサポートする * アクセシブルな色のコントラストがユーザー体験のシグナルを向上させる * 高速な読み込みはページ速度スコアに寄与する *** ## 🎯 ベストプラクティスまとめ ### **セットアップチェックリスト** ``` ✅ コントラストの高い製品タイトルカラーを設定する ✅ 明確に見えるように価格カラーを構成する ✅ 緊急性を生むセール価格カラーを選択する ✅ 通貨形式の好み（記号あり/なし）をテストする ✅ 説明の色が良好な可読性を提供することを検証する ✅ すべての色がアクセシビリティ基準を満たしているか確認する ✅ モバイルデバイスでタイポグラフィの階層をテストする ✅ 選択した製品レイアウトとの統合を確認する ✅ 異なる製品タイプ間の一貫性をレビューする ✅ 実際の製品コンテンツと画像でテストする ``` ### **継続的なメンテナンス** * ブランドの一貫性を保つために定期的に色の選択を見直す * 既存のタイポグラフィ設定で新製品をテストする * 可読性に関する顧客のフィードバックを監視する * ブランドガイドラインを更新する際に色を更新する * 変更に対してアクセシビリティ準拠を確保する *** 製品ヘッダーセクションは、プロフェッショナルで読みやすく、コンバージョン最適化された製品ページを作成するための基盤を提供します。適切に構成することで、顧客が主要な製品情報を素早く見つけ理解できる一方で、ブランドの美学を維持できます。 ### **ヘルプが必要ですか？** * 💬 **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-header-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.