ヒーロー

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. 動画の使用に関するCompany XYZドキュメント
3. カラー設定に関するCompany XYZドキュメント
4. Headingに関するCompany XYZドキュメント
5. Rich textブロックに関するCompany XYZドキュメント
6. Buttonブロックに関するCompany XYZドキュメント
7. Breadcrumbsブロックに関するCompany XYZドキュメント
8. Icon with textブロックに関するCompany XYZドキュメント
9. Imageブロックに関するCompany XYZドキュメント
10. Searchブロックに関するCompany XYZドキュメント
11. Separatorブロックに関するCompany XYZドキュメント
12. Share/print UIブロックに関するCompany XYZドキュメント
13. Videoブロックに関するCompany XYZドキュメント
14. テーマエディターに関するShopifyドキュメント
15. セクションの余白設定に関するCompany XYZドキュメント
16. 区切り線設定に関するCompany XYZドキュメント
17. 表示設定に関するCompany XYZドキュメント
18. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

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

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

Hero は、強いページ導入のために設計された柔軟なブロックベースのバナーセクションです。コンテンツ、アクション、ユーティリティ要素、メディアを組み合わせ、さらにセクションレベルの画像、オーバーレイカラー、余白、幅のコントロールで全体の表示を調整できます。編集可能なテーマコンテンツの構成について詳しくは、セクションとブロックに関するShopifyドキュメントをご覧ください。

画像設定

このグループでは、Hero の主なビジュアル表現を制御します。注目画像をコンテンツの背後に配置したり、左または右に置いたり、ブロックだけでレイアウトを構成したい場合はセクション画像を完全に削除したりできます。

別のモバイル画像を使うと、小さい画面でも構成を保ちやすくなります。追加しない場合、モバイルではメインの注目画像が使用されます。

より没入感のある表示には、注目動画も使用できます。ミュート再生で自動再生されるため、音声に依存するコンテンツよりも、環境的なビジュアルサポートとして使うのに適しています。動画のガイダンスについては、動画の使用に関するCompany XYZドキュメントをご覧ください。

テキストが画像または動画コンテンツの上に重なる場合は、オーバーレイ設定を使って可読性を保護してください。情報量の多いメディアには、シンプルな画像やコントラストの低い画像よりも強いオーバーレイが必要になることがよくあります。

カラー設定

これらの設定は、このセクションにのみ、より広いカラー選択を上書きします。Hero に独自のアイコン、見出し、テキスト、オーバーレイの表現が必要で、ページの他の部分には影響させたくない場合に使用します。

コンテンツがメディアの上に表示される場合、オーバーレイカラー、グラデーション、透明度が最も重要なコントロールです。メッセージが読みにくいと感じたらオーバーレイを強め、メディアをより見せたい場合は弱めます。共通のカラー動作については、カラー設定に関するCompany XYZドキュメントをご覧ください。

対応ブロックタイプ

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. 共有と印刷 UI
10. Video

ブロックタイプ

見出し

Heading ブロックは、Hero の主なメッセージや補足タイトルに使用します。見出しレベル、配置、任意のアイコン、ブロックレベルのカラーコントロールが含まれます。見出しに関するCompany XYZドキュメントをご覧ください。

文言は短く、端的にしてください。多くのページでは、大きな見出しを複数重ねるよりも、目立つ見出し 1 つに短いテキストブロックを組み合わせた方が見やすくなります。

注意

同じページに H1 見出しを複数使用しないでください。必要な場合は、最上位の見出しレベルを主要なページタイトル専用にしてください。

リッチテキスト

Rich text は、補足コピー、短い導入文、リンク付きテキスト、またはメイン見出しの下に置く簡単な説明コンテンツに使用します。リッチテキストに関するCompany XYZドキュメントをご覧ください。

Hero では短い段落が最も効果的です。ブロックに背景色を追加する場合は、セクションのメディアやオーバーレイとのバランスが保たれているか確認してください。

ボタン

Button ブロックは、買い物、コレクションの閲覧、ページのさらに下への移動など、主要なアクションに使用します。スタイル、アイコンの配置、配置、モバイルでの幅の挙動を制御できます。ボタンに関するCompany XYZドキュメントをご覧ください。

多くの Hero レイアウトでは、1 つの主要アクションが最も効果的です。追加のボタンは、明確な副次的導線を補助する場合にのみ追加してください。

パンくずリスト

Breadcrumbs は、より深いページ構造内での現在地を訪問者に伝えるのに役立ちます。このセクションでは、通常メインメッセージの上に配置され、レイアウトを邪魔せずに文脈を提供します。パンくずリストに関するCompany XYZドキュメントをご覧ください。

デフォルトのパスで階層をより明確にしたい場合は、任意の親リンクを使用してください。Hero メッセージが主役であり続けるよう、スタイルは控えめに保ってください。

アイコン付きテキスト

Icon with text は、短い価値訴求、信頼を示す要素、簡潔なハイライトに使用します。アイコン付きテキストに関するCompany XYZドキュメントをご覧ください。

これらのブロックは、各項目の長さとトーンがそろっている場合に最も効果的です。グループ全体を見やすく保つため、コピーは簡潔にしてください。

画像

