9、ドデカイラーメンのスペシャルサイトアイデアが浮かばない時に見てほしい、ユニークなナビゲーションを使ったサイト例9つHTML5やCSS3が発展を続けている今、Webデザインやアニメーションはますますダイナミックに進化しています。その変化を感じられる要素の一つがナビゲーションメニュー。インデックスとしての役割でなく、サイトのテーマやデザイン全体に関わる重要なパーツになっています。今回は、大胆で素敵なナビゲーションメニューを使った9つのサイトをご紹介します。1、BELOESUHOECM制作会社のWebサイトです。撮影機材がセットされたスタジオがトップページ。レフ板に見立てたメニューに赤いポインタが表示されていて、これをクリックするとそれぞれのページへ。独創的でインパクトの大きいアイデアです。2、Augustメニューアイコンをクリックすると、コンテンツを全ておおう大きなメニューボックスが現れます。マウスオーバーで見せる、一つひとつのアイコンのアニメーションはとてもユニーク。スマホでタップすると、一瞬アニメーションしてからページに遷移します。3、Jova画面いっぱいの背景画像の上にのったメニュー。マウスオーバーするとパタッと上に持ち上がるようにアニメーションします。シンプルなのに目をひき、それでいて背景のイメージも壊さない、優れたデザインです。JACONデザイナーさんのポートフォリオサイトです。幾重にもなったサークルの層が全てメニューになっています。マウスオーバーすると中心にテキストがフェード&ズームイン。トップのコンテンツがナビゲーションのみ、という大胆なサイトです。それぞれのページでは、スクロールでコンテンツが次々に表示されます。ページ遷移時のアニメーションも美しい。Brickell左上のメニューボタンから、右にスライドして出てくるメニュー。スタンダードなナビゲーションかと思えば、マウスホバー時に背景画像が3Dでアニメーションする仕掛けが施されています。6、DJZEFFミュージシャンのオフィシャルWebサイトです。上下左右に配置された三角形のボタンがナビゲーションメニューです。コンテンツ自体も斜めのラインや三角、ポリゴンを用いたデザイン。モノクロの背景画像の中に配置されたカラーのナビゲーションが、サイトを引き締めています。NANKAI南海電鉄のプロモーションサイトです。キャッチコピーもインパクトがありますが、その脇にさりげなく設置されたナビゲーションにも愛があふれています。スクロールすると電車が線路を走り、駅で停車するようなイメージ。OFFICEメニュー自体はアイコンとフォントを組み合わせただけのものですが、サイト全体との一体感がすごいです。トップページのナビゲーションは「そんなところに?」と言いたくなるような場所にありますが違和感はなく、むしろランダムな位置に各コンテンツへのリンクが配置されていることで、楽しい雰囲気を創り出しています。9、ドデカイラーメンのスペシャルサイトその名の通り、ベビースターのお菓子のスペシャルサイトです。「ドデカイモード」でメニューボタンをクリックすると、これでもかというくらい大きなフォントのメニューが迫ってきます。このままではコンテンツは読みづらいので、大迫力を楽しんだ後は「通常モードに切替」ボタンで通常サイズに戻って見てください。ナビゲーションのデザインに行き詰まった時に、アイデアをくれるかもしれません。日頃から、サイトのナビゲーションにも注目しておくといいですね。...WORDPRESSの新エディタ「Gutenberg(グーテンベルク)」とは?WordPressで新しいエディターがリリースされました。