成功
フッターナビゲーション
メニュー、ブランド要素、ユーティリティコンテンツ、柔軟なレイアウト制御を備えたレスポンシブなフッターを作成します。
- フッターナビゲーションセクションに関するCompany XYZドキュメント
- セクションとブロックに関するShopifyドキュメント
- フッターメニューブロックに関するCompany XYZドキュメント
- ロゴブロックに関するCompany XYZドキュメント
- ソーシャルメディアアイコンブロックに関するCompany XYZドキュメント
- ローカライズセレクターブロックに関するCompany XYZドキュメント
- 決済アイコンブロックに関するCompany XYZドキュメント
- 著作権ブロックに関するCompany XYZドキュメント
- ボタンブロックに関するCompany XYZドキュメント
- 画像ブロックに関するCompany XYZドキュメント
- 動画ブロックに関するCompany XYZドキュメント
- 区切り線ブロックに関するCompany XYZドキュメント
- セクションのカスタマイズに関するShopifyドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- セクション余白設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
フッターナビゲーションを使用して、メニュー、ブランド要素、法的テキスト、ソーシャルリンク、メディア、ユーティリティコンテンツを含むカスタムなページ下部レイアウトを構築します。シンプルな積み重ね型フッターよりも細かく制御したい場合、特にデスクトップ、タブレット、モバイル全体で効果的です。
フッターナビゲーションのセクションリファレンス は Company XYZ のドキュメントで参照できます。Shopify におけるセクションの動作のより広い概要については、セクションとブロックに関するShopifyドキュメント を参照してください。
主なレイアウトコントロールでは、異なる画面サイズでフッターが使用する列数を定義します。これらの設定は、個々のブロックを微調整する前の全体構造を形作ります。
- まずデスクトップのレイアウトを設定します。 リンクが多いフッターでは列数を増やし、ブランド中心でシンプルなレイアウトでは少なくします。
- タブレット設定は意図的に使います。 タブレットの列数を 0 にすると、タブレットではデスクトップの列数が再利用されます。デスクトップのレイアウトがすでにうまく拡張される場合に便利です。
- モバイルはシンプルに保ちます。 狭い画面では通常、列数を少なくした方がうまくいきます。特に、メニューとリッチテキスト、画像、動画のような幅広のコンテンツを組み合わせる場合に有効です。
これらのセクションレベルのカラーを使うと、サイト全体の他の部分を変更せずに、フッターのテキスト色とアイコン色を上書きできます。フッターに独自の見た目が必要な場合に使います。
- テキスト色を背景に合わせます。 背景画像、グラデーション、動画を追加する場合に特に重要です。
- アイコン色は一貫性のために使います。 ソーシャルリンクなど、アイコンベースのブロックやその他のユーティリティ項目をまとめやすくなります。
- ブロックカラーは例外として扱います。 全体のフッターにはセクションカラーを使い、特定の項目を際立たせたい場合のみブロックレベルのカラーを使います。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Button
- Copyright
- Follow on shop button
- Footer menu
- Localization selectors
- Logo
- Payment icons
- Rich text
- Separator
- Social media icons
- Image
- Video
ブロックガイド
Section titled “ブロックガイド”フッターメニュー
Section titled “フッターメニュー”Footer menu ブロックは、各グループに任意の見出しを付けたナビゲーションリストを表示します。フッターメニュー の詳細については、こちらをご覧ください。
- Help、Company、Policies などの異なるグループには、別々のメニューブロックを使います。
- 複数のメニューがある場合は短い見出しを付けて、顧客がフッターをすばやく確認できるようにします。
- 長いリストは、1つの大きすぎるメニューを作るのではなく、小さなグループに分けます。
Logo ブロックはブランドアイデンティティを強め、フッターの視覚的な支点になります。ブロックに画像が設定されていない場合は、ストア名にフォールバックできます。ロゴ の詳細については、こちらをご覧ください。
- ロゴは大きくしすぎず、レイアウトを圧迫しないようにします。
- 幅を 0 にすると、ロゴは利用可能なスペースまで広がります。これは通常、シンプルでブランド重視のフッターに最適です。
リッチテキスト
Section titled “リッチテキスト”Rich text は、短いブランドコピー、連絡先情報、信頼を伝えるメッセージ、簡潔な価値提案に適しています。
- コピーは簡潔にして、フッターを見やすく保ちます。
- そのコンテンツを周囲の項目から分けて見せたい場合のみ、ブロックレベルの背景色やテキスト色を使います。
ソーシャルメディアアイコン
Section titled “ソーシャルメディアアイコン”このブロックは、テーマ設定で構成したソーシャルアカウントを読み込みます。ソーシャルメディアアイコン の詳細については、こちらをご覧ください。
- 設定済みのソーシャルアカウントが完全で一貫している場合は、すべて表示 を使います。
- 一部の主要ネットワークだけを目立たせたい場合は、すべて表示 をオフにします。
- アイコンスタイルはフッターデザインに合わせて選びます。認識しやすくするなら branded、よりすっきりした UI にするなら solid、よりミニマルに見せるなら text only を選びます。
ローカリゼーションセレクター
Section titled “ローカリゼーションセレクター”Localization selectors では、対応している場合に顧客が国、通貨、言語を選択できます。ローカリゼーションセレクター の詳細については、こちらをご覧ください。
- これらの選択肢が顧客に提供されている場合のみ、このブロックを追加します。
- モバイルでは、Small field 入力スタイルによってブロックが新しい行に移ることがあるため、変更後にフッターをプレビューしてください。
Localization selectors は、完全に設定されていて顧客にとって有用な場合のみ追加してください。そうでない場合は、フッターを改善することなく複雑さだけが増します。
支払いアイコンと著作権
Section titled “支払いアイコンと著作権”これらのブロックは通常、安心感と法的情報のためにフッター下部付近で使用されます。支払いアイコン と 著作権 の詳細については、こちらをご覧ください。
- 見慣れたフッター構成にするため、下段に配置します。
- 著作権テキストは短く、最新の内容に保ちます。
- Payment icons は、フッターの主なコンテンツではなく、信頼を補強する要素として扱います。
Button ブロックは、チームへの連絡やサポートページの表示など、明確なフッターアクションを追加します。ボタン の詳細については、こちらをご覧ください。
- フッターがメインページのコンテンツと競合しないよう、ボタンは最大でも 1 つか 2 つにします。
- モバイルで全幅のボタンにすると、狭い画面でアクションが重要な場合に役立ちます。
Image と Video ブロックを使うと、フッターをより編集的に、またはブランド主導に見せることができます。画像 と 動画 の詳細については、こちらをご覧ください。
- メディアは控えめに使い、ナビゲーションがページ下部に押し下げられすぎないようにします。
- キャプションは短く、実用的に保ちます。
- 動画では、ポスター画像を使うと通常、最初の印象が良くなります。
Separator ブロックは、フッター要素の間に余白や視覚的な区切りを追加します。区切り線 の詳細については、こちらをご覧ください。
- 上部と下部のフッター領域を分けたり、ユーティリティコンテンツの周囲に余白を作ったりするために使います。
- フッターでは項目間に標準の間隔が使われるため、高さを 0 にしても小さな隙間が残ることがあります。
共通ブロック設定
Section titled “共通ブロック設定”ほとんどのフッターブロックには、配置、レイアウト、表示用の共通コントロールが含まれています。これらの設定によって、このセクションはカスタムのレスポンシブフッターに対応できる柔軟性を持ちます。一般的な編集動作については、セクションのカスタマイズに関するShopifyドキュメント を参照してください。
- 配置設定 では、各ブロックをデスクトップとモバイルで異なる位置に揃えられます。
- レイアウト設定 では、ブロックを新しい行や列へ移動したり、残りのデスクトップスペースを埋めるように広げたりできます。
- 表示設定 は、デスクトップとモバイルで大きく異なるフッターレイアウトが必要な場合に役立ちます。
標準セクション設定
Section titled “標準セクション設定”セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、フッターの背景色、グラデーション、画像、動画、オーバーレイ処理を制御します。このセクションでは、フッターをページの他の部分から分けたり、より強いブランド感のある仕上がりにしたりする場合に特に有用です。
画像または動画の背景を追加する場合は、テキストとアイコンのコントラストを注意深く確認してください。オーバーレイの色と不透明度は読みやすさの維持に役立ち、モバイル向けの背景メディアは小さい画面でデザインを簡潔にできます。
余白設定 では、フッターコンテンツの上下の余白を制御します。フッターをよりゆったり見せたいとき、またはページ全体に縦方向の余白が多いときに詰めたいときに使います。
デスクトップとモバイルの余白は別々に調整できるため、大きなデスクトップ用フッターがスマートフォンで高く見えすぎるのを防げます。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、フッターセクションの上部または下部に線を追加します。フッターと近くのコンテンツとの切り替わりをより明確にしたい場合に便利です。
区切り線の色が透明の場合は、代わりに既定の境界線色が使われます。フッターにより強い輪郭が必要な場合を除き、区切り線のスタイルは控えめに保ってください。
幅設定 では、最大コンテンツ幅とセクション全体の幅の両方を制御します。Footer navigation では、コンテンツ幅はブロック同士の詰まり具合に影響し、セクション幅は背景スタイルを使うときに特に重要です。
エディターでは、実際のライブページほど幅の変更が目立たないことがあるため、レイアウトを調整するときはストアフロントで結果をプレビューしてください。よりすっきり読ませたい場合は狭い幅を使い、背景がデザインの一部になっている場合は広い幅を使います。
使用上の注意
Section titled “使用上の注意”- 列数から始めます。 まずデスクトップ、タブレット、モバイルの列数を設定し、個別のブロックレイアウトは必要な箇所だけ調整します。
- リンクをわかりやすくグループ化します。 短い見出し付きの Footer menu ブロックを複数使い、サポート、会社、ポリシーのリンクを顧客がすばやく確認できるようにします。
- コントラストを保護します。 背景画像、グラデーション、動画、カスタムカラーを追加したときは、その都度テキストとアイコンの見やすさを再確認してください。
- レスポンシブバリアントは控えめに使います。 モバイルとデスクトップで本当に異なるフッターレイアウトが必要な場合のみ、ブロックを非表示にするか複製します。
- ユーティリティコンテンツは補助的に保ちます。 ロゴ、メディア、支払いアイコン、ボタンは、フッターを支えるためのものであり、主要ナビゲーションを見つけにくくするべきではありません。
- 両方の表示領域でプレビューします。 フッターブロックはデスクトップとモバイルの間で並び替え、非表示、強調の変更が起こるため、公開前に各サイズを確認してください。
- メディアはデザイン上の判断として扱います。 デスクトップ用とモバイル用でメディアを分けると、切り抜き、読みやすさ、フォールバック動作が変わることがあるため、画像や動画を使う場合は両方を確認してください。
- フォールバックスタイルを使いたい場合は既定値を残します。 空白または透明のカラー選択は通常、既存のフッターの見た目を維持します。一方、明示的な色、グラデーション、メディアはフッター領域をより独立したものにします。