2010年7月19日 
最近のウェブデザインのトレンドのひとつとして、ナビゲーション、メニューバーにアイコンを利用しているホームページ、ブログをよく見かけるようになりました。
見た目のデザインはもちろん、どのようなコンテンツがまとめられているか一目で分かりやすいという利点もあります。
海外デザインブログDesign Shackで、ユーザーに親切なアイコン付メニューバーを利用したホームページを30個まとめたエントリー「30+ Innovative Icon-Based Navigation Menus」が公開されていたので、今回はご紹介します。
どれも高品質なアイコンを利用しており、思わずクリックしたくなるデザインはウェブサイト制作のときにアイデアの参考になるかもしれません。
詳細は以下から。
ユーサビリティにも◎、アイコン付メニューバーを利用したウェブサイトまとめ
シンプルなピクトグラムアイコンをそれぞれカラフルなカラーリングでデザインされたメニューバー。
こちらもデザインブログのひとつで、型押し風デザインのアイコンを利用したメニューバー。
背景デザインに紙テクスチャを利用しているのでうまくなじんでいます。
スマートフォンのように並べられたメニューがユニークなウェブサイトのひとつ。
個人的にお気に入りのメニューバーのひとつがこちらなのですが、コンテンツを選択するとスポットライトで照らし出してくれます。
アイコンをすべて棚に並べた様な変わったデザインですが、カーソルを合わせることでツールチップで内容をそれぞれ表示しています。
ポートフォリオサイトなどで利用することが可能かもしれません。
Photoshopのインターフェース画面をパロディした面白いポートフォリオサイト。
ペンツールなどがそれぞれアイコンの代わりとなっています。
コンテンツをそれぞれ選択すると、シンプルでミニマルなアイコンが出現するメニューバー。
使われているフォントも親しみやすい印象を与えてくれます。
コンテンツに応じて初めて訪れたユーザーにも分かりやすいメニューバーの好例ではないでしょうか。
モノクロデザインで統一されたapple風メニューにカーソルを合わせることでカラフルに変化します。
メニューバーのスペースを広くレイアウトすることでクリックしやすいのもポイントです。
分かりやすいアイコンデザインだけでなく、絶妙なグラデーションを利用してデザインされたボタンは思わずクリックしたくなってしまいませんか。
こちらはショッピングサイトのひとつですが、カテゴリーごとにラフな手書き風アイコンを配置することでユーザーの商品選択時に便利です。
もっともユーザーの目につきやすいヘッダー左部分に高品質なアイコンを利用したメニューバーを配置した例。
フーバー時にグラデーションを反転させることで立体感を増すことができそうです。
コミック風アイコンを利用することでポップで親しみやすい印象を与えることができます。
どのホームページ、ブログもコンテンツと関連性のあるアイコンを利用しているケースが多いようです。
Photoshopのチュートリアルや最新情報などをお届けしているデザインブログのひとつで、こちらもコンテンツに応じて分かりやすいアイコンをメニューバーに使用しています。
縦形に配置されたメニューバーとなっており、コンテンツ別にシンプルなアイコンを加えています。
カラフルなストライプが印象的なシンプルでミニマルなウェブサイトのひとつで、メニューバーもとてもシンプルです。
apple風のメニューバーに高品質なアイコンと詳細情報を一緒に表示することで、ユーザーにも的確にメッセージを伝えることができそうです。
アイコンを使ったウェブサイト制作に使える素材まとめ
具体的な参考例をご紹介しましたが、ここからは実際アイコンを利用したウェブサイトを作成する時に使えそうなまとめエントリーをいくつかピックアップしています。
それぞれ用途、種類に応じてまとめていますので、制作するデザインに応じて参考にしていただくとよいかもしれません。
人気ホームページやブログに必要なUIデザイン用アイコンセット完全まとめ
あらゆるジャンルのアイコンをまとめたエントリーなので、サクッと確認したいときにオススメ。
シンプル、ミニマルなサイトデザインに使える無料アイコン31+セット保存版まとめ
人気の高いシンプルなアイコンのみをまとめたエントリー。
標識などに使われている絵文字「ピクトグラム」のアイコンセットいろいろまとめ
公共機関でも利用されているピクトグラムに的を絞ったアイコンが揃っています。
新しく公開されたアイコンをまとめたエントリーを定期的にご紹介しているのですが、その中でも高品質＆ユニークなデザインのアイコンが多く収録されているエントリーのひとつ。
人気ショッピングサイトに必要なアイコンセット18個完全まとめ
ショッピングサイトで利用できそうなアイコンをお探しの型にオススメのエントリー。
配送方法や決済方法などに対応してくれそうなアイテムが揃っています。
ミニアイコンは何かと便利なデザインパーツのひとつではないでしょうか。
お気に入りのアイコンが見つからない方へ
特定のデザインのアイコンをお探しですか。そんなときはアイコン専用検索エンジンをオススメしますよ。
どれも10万個以上の膨大なアイコンデータからまとめて検索することができるのできっとお気に入りのアイコンが見つかりますよ。
個人的によく利用しているアイコン検索エンジンなのですが、詳細検索など便利な機能が魅力でもあります。
詳しい操作方法などについてはこちらのエントリーで触れていますので参考にしてみてください。
こちらのサイトでは17万個以上のアイコンをまとめて検索することができます。
[参照元 : 30+ Innovative Icon-Based Navigation Menus - Design Shack]
