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

Webサイトで参考になる メニューのデザイン・レイアウトまとめ
  • このエントリーをはてなブックマークに追加
  • 903

    follow us in feedly

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

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

スポンサーリンク

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

参考サイト: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/kodamajozo

参考サイト:http://www.dentsu.co.jp/電通ウェブサイト

7.ラウンド型

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

参考サイト:http://www.hakutsuru.co.jp/purupuru/ぷるぷるスパークリングゼリー

参考サイト:http://www.konan-wu.jp/
南女組 甲南女子大学情報・ータルサイト|甲南女子大学

まとめ

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

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

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

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

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

スポンサーリンク