Shopper Appでストアのフォントをカスタマイズする方法 – SHOPLINE ヘルプセンター

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セクションで定義されたプライマリーまたはセカンダリーフォントのどちらを適用するか選択し、その表示方法を細かく調整できます。調整可能な項目にはフォントスタイル、フォントサイズ、大文字設定、行間などがあります。

注：Fontsモジュールで利用可能なすべてのフォントはGoogle Fontsから提供されており、デバイス間での一貫したレンダリングと互換性を保証します。

プライマリーフォントとセカンダリーフォントの設定

Fontsセクションでは、ストアのアプリ全体で使用される基本のタイポグラフィを、プライマリーフォントとセカンダリーフォントを設定して定義します。これらのフォントはShopper App内の他のフォント設定の基盤となります。

各フォントは2つの部分で構成されています：

優先フォント: 最初に適用されるフォント
代替フォント: 優先フォントが特定の文字をサポートしていない場合に自動的に使用されるバックアップフォント

プライマリーフォントとセカンダリーフォントの設定

プライマリーまたはセカンダリーフォントを設定するには:

フォントセクションで、プライマリーフォントまたはセカンダリーフォントを見つけます。
優先フォントの下で、再選択をクリックし、Google Fontsからフォントを選択します。
代替フォントの下で、再選択をクリックし、サポートされていない文字が表示された場合でもテキストが読みやすいように代替フォントを選択します。
（任意）デフォルトにリセットをクリックして、デフォルトのフォント設定に戻します。
変更は自動的に保存されます。右上隅で、Snaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

これらのフォントの使用方法

ここで定義されたプライマリーおよびセカンダリーフォントは、それ自体でスタイルを適用するわけではありません。代わりに、タイトル、商品タイトル、販売価格、および本文などの他のフォントカテゴリで参照され、どのフォントを使用するか選択し、フォントサイズ、太さ、大文字・小文字、行間などの詳細を調整できます。

ストアページ全体のタイトルフォントの設定

タイトルセクションでは、ページタイトルやセクションタイトルなど、ストアのアプリ全体で表示される見出しのタイポグラフィをカスタマイズできます。異なる見出しレベルごとにフォントスタイルを個別に設定できます。

利用可能な見出しレベル

Shopper Appは、さまざまなページで以下の見出しレベルをサポートしています:

見出し1: ホーム ページおよびカスタムページのパーツタイトル
見出し2: 商品詳細ページおよびカートページのパーツタイトル
見出し3: 商品詳細ページのセクションタイトルおよびレビュータイトル
見出し4: 商品詳細ページの属性タイトル

各見出しレベルは独立してカスタマイズ可能です。

タイトルフォントの設定

タイトルフォントを設定するには:

アプリデザインエディターのフォントセクションで、タイトルをクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントのどちらを使用するかを選択します。
カスタマイズしたい見出しレベル（見出し1～見出し4）を見つけます。
必要に応じて以下の設定を調整します：
- スタイル：フォントの太さを選択します（例：レギュラー400）。
- 大文字表示：このオプションを有効にすると、テキストが大文字で表示されます。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。
- デフォルト行間：デフォルトの行間を使用する場合は有効にし、カスタマイズする場合は無効にします。
必要に応じて他の見出しレベルについても上記の手順を繰り返します。
右側のプレビューパネルで変更の効果をプレビューします。
変更は自動的に保存されます。右上の角にあるSnaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

商品タイトルフォントの設定

商品タイトルセクションでは、商品リストやカート/お気に入り登録ページに表示される商品タイトルの表示方法を設定できます。

商品タイトルフォントを設定するには：

アプリデザインエディターのフォントパネルで、商品タイトルをクリックします。
フォントの下で、プライマリーフォントまたはセカンダリーフォントのどちらを適用するか選択します。
商品タイトル（商品一覧ページ）の下で、以下の設定を調整します：
- スタイル：フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。
- デフォルト行の高さ：デフォルトの行の高さを使用するには有効にし、カスタマイズするには無効にします。
カート/お気に入り登録商品タイトルの下で、以下の設定を構成します：
- スタイル：フォントの太さを選択します。デフォルトはレギュラー（400）です。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。デフォルトは12 pxです。
- デフォルト行の高さ：デフォルトの行の高さを使用するには有効にし、カスタムの行の高さを設定するには無効にします。デフォルトで有効です。
注：カート/お気に入り登録商品タイトルの設定は、カートとお気に入りの両方のページに適用されます。
右側のプレビューパネルでフォント変更の効果をプレビューします。
変更内容は自動的に保存されます。右上隅でSnaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

