成功
見出し
見出し、補足テキスト、任意のボタンでページ内容を整理します。
見出しブロックを使ってコンテンツを導入し、長いページを区切り、より明確な読み取り階層を作成します。1つの柔軟なブロックで、タイトル、任意の補足テキスト、任意のCTAを組み合わせます。
1ページにつきH1は1つだけ使用してください。ページ内タイトルの多くは、ページ構造を明確に保ち、SEOに配慮するためにH2以下を選んでください。
ヘッダー設定
Section titled “ヘッダー設定”これらの設定は、ブロックのメッセージと階層を形作ります。配置を調整し、適切な見出しレベルを選び、補足テキストを追加し、ブロックにボタンを含めるかどうかを決めるために使用します。テーマエディターでブロックがどのように機能するかをより広く把握するには、セクションとブロックに関するShopifyドキュメントを参照してください。
最も効果的なのは、各テキストレイヤーに明確な役割を持たせることです。たとえば、文脈を示す短いキャプション、主メッセージを伝えるメイン見出し、追加情報を補うサブ見出しです。内容が重複しているように感じたら、すべてのフィールドを埋めるのではなく、最も重要でないレイヤーを削除してください。
アイコンフィールドでは、絵文字またはアイコン名を追加して、視覚的な強調を加えられます。これは、アイコンが装飾だけでなく見出しの意味を補強するときに最も効果的です。アイコンのガイダンスについては、Iconsを参照してください。
見出しタイプは、見た目のサイズだけでなく、ページ内でのブロックの位置に基づいて選択してください。見出し構造の決定についてさらにヘルプが必要な場合は、ヘッダー設定と、ブロック固有の見出しを参照してください。
ボタンは任意ですが、見出しが閲覧、続きを読む、注目先を開くといった次のステップを導く場合に役立ちます。塗りつぶしスタイルはアクションをより目立たせ、プレーンまたは小さめのスタイルは見出し内容に焦点を保ちます。
ボタンのレイアウトと位置は、スペースが限られているときに最も重要です。モバイルでは、ボタンをテキストの下に移動したり、全幅にしたりすると、タップしやすくなり、ブロックを見やすく保てます。
標準ブロック設定
Section titled “標準ブロック設定”これらのカラーは、このブロックにのみデフォルトのテーマスタイルを上書きします。見出しにより強いコントラスト、別のアクセント、または周囲のコンテンツよりやわらかい補足テキストの見せ方が必要な場合に使用してください。
特に、ブロックが複雑な背景や暗い背景の上に表示される場合は、読みやすさを最優先にしてください。空白またはデフォルトスタイルの選択では、通常、テーマのフォールバックスタイルが維持されます。一方、明示的なカラーやグラデーションを使うと、ブロックが周囲のコンテンツからより独立して見えます。
共有のカラーコントロールについてさらに詳しく知りたい場合は、カラー設定を参照してください。
表示コントロールを使うと、ブロックをすべてのデバイスに表示したり、デスクトップまたはモバイルで非表示にしたりできます。これは、より短い見出しの表現、異なるボタン配置、小さい画面向けのシンプルなコンテンツ構成にしたい場合に役立ちます。
表示を変更した後は、デスクトップとモバイルの両方を確認してください。レイアウト、配置、メディアの動作は表示領域によって異なる場合があります。
共有の表示動作についてさらに詳しくは、表示設定を参照してください。
使用上の注意
Section titled “使用上の注意”- 適切な見出しレベルを選びます。 見出しタイプをページ構造に合わせ、H1はメインページタイトルにのみ使用してください。
- 各テキストフィールドに役割を持たせます。 キャプション、見出し、サブ見出しは、それぞれが明確な価値を追加する場合にのみ使用してください。
- ボタンの動作を明確にします。 ブロックがどこかへ誘導する場合にのみボタンを追加し、次に何が起こるかを示す簡潔なテキストを使ってください。
- 両方の表示領域を確認します。 配置、表示、ボタン位置を変更した後は、デスクトップとモバイルのレイアウトを確認し、各画面サイズでブロックがすっきり読めることを確認してください。
- 上書きは選択的に使います。 デフォルトのスタイルや共有レイアウトが内容に合わなくなった場合にのみ、カスタムカラー、グラデーション、またはデバイス別メディアを適用してください。
- メディアの可読性を保ちます。 デスクトップとモバイルで別々のメディアを使用する場合は、トリミングとフォールバックの動作が見出しやオーバーレイテキストを引き続き補助していることを確認してください。