【SWELL基本設定編】フッターをカスタマイズ｜設定手順とレイアウトの選び方

WordPressテーマ「SWELL」でサイトを作ったものの、

といった悩みを抱えている方も多いのではないでしょうか。

フッターはサイトの一番下に表示される一見目立ちにくいエリアですが、実は信頼性の担保・回遊性の向上・法的表記の開示という3つの重要な役割を担っています。
本記事では、SWELLのフッター設定について、操作手順だけでなく「サイトタイプに応じた最適なレイアウトの選び方」まで詳しく解説します。

なぜフッターの設計が重要なのか｜3つの役割

訪問者の多くはページを読み進めた後、最後にフッターに目を通します。
つまり、フッターは「サイトを離脱するか、もう一歩踏み込むか」の分岐点となるエリアなのです。

 役割1：サイトの信頼性を担保する

ユーザーが商品購入や問い合わせを検討する際、運営者情報やプライバシーポリシーなどの記載があるかを確認する傾向があります。
特に初めて訪れるサイトでは、「この会社は信用できるのか」を判断する材料としてフッターがチェックされることも珍しくありません。

 役割2：ユーザーの回遊性を高める

記事を最後まで読んだユーザーに対して、次のアクションを促せる場所がフッターです。
関連カテゴリーや人気記事、お問い合わせページへの動線を用意することで、直帰率の低下とPV数の向上が期待できます。

 役割3：法的表記・運営情報を開示する

ECサイトでは特定商取引法に基づく表記、すべてのサイトでプライバシーポリシーの掲載が必要です。
これらをグローバルナビ（ヘッダー）に置くと煩雑になるため、フッターにまとめるのが一般的。
法的リスクを回避する意味でも、フッター設計は欠かせません。

SWELLのフッター構成と3つのカスタマイズ機能【全体像】

SWELLでは、フッター部分を大きく4つのエリアで構成できます。

エリア名	役割
フッター直前ウィジェット	フッター手前に設置する特別なエリア（CTAや関連記事向け）
ウィジェットエリア（1〜3列）	ロゴ、店舗情報、カテゴリー、新着記事などを配置
フッターメニュー	プライバシーポリシーなどのリンクをまとめた横並びメニュー
コピーライト	サイト名・著作権表示

そして、これらのエリアは以下3つの機能を使い分けてカスタマイズします。

機能	主な設定内容
カスタマイザー	背景色・文字色、コピーライト、SNSアイコン表示
メニュー機能	フッターメニュー、スマホ固定フッターの項目設定
ウィジェット機能	コンテンツの配置（テキスト、画像、ブログパーツなど）

この3つの役割分担を理解しておくと、「どこをいじれば何が変わるのか」が明確になり、作業効率が大きく上がります。

【実践編①】カスタマイザーでの基本設定

ここからは実際の設定手順に入ります。まずはカスタマイザーでの基本設定から解説します。

WordPress管理画面で「外観」→「カスタマイズ」→「フッター」の順にクリックします。

背景色・文字色の設定

コピーライトのカスタマイズ

その他の設定

【実践編②】フッターメニューの作成

フッターメニューは、ヘッダーに載せない補助的なページをまとめる場所です。

フッターメニューに載せるべき項目チェックリスト

業種を問わず、以下の項目は最低限掲載しておくと良いでしょう。

• プライバシーポリシー（個人情報を扱うサイトは必須）
• 運営者情報・会社概要
• お問い合わせ
• サイトマップ

ECサイトや有料サービスを提供する場合は、さらに以下も必要です。

• 特定商取引法に基づく表記
• 利用規約
• 返品・キャンセルポリシー

メニュー作成手順

1. WordPress管理画面で「外観」→「メニュー」をクリック
2. 「新しいメニューを作成しましょう」を選択し、メニュー名を入力
3. メニュー設定で「フッター」にチェックを入れる
4. 「メニューを作成」をクリック
5. 左側の項目一覧から追加したいページを選択し「メニューに追加」
6. 順序をドラッグで並び替え、「メニューを保存」をクリック

上に設定した項目から順に、フッターの左側から並びます。

【実践編③】ウィジェットでコンテンツを配置する

ウィジェット機能は、フッターのコンテンツエリアを自由にカスタマイズするための中核機能です。

