「おしゃれなサイトは足元（フッター）から」 。
ヘッダーやメインコンテンツを作り込んでも、ページの一番下にあるフッターがデフォルトのままだったり、意味のないリンクが並んでいたりすると、最後にユーザーをがっかりさせてしまいます。
LWRサイトのフッターは、非常に柔軟に編集可能です。 この記事では、柔軟な設定が可能になるAppExchangeの紹介をしながら、実際の配置画面イメージを用いてフッターを「自社仕様」にカスタマイズする手順を解説します。
フッターの構造を理解する
LWRサイト（Build Your Own テンプレート等）では、フッターは特別な機能ではなく、単なる 「ページ下部の共通領域」 です。 ここには、ヘッダー同様に好きなコンポーネントを配置できます。
- よく使われるコンポーネント:
- テキストブロック: テキストリンクやコピーライト用
- サイトのロゴ: ロゴ画像を表示
- 列: レイアウト調整
- Flexi-Grid Layout: 細かいレイアウト調整用 AppExchange
おすすめAppExchangeコンポーネント: Flexi-Grid Layout (LWR)
はじめに、LWRサイトの構築におすすめのAppExchangeコンポーネントをインストールしましょう。
インストールしたい組織にログインした状態でURLの末尾に以下を追加するとインストール画面を開くことができます。/packagingSetupUI/ipLanding.app?apvId=04tDn000000Rxh5IAC&src=U
例: https://xxx.lightning.force.com/packagingSetupUI/ipLanding.app?apvId=04tDn000000Rxh5IAC&src=U
「管理者のみインストール」を選択して完了してください。
- インストールするアプリ
- 組織を選択
- チェックを入れてインストール
- 管理者のみでOK
実践：フッターにコンポーネントを配置
ビルダーを開いてコンポーネントを配置していきます。
まずはインストールしておいた Flexi-Grid Layout (LWR) をフッターに配置します。
Flexi-Grid Layout (LWR) では、Saasy、Astro、Einstein、… というように Salesforce マスコットたちの名前で領域の名前が付けられています。
それぞれのサイズを 0 – 12 の間で決めることができ、12を超えると次の要素は表示が下に送られるようになります。
ここから少し複雑になりますが、デスクトップ / タブレット / 携帯 それぞれのビューモードごとにレイアウトを決めていきましょう。
デスクトップ
デスクトップでは、Saasy 4 / Astro 0 / Einstein 8 という比率にしてあります。
普通は Saasy 4 / Astro 8 でいいのですが、他のビューとの兼ね合いでデスクトップは Astro を使わずに 0 としています。
Saasy の中にロゴ画像とテキストブロックを配置します。
Einstein の中に、さらにもうひとつの Flexi-Grid Layout (LWR) を配置しましょう。
ふたつめの Flexi-Grid Layout (LWR) は12分割のうち Saasy 3 / Astro 3 / Einstein 3 というふうに3を余らせて配置しています。これはこのサイトで右下に配置しているエージェント呼び出しボタンと重ならないようにするための工夫です。
完成イメージがこちら。
タブレット
タブレットでは、Saasy 3 / Astro 1 / Einstein 8 という比率にしてあります。
ロゴ画像の領域ともうひとつの ふたつめの Flexi-Grid Layout (LWR) が近づきすぎないように、Astro で間を開けています。
完成イメージはこちら。
携帯（モバイル）
最後に携帯のビューでは、Saasy 12 / Astro 0 / Einstein 12 という比率にしてあります。
上にも書いたように12を超えると次の要素は表示が下に送られるようになります。モバイルのような狭い横幅では12で指定することで横並びではなく縦並びになリます。
さらに、ロゴ画像の領域 (Saasy) を一番下に出したかったので、表示順 (Order) を工夫して Einstein / Saasy / Astro の順番にしています。
完成イメージはこちら。
モバイル表示の確認
ヘッダー同様、フッターもモバイルでの見え方が重要です。
- リンクが縦に並びすぎて長くなっていないか？
- 指でタップしやすい間隔か？
ビルダーのモバイルビューで確認し、必要であればパディング（余白）を調整します。
まとめ
フッターは、ユーザーが「迷子になった時」や「運営情報を知りたい時」に見る場所です。 派手な装飾は不要ですが、正確な情報 と 見やすいリンク を配置することが信頼に繋がります。
忘れずに実装しておきましょう。
参考URL
Design Beautiful Responsive Web Pages with Lightning Web Runtime
読者の声