Webサイトで参考になる メニューのデザイン・レイアウトまとめ

   

サイト製作では必須といってもいいメニューですが、レイアウトやデザインはさまざまですよね。毎回どういうものを作るか迷います。

というわけで、メニューデザインでよく見るパターンを知っている限りご紹介したいと思います。あー、そういえばこんなレイアウトもあるなーという参考になればと思います。ではどうぞー。

1.シンプルな横書きテキスト（テキスト画像）

一番多いのがこのパターンでしょうね。作るのも簡単だし、背景や色、余白のとり方次第でバリエーションも色々作れます。場所もとらずスッキリした印象になるので、どんなデザインにもあわせやすいと思います。

参考サイト：http://www.chez-tani.com/

参考サイト：http://designfesta.com/

参考サイト：http://woweb.com/

2.縦書きテキスト

和風のサイトによく使われているのがこの縦書きテキストのメニュー。よく見かける横書きテキストよりも使っているサイトが少ないので、これだけでもちょっと目を引く感じになります。縦書きだと必然的に縦幅を多くとることになるので、ゆったりした雰囲気になりやすいですね。

参考サイト：http://www.nishino-kinryo.co.jp/

参考サイト：http://www.hanamaruudon.com/

参考サイト：http://www.ishida-glass.com/

参考サイト：http://www.toyodaya.com/

3.英語と日本語の組み合わせ

英語メニューと日本語メニューを一緒に載せたメニューもよく見かけますねー。英語メニューだけだと一瞬何のメニューなのか分かりにくいですけど、日本語でも書いているとパッと見て分かるので一緒に載せるのは分かりやすいと思います。オシャレさと実用性を兼ね備えた感じですね。英語メニューだけだと見た目はオシャレですが、メニューとしての機能だとちょっと分かりづらいかな？という印象がします（日本語のサイトに使う場合の話です）。

参考サイト：http://beedancing.jp/

参考サイト：http://menya-bibiri.net/

参考サイト：http://www.stvkohatu.co.jp/

4.アイコン（イラスト）と組み合わせる

アイコンは読む必要がないので直感的に伝わりやすくて便利ですよね。アイコンひとつとってもサイトによっていろんなテイストがあるので見るのも楽しいし、デザインの一部としての役割もしてくれます。メニューにアイコンが使われているだけで、サイトの雰囲気もぐっと良くなるので個人的には好きなメニューです。

参考サイト：http://seikatsusoken.jp/teiten/

参考サイト：http://www.kaku-ah.com/

参考サイト：http://www.tokyo-skytree.jp/

5.タブ型

今ではブラウザで実装されていることが多いタブですが、サイトのメニューで使ってもページが切り替わった感じが伝わりやすくて良いですね。メニュー部分とメインコンテンツとなる部分が一体化した感じになるのでまとまりも出やすいです。

参考サイト：http://www.minnano-dap.jp/

参考サイト：http://www.saikyobank.co.jp/

6.ブロック型

ブロック状のメニューを大きく並べたり積み木のように組み合わせたレイアウトは、目に付きやすくきっちりとした印象になります。同じサイズを並べることで落ち着いた感じに、強弱をつければメリハリがつきます。メニューそのものがトップページのメインになる場合は、自然とそれぞれのページを見てもらえやすいという利点がありますね。

参考サイト：http://www.kodamajozo.co.jp/

参考サイト：http://www.dentsu.co.jp/

7.ラウンド型

丸を使ったデザインはここ数年で沢山見かけるようになりました。やわらかい印象を与え、丸というカタチ自体がボタンらしさを演出しています。CSS3でラウンドを簡単に表現できるようになったので、これからもっと増えるでしょうね。

参考サイト：http://www.hakutsuru.co.jp/purupuru/

参考サイト：http://www.konan-wu.jp/

まとめ

というわけで色々な種類に分けて紹介してみました。

こうやって見てみるとメニューひとつとっても様々な表現が出来そうですよね。作るサイトによって必ずぴったりと合うレイアウトやデザインがあると思うので、迷った時の参考になればと思います。

他にもまだまだ参考になるサイトを見たい！という方はデザインギャラリーを活用してみてはどうでしょうか。別の記事でおすすめのギャラリーサイトをまとめているのでチェックしてみてください。

【2017年度版】Webデザインのギャラリーサイトまとめ

普段作らないようなメニューもあると思うので、時には違ったデザインに挑戦してみるのも楽しいと思います。参考になれば幸いです。それでは！

• 人気記事【厳選】転職したいWebデザイナーにおすすめの転職サイトは3つだけ
• 人気記事色とは？色の意味・イメージ・心理効果まとめ。