• 0k
  • 0
ウェブデザイン \ 2016年2月9日

Webサイトの機能と魅力をアップ!:メニューデザイン6選

Webサイトの決め手はなんといってもユーザビリティ。その運命は、使いやすいナビゲーションメニューにかかっています。

道路標識と同様、ホームページの訪問者は探している情報にたどり着くために、メニューを頼りにしています。どんなデザインであっても、分かりやすいメニューは必要不可欠!Webサイトの機能を優先しつつ、トレンドを取り入れ、同時に魅力もアップさせるメニューデザインを、早速チェックしてみましょう。

メニューデザイン6選

横型メニュー

横型メニューは、世界中でWebサイト作成時のファースト・チョイス。シンプルでわかりやすくユーザビリティに優れています。Webサイトの上部にあり、よく使うWebブラウザからブログまで同じ仕様になっているので、ユーザーも慣れており、使い勝手はトップクラス。

また、各メニューの下に、サブメニューやドロップダウンメニューを構成する場合は、この横型メニューが最適です。

横型メニューのサンプルは、こちらのWixテンプレートをご覧ください。

横型メニュー

縦型メニュー

トレンドを取り入れたい方に、人気が高まってきた縦型メニュー。たいてい左手に縦に構成されているこの縦型メニュー、ユーザビリティにもデザイン性にも優れています。Webサイトの中央に大きな余白が生まれるので、特にブログを作成している方に人気があります。

ポイントは、タイトルの名前を短くすること。中央の余白スペースを活かすためです。

Wixで作成したホームページに、早速、この縦型メニューを使ってみたい方は、こちらから。縦型メニューのサンプルは、こちらのWixテンプレートをご覧ください。

縦型メニュー

固定ヘッダーメニュー

縦に長いページのWebサイトをお持ちなら、固定ヘッダーメニューがおすすめです。ぎっしりと詰まった情報を追いかけ、スクロールダウンした後でも、メニューはサイト上部に常に固定されていますので、閲覧者はいつでもそれを使用できるからです。

また、固定ヘッダーメニューであれば、違うページに移動しても必要な情報が見つけやすく、ユーザーフレンドリー。ロゴや連絡先など大切な情報をメニューに加え、ワンクリックで閲覧者がアクセスできるようにしましょう。

固定ヘッダーメニューのサンプルは、こちらのWixテンプレートをご覧ください。

固定ヘッダーメニュー

フローティングアンカーメニュー

もう目にしたことがある方もいらっしゃるかもしれませんね。最近のトレンド、フローティングアンカーメニュー。スクロールダウンする際に、メニューが付いてきて(フローティング)クリックすれば違うセクションへ飛べる(アンカー)この機能、縦長サイトやモバイルサイトに最適です。

Wixで作成したWebサイトに、フローティングアンカーメニューを使用するには、こちらを参考にしてください。

アイコンメニュー

百聞は一見にしかずと言いますが、アイコンメニューが直感的で分かりやすいのも同じ理由です。「ホームページ」「連絡先」と書く代わりに、「家」と「封筒」のイメージを試してみてはいかがでしょうか。ECサイトなら、ショッピングカートのアイコンを使えば、会計ページだと買い物客がすぐにわかってくれるでしょう。

アイコンメニューを使えば、他のサイトとちょっと違うというインパクトを与えることができます。ただし、テクノロジーに慣れていないユーザーには、逆にわかりにくい可能性があるので、注意が必要です。

アイコンメニューを上手に使った下記2点のWixサイトをチェックしてみてください。

アイコンメニュー

アイコンメニュー

フッターメニュー

ちょっと他のサイトとは違う演出をしてみたい方にオススメなのは、フッターメニュー。ページの下の部分にメニューを付けてめずらしいデザインに。サイト訪問者の印象に残ること請け合いです。デザインの流れ的に、ページの一点にフォーカスを当て、あとはすっきりと仕上げたい場合に最適なスタイル。

ポイントは、うっかり見逃されてしまわないように、フッターメニューは目立つ色使いにすること。

フッターメニューのサンプルは、こちらのWixテンプレートをご覧ください。

フッターメニュー

あなたが使ってみたいメニューデザインはどれですか? ホームページを作成し、実際に試してみましょう!

ライター: Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email