I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > HP制作 > メニュー位置から見るホームページの基本的なレイアウト(2)

メニュー位置から見るホームページの基本的なレイアウト(2)

メニューバーは、サイトの閲覧者が必ず操作するものです。
メニューバーの位置によって、サイトの印象が決定づけられるといっても過言ではありません。

メニューバーの位置、形による印象の変化とサンプルを集めてみました。

  1. ミドルメニュー配置のサイトレイアウト
  2. トップメニュー配置のサイトレイアウト
  3. レフトメニュー配置のサイトレイアウト
  4. ライトメニュー配置のサイトレイアウト
  5. ボトムメニュー配置のサイトレイアウト

上記レイアウトの内、この記事では、レフトメニュー配置のサイトレイアウトライトメニュー配置のサイトレイアウボトムメニュー配置のサイトレイアウトを紹介します。

レフトメニュー配置のサイトレイアウト

メニューを左側に縦置きした場合のサイトレイアウトです。
メニューを片側に置くことでコンテンツを広く表示できます。
メニューを固定したり、サイト上部のメニュー表示と併用することで、スッキリした印象とユーザビリティの良さを保つことができます。

menu_left.jpg

 

慶應義塾大学SFC研究所
慶應義塾大学SFC研究所

左側のメニューが固定されて表示されています。
画面が小さくなるとメニューをスクロールできます。
メニューとコンテンツの色をはっきりとわけることでスタイリッシュな印象を与えることができます。

ブロードメディア株式会社
ブロードメディア株式会社

左側にアイコンメニューを表示しています。
画面のサイズによってサイトレイアウトが変更するレスポンシブデザインで、左メニューと上メニューが切り替わります。

left03.jpg
株式会社ドレスクリエイト

左側にメニューを固定で配置しています。
メニューを縦置きで表示すると、長い文字列もメニューとして利用できるようになります。
コンテンツ幅を縦に広くとっている分、大きな画像を配置したり小さな画像を複数配置するとよりオシャレに見えます。

 

 

ライトメニュー配置のサイトレイアウト

メニューを右側に縦置きした場合のサイトレイアウトです。
メニューを片側に置くことでコンテンツを広く表示できます。
メニューを固定したり、サイト上部のメニュー表示と併用することで、スッキリした印象とユーザビリティの良さを保つことができます。

ライトメニュー配置のサイトレイアウト

 

KIRIN ICHIBAN
KIRIN ICHIBAN

右側のメニューが固定されて表示されています。
コンテンツのみスクロールします。
メニューバーをクリックすると画面ごとにスムーススクロールします。

穂積繊維
穂積繊維

右側のメニューがコンテンツと同時にスクロールします。
メニューを片側に寄せると、トップまたはボトムに配置していたときよりも、メニューとして長い文字列を表示できるようになります。
コンテンツ幅を縦に広くとっている分、大きな画像を配置したり小さな画像を複数配置するとよりオシャレに見えます。

right03.jpg
人吉旅館

右側にメニューを固定で配置しています。
縦書きでメニューを並べると、横書きで並べるよりもスッキリした印象を与えられます。
コンテンツ幅を縦に広くとっている分、大きな画像を配置したり小さな画像を複数配置するとよりオシャレに見えます。

ボトムメニュー配置のサイトレイアウト

メニューを下側に横置きした場合のサイトレイアウトです。
メニューを下部に置くことでコンテンツを広く表示できます。
メニューを固定したり、サイト上部のメニュー表示と併用することで、スッキリした印象とユーザビリティの良さを保つことができます。

ボトムメニュー配置のサイトレイアウト

 

bottom01.jpg
猿田彦珈琲

画面をスクロールすると下側のメニューが上部に固定されて表示されています。
画面のサイズを変えても最初は最下部に表示されています。
コンテンツに背景として大きな画像を配置するだけでなく、クリックしやすいリンクやタイトルロゴを表示しておくと効果的です。

bottom02.jpg
なるほど舎

画面をスクロールすると下側のメニューが上部に固定されて表示されています。
画面のサイズを変えても最初は最下部に表示されています。
コンテンツに背景として大きな画像を配置するだけでなく、印象的な文章を表示しておくと効果的です。

 

 

記事移動

関連記事

メニュー位置から見るホームページの基本的なレイアウト(1)

ホームページの基本的なページレイアウト

飲食店ホームページのススメ~SNSを利用しよう

飲食店ホームページのススメ~グルメサイトとは

飲食店ホームページのススメ~「飲食店にホームページって必要ですか?」

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Restriction
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Tagcloud