成功
コラージュ
メディア、商品、テキスト、プロモーションを柔軟な弁当風セクションにまとめます。
- コラージュセクションに関するCompany XYZドキュメント
- セクションとブロックに関するShopifyドキュメント
- バナーブロックに関するCompany XYZドキュメント
- ブログ記事ブロックに関するCompany XYZドキュメント
- 問い合わせフォームブロックに関するCompany XYZドキュメント
- 画像ブロックに関するCompany XYZドキュメント
- 商品ブロックに関するCompany XYZドキュメント
- リッチテキストブロックに関するCompany XYZドキュメント
- お客様の声ブロックに関するCompany XYZドキュメント
- 動画ブロックに関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- セクション余白設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
Collage を使って、より編集的で弁当風の印象を持つ、複数コンテンツの 2 列レイアウトを作成します。プロモーション、メディア、商品、お客様の声、補足テキストを 1 つの構造化されたセクションにまとめたいランディングページやストーリーテリング用レイアウトに適した選択です。この種のレイアウトの背後にあるより広いセクションモデルについては、セクションとブロックに関するShopifyドキュメント を参照してください。
レイアウトでは、最初のブロックが自動的に大きなブロックとして表示されます。コラージュセクションの動作 について詳しく知ることができます。
主なレイアウトコントロールは、コラージュがデスクトップとモバイル全体でどのように流れるかを決めます。これらの設定は、異なるブロックタイプを組み合わせ、明確な視覚的階層を作ろうとするときに最も重要です。
- Collage style は、デスクトップで大きな注目ブロックを左側の最初に表示するか、右側の最後に表示するかを切り替えます。モバイルでは、この同じ選択によって最初のブロックを上に表示するか下に表示するかも決まります。
- Stack on mobile は、セクションを 1 列のモバイルレイアウトに切り替えます。横並びのブロックが窮屈すぎると感じる場合や、よりシンプルな読みの流れにしたい場合に使用します。
- Stretch content vertically は、同じ行のブロックを最も高いブロックの高さにそろえます。通常、テキスト、カード、メディアをそれぞれ異なる自然な高さで組み合わせると、より整ったグリッドになります。
最初のブロックは常に大きなブロックです。特定の項目をレイアウトの先頭にしたい場合は、そのブロックを最初に配置してください。
このグループでは、より広いテーマのカラーパレットを変更せずに、セクションのテキスト、サブ見出し、アイコンの色を上書きできます。カスタムのセクション背景を追加したときや、このセクションを視覚的に際立たせたいときに特に便利です。
コンテンツの背後に画像、グラデーション、動画を使用する場合は、コントラストを慎重に確認してください。ここで色をすばやく上書きするだけで、見出しや補足テキストの可読性を保てることがよくあります。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Banner
- Blog post
- Contact form
- Image
- Product
- Rich text
- Testimonial
- Video
Banner は、プロモーション、キャンペーンメッセージ、または視覚的に豊かな特集タイルに使用します。独自の背景メディア、前景コンテンツ、任意の前景画像、リンク動作をサポートしており、このセクションで最も柔軟なブロックの 1 つです。バナー について詳しく見る。
- ヒーロースタイルの先頭ブロックにしたい場合は、Banner を最初に使用します。
- ブロックの形をより抑えたままにしたい場合は、コピーを簡潔に保ちます。
- バナーに 1 つの明確な移動先がある場合は、ブロック全体リンクスタイルが最適です。
Blog post は、コラージュ内に編集コンテンツを配置するために使用します。選択した記事を取り込み、カード表示をレイアウト全体に合わせて調整できます。ブログ投稿 について詳しく見る。
- 記事が主役ではなく補足要素である場合は、簡潔なテキスト設定を使用します。
- Banner 風のカードにすると、特集画像の視覚的な比重が高まります。
お問い合わせフォーム
Section titled “お問い合わせフォーム”問い合わせ、サポートの案内、リード獲得など、コラージュ内に応答重視のブロックを置きたい場合は Contact form を使用します。独自のヘッダー、ボタン、背景、カラーコントロールが含まれています。お問い合わせフォーム について詳しく見る。
- フォームを見やすく保つため、導入文は短くします。
- カスタムのブロック背景を使うと、近くのコンテンツブロックと差別化しやすくなります。
Image は、写真、ブランド素材、補足ビジュアル、リンク付きのビジュアルタイルに使用します。柔軟な表示のために、アスペクト比、キャプション、オーバーレイ、配置、カラーコントロールが含まれています。画像 について詳しく見る。
- テキスト量の多いコンテンツの横に画像ブロックを配置する場合は、アスペクト比を慎重に選びます。
- 画像に文脈や追加の意味が必要な場合のみ、キャプションを使用します。
Product は、専用の商品セクションに切り替えずに、厳選した商品をコラージュに追加するために使用します。ストーリー性のある商品提案、ギフトガイド、キャンペーンページに適しています。商品 について詳しく見る。
- よりすっきりしたレイアウトにするには、複数の商品ブロックで商品カードのスタイルを統一します。
- その追加の操作が明確に価値を生む場合のみ、バリアントセレクターを有効にします。
リッチテキスト
Section titled “リッチテキスト”Rich text は、補足コピー、ストーリーテリング、手順、あるいはより視覚的なブロックの間に挟む小さな案内に使用します。任意のアイコン、見出し、本文、ボタン、背景、カラーコントロールを備えた、コンパクトなテキストベースのタイルです。リッチテキスト について詳しく見る。
- このレイアウトでは、長い段落よりも短いコピーの方がうまくいくことが多いです。
- 背景とカラー設定を使うと、ブロックを単なるプレーンテキストではなく、デザインされたカードのように見せられます。
テスティモニアル
Section titled “テスティモニアル”Testimonial は、商品、メディア、プロモーションコンテンツと並べてソーシャルプルーフを追加するために使用します。引用文、評価、送信元、関連商品、任意の画像や動画を含めることができます。テスティモニアル について詳しく見る。
- 短い引用の方が、グリッド内でバランスを取りやすくなります。
- お客様の声を商品にリンクすると、信頼とコンバージョンの両方を支えやすくなります。
Video は、コラージュ内に埋め込み動画やホスト済み動画コンテンツを配置するために使用します。アスペクト比、ポスター画像、自動再生動作、オーバーレイ、キャプション、配置オプションをサポートしています。動画 について詳しく見る。
- 再生開始前の第一印象をよりすっきりさせたい場合は、ポスター画像を追加します。
- 再生動作が意図したものになるよう、自動再生とオーバーレイの選択を一緒に確認します。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定 を使って、任意のキャプション、見出し、補足テキスト、アイコン、ボタンをコラージュの上に追加します。これにより、コンテンツの枠組みを整え、長いページでもセクション構造をより明確にできます。
見出しは、注目ブロックと競合しないように簡潔に保ちます。セクションボタンを追加する場合は、セクション全体の主要なアクションとして扱ってください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使って、セクション全体の背後に色、グラデーション、画像、または動画を追加します。コラージュを周囲のコンテンツと差別化したい場合に便利です。
背景メディアを使うとセクションの印象をよりドラマチックにできますが、可読性や見かけの余白にも影響することがあります。背景の見た目を保ちながらコントラストを強めたい場合は、オーバーレイを使用してください。
余白設定 を使って、コラージュの上下の余白を調整します。ここを少し変えるだけで、より引き締まった実用重視の印象にも、よりゆったりしたプレミアムな印象にもできます。
セクション自体に背景がある場合は、より大きな余白がよく合います。このセクションが密なページフローの中にある場合は、狭めの余白が役立ちます。
区切り線設定
Section titled “区切り線設定”区切り線設定 を使って、セクションの上または下に線を追加します。これにより、余白や背景を変えずにコラージュの境界をより明確にできます。
控えめな区切り線で十分なことが多いです。区切り線の色が透明な場合、セクションではテーマ設定の既定の枠線色が使われます。
表示設定 を使って、デバイスサイズごとにセクションを表示または非表示にします。小さい画面で別のコンテンツ配置にしたい場合に役立ちます。
デバイス別の表示設定は、不要な重複コンテンツを生まないよう慎重に使ってください。別バージョンを作る場合は、メッセージとリンクをそろえてください。
幅設定 を使って、コンテンツ幅と外側のセクション幅の両方を調整します。Collage では、幅の変更によってレイアウトの開放感、密度、編集的な印象が大きく変わります。
コンテンツ幅が主なレイアウト制約であり、セクション幅は背景を使うときに最も重要です。可能であれば、ライブのストアフロントで幅の変更をプレビューしてください。エディター上では、実際のページよりも余白が狭く感じられることがあります。
使用上の注意
Section titled “使用上の注意”- 意図を持って先頭に置く。 最も重要なブロック、または最も視覚的なブロックを最初に配置してください。常に大きな注目ブロックになります。
- モバイルでの順序を計画する。 モバイルでの流れが重要な場合は、両方のコラージュスタイルを試し、積み重ねによって上から下への流れがよりきれいになるかを判断します。
- 重いブロックと軽いブロックのバランスを取る。 テキスト量の多いブロックとシンプルなビジュアルブロックを組み合わせ、レイアウトの片側が窮屈になりすぎないようにします。
- 同じ高さは選択的に使う。 縦方向の引き伸ばしはグリッドを整えるのに役立ちますが、1 つのブロックに他よりもはるかに多くのコンテンツがある場合は見直してください。
- スタイル設定後にコントラストを確認する。 カスタム背景やカラー上書きを追加したら、デスクトップとモバイルの両方で読みやすさを再確認してください。
- 両方のブレークポイントを確認する。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、メディア動作を変えることがあるため、両方の表示領域サイズでセクションを確認してください。
- フォームと商品はインタラクティブな要素として扱う。 Contact と Product のブロックは、顧客入力、検証状態、選択済みバリアント、数量、在庫状況によって変わることがあるため、空の状態、成功時、エラー時に加え、販売動作も確認してください。
- メディア上書きは控えめに使う。 空白または既定スタイルの値は通常フォールバックのスタイルを保持しますが、明示的な色、グラデーション、デスクトップとモバイルで別々のメディア選択は、そのローカル領域をより独立して動作させ、切り抜き、読み込み、可読性に影響することがあります。