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