成功
ロゴリスト
信頼要素、パートナーブランド、または視覚的なナビゲーション向けのレスポンシブなロゴグリッドを作成します。
ロゴ、バッジ、またはリンクされた画像タイルをすっきりとしたグリッドで表示します。このセクションは、パートナーブランド、信頼要素、取扱店、認証、またはテキスト中心のレイアウトでは少し情報量が多すぎると感じる場合のシンプルな画像ベースのナビゲーションに最適です。テーマ全体でこれがどのように位置付けられるかをより広く確認するには、セクションとブロックに関するShopifyドキュメント を参照してください。
主なレイアウトコントロールによって、ロゴグリッドの密度や余白感が決まります。水平配置を使ってグリッドをコンテンツエリア内で配置し、デスクトップ、タブレット、モバイルのカラム数を調整して、どの画面サイズでもロゴが判別しやすいようにします。
タブレットは、別の中間レイアウトが不要な場合、デスクトップのカラム数を引き継げます。そのほうが設定がシンプルになり、ほとんどのロゴの比率が似ている場合にうまく機能します。
ロゴが小さく見え始めた場合は、個々のロゴ幅を広げる前にカラム数を減らしてください。より分かりやすいグリッドのほうが、密度の高いグリッドよりも多くの場合よい結果になります。
セクション固有の設定グループ
Section titled “セクション固有の設定グループ”これらの上書き設定は、アイコン、見出し、サブ見出しを含むセクションの見出しエリアのスタイルを調整します。ページの残り部分は変えずに、このロゴグリッドに独自の見た目を持たせたい場合に使用します。
ロゴ自体に色がある場合は、見出しの色をシンプルに保ち、セクションがごちゃついて見えないようにします。カスタム背景と組み合わせる場合は、コントラストを慎重に確認してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Button
- Logo item
- Rich text
Button ブロックは、セクション内に独立した行動喚起を追加します。ロゴが、パートナーページ、メディアページ、卸売情報ページなど、より大きな遷移先を支える場合に適しています。
ボタン について詳しくは、こちらをご覧ください。
- セクションで、個々のロゴリンク以外にもう1つ明確な次のアクションが必要な場合は、Button ブロックを使用します。
- ロゴ自体もクリック可能な場合は、ボタンの目的を明確に分けてください。
- モバイルで全幅表示にすると、ページ末尾付近でタップしやすくなります。
ロゴアイテム
Section titled “ロゴアイテム”Logo item ブロックは、このセクションの主要なコンテンツブロックです。各ブロックには、画像、任意のキャプションまたはテキスト、任意のリンクを含めることができるため、シンプルなロゴ一覧としても、視覚的なナビゲーション項目としても機能します。
ロゴアイテム について詳しくは、こちらをご覧ください。
- サイズの近いソース画像を使うと、全体のグリッドが整って見えます。
- ブロックごとに最大画像幅を調整して、見た目が大きすぎる、または小さすぎるロゴを補正します。
- キャプションは、パートナー種別や遷移先など、役立つ文脈を追加できる場合にのみ入れてください。
リッチテキスト
Section titled “リッチテキスト”Rich text ブロックは、セクション内に短い補足テキストを追加します。これらのロゴが重要な理由や、ナビゲーションとして使われる場合に訪問者が何を期待できるかなど、簡潔な文脈を示すために使用します。
リッチテキスト について詳しくは、こちらをご覧ください。
- テキストは短く保ち、セクション全体が主にロゴグリッドとして読めるようにします。
- 小さな画面でテキストの位置を変えたい場合は、デスクトップとモバイルで別々の配置を使います。
- ブロックの背景色は補足テキストを目立たせるのに役立ちますが、使いすぎないようにしてください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定 では、ロゴグリッドの上にキャプション、見出し、サブ見出し、アイコン、任意のセクションレベルのボタンを追加できます。これは、ロゴに、注目ブランド、認証、メディア掲載などの文脈が必要な場合に便利です。
短い見出しは、明確さと一覧性を高めることがよくあります。Button ブロックも追加する場合は、各アクションの目的が異なることを確認してください。
余白設定 では、セクションの上下のスペースを調整します。ロゴリストをより目立たせたい場合は余白を増やし、複数のコンパクトなコンテンツセクションの間に配置する場合は減らします。
積み重なった行によってセクションが想定より高く見えることがあるため、モバイルの余白は個別に調整する必要があることがよくあります。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、セクションの背後に色、グラデーション、画像、動画を追加できます。これにより、より強いブランド感を演出できますが、にぎやかな背景はロゴと競合することがあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、セクションの上または下に線を追加します。周囲のコンテンツからロゴリストをよりすっきりと区切りたい場合に最も役立ちます。
ほとんどのロゴセクションでは、装飾的な区切り線よりも控えめな区切り線のほうが効果的です。
表示設定 では、セクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。よりシンプルなモバイル表示にしたい場合や、小さな画面向けに別のセクションを用意したい場合に便利です。
ブロックレベルの表示コントロールを使うと、セクション全体を非表示にせずに補足コンテンツを絞り込むこともできます。
幅設定 では、コンテンツ幅と外側のセクション幅を調整します。広めのレイアウトは、よりバランスの取れた複数カラムのロゴグリッドを支え、狭めのレイアウトは、少数のロゴをより意図的に見せるのに役立ちます。
エディターでは幅の変更が完全には反映されない場合があるため、レイアウトを微調整する際はライブページのプレビューを確認してください。
使用上の注意
Section titled “使用上の注意”- 認識しやすさを優先します。 一目でロゴを識別しやすいカラム数を選んでください。
- 見た目のサイズをそろえます。 ロゴごとの幅調整を使って、比率が大きく異なるマークのバランスを整えます。
- 意図を持ってリンクします。 ロゴがナビゲーションとして機能する場合は、それぞれの遷移先が明確で役立つものにしてください。
- 必要に応じて文脈を追加します。 ヘッダーや短い Rich text ブロックを使って、ロゴがまとめられている理由を説明します。
- デバイス間でプレビューします。 公開前に、特にロゴとテキストやボタンを組み合わせる場合は、デスクトップ、タブレット、モバイルのレイアウトを確認してください。
- モバイルは個別に確認します。 デスクトップとモバイルのコントロールで配置、表示、画像の挙動が変わることがあるため、公開前に両方の表示を確認してください。
- 強いビジュアルは読みやすさを保ちます。 透明ファイル、カスタム背景、またはデスクトップとモバイルで別のメディアを使うと、コントラストや切り抜きが変わることがあるため、最終的な組み合わせを確認して見やすさをテストしてください。
- 共有エリアではシンプルなスタイルを使います。 グリッドを周囲になじませたい場合は、デフォルト風の色と背景のままにし、はっきり区別したい場合にのみ明示的な上書きを使ってください。