ウェブページに固定表示させるエレメントの効果的な使い方
Post on:2011年9月9日
sponsors
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。
[ad#ad-2]
下記は各ポイントを意訳したものです。
はじめに
ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。
エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。
もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動的にユーザーの目を引きつける、ということを忘れないでください。
では、固定表示を巧みに利用したウェブページを見てみましょう。
ショーケース
ヘッダを固定表示
Freckles & Handsome
まずは、典型的な例です。ページをスクロールすると、ヘッダは決まった場所に表示されます。ヘッダにはロゴと主要なナビゲーションが含まれています。
Kisko Lab
これは「Slide and stick」と呼ばれるテクニックで、固定表示されたヘッダに含まれているナビゲーションは現在みているセクションをハイライトします。
Raise the Roof Productions
固定表示するエレメントの形状に変化をつけると面白い効果が得られます。このページでは3つのビジュアルのレイヤーを使用し、奥行きを出しています。
Welcome To The Water
このデザインは標準的なウェブデザインとレイアウトを少ししか採用していません。こういった使い方も面白い効果を生みだします。
フッタを固定表示
Unleaded Group
次にフッタを固定表示した例です。フッタには主に重要度の高いエレメントを配置します。
Envato
ここで一番注目すべきは、フッタにロゴがある点です。また、ドロップダウンメニューを備えているのも大きな特徴です。
Kiyuco
重要なエレメントとして、メールマーケティング用の入力フォームを配置するのも効果的でしょう。
[ad#ad-2]
サイドバーを固定表示
Jorge Rigabert
サイドバーは多くの場合、プライマリブランディングとナビゲーションを含んでいます。コンテンツと交差せず、ナビゲーションを保持するので機能的です。
More Hazards
重要なエレメントを配置した例です。ここでは、サイドバーで音楽を聴くことができます。
ロゴだけを固定表示
EDITD
ロゴだけを固定表示した例です。ページをどれだけスクロールしても常にロゴがビューポートに残ります。名前を覚えてもらうことは、非常に重要なポイントです。
Back to topを固定表示
overlapps
Back to topはページの最上部に導くリンクです。コンテンツに邪魔にならないよう、配置するのがポイントです。
多数のエレメントを固定表示
NetChillies.com
ここまでは、一つのエレメントのみ固定表示した例でした。これは、多数のエレメントを固定表示した例です。通常のレイアウトとはほど遠いですが、信じられないほど機能的になっています。
sponsors
