工藤

【デザイン】アイコン・イラストをあしらったメインナビゲーション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サイト制作

制作会社が考える、WordPressとオリジナルCMSの選定ポイント

弊社では「WordPress」を使った制作と、弊社のオリジナルCMSツール「ProG（プログ）」を使った制作の、いずれについても多くのご相談をいただいています。 それぞれにメリットがある一方で、運用時に気を付けるべき点もあり、サイトの目的や運用方法によって向き・不向きがあります。 この記事ではそれぞれの特徴を整理しながら、WordPressとオリジナルCMSを併用できるケースについてもご紹介します！ 目次1 WordPressを使用するメリット1.1 多機能で自由度が高い1. […]

WordPress

本当に使う機能だけを残した、シンプルなWordPressのSEOプラグインを作成しました

WordPressでSEO周りの設定が簡単にできる、SEOプラグイン。 SEO対策には便利ですが、設定項目が多すぎて「どこを触ればいいのか分からない」と感じることはないでしょうか？ そこで今回、社内の案件用にシンプルなSEOプラグインを作成してみました。 『最低限の設定のみでシンプルに』というのが今回のテーマです。 今回の記事では「どんな考え方で設計したのか」といった、制作背景などを紹介していきます。 ※本記事ではコードの全公開やダウンロードは行いません 追記：無事リリースで […]

プログラミング

SharePoint CSSとJSを入力できるWEBパーツを作る（モダンUI向け・SPFx）

SharePointのモダンUIで、SharePoint Framework（以降SPFx）という技術を使用し、CSSとJSを入力できる独自WEBパーツを作ります。 旧来のクラシックUIではスクリプトエディターと呼ばれていたWEBパーツを再現します。 目次1 前提条件2 WEBパーツの作成手順3 1.環境構築4 2.SPFxプロジェクトを作成4.1 VSCodeでフォルダを開く4.2 ターミナルを開いてコマンドを入力4.3 質問1：プロジェクトの名前を入力4.4 質問24.5 […]

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

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

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

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