工藤

【デザイン】アイコン・イラストをあしらったメインナビゲーション30選

Webデザイン
  • このエントリーをはてなブックマークに追加

こんにちは、工藤です。
今回はアイコンやイラストをあしらったメインナビゲーションを集めてみました。


01.倉敷芸術科学大学情報発信サイト「つなぐ」

1倉敷芸術科学大学情報発信サイト「つなぐ」｜倉芸同窓会の情報ネットワーク
倉敷芸術科学大学情報発信サイト「つなぐ」
アイコンがテキストより大きめです。
マウスオーバーをするとまたちょっと雰囲気の違った画像を見ることができます。


02.渋谷再開発と東急建設

2渋谷再開発と東急建設｜東急建設
渋谷再開発と東急建設


03.Joha

3Joha
Joha
デンマーク発の子供服などを扱うサイト。イラストからマウスオーバー・クリックした際の動きもかわいいです。


04.淡路交通株式会社

4淡路交通株式会社
淡路交通株式会社


05.JA共済RECRUIT2016

5JA共済RECRUIT2016---2016年度新卒者採用情報
JA共済RECRUIT2016
メインナビが下にあって、マウスオーバーをすると入れ子になった項目が上にのびていきます。


06.流山中央病院

6流山中央病院｜医療法人-曙会（千葉県流山市）
流山中央病院


07.Lidea(リディア)

7Lidea-リディア----くらしとココロに、いろどりを。
Lidea(リディア)
アイコンにそれぞれ色がついているのが分かりやすいです。


08.HEP FIVE（ヘップファイブ）

8HEP-FIVE（ヘップファイブ）-大阪・梅田・赤い観覧車のファッションビル
HEP FIVE（ヘップファイブ）


09.日本赤十字社

9日本赤十字社
日本赤十字社


10.JAバンク

10JAバンク
JAバンク


11.しゅんおき！旬香周島おきなわ

11春のおきなわ---しゅんおき！旬香周島おきなわ
しゅんおき！旬香周島おきなわ
少し主題とズレてしまうかもしれないですがその季節になると『旬』とつくみたいですね。何よりすごくわかりやすくて好きです。


12.靴下専門店 Tabio（タビオ）オンラインストア

12靴下専門店-Tabio（タビオ）オンラインストア
靴下専門店 Tabio（タビオ）オンラインストア
それぞれサイズの違う靴下がかわいらしいです。


13.株式会社ブラシナ

13株式会社ブラシナ
株式会社ブラシナ



14.芦屋大学

14芦屋大学
芦屋大学


15.北九州市戸畑区 幼稚園

15北九州市戸畑区-幼稚園｜教学寺幼稚園
北九州市戸畑区 幼稚園
手書きの感じが好きです。マウスオーバーしたときも遊び心がある感じでお子さんも興味を示してくれそうな感じです。


16.社会福祉法人 翠福祉会

16社会福祉法人-翠福祉会
社会福祉法人 翠福祉会


17.WORK KIT

17東京のオフィスデザイン・レイアウトならWORK-KIT
WORK KIT


18.あだち歯科クリニック

18一般歯科-小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック
あだち歯科クリニック
一見歯が並んでいる…のですがマウスオーバーをするとアイコンがふわっとでてきます。


19.綾・早川農苑

19綾・早川農苑
綾・早川農苑


20.Fukuoka Facts

20Fukuoka-Facts---データでわかるイイトコ福岡
Fukuoka Facts


21.豆苗研究会

21豆苗研究会｜村上農園
豆苗研究会


22.ウシオデザインプロジェクト公式サイト

22USIO-Design-Project--02---ウシオデザインプロジェクト公式サイト
ウシオデザインプロジェクト公式サイト
石垣島についてのプロジェクト…ということで海をイメージしたナビゲーション背景の波のような形がいいですね。


23.名古屋市名東区の老人ホームケアーサービス株式会社

23介護職の求人情報掲載中　名古屋市名東区の老人ホームケアーサービス株式会社
名古屋市名東区の老人ホームケアーサービス株式会社


24.ハニー珈琲株式会社

24ハニー珈琲株式会社　--コーヒーエキスをプロデュース--
ハニー珈琲株式会社


25.玉名牧場

25熊本・玉名で、-自然の営み-をお手本とした酪農を行う牧場｜玉名牧場
玉名牧場


26.株式会社LITALICO（りたりこ）

26株式会社LITALICO（りたりこ）
株式会社LITALICO（りたりこ）


27.ディスカバー 豊岡

27ディスカバー-豊岡---豊岡市のイベント情報
ディスカバー 豊岡


28.病院で手の消毒100%プロジェクト

28病院で手の消毒100-プロジェクト
病院で手の消毒100%プロジェクト
独特のテクスチャがかったイラストが雰囲気が出ていて素敵ですね。


29.呉市広の保育園　横路保育所

29呉市広の保育園　横路保育所---すなおでおもいやりのある元気な子ども---一時保育
呉市広の保育園　横路保育所


30.ミルク王国ウチナダ

30「内灘町はミルク王国になりました」---ミルク王国ウチナダ
ミルク王国ウチナダ


参考にさせていただいたサイト様、ありがとうございました。
その時のデザインのテイストにもよりますが、アイコンやイラストがあった方が項目がわかりやすくなりますよね。
それでは。

執筆者：工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

マークアップ

WEBサイトのアクセシビリティ対応をしてみよう！【ダイアログ（モーダルウィンドウ）編】

以前公開した WEBサイトのアクセシビリティ対応では、全体的な考え方について触れました。 今回はその中でも利用頻度の高いダイアログ（モーダルウィンドウ）に焦点を当てて解説します。 ダイアログは、入力フォームの送信確認や画像の拡大表示など、Webサイトでよく利用される便利な仕組みです。 しかし、アクセシビリティ対応が不十分なまま実装されるケースも少なくありません。 特にキーボードだけで操作するユーザーや、スクリーンリーダーを利用するユーザーにとっては、誤ったダイアログの実装が操 […]

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい！けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか？ 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって？2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか？ 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します！ 目次1 Event Calendar […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。