バンクーバーのうぇぶ屋

怒涛のサイトナビゲーション総まとめ！事例、チュートリアル、参考サイト、僕の知る何もかもを紹介！

WEBデザイン

レスポンシブデザイン、パララックススクローリング、そういったレイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類も多様化してきていますね。

元々、縦、横、ドロップダウン、固定、メガメニュー等、サイトの構造によって様々なナビゲーションを提案してきたわけですが、最近サイトのレイアウトを考える時、話に上がるナビゲーションの呼び方とか、種類とか、大量多量過ぎてもう分け分けらなくなってきたので、ちょっと僕自身の復習と、参考サイトやらチュートリアルやらないかを全部まとめてしまいたかったので、僕と、僕の周りのデザイナーさん達の役にたてるよう、今回記事にさせてもらうことにしました！

実際にWEB制作に携わる中で、聞いたことのある物を分類させて頂くので、僕の勝手な分け方になってしまい申し訳ない限りなんですが、何かナビゲーションやレイアウトに悩んだ時にでも参考か何かにしていただければ嬉しい限りっす！

それでは、今回の記事はちょっと長くなってしまうと思いますので、先に謝ります！すいませんでしたー！！

 

よく話題に上がるナビゲーションの種類色々

それぞれ的確な名前がちゃんとあるのかもしれませんが、その辺りは良く分かりません。しかし、少なくとも僕が提案をする時に意識したこのあるナビゲーションの種類を思いつく限りとりあえず全部見返してみたいと思います！

横(Horizontal Navigation)

当然ながら、一番よく目にするナビデザインっすね。語る必要なしかと思いますが、グローバルナビゲーションとして、最も一般的に出回っているレイアウトじゃないでしょうか。

事例サイト

縦(Vertical Navigation)

サイトレイアウトや、導線の役割によっては、縦置きのナビゲーションだって当然沢山ありますね。日本語だと、縦文字なんてレイアウトもアリだから、縦文字で横置きとか、さらに柔軟性に富んでいる気がしますが…

事例サイト

チュートリアル

ドロップダウン(Drop Down)

マウス乗せたら、わーって出てくる奴。マウス乗せて下にぐいーんとアニメーションするものから、パっと出現するものなど色々あると思います。ナビゲーションの中にさらにナビゲーションを格納できるので、結構コンテンツ量のあるサイトでも、すっきり見せることが出来る、制作者にとっては超お馴染みのナビゲーションの種類かと。

ただ、一点これは個人的にも気を付けていることですが“マウスを乗せなければコンテンツを一望できない状況”がドロップダウンであることも同様に忘れてはいけないのかなと思います。Indexとしての役割を果たすトップページで、目次隠してどうするんじゃ！なんてことを聞いたこともありましたが、これはサイトの構造や、コンテンツのボリュームもプライオリティによって当然変わってくるし、一概に言えた話じゃないでしょう。

しかし、なんでもかんでもドロップダウンにしてしまうのも確かにおかしい話かなとも思います。ドロップダウンに入れてたメニューを、常に見えるようにしたら直帰率が減った！みたいなことはちょくちょく話に聞くような例ですし、コンテンツの量も、プライオリティも考えながら採用したい、意外と設計に頭を使うナビゲーションっすね！

事例サイト

アコーディオン(Accordion Navigation)

主に縦置きになってるナビゲーションで、開いたり閉じたりしてコンテンツを開閉する奴ですね。これまたよく見るかもしれませんが、ここらはjQueryなんか使って実装してるやつが多いでしょうし。チュートリアル系の参考サイトも載せておきます！

これまでの失敗というか、問題点として挙げられたのが、アコーディオンが長すぎてボタンなのか分からなかったり、特定の項目をページを開いた瞬間から開くよう設計していたら、他がアコーディオン式になっていることに気付いてもらえなかったとか、指摘されたことも色々ありました。かっこいいんですが、時と場合、挙動によっては逆にユーザーのイライラを生んでしまわないか心配！クライアントウケはいんですけんどねー。

Pure CSS3でアコーディオンナビ作るぜ！ってチュートリアルも見ますが、それはまた別の機会にー。

事例サイト

チュートリアル

