ヘッダーとフッターのデザイン

約 13 分

概要

ヘッダーは、ウェブサイトの最上部にあるナビゲーションエリアです。訪問者はこれを使用してブランドを認識したり、ページ間を切り替えたり、主要なコールトゥアクションをクリックしたりします。フッターは、サイトの最下部にある情報エリアで、通常、連絡先詳細、ソーシャルメディアリンク、法的規約、および補足ナビゲーションが含まれています。

これらの2つのモジュールは通常、サイト全体に設定されるため、1つの場所で行った変更は、同じヘッダーまたはフッターを使用するすべてのページに反映されます。これにより、ロゴ、ナビゲーション、連絡先情報の整合性が確保されます。

設定場所

エディタの上部にある"レイアウト"を開きます。ヘッダーはリストの上部に、フッターは下部に表示されます。「編集」をクリックして、それぞれの設定フォームを開きます。エディタのプレビューでヘッダーまたはフッターを直接クリックしてフォームを開くこともできます。

現在いるページにヘッダーまたはフッターがない場合、「レイアウト」にそれらを追加するオプションが表示されます。追加後、コンテンツを入力する前にサイト全体に適用するかどうかを確認することをお勧めします。

ヘッダーのデザイン

1. ブランドロゴの設定

ヘッダーでは、画像ロゴまたはアイコンロゴを使用できます。ロゴは最も頻繁に表示されるブランド識別子なので、エッジがはっきりしていて、縮小しても認識できるバージョンを選択してください。

画像ロゴの場合は、十分なコントラストのあるクリーンな背景を使用してください。ロゴのテキストが非常に細い場合や色が薄すぎる場合は、デスクトップとモバイルの両方のプレビューで明瞭度を確認してください。

2. ナビゲーション項目の作成

ナビゲーション項目は、ヘッダー内のリンクです。ページリストから自動的に生成されるわけではありません。ヘッダーフォームで1つずつ追加、名前付け、順序付けする必要があります。これにより、訪問者が最初に表示するオプションを制御できます。

各項目は以下にリンクできます。

"サービス"や"お問い合わせ"などのサイト内のページ。
"料金"や"よくある質問"など、同じページ内の特定のセクション。
予約システム、ストア、ソーシャルメディア、パートナープラットフォームなどの外部URL。

外部リンクは新しいタブで開くように設定できます。訪問者がサイトを離れないように、外部リンクは新しいタブで開くことをお勧めします。

3. プライマリボタンの追加

ヘッダーには、「今すぐ予約」、「無料相談」、「今すぐ購入」などのプライマリボタンを1つ含めることができます。これはあなたのコールトゥアクション（CTA）であり、訪問者に最も取ってほしい次のステップです。

まず、"設定" → "コンテンツ"でカスタムボタンを作成し、ヘッダー設定でそれを選択します。サイト全体で単一のカスタムボタンを使用すると、URLやテキストが変更された場合に1つの場所を更新するだけで済むため、不整合が軽減されます。

4. ナビゲーション順序の整理

最も重要な項目を最初に配置します。典型的なウェブサイトでは、「ホーム、サービス、ポートフォリオ、会社概要、お問い合わせ」のような順序が使用される場合があります。予約が主な目標である場合は、ボタンのテキストが明確で、その位置が一貫していることを確認してください。

フッターのデザイン

フッターは、ホームページで目立つ場所を必要としないが、訪問者が必要とする可能性のある情報に適しています。ブランドロゴ、ウェブサイト名、簡単なブランド説明、ソーシャルメディアリンク、連絡先情報、カスタムナビゲーション、法的規約を表示できます。

1. 表示するブランド情報の決定

ロゴ、ウェブサイト名、ソーシャルメディアリンクを表示するかどうかを選択できます。ソーシャルメディアリンクのURLは"設定" → "コンテンツ"に入力する必要があります。フッターは、それらを表示するかどうかのみを決定します。

2. 説明とカスタムナビゲーションの追加

フッターの説明は、ブランドを1〜2文で再述するのに理想的です。カスタムナビゲーションは、FAQ、返金ポリシー、パートナーシップ情報、求人情報など、ヘッダーに必ずしも含める必要のない重要なページにリンクできます。

3. 連絡先情報の表示

フッターには、住所、電話番号、メールアドレス、営業時間などをオプションで表示できます。このデータは"設定" → "コンテンツ"から取得されます。電話番号には正しい国コードが含まれていること、メールアドレスに誤字がないこと、営業時間がお客さまにわかりやすいことを確認してください。

4. 法的リンクの追加

フッターには、利用規約、プライバシーポリシーページ、Cookie設定ポータルへのリンクをオプションで表示できます。法的ページのコンテンツと表示は"ページ" → "法的ページ"で管理します。

5. コピーライトテキストの入力

サイト全体 vs. ページ固有

ヘッダーとフッターは、デフォルトでサイト全体での使用に最適です。「サイト全体」が有効になっている場合、いずれかの変更は、そのモジュールを使用するすべてのページに影響します。これは、メインサイトナビゲーション、共有連絡先詳細、法的リンクに理想的です。

特定のページでスタンドアロンイベントページのような完全に異なるナビゲーションが必要な場合は、フォームで「サイト全体」を無効にできます。システムは確認を求め、他のページで使用されているコンテンツを個々のコピーに変換します。このアプローチは例外のために予約されるべきです。異なるヘッダーが多すぎると、訪問者を混乱させ、将来のメンテナンスコストが増加する可能性があります。

ヘッダーまたはフッターの非表示

「レイアウト」の目のアイコンを使用して、ヘッダーまたはフッターを一時的に非表示にできます。非表示にする前に、訪問者が引き続き必須のナビゲーション、連絡先情報、または法的リンクにアクセスできることを確認してください。それらを復元するには、表示を再度有効にするだけです。

ヒント

ヘッダーナビゲーションは、4〜6個の明確な項目に保ちます。選択肢が多すぎると訪問者を圧倒する可能性があります。
ヘッダーのプライマリボタンは、複数の競合する目標ではなく、単一の焦点を絞ったアクション（例：「予約」または「お問い合わせ」）に使用します。
フッターの連絡先情報がGoogleビジネスプロフィール、ソーシャルメディア、名刺と一致していることを確認します。
公開する前に、各ページを確認して、ナビゲーションリンクが正しい宛先にリンクしていること、および外部リンクが新しいタブで開くことを確認します。

よくある質問

いいえ。ヘッダーフォームでナビゲーション項目を手動で追加および順序付けする必要があります。これにより、メインナビゲーションに含めたくないページを除外したり、外部リンクを追加したりできます。

はい。「レイアウト」の目のアイコンを使用して表示/非表示を切り替えます。ただし、非表示にした後も訪問者が重要なページ、連絡先情報、法的情報を見つけられるようにしてください。

ヘッダーフォームのリスト内でナビゲーション項目をドラッグアンドドロップして並べ替えます。ページ管理のページ順序とヘッダーナビゲーションは別々に管理されます。両方を確認してください。

はい。まず、"設定" → "コンテンツ"でカスタムボタンを作成または編集し、テキストとURLを設定してから、ヘッダーでそのボタンを選択します。

フッターには、システム提供の法的規約ページとCookie設定ポータルをオプションで表示できます。まず"ページ" → "法的ページ"でコンテンツと表示を確認してください。