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

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > 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)

クッキーで開閉状況を保持してくれる折りたたみメニューを実装するjQuery【jquery.listfolder.js】

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

マウスオンでにゅるっと広がるjQueryメニュー

スクロールすると特定の位置で固定されて更に スクロールすると固定が解除されるナビゲーションjQuery

スクロールすると画面の上部でメニューを固定するjQuery

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

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