Wixサイトを作成する中で、「自分（自社）のイメージに合ったカラーのヘッダーやフッターにしたい。」「フッターに情報を追加する等細かなカスタマイズ方法は？」といった疑問を抱えたことはありませんか？
ヘッダーやフッターは、サイトの中で目立つ部分ではありませんが、とても重要な役割を果たしています。Wixサイトであれば専門的な知識がない方でも簡単にカスタマイズできるので、本記事を参考にしながらご自身のイメージに合った編集をしてみましょう。
ヘッダー・フッターの役割とは？
ヘッダーやフッターは、基本的にサイトの全ページに表示されるため、会社名やページメニューを入れておくのが一般的です。以下では、ヘッダーとフッターそれぞれについて説明します。
ヘッダー＝最上部に表示される領域
ユーザーがサイトを訪れた際に最初に目に入る帯状の部分がヘッダーです。サイト訪問者が、ページを閲覧するかどうかを判断する重要な役割を果たす部分の一つなので、興味を惹くヘッダー作りが大切だと言えます。
基本的に必要な要素は、サイト名とグローバルメニューです。サイト名にはトップページへのリンクを付け、ロゴがある場合は活用するとよいでしょう。
グローバルメニューとは、サイト内に設置した主要コンテンツをまとめたメニューのことを指し、移動したいページを見つけるのに便利なパーツです。他にも呼び方は様々あり、以下の5種類が挙げられます。
グローバルナビ
ヘッダーナビゲーション
ナビゲーションメニュー
ヘッダーメニュー
メインメニュ
また、FacebookやTwitter等のSNSサイトとホームページを連携できるソーシャルバーを設置することで、サイト訪問者をSNSアカウントへ繋げることもできます。ヘッダーは、サイトの第一印象にも深く関わる部分なので、あまりごちゃごちゃさせずにシンプルにまとめるのがポイントです。
フッター＝最下部に表示される領域
フッターとは、WEBサイトの下部に常に表示されている要素のことを指します。フッターはサイトの一番下までスクロールしないと見えない場合がほとんどなので、その重要性を忘れがちですが、サイトの満足度や回遊性を高める大切な役割を担っています。
一般的にはサイトマップやWebサイトの運営者情報、コピーライトを記載する場合が多いです。集客が目的のサイトの場合は、お問い合わせボタンや予約ボタンといったコンバージョンへの導線作りも欠かせません。 フッターにソーシャルバーを設置する場合もあります。
情報量を多くしすぎるとサイト全体のデザインが崩れがちになるため、どういった要素が必要か考えることが大切です。魅力的なフッター構成で、サイト訪問者の満足度へと繋げましょう。
WIx エディタの基本操作
まずは、エディタの基本操作について説明します。Wixは、ドラッグ＆ドロップと文字入力ができれば編集できるシンプルな設計が魅力です。
画面左側のツールパネルには、ページの追加やパーツの追加、ブログの設定など、主にサイトを作るためのツールが配置されています。 ヘッダーやフッターの編集に関わるボタンは、最上部にある＋マークのボタンです。
＋ボタンからできること
テキストの追加
画像のアップロード
メニューの追加
ソーシャルバーの追加
等です。画面右側のツールパネルには、文字揃えや配置したパーツの大きさや一を微調整するのに役立つ機能が備わっています。 ヘッダー・フッター作成においては、左ツールパネルの方が多用するでしょう。
右ツールパネルが見当たらない場合は、編集画面右上にある「ツール」から「ツールバー」をクリックすると表示されます。それぞれのツールボタンにカーソルを重ねてみると、説明が表示されるので、迷うことなく操作できるのが嬉しいです。
ヘッダー・フッターの編集方法
エディタ全体の機能を理解したところで、実際にヘッダーやフッターを編集してみましょう。今回は、ネットショップサイトのサンプルを作成しながら説明します。
ネットショップ向けのテンプレートの「帽子・キャップ」を元に、自分好みのレイアウトを作っていきます。基本操作は他のテンプレートでも変わらないので、ご自身が目指すサイトのテンプレートを選択して作成してください。
初期設定のヘッダーは以下の通りです。↓
完成したヘッダーはこちら ↓
変更した箇所
サイトタイトルの変更
グローバルメニューの追加
ヘッダーの高さの調節
それでは順を追って説明します。
サイトタイトルの変更
編集したい文字をクリックし、文字を変更します。好みの文字サイズやフォントの変更、文字色や背景色の変更など、細かな設定が可能です。文字にカーソルを合わせてドラッグするか、右ツールパネルで数値を設定すれば位置の調節も簡単に行えます。
不要な文字パーツがある場合はDeleteキーで削除し、文字パーツを追加したい場合は左ツールパネルからテキストの追加を行いましょう。
グローバルメニューの追加
ヘッダーにグローバルメニューを配置すると、サイトが見やすくなる上、回遊率があがります。設置するときは項目を4～5つ程度に留め、すっきり見せることがポイントです。メニュー名もなるべく簡略化しましょう。
左ツールパネルの＋ボタンから「メニュー（・アンカー）」を選択します。おすすめメニュー、縦型メニュー、横型メニュー、アンカーメニューが一覧として表示されるので、お好みのデザインを選択してください。今回のサンプルサイトでは、横型メニューを使いました。
ドラッグ＆ドロップするだけで配置されるので簡単です。 メニューの内容を変更したいときは、カーソルをメニューに合わせてクリック→「メニューを管理」から編集できます。幅を変える際は、「レイアウト」から微調整が可能です。
ヘッダーの高さの調節
ここまで編集していくと、ヘッダーのバランスが気になってくると思います。高さ調節をするときは、ヘッダーの区切り線（点線）にカーソルを合わせると青いラインが表示されるので、そこをクリック→赤い線が出ることで、自由なサイズへと変更が可能です。無段階で細かく調節できるため、好みの高さが見つかりやすく便利です。
ヘッダーの種類
ヘッダー領域をクリックすることで、ヘッダーの種類を変更できます。
Wixで設定できるヘッダーの種類
スクロール
固定
隠す
フェードアウト
2013年頃から、ヘッダーを固定して常時表示させる「固定ヘッダー」を採用するサイトが増えました。ヘッダーを固定することで、サイト訪問者は探しているページへ手間なく移動できるメリットがあります。サイトからの離脱を防ぐのにも役立つのでおすすめです。
フッターの編集
続いて、フッターの編集方法について説明します。
初期設定のフッターは以下の通りです。↓
完成したフッターはこちら ↓
変更した箇所
テキストの変更
リンクの追加
ソーシャルバーの変更
フッターの高さの調節
背景色の調整
こちらも一つずつ説明します。
テキストの変更
フッターメニューのテキストや最下部のコピーライト部分のテキストを変更します。
コピーライトとは、「©＋文字」で表記される文字列のことで、著作権保護を示す証として使われます。 代表的な表記方法として以下の例が挙げられます。
「© 2022 COMPANY Ink.」の場合…
©：著作権
2022：発行年
COMPANY Ink. ：発行者名
発行年は、はじめて公開した年でも更新した年でも構いません。発行者名についても、個人名・法人名問わず、日本語表記でも問題なく表記可能です。
ヘッダー同様に、変更したい文字を選択して文字を打ち込むだけなので簡単です。エフェクトを付けることも可能ですが、なるべくシンプルにまとめるとフッターらしく仕上がります。
リンクの追加
テキストを選択することで、リンク設定が簡単に行えます。リンクを貼りたい文字をドラッグで選択→テキストを編集をクリック。リンクボタンからご希望のURLやサイト内のページを入力するだけで、簡単にリンク設定ができます。
お問い合わせやQ&Aなどのリンクを充実させて、サイトの信頼性を高めましょう。
ソーシャルバーの追加
SNSボタンが一列に並んだものを、Wixでは「ソーシャルバー」と呼びます。デザインが統一されているので、すっきりしたデザインになります。お好みのソーシャルバーをドラッグ＆ドロップするだけでOKです。
配置したソーシャルバーにカーソルを合わせれば、アイコンの大きさを変えることもできます。
初期設定では、6つのSNSボタンが設置されていますが、不要なアイコンは「ソーシャルリンクを設定」から削除できます。
より好みのアイコンを希望する場合や一度消してしまったアイコンを再度入れたい場合は、「アイコンを追加」から検索し設定することも可能です。メインカラーを絞って検索したり、TwitterやPinterestなど具体的なSNS名で検索もできるので大変便利です。
左右の順序を入れ換える際も、このページから設定できます。アイコンにカーソルを合わせ、ドラッグ＆ドロップすることで簡単に入れ替わるので操作しやすいです。
表示させるSNSボタンが決まったら、それぞれのアイコンを選択してURLを設定しましょう。リンク先にソーシャルメディアのURLを入力します。最後に「完了」ボタンを押せば、あっという間にリンク設定が終わります。
フッターの高さの調節
ヘッダー同様にフッターも高さを調節し、全体的なバランスを整えましょう。 ヘッダー領域の点線にカーソルを合わせて上下に動かすだけでOKです。
背景色の変更
フッターのカラーを設定することはサイト全体の印象を引き締めるためにも大切な操作です。
フッターを濃い配色にするとページ全体のバランスが取れて安定感へと繋がります。また、ぱっと見でここから下はフッターと判断できるので、ぜひご自身のウェブサイトのトンマナを考えながらカラー調節してみてください。
まとめ
Wixを使えば、ドラッグ＆ドロップするだけで簡単にヘッダーやフッターのレイアウト変更が行えます。テンプレートが豊富に用意されているので、目的に合ったデザインを選んで、あとは微調整するだけ。あっという間に自分のウェブサイトが完成するので、ホームページ作成に困っている初心者の方にもおすすめのツールです。
ヘッダーやフッターを作る際は、全体的なバランスを考えて作成することが大切。ヘッダーにはメニューを、フッターには導線作りになるお問い合わせボタンなどを設置するのがおすすめです。 これらのポイントをおさえて、ぜひ気軽に理想のホームページを作ってみてください。