ユーザーに親切なアイコン付メニューバーを使ったウェブサイト30個まとめ

30iconbasedmenu

 

最近のウェブデザインのトレンドのひとつとして、ナビゲーション、メニューバーにアイコンを利用しているホームページ、ブログをよく見かけるようになりました。

見た目のデザインはもちろん、どのようなコンテンツがまとめられているか一目で分かりやすいという利点もあります。

 

海外デザインブログDesign Shackで、ユーザーに親切なアイコン付メニューバーを利用したホームページを30個まとめたエントリー「30+ Innovative Icon-Based Navigation Menus」が公開されていたので、今回はご紹介します。

 

どれも高品質なアイコンを利用しており、思わずクリックしたくなるデザインはウェブサイト制作のときにアイデアの参考になるかもしれません。

 

 

詳細は以下から。

 

 

ユーサビリティにも◎、アイコン付メニューバーを利用したウェブサイトまとめ


 

WebLifting

シンプルなピクトグラムアイコンをそれぞれカラフルなカラーリングでデザインされたメニューバー。

icon-nav-13

 

 

WeGraphics

こちらもデザインブログのひとつで、型押し風デザインのアイコンを利用したメニューバー。

背景デザインに紙テクスチャを利用しているのでうまくなじんでいます。

icon-nav-14

 

 

Yanis Markin

スマートフォンのように並べられたメニューがユニークなウェブサイトのひとつ。

icon-nav-17

 

 

Steven Little Design

個人的にお気に入りのメニューバーのひとつがこちらなのですが、コンテンツを選択するとスポットライトで照らし出してくれます。

icon-nav-18

 

 

Daniel Marques

アイコンをすべて棚に並べた様な変わったデザインですが、カーソルを合わせることでツールチップで内容をそれぞれ表示しています。

ポートフォリオサイトなどで利用することが可能かもしれません。

icon-nav-19

 

 

Leonid Jack

Photoshopのインターフェース画面をパロディした面白いポートフォリオサイト。

ペンツールなどがそれぞれアイコンの代わりとなっています。

icon-nav-21

 

 

David Jonsson

コンテンツをそれぞれ選択すると、シンプルでミニマルなアイコンが出現するメニューバー。

使われているフォントも親しみやすい印象を与えてくれます。

icon-nav-1

 

 

BiteClub

コンテンツに応じて初めて訪れたユーザーにも分かりやすいメニューバーの好例ではないでしょうか。

icon-nav-3

 

 

MacRabbit

モノクロデザインで統一されたapple風メニューにカーソルを合わせることでカラフルに変化します。

メニューバーのスペースを広くレイアウトすることでクリックしやすいのもポイントです。

icon-nav-4

 

 

Toffeenut Design

分かりやすいアイコンデザインだけでなく、絶妙なグラデーションを利用してデザインされたボタンは思わずクリックしたくなってしまいませんか。

icon-nav-5

 

 

Narwhal.Co

こちらはショッピングサイトのひとつですが、カテゴリーごとにラフな手書き風アイコンを配置することでユーザーの商品選択時に便利です。

icon-nav-7

 

 

PixelResort

もっともユーザーの目につきやすいヘッダー左部分に高品質なアイコンを利用したメニューバーを配置した例。

フーバー時にグラデーションを反転させることで立体感を増すことができそうです。

icon-nav-8

 

 

Fishing Cactus

コミック風アイコンを利用することでポップで親しみやすい印象を与えることができます。

どのホームページ、ブログもコンテンツと関連性のあるアイコンを利用しているケースが多いようです。

icon-nav-9

 

 

Tutorial 9

Photoshopのチュートリアルや最新情報などをお届けしているデザインブログのひとつで、こちらもコンテンツに応じて分かりやすいアイコンをメニューバーに使用しています。

icon-nav-10

 

 

Envira Media

縦形に配置されたメニューバーとなっており、コンテンツ別にシンプルなアイコンを加えています。

icon-nav-11

 

 

Genocom Media Group

カラフルなストライプが印象的なシンプルでミニマルなウェブサイトのひとつで、メニューバーもとてもシンプルです。

icon-nav-23

 

 

Michael Hogenmiller

apple風のメニューバーに高品質なアイコンと詳細情報を一緒に表示することで、ユーザーにも的確にメッセージを伝えることができそうです。

icon-nav-24

 

 

アイコンを使ったウェブサイト制作に使える素材まとめ


 

具体的な参考例をご紹介しましたが、ここからは実際アイコンを利用したウェブサイトを作成する時に使えそうなまとめエントリーをいくつかピックアップしています。

それぞれ用途、種類に応じてまとめていますので、制作するデザインに応じて参考にしていただくとよいかもしれません。

 

人気ホームページやブログに必要なUIデザイン用アイコンセット完全まとめ

あらゆるジャンルのアイコンをまとめたエントリーなので、サクッと確認したいときにオススメ。

bestofuidesignicon1

 

シンプル、ミニマルなサイトデザインに使える無料アイコン31+セット保存版まとめ

人気の高いシンプルなアイコンのみをまとめたエントリー。

31minimalicon

 

標識などに使われている絵文字「ピクトグラム」のアイコンセットいろいろまとめ

公共機関でも利用されているピクトグラムに的を絞ったアイコンが揃っています。

8symbolsign

 

最近公開されたばかりの高品質な無料アイコン50セットまとめ

新しく公開されたアイコンをまとめたエントリーを定期的にご紹介しているのですが、その中でも高品質&ユニークなデザインのアイコンが多く収録されているエントリーのひとつ。

50newiconset4

 

人気ショッピングサイトに必要なアイコンセット18個完全まとめ

ショッピングサイトで利用できそうなアイコンをお探しの型にオススメのエントリー。

配送方法や決済方法などに対応してくれそうなアイテムが揃っています。

18ecommerceicon

 

ウェブデザインに使える無料ピクセルアイコン素材23個まとめ

ミニアイコンは何かと便利なデザインパーツのひとつではないでしょうか。

23pixeliconset

 

 

お気に入りのアイコンが見つからない方へ


 

特定のデザインのアイコンをお探しですか。そんなときはアイコン専用検索エンジンをオススメしますよ。

どれも10万個以上の膨大なアイコンデータからまとめて検索することができるのできっとお気に入りのアイコンが見つかりますよ。

 

Find Icons

個人的によく利用しているアイコン検索エンジンなのですが、詳細検索など便利な機能が魅力でもあります。

詳しい操作方法などについてはこちらのエントリーで触れていますので参考にしてみてください。

iconfinds

 

Icon Finder

こちらのサイトでは17万個以上のアイコンをまとめて検索することができます。

icon-nav-res-6

 

Icon Seeker

icon-nav-res-7

 

[参照元 : 30+ Innovative Icon-Based Navigation Menus – Design Shack]