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

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

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


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を触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

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