デザイン

デザイン

ハンバーガーメニューはもう古い?Webデザインに新たな風を吹き込んだ4種のメニューバー

273 views

ここ数年、ハンバーガーメニューはWebデザインのトレンドとして業界を席巻してきました。YouTubeやFacebookといった大手サイトでも、もれなくハンバーガーメニューが採用され、この量産型メニューは確かな利益をもたらし、手軽でコンパクトで直感的な操作を可能にしました。
 

一方で「ハンバーガーメニューは退屈だ」という意見もよく耳に入ります。

 

最近では、ハンバーガーメニューと同等の機能を有しながら見た目が大きく異なったものが生まれつつあります。ここでは、その中でもWEB業界に新たな風を吹き込むであろうものを実例と共にいくつか紹介したいと思います。
 
 

1. バーティカル状に並ぶ文字を使ったナビゲーション

バーティカル文字(垂直に並べられた文字)は最近生まれたばかりのトレンドです。

特筆すべきはその省スペースぶり。まるで線のようです。にもかかわらず、ビジュアル的にインパクトをもたらします。コンパクトでわかりやすく、そして刺激的。現代のデザインにおけるひとつの打開策ともいえるメニューです。

 

VR Sessionsのサイトはこのタイプのナビゲーションの成功例と言えます。

 

1-vr-sessions

 

このチームはナビゲーションを90度回転させ、固定パネルにはめこんでいるのが特徴です。

 

Snake River Interiorsのサイトではヘッダーは平凡ですが、スクロールしていくと画面左側にバーティカル状に刻み込まれたメニューを見ることができます。

 

2-snake-river-interior

 

 

2. 画面周辺にちりばめられたメニュー

このコンセプトを知ったあなたは、画面四隅に配置する、すなわち4つ程度のコンテンツしか持たない小規模のWebサイト用のメニューだと思いませんでしたか?

しかし、それは厳密には正しくありません。Proud and Punchのトップページを見てましょう。

 

3-proud-and-punch

 

画面内のそれぞれのコーナー部には大まかなセクションで分けたアイコンが配置されています。これは優先順位に特化してシンプルさを突き詰めた一つのかたちなのです。

 

一方で、Kygo Lifeのサイトでは上記のような制限は設けずに、出来る限り画面周辺のスペースを有効活用していることがわかります。

 

4-kygo-life

 

ホームページとは、ページの境目に配置された素材によって特徴づけられるものなのです。

 

 

3. 極細のスライドアウトメニュー

スライドバーは変化を遂げています。それは劇的なものではありませんが実に見違えるほどの変化です。

従来のものと比べ、今のスライドバーはなめらかで非常にコンパクトになりエレガントなものになりました。

 

Maison Ullensのポートフォリオサイトはその最たる例です。

 

5-maison-ullens

 

このホームページは2つのアンバランスなパートで構成されています。ひとつはメニューリンクが張られたロゴタイプを持つスライドバー。そしてもうひとつはコンテンツエリアです。

このメニューは、自然と「ウェルカム」エリアに目線が行くのと同時に、控えめながらも目を引くポイントが生み出されるところが強みです。

 

 

4. 浮かび上がるバーティカルメニュー

「今さら何を言ってるんだ」と思ったことでしょう。しかしハンバーガーメニューが量産されているこの時代において、逆にこの手法が目新しいものになっていきているのです。

このメニューは無地や透明な背景とともに用いられます。どこにでも配置することができますが、ロゴと共に使うのが強調するコツです。

 

Linmarkを例に挙げてみましょう。

 

6-linmark

 

このサイトでは古くからのバーティカルナビゲーションを使用していますが、常に画面右側に配置されています。どのページも意図的に右側を白くしておくことで、最適な読みやすさを追及した構成になっています。

 

Tvihorfのトップページではよくある平凡なバーティカルメニューが使われていますが、ひとつひとつ丁寧に(適切な位置に)設置されています。

 

7-tvihorf

 

精錬された、さわやかで緻密なメニューはロゴタイプを最大限に有効活用したものといえるでしょう。

 

 

さいごに

Webサイトでは細かなこだわりが大きなCVRの差を生み出します。

ここで紹介した4つのナビゲーションは、決してダイナミックなものでも、真新しくて難解すぎるものでもありません。ただ、ユーザーはこのメニューバーを見て、ユニークで斬新でオリジナリティあふれるメニューだなあと感じるでしょう。

 

 

この記事は「4 fresh alternatives to the hamburger menu」を翻訳・参考にしています。

関連記事

おすすめ記事