UIの新鮮なアイデアをチェック!デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ

最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。

アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。

デモのキャプチャ

Pull Menu

上部のバーを引っ張ると、その量でナビゲーションのアイテムを選択できます。

デモのキャプチャ

CSS3 Animated, Responsive Navigation

デスクトップ時は通常の水平型、スマホ時はキャプチャの状態になり、アイコンからバーを表示しプルダウンという流れがかなりかっこいいです。

デモのアニメーション

Elastic SVG Sidebar Material Design

SVGを使ったエラスティックタイプのサイドバーで、引っ張るというアクションと実際のアニメーションが一致しているのが気持ちいいですね。

デモのアニメーション

CSS Gooey Menu

アイコンからアイテムが増殖するタイプで、デモページでは他に4タイプあります。

デモのアニメーション

Herique de Oliveira

滴のように落ちて、増殖するタイプ。

デモのアニメーション

Triangle Sidebar Menu

三角形のアイテムを使った美しいデザインですね。

デモのアニメーション

off canvas menu

シンプルなオフキャンバスながら、細かいアニメーションが非常に気持ちいいです。

デモのアニメーション

Side Menu Staggered Animation

パタパタとアイテムが一つずつ開くアニメーションはかわいいですね。

デモのキャプチャ

UI with UX Improvement with only CSS

Pure CSSで実装されたオフキャンバスのメニューで、アニメーションと斜めのカットが美しいです。

デモのキャプチャ

Slide in menu

これもPure CSSのオフキャンバスで、斜めというか扇のように開くアニメーションです。

デモのキャプチャ

Offcanvas sidebar menu with a twist

斜めを更にもう一つ、こちらは全体を斜めに傾けて表示するタイプです。

デモのキャプチャ

Navigation reveal idea

コンテンツを奥にぐいーんと傾けて表示するタイプ。

デモのキャプチャ

Line Menu Icon that Expands into Actual Menu

アニメーションで表示させる実際のメニューを小型化したアイコンでメニューが表示されます。

デモのキャプチャ

Hexagon menu

六角形のアイコンから、六角形状にアイテムが広がるナビゲーション。

デモのキャプチャ

Transparent Menu Bar

半透明のグラデーションが美しい水平型のナビゲーション。

デモのキャプチャ

CSS Navigation Border Techniques

最後はシンプルで実用的なテクニック。
リストで実装された各アイテムの天地のボーダーのいろいろな指定方法。

top of page

©2017 coliss