デザインの神は細部に宿る！最近のWebサイトで見かけるナビゲーションのアイデアのまとめ
Post on:2017年8月3日
sponsors
Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。
最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。
デザインに黄金比を取り入れることがあると思いますが、この発想はなかった！マウスのスクロール、キーボード操作で黄金分割されたコンテンツを次々に表示します。
その仕組みは、CodePenで公開されています。
ナビゲーションの今までの概念がくつがえされるかもしれません。
このサイトのナビゲーションには、2つの大きな特徴があります。まず一つ目は、中央にフローティングされたパネル型のナビゲーションです。上部に吸着させたり、横に吸着させたサイトはよく見かけますが、ど真ん中です！
コンテンツを選ぶナビゲーションですが、このサイトではうまく機能しています。
二つ目は、フルサイズの円形ナビゲーションです。
デザインのインパクトとアニメーションを伴う操作性が気持ちよく、一度見たら忘れないナビゲーションです。
こちらもフローティングされたナビゲーション。ミニマルなデザインにあったシンプルな操作性ながら、細かいインタラクションを楽しめます。最終的に表示されたコンテンツのデザインを継承するのも素敵なアイデアです。
ミュージックビデオのディレクターであるDiane Martel氏のポートフォリオ。
ポートフォリオのように数多くの作品を見せる際に、カード型レイアウトが人気がありますが、このサイトではまったく異なる方法で見せています。このナビゲーションだと数がいくつに増えても大丈夫ですね。
縦長ページ、しかも超長いページに採用されているスクロール操作を補助するナビゲーションです。操作性が快適なだけでなく、そのデザインも非常に美しくつくられています。
今度は横長ページです。ぱっと見、注目するナビゲーションはないように見えるかもしれません。実はページのロード時に操作方法が表示され、左隅の赤いドットがナビゲーションです。ビューポートが全体になり、ドットを移動させることでナビゲーションの役割を果たします。もちろん普通のスクロール操作も可能です。
スクロールとクリック、そしてホールド操作をつかったナビゲーションです。何をつかっても同様の操作ができる点が優れています。また、縦長ページのスクロールエフェクトにはお馴染みのパララックスだけでなく、グリッチが効果的に使用されています。
上部にあるシンプルなテキストベースのナビゲーションや大きな矢印が目立ちますが、注目すべきはコンテンツの内部や横に表示されるナビゲーションです。表示しているコンテンツごとに垂直・水平に配置を変化させ、また回転させ、最適に表示します。コンテンツをレイヤーを重ねるように表示するのも楽しいアイデアです。
ナビゲーションというべきか、絶対クリックしたくなるアクションボタンというべきか。ホバーすると、ふにふに動くので、どうしてもクリックしたくなります。左にあるハンバーガーメニューもデザインが素晴らしく、スクロールのエフェクトや開いた時の状態もよくできています。子階層の表示も面白いアイデアなので、ぜひ見てみてください。
最後は新感覚の水平型スクロールコンテンツ。キャプチャのコンテンツだけでなく、Projectsなど、さまざまな気持ちいい動きを楽しめます。一見ナビゲーションがないように見えますが、左横にハンバーガーメニューの水平型があるので、注目です。
sponsors
