工藤

【デザイン】アイコン・イラストをあしらったメインナビゲーション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を触るのが好きです。よろしくお願いします。

関連記事

プログラミング

SharePoint REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。 今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。 目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示 前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。 慣れていない人にはわかりづらいですよね。 また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。 今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。 目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。 どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。 そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう 注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

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

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

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

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