固定ナビ(Fixed Position Navigation)

まぁ、ようするにPositionのFixedなわけですが。コンテンツが移動してもナビゲーションはつねに固定というやつですね！「ページのどこに居てもページ遷移できますよ！」ってのを売りにすることが多い気がするけど、逆にコンテンツ閲覧の邪魔になることを考えないと痛い目見る気が…

特にコンテンツ上部や下部に設置するときは、XGAサイズでもツールバー出まくりなブラウザで見た時、ナビゲーションしか見えて無いという痛い結果になることもあるって昔注意された。まぁ、ぶっちゃけ僕の周りだと最近XGAさえも小さいよねーって言われてるので、そろそろ無視しよっかなーなんて考えてたりしたりしなかったりですが…

事例サイト

アニメーションメニュー(Animation Navigation)

CSS3の表現力により、いきなりめっちゃ注目度が上がった分野かと。CSS3のみで結構なアニメーションが可能なので、参考サイトも合わせてチュートリアルをご覧くださいませ！実際の案件ではまだナビゲーションで使ったことはないんですが、とりあえず楽しいからよし！ただ、これやるとボタン部分のHTML構造がすごいグチャる。僕がまだまだ未熟なのも相成ってちょっとまだまだ個人的に検証が必要な分野っすー！

事例サイト

チュートリアル

レスポンシブナビ(Responsive Navigation)

レスポンシブデザインに合わせて、ナビゲーションの対応も色々騒がれていますね、ナビの種類ってわけじゃ無いのですが、対応例も結構多岐に渡るので、ご紹介までに！

レスポンシブデザインの各規定サイズに合わせ、どのような魅せ方がベストかを模索してる感じ、既にレスポンシブデザイン用のナビゲーションについてはある程度のパターンが見えてきているので、参考サイトも合わせて覗いておくとよろしいかと！

事例サイト

チュートリアル

縦スクローリングナビゲーション(Vertical Scrolling Navigation)

パララックススクローリングナビゲーション…って最初書いたけど、別にパララックスじゃなくてもあり得るので、止めた。正式な名前あるのかなぁ。

ようするに、スクロールに合わせてナビゲーション自体も変化するぜって奴。One Page Designが流行ってから、固定ナビ（Fixed Position Navigation）が流行したけど、パララックススクローリングが流行りだして、更に1ページで展開する表現に幅が出来たので、こういったスクローリングコンテンツに合わせたナビゲーションも最近良く見る気がします。

事例サイト

メガメニュー(Mega Menu)

北米のECサイトなんかで良く見るナビゲーションですね。ドロップダウン式に表示されるサブナビゲーションの中に更にカテゴライズされた大量のナビゲーションが格納されてる状況ですが、ECサイトとかだと深い階層の大量のカテゴリを表示してあげる必要があったりします。しかし、よく勘違いされやすいのですが、このナビゲーションは大量にコンテンツがある時だけが使うというわけじゃない。

このナビゲーションを採用しているサイトのの中には、そこまでカテゴリ量が多いわけではないのに、メガメニュ―を使い各ナビゲーションの存在感を増した使い方をしている物も多く見かけます。

例えば、 こちらのサイト はメガメニュ―内に4つのメインナビ、サブナビにGo Nowというボタンを合わせても、せいぜい5つくらいしかリンクはありません。「こんなのメガメニューじゃないんじゃない？！」って言われそうですが、Sitepointが2009年に「メガメニュ―くるよー」って言ってた時も上記サイトのキャプチャが参考事例に出されていたので、ここでも紹介させて頂きました。

加えて、欠点としてよく議題に上がるのは、ドロップダウン同様に“マウスを乗せなければコンテンツを一望できない状況”を作り易いことですかね。これまでメガメニュ―に入れていたリンクを、常に見えるようにしたら平均PVが上がったとか、良く聞く話かなと思います。大量のリンクを格納できるのは設計側としては大量の情報量を一気に格納できるすぐれた手段かもしれませんが、同時に大量の情報を一気に隠す状況であることもちゃんと意識したうえでコンテンツのプライオリティを考えて使いたいものです！（My 失敗談込み…）

事例サイト

参考コラム

 

もはや自由

