UIの新鮮なアイデアをチェック!デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
Post on:2015年7月2日
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。
アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-01.png)
上部のバーを引っ張ると、その量でナビゲーションのアイテムを選択できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-02.png)
CSS3 Animated, Responsive Navigation
デスクトップ時は通常の水平型、スマホ時はキャプチャの状態になり、アイコンからバーを表示しプルダウンという流れがかなりかっこいいです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-06.gif)
Elastic SVG Sidebar Material Design
SVGを使ったエラスティックタイプのサイドバーで、引っ張るというアクションと実際のアニメーションが一致しているのが気持ちいいですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-01.gif)
アイコンからアイテムが増殖するタイプで、デモページでは他に4タイプあります。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-02.gif)
滴のように落ちて、増殖するタイプ。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-03.gif)
三角形のアイテムを使った美しいデザインですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-04.gif)
シンプルなオフキャンバスながら、細かいアニメーションが非常に気持ちいいです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015063003-05.gif)
パタパタとアイテムが一つずつ開くアニメーションはかわいいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-03.png)
UI with UX Improvement with only CSS
Pure CSSで実装されたオフキャンバスのメニューで、アニメーションと斜めのカットが美しいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-04.png)
これもPure CSSのオフキャンバスで、斜めというか扇のように開くアニメーションです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-05.png)
Offcanvas sidebar menu with a twist
斜めを更にもう一つ、こちらは全体を斜めに傾けて表示するタイプです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-06.png)
コンテンツを奥にぐいーんと傾けて表示するタイプ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-07.png)
Line Menu Icon that Expands into Actual Menu
アニメーションで表示させる実際のメニューを小型化したアイコンでメニューが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-08.png)
六角形のアイコンから、六角形状にアイテムが広がるナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-09.png)
半透明のグラデーションが美しい水平型のナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015063002-10.png)
CSS Navigation Border Techniques
最後はシンプルで実用的なテクニック。
リストで実装された各アイテムの天地のボーダーのいろいろな指定方法。
sponsors