DesignWalker

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

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

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

インスピレーション編

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

CSS Tabs and CSS Navigation Menus Showcase

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

Dynamic Drive CSS Library

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

Download our free & commercial CSS menus

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

Collection of Web 2.0 Navigation Menus

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

13 Awesome Javascript CSS Menus

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

More Free CSS Navigation Menu Designs

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

The History of Amazon’s Tab Navigation

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

Five web 2.0 CSS menu tutorials

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

CSS-Based Navigation Menus: Modern Solutions

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

45 Photoshop Tutorials for Better Navigation

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

Stu Nicholls | CSSplay

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

ジェネレータ編

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

CSS Menu Generator

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

IzzyMenu

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

OverZone Software - CSS Tab Designer

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

Css Menu Generator - TabCreatr

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

Tabs Generator

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