Webサイトで見るメニューのレイアウト・デザインいろいろ

Webサイトで見るメニューのレイアウト・デザインいろいろ
Webサイトで見るメニューのレイアウト・デザインいろいろ

サイト製作では必須なぐらい頻繁に登場するメニューですが、レイアウトやデザインはさまざまですよね。毎回どういうものを作るか迷います。というわけで、世の中に出回っているメニューデザインでよく見るパターンを知っている限りご紹介したいと思います。あー、そういえばこんなレイアウトもあるなーという参考になればと思います。ではどうぞー。

※03/23に参考サイトを追加しました。はてぶトップにも掲載されました!

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://www.challenge-okeihan.net/
チャレンジ!おけいはん|京阪電気鉄道株式会社

参考サイト:http://www.fe-p.jp/
Fashion Earth Project   ファッション アース プロジェクト

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

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

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

参考サイト:http://tomomonogatari.com/
広島・鞆の浦   日本でもっとも癒される港町   【鞆物語】

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

参考サイト:http://www.onemusiccamp.com/
ONE Music Camp 2012

参考サイト:http://www.quzilla.jp/
くじらWeb  Web運営者必須ツール、Web素材、アクセス解析、営業支援、SEOツール  TOPページ

5.タブ型

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

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

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

参考サイト:http://www.tokyo-skytree.jp/
東京スカイツリー TOKYO SKYTREE

6.自由配置型

勝手に名づけちゃってますが、よくある上部メニューは排除、もしくはシンプルなものにしてメイン画面に大きく自由な配置をしているレイアウト。画面全体をうまく使ったレイアウトが多いですね。

参考サイト:http://www.kklc.jp/
長野県 駒ヶ根市の産婦人科・女性内科 【駒ヶ根高原レディスクリニック】

参考サイト:http://www.toli-life.com/
東リのインテリア情報サイト TOLI LIFE.com

参考サイト:http://www.cosmo-oil.co.jp/recruit/newgraduate/
コスモ石油   新卒採用サイト

7.ブロック型

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

参考サイト:http://www.hadalabo.jp/
肌研(ハダラボ)R   ロート製薬株式会社

参考サイト:http://jam-p.com/
印刷で遊ぶ。印刷と遊ぶ。   レトロ印刷JAM

8.ラウンド型

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

参考サイト:http://givery.co.jp/special/
givery RECRUITING SITE Synapse ツナガリ うごかす

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

参考サイト:http://www.qript.co.jp/株式会社Qript(クリプト)

参考サイト:http://smart4me.net/簡単スマートフォンサイト制作(無料版/ビジネス版)【smart4me】

というわけで色々な種類に分けて紹介してみました。こうやって見てみるとメニューひとつとっても様々な表現が出来そうですよね。作るサイトによって必ずぴったりと合うレイアウトやデザインがあると思うので、迷った時の参考になればと思います。普段作らないようなメニューもあると思うので、時には違ったデザインに挑戦してみるのも楽しいと思います。それではー!!

関連記事を読む

Webサイトで見るメニューのレイアウト・デザインいろいろ

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]