フォント設定

注目のリンク

1. Company XYZのフォント設定に関するドキュメント
2. Company XYZのフォント設定に関するドキュメント
3. テーマエディターに関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

これらの設定では、本文やボタンからキャプション、カードタイトル、見出しレベルまで、テーマ全体で使用されるタイポグラフィを制御します。多くの場所に同時に適用されるため、わずかなフォント変更でも可読性、階層、ブランドの印象に大きく影響することがあります。

組み込みのフォントを使ってすばやく設定することも、より具体的なビジュアルアイデンティティが必要な場合にカスタムフォントを追加することもできます。設定の詳細については、フォント設定 と テーマエディターに関するShopifyドキュメント を参照してください。

基本フォントコントロール

主なコントロールでは、テーマ全体でお客様が繰り返し目にするテキストスタイルを設定できます。

1. Body font は、サイト全体で使用される主な読み取り用フォントを設定します。補足テキスト、小見出し、カードのバッジも含まれます。最も快適さと明瞭さに影響するため、まずここから始めてください。
2. Button font は、テーマ全体のアクションテキストに適用されます。より強い書体にするとボタンの存在感を高められますが、装飾的なフォントは短いラベルを見つけにくくすることがあります。
3. Caption font は、セクション見出しの上にあるテキストのような、小さなラベル風テキストに使用されます。長文の読みやすさを損なわずに、2つ目のタイポグラフィアクセントを導入するのに適しています。
4. Text transforms は、各役割ごとに大文字小文字のスタイルをグローバルに制御できます。これらの設定はトーンの調整に役立ちますが、テキストをより強く、または詰まって見せることもあります。

大文字変換と全角変換は、短いラベルや見出しで最も効果的です。本文や小さなキャプションでは、可読性がすぐに低下することがあります。

見出しフォント

このサブグループでは、カードタイトルを H1 から H6 までの見出しレベルとは別に制御できます。ページ、カード、構造化コンテンツ全体で、より明確な視覚的階層を作るために使用してください。

1. Card heading font は、カードやプレビューなどの繰り返し表示されるコンテンツのタイトルに影響します。小さいサイズや狭いレイアウトでも読みやすいフォントを選んでください。
2. H1 font は、通常もっとも目立つ見出しスタイルで、ページタイトルや主要な見出し領域によく使用されます。ほかのタイポグラフィとぶつからない、個性のある見た目が理想です。
3. H2 to H6 fonts は、小見出しとコンテンツ構造の定義に役立ちます。多くの場合、各レベルを個別に見せるよりも、視覚的な関連性を保つ方がすっきりした結果になります。
4. Heading text transforms は、特に短いカードタイトルやディスプレイ見出しで強調を加えられます。多くの見出しレベルに強い変換を適用すると、ページが視覚的に雑然とした印象になることがあります。

ヒント

シンプルな組み合わせが最も効果的なことがよくあります。読みやすい本文フォントを1つ、対照的な見出しフォントを1つ、そしてテキスト変換は最小限に抑えます。

カスタムフォント

組み込みの選択肢がブランドに合わない場合は、プロバイダーからフォントを追加するか、自己ホストのフォントファイルを使用できます。これにより柔軟性は高まりますが、正確性もより重要になります。

1. Provider-based fonts では、提供されたコードを使用してフォントサービスから書体を読み込めます。
2. Hosted fonts では、独自の .woff または .woff2 ファイルを使用できます。両方の形式を用意すると互換性が向上します。
3. Hosted font naming は重要です。このグループの後半にあるカスタムフォントの割り当ては、定義した正確なファミリー名に依存するためです。

対応しているカスタムフォントの方法と設定の詳細については、フォント設定 を参照してください。

適切にライセンスされたフォントのみを使用し、プロバイダーコードやホストされたファイルの URL を慎重に確認してください。カスタムフォントが正しく読み込まれない場合、テーマは別のフォントにフォールバックし、一貫性のないタイポグラフィになることがあります。

カスタムフォントの割り当て

カスタムフォントのソースを追加した後は、テーマ全体の特定のタイポグラフィ役割に割り当てられます。本文、ボタン、キャプション、カード見出し、および各見出しレベルごとに個別のカスタムコントロールを利用できます。

1. Font family は、フォントソースから提供された正確な値と一致している必要があります。これが、読み込まれたフォントをスタイル設定したい役割に接続します。
2. Font weight は、書体の意図したバージョンと一致している必要があります。重みがずれると、フォントが想定より細く、太く、または洗練されていないように見えることがあります。
3. Font style では、必要に応じて標準または斜体のスタイルを使用できます。斜体は個性を加えられますが、通常はより大きな用途や意図的な用途に限定するのが最適です。
4. Per-role custom settings を使うと、テーマ内のすべてのフォントを置き換えるのではなく、H1 見出しやボタンだけに使うなど、1つのカスタム書体を選択的に使いやすくなります。

実用的な方法としては、まず1つのカスタムフォントを追加し、最も重要な役割でテストしてから、異なるテンプレートやテキストサイズ全体でバランスが保たれる場合にのみ使用範囲を広げるのがよいでしょう。

使用上の注意

1. 読み取り用テキストから始めます。 ボディフォントは最初に設定してください。最も多くのコンテンツに影響し、テーマ全体のトーンを決めます。
2. 階層を意図的に作成します。 見出しフォントとカードタイトルのスタイルを使い、各テキスト役割が注意を奪い合わないようにして、コンテンツレベルを明確に分けます。
3. 大文字小文字の変換は控えめにします。 大文字、小文字の上書き、または全角スタイルは、視覚的な処理が自然に読める短いテキストを中心に適用してください。
4. 繰り返し表示されるコンテンツをテストします。 カード、ボタン、キャプション、ページタイトルでフォントを確認し、お客様が最もよく目にする場所で文字間隔や可読性の問題を見つけてください。
5. カスタムフォントの設定を確認します。 フォントファミリーの値、ソースコード、ホストされたファイルの URL を慎重に確認し、テーマ全体でタイポグラフィの一貫性を保ってください。
6. フォームとアクションテキストを文脈の中で確認します。 ボタン、ラベル、検証メッセージが、未入力、送信済み、エラーの各状態でも読みやすいことを確認してください。
7. コンテンツの多いテンプレートを見直します。 商品、カート、検索、ブログ、記事のレイアウトでタイポグラフィを比較し、コンテンツが変わったり結果が少なかったりしても、見出しと本文のバランスが保たれているか確認してください。