成功
見出し
オプションのテキスト、アイコン、色、ボタン付きで、わかりやすいセクションの導入を作成します。
このセクションを使用して、より明確なコンテンツの区切り、より強い導入、または簡単な行動喚起が必要な場所に、スタイル付きの見出しを追加します。特に、見出し構造が訪問者のページ閲覧を助けるランディングページや長文レイアウトで役立ちます。セクションの構成について、より詳しくはセクションとブロックに関するShopifyドキュメントをご覧ください。
ページにはH1を1つだけ使用してください。ページにすでにメインタイトルがある場合は、ここではH2以下を選択してください。
これらの設定は、この見出しエリアにのみ、通常のテーマカラーを上書きします。セクションをカスタム背景の上に配置する場合や、周囲のページより強いコントラストが必要な場合に特に役立ちます。
アイコン、見出しテキスト、サブ見出しの色をまとめて調整し、セクションに意図を持たせます。明るい色や落ち着いた色を使う場合は、デスクトップだけでなくモバイルでもプレビューし、テキストが問題なく読めることを確認してください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定では、このセクションのコンテンツとレイアウトを設定できます。配置、アイコン、キャプション、見出し、サブ見出し、オプションのボタンが含まれます。シンプルなセクションタイトルから、より販促性の高い導入ブロックまで、さまざまな内容を構成できます。エディターでの設定詳細については、テーマエディターに関するShopifyドキュメントをご覧ください。
見出しタイプは、見た目だけでなくページ構造に基づいて選択してください。短い文脈にはキャプション、簡潔な補足文にはサブ見出しを使用し、ボタンは訪問者に明確な次のステップがある場合にのみ使ってください。
ボタンを追加する場合は、デスクトップとモバイルでの位置に注意してください。テキストの下に移動すると読みやすい流れになりますが、モバイルで全幅のボタンにすると、タップしやすくなります。
余白設定では、見出しの上下の余白を調整します。見出しを単独で目立たせたい場合は余白を多めに、近くのコンテンツと視覚的につなげたい場合は少なめにします。
デスクトップとモバイルで余白を変えると、デバイス間でバランスよく見せやすくなります。見出しにサブ見出しやボタンが含まれる場合は、窮屈に見えないよう十分なスペースを確保してください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定を使うと、見出しの背景に色、グラデーション、画像、動画を設定できます。これにより、シンプルな見出しをより強い視覚的な区切りやバナー風の導入に変えられます。
テキストがメディアの上に重なる場合は、オーバーレイがコントラストの改善に役立ちます。背景によって余白や幅の見え方が変わるため、公開前に複数の画面サイズでセクションをプレビューしてください。
区切り線設定
Section titled “区切り線設定”区切り線設定では、セクションの上下に線を追加します。テキストや余分な余白を増やさずに、より明確なコンテンツ境界を作りたい場合に適しています。
見出しには、シンプルな区切り線で十分なことが多いです。ページにすでに強い視覚的区切りがある場合は、見た目が煩雑にならないよう区切り線は控えめに使ってください。
表示設定では、この見出しをデスクトップ、モバイル、または両方に表示するかを設定します。デバイスサイズごとに異なる見出しの見せ方をしたい場合に役立ちます。
片方のデバイスでセクションを非表示にする場合は、そこで訪問者が引き続き明確な見出しと必要な文脈を確認できるようにしてください。ページのコンテンツ階層を崩すような表示設定の使い方は避けてください。
幅設定では、コンテンツの最大幅とセクション自体の幅を設定します。コンテンツ幅を狭めると読みやすさが向上することが多く、セクション幅を広くすると、背景を使ったときに特に目立ちます。
コンテンツ幅は、見出しとサブ見出しの行が読みやすいように保つために使います。セクション幅は、背景の見せ方を収めて表示したい場合や、ページ全体にもっと広げたい場合に使います。
使用上の注意
Section titled “使用上の注意”- 見出しレベルを論理的に保つ。 メインのページタイトルにはH1のみを使用し、明確なコンテンツ階層を保つために下位レベルを使ってください。
- メッセージと詳細を分ける。 主旨は見出しに入れ、軽い文脈はキャプションに、サブ見出しは簡潔で補足的な内容にしてください。
- 意図を持ってボタンを使う。 見出しから明確な次のアクションにつなげたい場合にのみボタンを追加し、公開前にモバイルでの位置を確認してください。
- まず読みやすさを重視してデザインする。 カスタムカラーやメディア背景を使う場合は、見出しが読みやすいようコントラストを慎重に確認してください。
- 余白と幅は一緒に調整する。 セクションが窮屈にも、周囲のコンテンツから切り離されても見えないように、余白と幅はセットで調整してください。
- 両方のデバイス表示を確認する。 デスクトップとモバイルのコントロールは、配置、表示、メディアの挙動に異なる影響を与えることがあるため、公開前に両方の表示でセクションを確認してください。
- 上書きはより強い意図として扱う。 空白値やデフォルト風の値は通常、周囲のスタイルを維持しますが、明示的な色、グラデーション、メディアの選択は見出しエリアをより独立して見せます。
- メディアの読みやすさを確認する。 デスクトップとモバイルで異なるメディアを使う場合は、各画面サイズでトリミング、読み込み、フォールバック、テキストの可読性を確認してください。