読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

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

list

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/

まとめ

いかがでしたか?今回は、ナビゲーションのメニューバーのデザインをまとめてみました。

探してみると、僕も意外と知らなかったサイトがあったので面白かったです。

初心者の方ほど、参考のサイトをよく見ると、すぐに状態に繋がるかと思います!

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら