Webデザイン

ナビゲーションデザインの参考になるメニューバー28選!

list

メニューバーのデザインは、一体どんなのにするのが良いのでしょうか?

メニューバーのデザインはどうすれば良い?

サイト運営を始めた当初は、ナビゲーションとしてメニューを配置するにも、イマイチぱっとしたデザインにならないことも多いです。

実際筆者もそうでしたが、そんな経験をお持ちの方も、当サイトに訪問して下さった方の中には、いらっしゃるのではないでしょうか?

筆者自身も初めのうちは、とにかく色んなサイトを参考にしていました。そこで今回は、今振り返ってみて、どういうサイトを参考にするといいか?をまとめてみました。

ちなみに、「初心者で0からデザインについて学びたい!」という方には、TechAcademyCodeCampのデザインコースを1ヶ月学んでみるのも、勉強になるのでおすすめです。

おすすめのWebデザインスクール比較はこちら

それでは、実際に参考になるサイトを見ていってみましょう!

ヘッダー横メニュー(背景あり)

Odai

f51861ea694dc6e9b1ac3c601920a6a1 - ナビゲーションデザインの参考になるメニューバー28選!

http://voice-odai.jp/

docomo

9efc8114887509035636a8ec33323528 - ナビゲーションデザインの参考になるメニューバー28選!

http://information.nttdocomo-fresh.jp/

GIFT

7013d5ef3292b33021059a1ebd3ce8ba - ナビゲーションデザインの参考になるメニューバー28選!

https://www.hr-gift.jp/

いちみや皮フ科クリニック

7f4e2a1afc31be9b010397716b52484e - ナビゲーションデザインの参考になるメニューバー28選!

http://ichimiya-clinic.jp/

913

d3d0f7974b5883526c8389d847175001 - ナビゲーションデザインの参考になるメニューバー28選!

http://neufuntrois.com/

garDEN

cb0a00c337888b3b2711dbc834b7194a - ナビゲーションデザインの参考になるメニューバー28選!

http://gar-den.jp/

任天堂

6ccc1b5e37900bf57c9eeaa433d6aa50 - ナビゲーションデザインの参考になるメニューバー28選!

https://www.nintendo.co.jp/

baigie

0149d74128a61e1b42fb83f360981289 - ナビゲーションデザインの参考になるメニューバー28選!

https://baigie.me/

ヘッダー横メニュー(背景透明)

Geek Pictures

a9ff8463af9dba3a7c61ee883b225f3b - ナビゲーションデザインの参考になるメニューバー28選!

https://geekpictures.co.jp/

ファンプレックス株式会社

b631acb66600b89c1dec87afe73971f1 - ナビゲーションデザインの参考になるメニューバー28選!

https://funplex.co.jp/

Edge

97b4572ce82b909a2f97bc33ba742a86 - ナビゲーションデザインの参考になるメニューバー28選!

http://edgeofart.jp/

TechStyle

dc880902e7e1523bec94d13acf2ec836 - ナビゲーションデザインの参考になるメニューバー28選!

http://www.techstyle.com/

アールデザイン株式会社

939aa5cfaf0726f4af7c4aaaf7267e68 - ナビゲーションデザインの参考になるメニューバー28選!

http://ardesign.ne.jp/

Yatzer

a4f0119c5f3c85ce6c87922b0036b73c - ナビゲーションデザインの参考になるメニューバー28選!

https://www.yatzer.com/

ヘッダー下メニュー

日本大学生物資源科学部食品ビジネス学科

6eae89fb4d6802de23a7aa096cad76dc - ナビゲーションデザインの参考になるメニューバー28選!

http://hp.brs.nihon-u.ac.jp/~fbs/

Mr.リード

76995cf47ce5245d0494defb99bcabf7 - ナビゲーションデザインの参考になるメニューバー28選!

https://mr-lead.com/

Tanakacho

a15bfd12f98ac485d72d77063ceb1d07 - ナビゲーションデザインの参考になるメニューバー28選!

http://tanakacho.co.jp/

GINZA SIX

9ad4e8c3c87eaa3304c7313a5b046689 - ナビゲーションデザインの参考になるメニューバー28選!

https://ginza6.tokyo/

TAKAOKA TOKO

d983601cb15a1eb6c96a2dd29c918eb4 - ナビゲーションデザインの参考になるメニューバー28選!

https://www.tktk.co.jp/

ハンバーガーメニュー型

LSCM

03c8cd89303db224e8b11a96bff9b4d5 - ナビゲーションデザインの参考になるメニューバー28選!

http://www.littstar.co.jp/

Kundcase

Kundcase

クロッカンシュー

206786183f2c3c7f0c2d937d025be080 - ナビゲーションデザインの参考になるメニューバー28選!

http://www.zakuzaku.co.jp/

voicecream 奈良

3e8c44be670d0123c7b7ce3fe267acbe - ナビゲーションデザインの参考になるメニューバー28選!

http://voicecream.jp/

Gooqx

28e5f4bece0fa354aa5c429d4d74b240 - ナビゲーションデザインの参考になるメニューバー28選!

http://www.gooqx.com/

SEKAI 未来を広げるWEBマガジン

bc64f36a5e25d503f3ca4e89f7dff84b - ナビゲーションデザインの参考になるメニューバー28選!

http://toshin-sekai.com/

ヒーローヘッダー下

株式会社R4

021901c109763e71d049958dc16ce46c - ナビゲーションデザインの参考になるメニューバー28選!

http://www.r-4.co.jp/recruit/special/

桜十字病院

024ab77a8ee5f8bfd4521ae8805e385a - ナビゲーションデザインの参考になるメニューバー28選!

https://www.sakurajyuji.or.jp/

京都神社婚

0795236c14a936d95ad8998e681b7b37 - ナビゲーションデザインの参考になるメニューバー28選!

http://www.kyotojinjakon.jp/

ナビゲーションのメニューバーデザインのまとめ

以上になりますが、いかがでしたか?

今回は、ナビゲーションのメニューバーのデザインをまとめてみました。探してみると、筆者も意外と知らなかったサイトがいくつもあったので、面白かったです。

参考サイトをじっくり見てみると色々な発見がありますので、おすすめです。

また、冒頭にもご紹介しましたが、ウェブデザインを体系的に学ぶにはWebデザインスクールなどの活用がおすすめです。

一度体系的に学んでしまえば、そのスキルは一生物となりますので、何か新しいスキルを身につけようと考えている方は、検討されてみてはいかがでしょうか?

最後まで読んでいただき、ありがとうございました。