フッター（PC）1〜3の使い分け

WordPress管理画面で「外観」→「ウィジェット」をクリックすると、「フッター(PC)1」「フッター(PC)2」「フッター(PC)3」という3つのエリアが確認できます。
左から順に配置されるため、3つとも使えば3列レイアウトに。1つだけ使うと1列中央配置になります。

フッター（スマホ）の設定

PC向けとは別に、スマホ表示専用のフッターも設定できます。
未設定の場合は「フッター(PC)1〜3」が縦並びで表示されるため、スマホでも違和感がなければ未設定のままで問題ありません。

ただし、PCでは3列表示が美しくても、スマホでは情報過多になるケースがあります。
モバイル流入が多いサイトでは、スマホ用に情報を絞ったウィジェットを別途用意することを検討しましょう。

ブログパーツを活用した自由度の高いデザイン

ウィジェットの標準機能だけでは表現に限界があります。そこで便利なのが、SWELL独自の「ブログパーツ」機能。

ブログパーツで作成した会社情報や地図などのコンテンツを、ショートコードを使ってウィジェットに呼び出す流れは以下のとおり。

1. 「ブログパーツ」→「新規投稿を追加」でコンテンツを作成し公開
2. ブログパーツ一覧から「呼び出しコード」をコピー
3. ウィジェット編集画面で「ブロック」ウィジェットをフッターに追加
4. コピーしたショートコードを貼り付けて保存

この方法なら、画像・ボタン・装飾済みのテキストも自在に配置できるため、プロ品質のフッターが作れます。

フッター直前ウィジェットの実務活用

フッター直前ウィジェットは、全ページのフッター手前に表示される特別なエリアです。

企業サイトでは、以下のような使い方がおすすめです。

• お問い合わせフォームへの誘導CTA
• 資料請求・無料相談のバナー
• 関連サービスの紹介ブロック

記事を最後まで読んだ「熱量の高いユーザー」にアプローチできる絶好のポジションなので、コンバージョン最適化の観点から積極的に活用しましょう。

【スマホ対応】固定フッターメニューの設計

スマホで画面下部に常時表示される「固定フッター」は、ユーザビリティを大きく左右する要素です。

固定フッターの基本設定

「外観」→「メニュー」から新規メニューを作成し、メニュー設定で「固定フッター(SP)」にチェックを入れるだけで設定できます。

項目数は4つがベスト

固定フッターの項目数は、4つに絞ることを推奨します。

業種別おすすめ項目

サイトタイプ	おすすめの項目
店舗ビジネス	メニュー / 電話発信 / 予約ボタン
コーポレート	サービス / 会社概要 / お問い合わせ
ブログ・メディア	カテゴリー / 検索 / SNS

メニュー項目にアイコンを表示するには、説明欄に「icon-home」などのショートコードを記入します。
視覚的に分かりやすくなるため、積極的に設定しましょう。

• 使用できるアイコンとショートコード

プロが実践するフッター設計の注意点

最後に、実務で押さえておきたい注意点を3つ紹介します。

ヘッダーとフッターの役割を使い分ける

ヘッダーは「これから何を見るか」のナビゲーション、フッターは「見終わった後の補助情報」が基本です。
重要なページ（サービス紹介・商品一覧など）はヘッダーに、補助ページ（プライバシーポリシー・運営者情報など）はフッターに配置しましょう。

情報を詰め込みすぎない

「せっかくスペースがあるから」と、あれもこれも詰め込むとかえって見づらくなります。
1つのフッターに載せる情報は、ユーザーが次に取るアクションに直結するものに絞るのが鉄則です。

モバイル表示の最終確認を怠らない

PCで完璧に見えても、スマホでは崩れていたり、文字が小さすぎたりするケースは頻繁に起こります。
公開前に必ず実機で表示確認を行い、タップしやすさや可読性もチェックしてください。

まとめ

SWELLのフッターカスタマイズについて、設定手順とレイアウトの選び方を解説しました。

フッターは一度しっかり設計しておけば、長く活用できる資産になります。
本記事を参考に、サイトの目的に合った最適なフッターを構築してみてください。
まずは現状のフッターを見直し、必要な項目が揃っているかチェックするところから始めましょう。