工藤

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

関連記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか？ CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化？2 他にないのだろうか？3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化？ しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう！

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに？2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

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

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

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

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