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

I'll be NET BLOG

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

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

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

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

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

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

上記レイアウトの内、この記事では、ミドルメニュー配置のサイトレイアウトトップメニュー配置のサイトレイアウトを紹介します。

ミドルメニュー配置のサイトレイアウト

ホームページで一番よく見かけるサイトレイアウトです。
ヘッダーをアイキャッチやサイトのタイトルとして利用しています。
サイトの一番上にヘッダーがあり、その下にメニューバーを設置し、サイドバーやコンテンツを配置しています。
サイドバーの位置は左や右に変化する可能性はありますし、サイドバーのないデザインもあります。

ミドルメニューレイアウト

 

サイドメバーのないミドルメニューレイアウト

サイドメニューを配置しないミドルメニューレイアウトです。
メニューの下にコンテンツを広く利用することで、サイトのイメージを打ち出したり、様々なコンテンツを平等に紹介することができます。

JTウェブサイト
JTウェブサイト

JT(日本たばこ産業株式会社)公式ウェブサイトです。
ヘッダーにサイトタイトル・サイト内検索フォームを設置し、その下にメニューバーを設置しています。
メニューバーの下には大きな画像を配置し、サイトのイメージを決定しています。
その下には主要なコンテンツへのリンク画像を同じサイズで一覧表示することで、画面を遷移しやすくしています。

株式会社東芝ウェブサイト
株式会社東芝ウェブサイト

株式会社東芝公式ウェブサイトです。
ヘッダーにサイトタイトル・サイト内検索フォームを設置し、その下にメニューバーを設置しています。
メニューバーの下には大きな画像を配置し、サイトのイメージを決定しています。
画像の上にはニュースリリースを表示しています。
メイン画像の下に主要なコンテンツへのリンク画像を同じサイズで一覧表示することで、画面を遷移しやすくしています。

東宝映画ウェブサイト
東宝映画ウェブサイト

東宝の映画・映像サイトです。
ヘッダーにサイトロゴ、他グループサイトへのリンクを表示し、その下に大きな画像を配置し、サイトのイメージを決定しています。
画像上にメニューを配置することで、サイトの印象をモダンにしています。
その下にはインフォメーションを置き、サイトに関する情報を効果的に発信しています。
なお、サイトの背景色を黒にすることで、映画館にいるような印象を与えています。

サイドバーを置いたミドルメニューレイアウト

サイドメニューを配置したミドルメニューレイアウトです。
画面を見るとき、人の視線は左上から閲覧を開始します。
また、一般的には右利きの人が多いため、画面を遷移するためのナビゲーションとしてのサイドバーは右側に配置することが多いようです。
なお、画面を縮小したときに画面の右側に配置したものは見えなくなる可能性があるため、人の視線を集めたいものは左側に配置するのがベターです。

ゆうちょ銀行
ゆうちょ銀行

サイドバーを左に設置した場合のミドルメニューレイアウトです。
ヘッダーにサイトロゴ、簡易的なサブメニュー、サイト内の検索フォームを表示し、その下に大きな画像を配置し、サイトのイメージを決定しています。
画像下部にメニューを配置することで、サイトのトップ画面を強く印象づけています。
左側に各コンテンツへのクイックリンクとしてサイドメニューを配置しています。

セブン-イレブン
セブン-イレブン

サイドバーを左右に設置した場合のミドルメニューレイアウトです。
ヘッダーにサイトロゴ、簡易的なサブメニュー、サイト内の検索フォームを表示し、その下に大きな画像を配置し、サイトのイメージを決定しています。
左側のサイドバーは文字リンク、右側のサイドバーは画像リンクで、サイト内の遷移を簡単にしています。
サイドバーを左右に配置することで、情報量の多いサイトであることを印象付けられます。

SoftBankオンラインショップ
SoftBankオンラインショップ

サイドバーを右側に設置した場合のミドルメニューレイアウトです。
ヘッダーにサイトロゴ、簡易的なサブメニュー、サイト内の検索フォームを表示し、その下に大きな画像を配置し、サイトのイメージを決定しています。
右側のサイドメニューに画像リンクで、サイト内の遷移を簡単にしています。
左側のコンテンツ部分には、文字や画像などでサイトの内容を表示しています。

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

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

ミドルメニュー配置にも似ていますが、メニューを画面の最上部に表示するサイトレイアウトです。
サイドバーの位置は左や右に変化する可能性はありますし、サイドバーのないデザインもあります。
最近ではフルスクリーンのサイトデザインも多いですが、フルスクリーンの場合はメニューが邪魔にならないよう、サイトの上部や下部にメニューを寄せて配置しているようです。

東京ディズニーリゾート
東京ディズニーリゾート

サイト最上部にメニューを配置し、その下に印象的なスライドショーを展開しています。
メニュー下部のスライドショー部分を広くすることで、プルダウンメニューにサムネイルを使用してわかりやすく表示しています。

UNIQLO
UNIQLO

サイト最上部にメニューを配置し、その下に大きなスライドショーを展開しています。
メニュー下部のスライドショーと、スライドショー下部のサムネイルが連動しています。

apple
apple

サイト最上部にメニューを配置し、その下に大きなスライドショーを展開しています。
大きなスライドショーを置き、画像へリンクを貼っておくと、タブレットでも操作しやすいサイトになります。

記事移動

関連記事

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

クッキーで開閉状況を保持してくれる折りたたみメニューを実装する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】