ページのヘッダーとフッターを作成する方法

公開日: 2024年11月13日更新日: 2026年10月20日

ヘッダーとフッターは、ページの上部と下部にあるセクションで、ファネルに構造と一貫性をもたらします。よくデザインされたヘッダーとフッターは、ページの見た目を向上させ、訪問者が迷わないようにし、ブランドを強化します。このガイドでは、事前にデザインされたテンプレートから始める方法と、ゼロから作成する方法の両方で、ヘッダーとフッターを作成・カスタマイズし、訪問者がメインのオファーに集中できるようにする方法を説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

ページのヘッダーとフッターを作成する方法

ページのヘッダーやフッターは、事前にデザインされたテンプレートを使用して作成することも、手動で作成することもできます。それぞれの方法について、以下の手順に従ってください。

オプション 1: 事前にデザインされたテンプレートを使用する

ページエディターで セクションを追加 をクリックして、セクションライブラリを開きます。
カテゴリー メニューで ヘッダー または フッター を選択すると、ページのヘッダーやフッターとして使用できる、事前にデザインされたセクションテンプレートが表示されます。
デザインのニーズに合った テンプレート を選び、クリックしてページに追加します。これらのテンプレートは、ブランドに合わせて自由にカスタマイズできます。

オプション 2: ヘッダーやフッターをゼロから作成する

ページエディターで セクションを追加 をクリックし、セクションのオプションから空白を選択します。ページに空のセクションが追加され、カスタムのヘッダーやフッターの作成を開始できます。
行を追加: セクション内で 行を追加 をクリックして、レイアウトを構成します。たとえば、ヘッダーではロゴとナビゲーションリンク用の行を、フッターではリンク、ソーシャルメディアアイコン、連絡先情報用の行を使用できます。行の追加に関する記事を参照してください。
要素を追加: 各行内で 要素を追加 をクリックして、次のようなコンポーネントを挿入します。
- ロゴ（画像要素を使用）
- ナビゲーションメニュー（重要なページへのリンク）
- ソーシャルメディアアイコン
- ボタン（「お問い合わせ」や「今すぐ購入」などの行動喚起用）
- テキスト（連絡先情報、免責事項、著作権表示用）

詳細については、要素の追加に関する記事をご覧ください。

ヘッダーとフッターの設定を構成する

ヘッダーやフッターを構成するときは、セクション、行、列、要素の複数のレベルで設定を調整できます。レベルごとに、ヘッダーとフッターの外観と機能を制御するためのさまざまなオプションがあるため、それぞれの仕組みを理解しておくと便利です。

セクション設定: ヘッダーやフッターの領域全体を制御する設定です。背景色、パディング、マージン、デバイスごとの 表示/非表示 などのオプションを調整できます。セクション設定にアクセスするには、セクションにカーソルを合わせ、右上の 歯車アイコン をクリックします。
行設定: 行は、コンテンツを整理してヘッダーやフッターを構成するのに役立ちます。
列設定: 列を使用すると、行を複数の区画に分割できます。列設定で幅、配置、間隔を調整して、目的のレイアウトを作成できます。列に関する記事をご覧ください。
要素設定: テキスト、ボタン、アイコンなどの各要素には、それぞれ独自の設定があります。要素設定で フォントスタイル、色、サイズ、配置をカスタマイズできます。

ヘッダーとフッターのベストプラクティス

焦点を絞ったヘッダーで注目を集める: ヘッダーを使用して、特別オファー、期間限定の割引、重要なお知らせなど、訪問者の注意を引く重要な情報や行動喚起を目立たせます。メッセージが際立つように、デザインはすっきりと保ち、詰め込みすぎないようにします。
フッターの情報を整理する: フッターを使用して、補助的なページ（利用規約、プライバシーポリシーなど）やソーシャルメディアのプロフィールへのリンクを掲載します。関連する情報を行ごとにまとめて、読みやすくします。
モバイル向けに最適化する: ヘッダーとフッターがモバイルに対応していることを確認します。さまざまなデバイスでテストし、リンクがクリックでき、小さな画面でもレイアウトが適切に調整されることを確認してください。
明確で読みやすいフォントを使用する: 特にユーザーがナビゲーションリンクを探すヘッダーでは、読みやすいフォントを選び、適切なサイズに設定します。