いや、きっと自由とかそんな言葉では終わらない考えられた何かがあると思うんですが、型にハマらないって意味で…

事例サイト

 

さてさて、とりあえず思いつく限りのメニューやナビゲーションのレイアウトや形状、種類なんかを挙げさせてもらいました。最近ナビゲーション周りの話しをするときにとりあえずそんな名前耳にするなって物を適当にご紹介させて貰ってる感じです！

ちなみにお断りさせていただくと、各ナビゲーションの呼び方は正直曖昧でようわかりません！日本語読みをどうしていいのか分からない物も、そもそもこう呼ぶのか、正式名称があるのか分からない物も多いのですが、僕が制作の時に話に聞く／話すベースで、個人的な判断の元、勝手に分類させて頂きましたので、『正式な呼び方はこれだよ！』って言うのがあったら是非とも教えていただけると助かります！！

 

チュートリアル／リソース／Round-Up系サイト

加えて、ご存知の方も多いでしょうけれども、ナビゲーション関連はWEB業界の流れに非常に影響されやすく、サイトの技術にも、レイアウトの変化にも、柔軟に対応しなくては成らない。そんなわけで、少しでも早くそういった情報をゲットしようと、超大量のチュートリアルサイトやデザインのRound-Up（まとめ？）系の記事が非常に多いですね。

というわけで下記に、僕が知るナビゲーション関連の総まとめ系記事をご紹介させて頂きます。サイトのレイアウトを考える上でのナビゲーションのアイデア出しにもなるでしょうし、是非共有させて頂こうと思います。ま、要するにまとめのまとめって奴ですね！

 

30 CSS3 Menu and Navigation Tutorials and Techniques | Artatm – Creative Art Magazine

今年の春先の記事ですね、比較的あたらいしまとめ記事ですがCSS3関連のナビゲーションチュートリアルやテクニックがまとまってあります！CSS3を使った新しい表現を使ったメニューやアニメーション等、従来のナビゲーションには無い発見が色々見つかること必至かと！是非チェックしてみてくださいませ！

 

15 Fresh jQuery Menu Plugins and Tutorials

去年の春の記事ですが、今でもバリバリ使えそうなjQuery系メニューのプラグインやチュートリアルが掲載されています！

 

+108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} | Ginva

数はなんたらを制すのか分かりませんが、こちらも去年の春の記事！フリーのCSSメニューデザインが大量に紹介されていますが、その数なんと108種類オーバー！ヤバいですね。まとめ上げた人に感謝です！

 

100 Great CSS Menu Tutorials

CSSメニューのチュートリアルは僕自身、CSSでちょっと複雑なメニューを作ったりするときに死ぬほどお世話になってきました。なので勝手な経験則からのお話ですが、これらのチュートリアルはとにかく数みて数真似して、量を自分の引き出しにしていく考え方が大事なんかとおもいます。

そのため、僕はこういったチュートリアル大量まとめ系の記事は常にチェックして、他のデザイナーさんたちと多いに共有させてもらっていますし、これからも何かあればFacebookなりTwitterなりでご紹介して行ければと思います！

 

以上、いかがでしたでしょうか？

上に取り上げたナビゲーションの種類や、考え、参考となるサイトに関しても、他にもこんなの（こんな考えも）あるよ！という物があったら是非教えていただけると嬉しいです！よろしくお願い致します！

ちなみに、めちゃめちゃどうでも良い余談なんですが、僕にとってナビゲーションやメニューに関する記事を見た時は、春を感じる時期です（笑）

というのも、長年WEB制作に関する情報を集めまくっていて気がついたんですが、春になると何故かナビゲーションに関する記事が増える気がするんですよね。

完全に気のせいかもしれませんし、たまたまかもしれませんが、この時期になるとどうしてもナビゲーションに関して自分の考えを悔い改めたり、新しい表現を模索したりとしたくなる。

皆さん、そんな事思ったりしませんか？しませんかね？はい、変なこと言って本当にすいませんでした。

それでは、皆さん、良きナビゲーションライフをお楽しみにくださいませー！

関連する記事

人気記事 オススメ記事
Pagetop
© 2015 Frog Creator Production Inc. All Rights Reserved.