2017/10/14 ノウハウ

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

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

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

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

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

参考サイト：http://www.chez-tani.com/
洋菓子専門 CHEZ Tani シェ・タニ

参考サイト：http://designfesta.com/
デザインフェスタ

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

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/ bibiri

参考サイト：http://www.stvkohatu.co.jp/
札幌市の注文住宅｜高気密・高断熱で快適な住まい｜STV興発の家

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

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

参考サイト：http://seikatsusoken.jp/teiten/ 生活定点

参考サイト：http://www.kaku-ah.com/
京都市左京区の動物病院「かく動物病院」

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

5.タブ型

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

参考サイト：http://www.minnano-dap.jp/
みんなのデジタルアニマルパーク

参考サイト：http://www.saikyobank.co.jp/
西京銀行｜あなたのあしたに

6.ブロック型

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

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