商品ヘッダーセクション

Plain Jane および Plain Jane Interactive 向け

このビデオで学べること

  • ブランド化とナビゲーションのために製品ヘッダーセクションを設定する方法

  • 製品のテキスト要素に対する高度なタイポグラフィと色のカスタマイズオプション

  • 価格表示の書式設定とセール価格のスタイリングの設定方法

  • 製品ページのテキスト階層と可読性に関するベストプラクティス

🎯 製品ヘッダーセクションとは何ですか？

この 製品ヘッダーセクション は、製品ページ専用に設計された高度なタイポグラフィと色の制御システムです。従来のページヘッダーとは異なり、このセクションはタイトル、説明、価格、セール表示などの主要な製品情報要素の視覚的スタイリングに焦点を当てています。

主な機能：

  • 製品タイトルと説明のための高度なタイポグラフィ制御

  • 通貨オプションを含むカスタマイズ可能な価格表示の書式設定

  • 強調色を用いたセール価格のスタイリング

  • すべての製品要素にわたる一貫したテキスト色の管理

  • モバイル対応のタイポグラフィスケーリング

  • 製品ページレイアウトとの統合

利用可能：

  • ✅ Plain Jane v3.1+

  • ✅ Plain Jane Interactive v2+

💡 注記：このセクションはレイアウト構造ではなく製品テキスト要素のスタイリングを制御します。Product Sectionレイアウトと連携して機能します。

🔧 製品ヘッダーセクションの設定方法

  1. に移動します オンラインストア > テーマ > カスタマイズ

  2. に移動します 商品 > デフォルト商品

  3. を探してください 製品ヘッダー または テキスト色 セクション

  4. タイポグラフィと色の設定を構成する

  5. 変更をさまざまな製品でプレビューして一貫性を確認する

⚠️ 重要：このセクションはすべての製品ページレイアウト（ショーケース、サムネイル等）における製品テキスト要素のスタイリングに影響します。

✏️ タイポグラフィと色のコントロール

製品タイトルのスタイリング

商品タイトルの色

  • 製品名のプライマリカラーを設定する

  • ページ背景に対して強いコントラストを提供するべきです

  • 通常はブランドのプライマリカラーかニュートラルな暗色を使用します

  • デフォルト: #000000（黒）

ベストプラクティス：

  • アクセシビリティのために高コントラストの色を使用する

  • 全体のブランドカラースキームとの一貫性を維持する

  • 明背景と暗背景の両方で読みやすさをテストする

  • モバイルでの表示条件を考慮する

製品説明のスタイリング

製品説明の色

  • 製品説明テキストの色を制御する

  • 通常、階層を示すためタイトルよりやや明るめの色を使用します

  • タイトルより目立たない一方で高い可読性を保つべきです

  • デフォルト: #000000（黒）

コンテンツガイドライン：

  • 説明は簡潔でスキャンしやすく保つ

  • 製品間で一貫したトーンと文体を使用する

  • 主要な特徴と利点を含める

  • モバイルでの読みやすさを最適化する

💰 価格表示の設定

プライマリ価格のスタイリング

価格の色

  • 通常価格の色を設定する

  • 整合性のために商品タイトルの色に合わせることが多いです

  • 価格を強調するためにブランドのアクセントカラーを使用することがあります

  • デフォルト: #000000（黒）

価格のフォントサイズ

  • 調整可能範囲: 10-30px

  • デフォルト: 24px

  • 見やすいように十分に目立つべきです

  • 購入判断における価格の重要性を考慮する

通貨フォーマットオプション

通貨表示設定

  • 通貨あり：通貨記号を完全に表示します（例：「$24.99」）

  • 通貨なし：数値のみを表示します（例：「24.99」）

  • デフォルト: 通貨なし

各フォーマットの使用時期：

  • 通貨あり：国際的な店舗、複数通貨、新しい顧客に対する明瞭さのため

  • 通貨なし：クリーンでミニマルな美学、国内向け店舗、スペース制約がある場合

🏷️ セール価格とプロモーションのスタイリング

セールテキストの設定

セールテキストの色

  • 取り消し線が付いた価格の前に表示される「以前の」「元の」テキストの色

  • 通常はニュートラルなグレーか落ち着いた色

  • セール価格より目立たないが可読性は確保するべきです

  • デフォルト: #000000（黒）

典型的なセールテキスト例：

  • 「以前 $XX.XX」

  • 「元の価格 $XX.XX」

  • 「メーカー希望小売価格 $XX.XX」

  • 「比較価格 $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 Contrast Checkerなどのアクセシビリティツールでテストする

  • 色覚異常のユーザーのために十分な明度差を考慮する

📱 モバイル最適化

レスポンシブタイポグラフィ

モバイルに関する配慮：

  • すべてのフォントサイズはモバイルデバイスで自動的にスケールします

  • テキスト階層は画面サイズ間で一貫性を保ちます

  • クリック可能な要素の周囲にタッチ操作に適した間隔が維持されます

  • モバイル閲覧のための閲覧距離が最適化されます

モバイル固有の調整：

  • スペース効率のためにやや小さいフォントサイズ

  • 読みやすさ向上のための行間増加

  • 屋外での閲覧条件に合わせたコントラスト最適化

  • テキスト要素周辺の親指操作を考慮する

モバイルパフォーマンス

読み込みの最適化：

  • CSSの色値はページと同時に即時に読み込まれます

  • テキストスタイリングに追加の画像資産は不要です

  • ページ読み込み速度への影響を最小限に抑えます

  • すべてのモバイルデバイスで効率的にレンダリングされます

🔄 製品レイアウトとの統合

