2014年1月24日3 分

ホームページに固定ヘッダーを追加しよう

最終更新: 8月26日

Wixホームページエディタに、新しくヘッダーを固定できる機能が追加されました!ページをスクロールダウンしても、ロゴやトップメニューが常に表示できるようになります。

固定ヘッダーを追加することで、一つのページを読み終わり、次のページへ移動したいとき、メニューのあるページ上部まで戻る必要がなくなり、訪問者の手間を省くことで、ホームページのユーザーエクスペリエンス(UX)を向上できます。Wixを使えば、ヘッダーの設定画面から、クリック一つでかんたんに固定ヘッダーを追加できます。しかし、その方法をご説明する前に、まずは固定ヘッダーのメリットをもう少し詳しくご説明しましょう。

固定ヘッダーのメリット

すでに多くのホームページに取り入れられているこの固定ヘッダー。しかし、そのデザインがあまりに自然にサイトに溶け込んでいるため、その存在に気が付かない人も多いのではないでしょうか。

固定ヘッダーの人気は、最近のWebデザインでよく見かけるもう一つのトレンド「縦に長いスクロールページ」デザインに深く関わっています。1ページが長くなればなる程、ページのトップへスクロールして戻るのが、より煩わしくなります。メニューを含むヘッダーを固定することで、ユーザーは上下にスクロールを繰り返すことなく、自由にホームページを閲覧できます。つまり、ホームページがより快適になります。

以下に、固定ヘッダーを取り入れた素晴らしいホームページの例を3つご紹介します。

Red Antler >>

Fhoke >>

Ryan Scherf >>

あなたのホームページに固定ヘッダーを追加すべき?

では、固定ヘッダーをサイトに追加する前に、この機能があなたのホームページに向いているかどうかを決めましょう。以下の項目にあてはまるなら、固定ヘッダーを追加すべきです。

  • ホームページの1ページが比較的長く、全てのコンテンツを見るために、スクロールダウンする量が多い。

  • ページ数は多いが、全てのページを見てもらいたい。

  • 会社、団体、ブランドのホームページを持っており、ロゴやブランド名をページ上部に常に表示してブランドの認知度を高めたい。

  • ヘッダーのデザインが、スタイリッシュでどのページのデザインにもマッチする(一番下までスクロールダウンしても、ヘッダーがページに表示されていて不自然ではないか確認しましょう)。

こちらは、クリスマス風デコレーションを固定ヘッダーに含めたユニークかつ賢いデザインのWixサイトです。

Carnation Coquito >>

固定ヘッダーをホームページ追加する方法

では、早速、シンプルな操作で、Wixサイトに固定ヘッダーを追加する方法をご説明します。

  • 固定ヘッダーとして、常にページ上部に表示したいコンテンツ(ロゴ、メニュー、サイトタイトル、ソーシャルアイコン等)が全て、ヘッダー部分に追加されていることを確認してください。コンテンツをヘッダーに入れるには、そのコンテンツをヘッダー部分にドラッグ&ドロップするだけで、自動的にヘッダーに含まれます。

  • ヘッダーをクリックして、設定画面を開きます。

  • 「固定位置」の左にあるボックスにチェックを入れます。

手順はたったこれだけです!固定ヘッダーがホームページに追加されました。

ライター: Wix Team