ナビゲーション・メニューまとめ

IT-PLUSさんに、隔週で連載させていただいている、『ウェブデザインの力

連載3回目の今回は、『アマゾンのリニューアルで考える効果的なナビゲーションの見せ方』というお題で、サイトのナビゲーション・メニューについて、すこし書かせていただきました。

今回の記事を書かせていただくにあたって、いろいろとサイトのナビゲーション・メニューについて調べたのですが、今回の記事に収まりきらなかったサイトを、せっかくなのでまとめてみました。

インスピレーション編

サイトのナビゲーション・メニューをデザインするのに、ちょっと参考になりそうな、ショーケース的なサイトをいくつか。

CSS Tabs and CSS Navigation Menus Showcase

サイトのナビゲーション部分に特化したショーケースサイト。とってもきれいなナビゲーションがたくさん紹介されています。


CSS Tabs and CSS Navigation Menus Showcase

Dynamic Drive CSS Library

コードや画像も公開されているので、初心者の方にも分かりやすい、CSSライブラリ。


Dynamic Drive CSS Library

Download our free & commercial CSS menus

コードや画像も公開されていて、さらにまとめてZipファイルで、ダウンロードできるCSSメニュー。


Download our free & commercial CSS menus

Collection of Web 2.0 Navigation Menus

少し前の記事ですが、とにかく大量にシンプルなタブ型のメニューがまとめられています。


Collection of Web 2.0 Navigation Menus

13 Awesome Javascript CSS Menus

こちらは、13種類のスクリプトとCSSを使ったメニューのサンプル。


13 Awesome Javascript CSS Menus

More Free CSS Navigation Menu Designs

シンプルな、タブ型メニューのサンプルです。


More Free CSS Navigation Menu Designs

The History of Amazon’s Tab Navigation

Amazonのサイトデザインの歴史が一目でわかるサイト。


The History of Amazon’s Tab Navigation

Five web 2.0 CSS menu tutorials

丁寧な解説付きのメニューのチュートリアルです。


Five web 2.0 CSS menu tutorials

CSS-Based Navigation Menus: Modern Solutions

とってもきれいな、タブ型のメニューがいっぱいまとめられています。


CSS-Based Navigation Menus: Modern Solutions

45 Photoshop Tutorials for Better Navigation

こちらは、Photoshopで作るメニューのチュートリアルがいっぱいです。


45 Photoshop Tutorials for Better Navigation

Stu Nicholls | CSSplay

とにかく大量のCSSサンプルがあります。


Stu Nicholls | CSSplay

ジェネレータ編

お手軽にナビゲーション・メニューが作れるメニュー・ジェネレータをいくつか

CSS Menu Generator

デザインを選んで、メニューの数、リンク先などを入力するだけで、コードと画像がダウンロードできるジェネレータ。


CSS Menu Generator

IzzyMenu

左側のパネルでメニューを作っていくと、右側にプレビューが表示されるメニュージェネレータです。


IzzyMenu

OverZone Software – CSS Tab Designer

こちらは、PCにインストールするタイプのメニュージェネレータです。


OverZone Software - CSS Tab Designer

Css Menu Generator – TabCreatr

左側のパネルから、デザインを選ぶと、右側にプレビューとコードが表示されます。


Css Menu Generator - TabCreatr

Tabs Generator

かわいいタブを作ってくれるジェネレータです。


Tabs Generator

デザインblogランキング

コメント 1 Comment »   はてなブックマーク   del.icio.us

この記事に関連する記事



One Response to “ナビゲーション・メニューまとめ”

  1. さと Says:

    IT-PLUSの今回の記事、特にAmazonの歴史が参考になりました。ありがとうございます。
    ただ、日本のオンラインマガジン?なので参考に提示するサイトは日本語のサイトの方がよかったんじゃないかな?とも思いました。

    あと、参考までですが、Appleのサイトはどこの世界もデザイナーには評価がいいようですが、少なくとも日本では?一般の方からはナビの作法が判らないと、すごぶる評判悪いようです(w

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