Image ブロックは、セクションレベルの注目画像とは別に、コンテンツフロー内に独立したメディアを追加します。ロゴ、商品切り抜き、キャンペーンアート、補足ビジュアルに便利です。画像に関するCompany XYZドキュメントをご覧ください。

アスペクト比、最大幅、キャプション、オーバーレイの各オプションを使うと、Hero 内で意図的に画像を見せられます。すでに強いセクションレベルのメディアを使っている場合は、注目を奪い合う別の画像を追加しないでください。

検索

Search ブロックにより、Hero を検索起点の入口にできます。特に、商品点数が多いカタログ、ヘルプ中心のページ、訪問者が検索から始めることの多いホームページで効果的です。検索に関するCompany XYZドキュメントをご覧ください。

このブロックには独自のバナースタイルのコンテンツと検索結果表示設定も含まれるため、主要なフォーカル要素にできます。検索が主目的の場合は、近くの Hero コンテンツを最小限に保ってください。

ノート

予測結果は、必要な予測検索の設定が有効な場合にのみ適用されます。その設定がない場合、関連する表示オプションは体験に影響しません。

区切り線

Separator ブロックを使うと、Hero 要素の間に余白を作れます。セクション全体の上下余白を変更せずに、内部の間隔を増やしたいときに便利です。区切り線をご覧ください。

最小高さでも、要素の間にはわずかな間隔が残ります。ゼロ間隔のスタックを作ろうとするのではなく、意図的な区切りとしてこのブロックを使用してください。

共有と印刷 UI

このブロックは、ページ上部付近に共有と印刷のコンパクトなアクションを追加します。これらのアクションが早い段階で重要になる編集系、ガイド系、ユーティリティ中心のレイアウトで特に有用です。共有/印刷 UIに関するCompany XYZドキュメントをご覧ください。

使いやすい位置に置きつつ、気を散らさないようにしてください。主役は Hero を支えることであり、主要な CTA と競合することではありません。

動画

Video ブロックは動画をブロックフロー内に直接配置します。動画自体が単なる背景ではなくメッセージの一部である場合に便利です。キャプション、オーバーレイ、自動再生、ポスター画像、幅制限、レスポンシブなアスペクト比に対応しています。動画に関するCompany XYZドキュメントをご覧ください。

このスペースでは短いクリップが最も効果的です。自動再生やオーバーレイを使う場合は、一時停止時と再生時の両方を確認し、キャプションとコントロールが見やすいままかテストしてください。

標準セクション設定

セクション全体に適用されるエディターコントロールについては、テーマエディターに関するShopifyドキュメントをご覧ください。

余白設定

余白設定 は、デスクトップとモバイルで Hero コンテンツの上下の余白を制御します。このセクションでは、余白が、訪問者が次のセクションに到達する前の Hero の目立ち方と没入感に大きく影響します。

Hero をキャンペーン重視で広く見せたい場合は、余白を多めにします。コンテンツが短い場合や、下のページへ素早く移動したい場合は、余白を減らします。

区切り線設定

区切り線設定 は、セクションの上端または下端に任意の線を追加します。隣接するセクションの色や視覚的な重みが似ている場合に、Hero をより明確に区切るのに役立ちます。

区切り線の色を透明にすると、標準の枠線カラー動作が使用されます。Hero にすでに強い画像やコントラストがある場合は、控えめな区切り線が最も効果的です。

表示設定

表示設定 では、デスクトップまたはモバイルでセクションを非表示にできます。画面サイズごとにページ上部のレイアウトを変えたいときに便利です。

同じメッセージの代替バージョンを作る場合は、慎重に使用してください。目的はレイアウトの調整であり、コンテンツを不必要に重複させることではありません。

幅設定

幅設定 では、最大コンテンツ幅と外側のセクション幅を制御します。Hero では、これがテキストの読みやすさと、背景表現の広がり感の両方に影響します。

コンテンツ幅は、読みやすさを左右する主なコントロールです。セクション幅は、背景メディアを使う場合や、Hero のラッパーをよりコンパクトに、またはより広く見せたい場合に特に重要です。

使用上の注意

1. メッセージを絞る。 1 つの明確な見出し、短い補足テキスト、主要なアクションを使うと、Hero をひと目で理解しやすくなります。
2. メディアの配置は意図を持って選ぶ。 背景メディアは雰囲気重視のビジュアルに向いており、左または右配置は画像により多くの専用スペースが必要な場合に適しています。
3. モバイルは別に考える。 デスクトップの切り抜きがうまく適合しない場合は、モバイル専用画像を追加し、小さい画面でボタンの幅と配置を確認してください。
4. 検索の両方の状態を確認する。 Hero は検索前後で印象が異なることがあるため、未入力状態と入力済み状態の両方を確認し、適切なコンテンツが目立ったままかを確認してください。
5. レスポンシブ動作を確認する。 デスクトップとモバイルのコントロールで配置、表示、メディア表現が変わるため、公開前に両方のビューポートをプレビューしてください。
6. テキストのコントラストを保護する。 すべてのコンテンツ色を変更する前に、特に情報量の多い画像や自動再生動画を使う場合は、オーバーレイの色と不透明度を調整してください。
7. 実際のページで幅の変更をプレビューする。 ワイドや full-bleed のレイアウトは、エディター外では大きく印象が変わることがあります。特に Hero がページ上部にある場合は顕著です。