ショーケースレイアウトとの統合

Product Section（ショーケース）を使用する場合：

  • テキスト色は従来のレイアウトに一貫して適用されます

  • タイポグラフィは並列表示に適切にスケールします

  • 価格のスタイリングはサムネイルギャラリーの配置と統合されます

  • 説明の書式は展開されたテキスト領域で機能します

サムネイルレイアウトとの統合

Product Section（サムネイル）を使用する場合：

  • 色はモダンなグリッドベースのレイアウトとシームレスに機能します

  • タイポグラフィはモバイルでのボトムモーダル体験に最適化されます

  • 価格表示は高度なバリアント選択に適応します

  • セール価格はバッジシステムと統合されます

💡 高度なカスタマイズのヒント

ブランドの一貫性

カラーコーディネーション：

  • 製品タイトルの色をブランドのプライマリカラーに合わせる

  • セール価格の色はプロモーションブランディングに合わせて使用する

  • ボタン色やアクセント要素と調整する

  • すべての製品ページで一貫性を維持する

タイポグラフィの調整：

  • フォントサイズを全体のテーマのタイポグラフィスケールに合わせる

  • 製品テキストがセクションヘッダーとどのように関連するかを考慮する

  • ページ全体で読みやすい階層を維持する

  • さまざまな製品タイトルの長さでテストする

コンバージョン最適化

価格心理学：

  • 緊急感を生むためにセール価格に赤やオレンジを使用する

  • 通常価格を目立たせ信頼感を与える

  • クリーンな美学のために通貨記号を非表示にすることを検討する

  • コンバージョンへの影響を測るために異なる色の組み合わせをテストする

ユーザーエクスペリエンス：

  • 主要情報の素早いスキャン性を確保する

  • 外出先の顧客のためにモバイルでの読みやすさを優先する

  • 価格情報を即座に明確で信頼できるものにする

  • タイトルから価格、アクションへの視覚的な流れを作る

🔧 トラブルシューティング

色が適用されない場合

一般的な問題：

  • 色の変更後にブラウザのキャッシュをクリアする必要がある場合があります

  • 一部のサードパーティアプリがテーマの色を上書きすることがあります

  • カスタムCSSがテーマ設定と競合している可能性があります

  • 変更が保存され公開されていることを確認してください

解決策：

  • ブラウザのキャッシュをクリアしてページを更新する

  • テーマコード内のアプリの競合を確認する

  • 色を上書きしているカスタムCSSを確認する

  • シークレット/プライベートブラウジングモードでテストする

テキストの可読性の問題

アクセシビリティに関する問題：

  • テキストと背景とのコントラストが不十分

  • 読みやすさのためにフォントサイズが小さすぎる

  • 色の組み合わせが色覚異常のユーザーにとって判別しにくい

  • モバイルでの表示に関する課題

解決策：

  • アクセシビリティ検査ツールでコントラストを確認する

  • 実際のモバイルデバイスでフォントサイズをテストする

  • 色覚異常に配慮した色の組み合わせを検討する

  • アクセシビリティを必要とするユーザーからフィードバックを得る

モバイル表示の問題

一般的な問題点：

  • モバイルデバイスでテキストが小さすぎるように見える

  • 明るい環境で色のコントラストが不十分

  • 小さい画面でタイポグラフィの階層が不明瞭

  • テキスト要素の近くにタッチ対象が密集している

解決策：

  • ブラウザのリサイズだけでなく実際のモバイルデバイスでテストする

  • モバイルでの可読性が悪い場合はフォントサイズを大きくする

  • さまざまな照明条件で色のコントラストを確認する

  • クリック可能な要素の周囲に十分な間隔を確保する

📊 パフォーマンスへの影響

読み込み効率

最小限のリソース使用：

  • テキストスタイリングは効率的なCSSプロパティを使用します

  • 追加の画像やフォントの読み込みは不要です

  • 色の変更は即時に適用されます

  • 基本的な機能にはJavaScriptは不要です

SEOの利点：

  • クリーンなHTML構造は検索エンジンの可読性を維持します

  • 適切な見出し階層はSEOをサポートします

  • アクセシブルな色コントラストはユーザー体験の指標を改善します

  • 高速な読み込みはページスピードスコアに貢献します

🎯 ベストプラクティスの要約

セットアップチェックリスト

✅ 製品タイトルの色を高コントラストで設定する
✅ 価格の色を明確に見えるように設定する
✅ 緊急感を生むセール価格の色を選ぶ
✅ 通貨フォーマットの好み（記号あり/なし）をテストする
✅ 説明の色が良好な可読性を提供するか確認する
✅ すべての色がアクセシビリティ基準を満たしているか確認する
✅ モバイルデバイスでタイポグラフィの階層をテストする
✅ 選択した製品レイアウトとの統合を確認する
✅ 異なる製品タイプ間での一貫性をレビューする
✅ 実際の製品コンテンツと画像でテストする

継続的なメンテナンス

  • ブランドの一貫性のために定期的に色の選択を見直す

  • 既存のタイポグラフィ設定で新製品をテストする

  • 可読性に関する顧客のフィードバックを監視する

  • ブランドガイドラインを更新する際に色を変更する

  • 変更があった場合はアクセシビリティ準拠を確保する

製品ヘッダーセクションは、プロフェッショナルで読みやすく、コンバージョンに最適化された製品ページを作成するための基盤を提供します。適切な設定により、顧客は主要な製品情報を迅速に見つけ理解でき、ブランドの美学を維持できます。

ヘルプが必要ですか？

  • 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ： [email protected]

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へ商品カルーセルセクション次へ商品ロゴセクション

最終更新