販売価格フォントの設定

販売価格セクションでは、アプリ内での商品販売価格の表示方法を設定できます。これらの設定は、商品一覧ページの販売価格、比較価格、およびメンバー価格に適用されるほか、カート／お気に入り販売価格、カート／お気に入り比較価格、およびカート推定合計にも適用されます。

販売価格のフォントを設定するには：

アプリデザインエディターのフォントパネルで、販売価格をクリックします。
フォントの下で、プライマリーフォントまたはセカンダリーフォントのどちらを適用するか選択します。
販売価格（商品一覧ページ）の下で、以下の設定を調整します：
- スタイル：フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。
取り消し線付き販売価格（商品一覧ページ）の下で、以下を調整します：
- スタイル：フォントの太さを選択します。
- フォントサイズ：取り消し線付き販売価格のフォントサイズを設定します。
カート／お気に入り登録販売価格の下で、以下の設定を構成できます：
- スタイル：フォントの太さを選択します。デフォルトはセミボールド（600）です。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。デフォルトは14 pxです。
カート／お気に入り登録比較対象価格の下で、以下の設定を構成できます：
- スタイル：フォントの太さを選択します。デフォルトはレギュラー（400）です。
- フォントサイズ：スライダーをドラッグするか値を入力してフォントサイズを設定します。デフォルトは10 pxです。

＜strong＞カート推定合計＜/strong＞の下で、次の設定を構成できます：

＜strong＞スタイル＜/strong＞：フォントの太さを選択します。デフォルトは＜strong＞セミボールド（600）＜/strong＞です。
＜strong＞フォントサイズ＜/strong＞：スライダーをドラッグするか値を入力してフォントサイズを設定します。デフォルトは＜strong＞16 px＜/strong＞です。

注：カート/お気に入り販売価格、カート/お気に入り比較販売価格、およびカート推定合計の設定は、カートとお気に入り登録の両方のページに適用されます。

右側のプレビューパネルで価格フォントの変更効果をプレビューします。
変更内容は自動的に保存されます。右上隅でSnaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

本文フォントの設定

本文セクションでは、商品名、説明、告知、補足情報など、ストアのアプリ全体の一般的なテキストコンテンツのタイポグラフィをカスタマイズできます。

利用可能な本文テキストタイプ

Shopper Appは3つの本文テキストサイズをサポートしています：

本文 – 大: 商品名およびカテゴリタイトル
本文 – 通常: 告知、要約、プロモーション、レビューを含む説明文
本文 – 小: Meta情報、時間、ステータス、および関連メモ

各本文テキストタイプは独立して設定できます。

本文テキストスタイルの設定

本文フォントを設定するには：

Appデザインエディターのフォントパネルで、本文をクリックします。
フォントの下で、プライマリフォントまたはセカンダリフォントのどちらを適用するか選択します。
各本文テキストタイプ（本文 – 大、本文 – 通常、または本文 – 小）について、以下の設定を調整します：
- スタイル: フォントの太さを選択します（例：レギュラー400）。
- フォントサイズ: スライダーをドラッグするか値を入力してフォントサイズを設定します。
- デフォルト行間: 有効にするとデフォルトの行間を使用し、無効にするとカスタマイズできます。
必要に応じて他の本文テキストタイプについても上記の手順を繰り返します。
右側のプレビューパネルで変更の効果をプレビューします。
変更は自動的に保存されます。右上のSnaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

注意事項と最善の方法

テキストのスタイル設定前にフォントを定義する：まずフォントセクションでプライマリとセカンダリフォントを設定し、その後タイトル、商品タイトル、販売価格、本文のスタイルを調整して一貫したタイポグラフィを確保します。
プライマリとセカンダリフォントを意図的に使う：プライマリフォントはメインコンテンツに、セカンダリフォントは補助テキストに適用して、明確な視覚的階層を作り出します。
公開前に変更をプレビューする：プレビューパネルで常に視覚効果を確認し、テキストが読みやすく、異なるページ間で一貫していることを確認してください。
適切なフォントサイズと行間を選ぶ：特に本文テキストでは、あまりに小さいフォントサイズや狭い行間を避け、モバイルデバイスでの読みやすさを維持してください。
多言語コンテンツのために代替フォントを有効にする：優先フォントでサポートされていない文字（中国語、日本語、アラビア語など）が正しく表示されるように、代替フォントを有効にしておいてください。
変更を公開するのを忘れないでください：変更は公開をクリックするまで顧客には表示されません。

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。