Shopper Appでのストアフォントのカスタマイズ
フォントモジュールはShopper App内で、ストアのアプリページ全体のタイポグラフィをカスタマイズできるようにし、ブランドの一貫性を維持し、コンテンツの可読性を向上させるのに役立ちます。
アプリデザインエディタでは、主要フォントと副次フォントを定義し、タイトル、商品名、価格、本文などの主要なコンテンツエリアのフォントスタイルを微調整できます。すべてのサポートされているフォントはGoogle Fontsから取得されており、デバイス間での広範な互換性と信頼性のある表示が保証されています。
この記事では、Shopper App内でフォント設定を見つける場所と、異なるコンテンツタイプのフォントを設定する方法を学びます。また、変更をプレビュー、保存、公開して、ストアのアプリ全体に反映させる方法も理解できます。
フォント設定の概要とアクセス
ストアのアプリに関連するすべてのフォント設定は、アプリデザインエディタのフォントセクションで管理されます。フォント設定にアクセスするには：
- SHOPLINEの管理画面から、チャネル > Shopper App > アプリデザインに移動し、デザインをクリックします。
アプリデザインエディタの左側のパネルで、フォントをクリックします。
このセクションでは、アプリ全体の異なるコンテンツエリアのタイポグラフィを設定できます。利用可能な設定は以下のカテゴリに整理されています：
- フォント：アプリ全体で使用される主要フォントと副次フォントを設定します。
- タイトル：異なるレベルの見出しのフォントスタイルをカスタマイズします。
- 商品タイトル：商品名のタイポグラフィを調整します。
- 価格：商品価格の表示方法を定義します。
- 本文：一般的なテキストコンテンツのフォントスタイルを設定します。
Shopper Appは、アプリの基本タイポグラフィとして主要フォントと副次フォントを使用します。これらのフォントファミリーは、フォントセクションでのみ選択および管理されます。
他のカテゴリ、例えばタイトル、商品タイトル、価格、および本文では、フォントセクションで定義された主要または副次フォントを適用するかどうかを選択し、その表示方法を微調整できます。利用可能な調整には、フォントスタイル、フォントサイズ、大文字設定、行間が含まれます。
| Note：フォントモジュールで利用可能なすべてのフォントはGoogle Fontsによって提供されており、デバイス間での一貫したレンダリングと互換性が保証されています。 |
主要フォントと副次フォントの設定
フォントセクションでは、ストアのアプリ全体で使用される基本タイポグラフィを設定するために、主要フォントと副次フォントを定義します。これらのフォントは、Shopper App内の他のフォント設定の基盤となります。
各フォントには2つの部分があります：
- 優先フォント：最初に適用されるフォント
- フォールバックフォント：優先フォントが特定の文字をサポートしていない場合に自動的に使用されるバックアップフォント
主要フォントと副次フォントの設定
主要フォントまたは副次フォントを設定するには：
- フォントセクションで、主要フォントまたは副次フォントを見つけます。
優先フォントの下で、再選択をクリックし、Google Fontsからフォントを選択します。
フォールバックフォントの下で、再選択をクリックし、サポートされていない文字が表示されたときにテキストが読みやすくなるようにフォールバックフォントを選択します。
- (オプション) デフォルトにリセットをクリックして、デフォルトのフォント設定を復元します。
右側のプレビューパネルでフォント変更の効果をプレビューします。次に、保存をクリックして設定を保持するか、公開をクリックして即座に適用します。
これらのフォントの使用方法
ここで定義された主要フォントと副次フォントは、自動的にスタイルを適用しません。代わりに、タイトル、商品タイトル、価格、および本文などの他のフォントカテゴリで参照され、どのフォントを使用するかを選択し、フォントサイズ、太さ、大文字、小文字、行間などの詳細を調整できます。
ストアページ全体のタイトルフォントの設定
タイトルセクションでは、ストアのアプリ全体で表示される見出しのタイポグラフィをカスタマイズできます。ページタイトルやセクションタイトルなど、異なる見出しレベルのフォントスタイルを個別に設定できます。
利用可能な見出しレベル
Shopper Appは、異なるページで以下の見出しレベルをサポートしています：
- 見出し1：ホーム ページおよびカスタムページのコンポーネントタイトル
- 見出し2：商品詳細ページおよびカートページのコンポーネントタイトル
- 見出し3：商品詳細ページのセクションタイトルおよびレビュータイトル
- 見出し4：商品詳細ページの属性タイトル
各見出しレベルは独立してカスタマイズできます。
タイトルフォントの設定
タイトルフォントを設定するには：
- アプリデザインエディタのフォントセクションで、タイトルをクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントを使用するかを選択します。
- カスタマイズしたい見出しレベルを見つけます（見出し1～見出し4）。
必要に応じて、以下の設定を調整します：
- スタイル： フォントの太さを選択します（例：レギュラー400）。
- 大文字： このオプションを有効にすると、テキストが大文字で表示されます。
- フォントサイズ： スライダーをドラッグするか、値を入力してフォントサイズを設定します。
- デフォルト行間： デフォルトの行間を使用するには有効にし、カスタマイズするには無効にします。
- 必要に応じて、他の見出しレベルについても上記の手順を繰り返します。
- 右側のプレビューパネルで変更の効果をプレビューします。
- 設定を保持するには保存をクリックし、すぐに適用するには公開をクリックします。
商品リストページのための商品タイトルフォントの設定
商品タイトルセクションでは、ストアのアプリで商品名がどのように表示されるかをカスタマイズできます。これらの設定は商品リストページに表示される商品タイトルに適用されます。
商品タイトルフォントを設定するには：
- アプリデザインエディタのフォントパネルで、商品タイトルをクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントを適用するかを選択します。
商品タイトル（商品リストページ）の下で、以下の設定を調整します：
- スタイル： フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ： スライダーをドラッグするか、値を入力してフォントサイズを設定します。
- デフォルト行間： デフォルトの行間を使用するには有効にし、カスタマイズするには無効にします。
- 右側のプレビューパネルでフォント変更の効果をプレビューします。
- 設定を保持するには保存をクリックし、すぐに適用するには公開をクリックします。
商品リストページのための価格フォントの設定
価格セクションでは、ストアのアプリで商品価格がどのように表示されるかをカスタマイズできます。これらの設定は、元の価格、セール価格、メンバー価格を含む商品リストページに表示される価格に適用されます。
価格フォントを設定するには：
- アプリデザインエディタのフォントパネルで、価格をクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントを適用するかを選択します。
リスト価格（商品リストページ）の下で、以下の設定を調整します：
- スタイル： フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ： スライダーをドラッグするか、値を入力してフォントサイズを設定します。
取り消し線価格（商品リストページ）の下で、以下を調整します：
- スタイル： フォントの太さを選択します。
- フォントサイズ： 取り消し線価格のフォントサイズを設定します。
- 右側のプレビューパネルで価格フォント変更の効果をプレビューします。
- 設定を保持するには保存をクリックし、すぐに適用するには公開をクリックします。
本文フォントの設定
本文セクションでは、ストアのアプリ全体で一般的なテキストコンテンツのタイポグラフィをカスタマイズできます。これには、アイテム名、説明、アナウンス、サポート情報が含まれます。
利用可能な本文テキストタイプ
Shopper Appは、3つの本文テキストサイズをサポートしています：
- 本文 – 大： アイテム名とカテゴリタイトル
- 本文 – 通常： アナウンス、要約、プロモーション、レビューを含む説明テキスト
- 本文 – 小： メタ情報、時間、ステータス、関連ノート
各本文テキストタイプは独立して設定できます。
本文テキストスタイルの設定
本文テキストフォントを設定するには：
- アプリデザインエディタのフォントパネルで、ボディをクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントを適用するかを選択します。
各ボディテキストタイプ（ボディ – 大、ボディ – レギュラー、またはボディ – 小）について、以下の設定を調整します：
- スタイル：フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ：スライダーをドラッグするか、値を入力してフォントサイズを設定します。
- デフォルト行間：デフォルトの行間を使用するには有効にし、カスタマイズするには無効にします。
- 必要に応じて、他のボディテキストタイプについても上記の手順を繰り返します。
- 右側のプレビューパネルで変更の効果をプレビューします。
- 設定を保持するには保存をクリックし、すぐに適用するには公開をクリックします。
注意事項とベストプラクティス
- テキストのスタイリングの前にフォントを定義する：最初にフォントセクションでプライマリとセカンダリフォントを設定し、その後、タイトル、商品タイトル、価格、ボディのスタイルを調整して、一貫したタイポグラフィを確保します。
- プライマリフォントとセカンダリフォントを意図的に使用する：主要なコンテンツにはプライマリフォントを、補助的なテキストにはセカンダリフォントを適用して、明確な視覚的階層を作成します。
- 公開前に変更をプレビューする：常にプレビューパネルで視覚的効果を確認し、テキストが異なるページで読みやすく一貫していることを確認します。
- 適切なフォントサイズと行間を選択する：特にボディテキストにおいて、過度に小さなフォントサイズや狭い行間を避け、モバイルデバイスでの読みやすさを維持します。
- 多言語コンテンツのためにフォールバックフォントを有効にする：好ましいフォント（中国語、日本語、アラビア語など）でサポートされていない文字が正しく表示されるように、フォールバックフォントを有効にしておきます。
- 変更を公開することを忘れない：変更は公開をクリックするまで顧客には表示されません。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。