top of page

ヘッダー、フッターの役割は?!使い方知ってる?!

みなさん、こんにちは!

株式会社ラジャのやよいです。

今回は、Wix のwebサイト制作に欠かせない、ヘッダーとフッターの機能についてご説明致します。

詳しくは、YouTube でもご説明しておりますので、こちらもご参考ください。

ヘッダー、フッターって何?

皆さんはそもそも、ヘッダーとフッターをご存知ですか?

Wix に限らず、ほとんどのホームページがこの二つを兼ね備えていて、画面キャプチャでわかりやすく箇所を説明すると、ここ⬇️です!



Wix ヘッダー

ヘッダー箇所(ページ一番上)


Wix フッター

フッター箇所(ページ一番下)

特徴としては、

全てのページに表示されるセクションで、主に、ユーザーがサイト内のページを移動しやすいよう必要な情報を設置します。

例えば、

・ロゴ

・サイトマップ(サイト内の全てのページ)

・会社概要

・SNSリンク

等が設置されていることが多いです。

フッダーとヘッターに上記のような情報を設置することで、

ユーザーさんのホームページ滞在時間が長くなり、SEO対策にも有効的です。

ヘッダーとフッターの編集方法

まずは、ヘッダーの構築方法をご説明します。

作業自体はとても簡単で、

パーツを編集画面に追加して、ヘッダーセクション(一番上のオレンジのセクション)にパーツを移動します。

普段制作している際は、パーツが青く縁取られていますが、

全ページに表示されるヘッダー(及びフッター)にパーツを設置すると、

パーツの枠がオレンジ色に変化します。



Wix ヘッダー

パーツが青く縁取られている


Wix ヘッダーの編集

パーツがオレンジ色に縁取られている

色が変われば、無事、ヘッダーにパーツの設置が完了です。

フッダーも編集方法は同じで、パーツがオレンジになったらきちんと全ページに表示されるようになります。

モバイル版のヘッダーとフッター編集

Wix 編集で欠かせない、モバイル版の編集についてもご説明致します。

モバイル版でも、ヘッダー/フッターの場所は変わりません(一番上と一番下)。



Wix モバイル版のヘッダー

モバイル版のヘッダー


Wix モバイル版のヘッダー

モバイル版のフッター

幅がPC版から狭まるため、幅に合わせてテキストサイズや配置を工夫します。

特にモバイル版で大切なこととしては、

スマートフォンで表示される一画面あたりの情報量を多くすることで、離脱率を下げ、滞在時間を長くします。

例えば、全ページに表示されるヘッダーが画面の半分ほどを占めてしまうと、

本当はもっと詳しく見たいホームページのコンテンツが画面内の半分しか見えない、となると、

ユーザーさんは「見ずらい」と感じ、離脱してしまいます。

(※編集のバグやヘッダーを理解されていない方で、結構この例は多いです)

WIx モバイル版のヘッダーのダメな例

モバイル版のヘッダーのダメな例

理想は、

ヘッダーはできるだけ細くコンパクトにまとめて、ページ内のコンテンツを見やすくしましょう。

まとめ

いかがだったでしょうか。

ホームページを制作する際、特にWix は簡単にパーツ設置ができるからこそ、

ヘッダーとフッターもとても簡易に構築可能です。

日本Wix 研究所では、Wix の機能面や運用面について、メディアやYouTube でも配信しているので、よかったら他の動画や記事も是非、ご覧ください。

また、

プロのサポートが必要な場合は、30分ほどのオンラインZoom ミーティングにて無料相談も承っておりますので、お気軽にご相談ください。


最後までご覧いただきありがとうございました。

閲覧数:27回
bottom of page