Webレイアウトの構成要素

 

 Web ページの共通要素

• ヘッダー
• ナビゲーション
• キービジュアル
• コンテンツ
• サイドバー
• フッター
• ユーザー登録などのユーザーにアクションを求めるもの。

 

上のサイトは、このINTERNET HACKの1ページ当たりの記事数を少なくして、少し圧縮したものです。
ほとんどのWordPressのテーマは、このようになっているかと思います。

情報のまとまり

• ヘッダー領域
• ナビゲーションの領域
• コンテンツの領域
• フッターの領域

構成要素

• コンテンツ
• サイトロゴやタイトル
• メインビジュアル
• ナビゲーション
• おすすめコンテンツ
• サイト内検索
• ユーティリティ
• 広告など

例として、PhotoshopなどのAdobeのホームページを持って来ました。

構成要素をサイトにどう配置するか

Webサイトは「使う」ことも目的となるため、定番の構成からかけ離れると、ユーザーが戸惑う原因ともなる。

レイアウトの対象が、ヘッダー領域、ナビゲーション領域、フッター領域であれば、反復の原則を利用し、Webサイト全体で同じレイアウトを採用した方が、一貫性のあるWebデザインを実現できる。

一方、コンテンツ領域であれば、ある程度、自由にレイアウトを考えることができる。

近接の原則

関連性の高い要素同士を近づけ、関連性の低い要素を離す。

関連性の高い要素同士を近づけることで、情報を適切に伝達できるようになる。

「情報を視覚化する」ための最初の作業

「内容の構造」を「視覚的な構造」に落とし込み、訪問者に情報の構造を視覚的に把握させやすくする。
同時に要素同士の関連性の強弱や重要性についても把握し、デザインに反映させる。
重要性を考慮せずにグループ化してしまうと、どのブロックが重要か判断できなくなってしまう。

重要なことは、訪問ユーザーにとって明確なグループ化が行われているか否かです。

使いにくいWebサイトの共通点は、情報が整理されていないことである。

利用者が直感的に操作できる仕組みを考えなければならない。

TOPページの役割

初めて訪問するユーザーに、そのサイトにどこにどんなことが書かれているのか、目的や概要を把握してもらうこと。

そのサイトの目的や役割によって、デザインやレイアウトは違う。

情報量の多いサイト

例）ニュース系サイト、ポータルサイト、コミュニティーサイト。

情報の検索性、読みやすさ、目的の情報の見つけやすさ、などを考慮したデザインでないといけない。

ブランディング、訴求目的サイト

例）メーカーの製品ページ、キャンペーンサイトなど。

ビジュアル要素に重きを置き、ビビットに、インパクトを持って、ユーザーにメッセージを伝えなければならない。

構成要素とレイアウト

レイアウト

左上

Webページのセーフティゾーン

Webサイトの最も重要な項目であるタイトルロゴやサイト概要のキャッチフレーズなどをレイアウトする。

目立たせたいコンテンツや使用頻度の高いインターフェースが優先的に置かれる。

ヘッダー領域

最もユーザーの目にとまりやすいエリア。

ここにそのWebページが何のページなのかを示すコンテンツを掲載する。

企業ロゴ、サイト・ロゴ、サービス名など。

サイト内検索やサイトマップ、お問い合わせ、ヘルプなどのユーティリティへのリンクを掲載しているサイトもある。

ナビゲーション領域

Webデザインにおいて、ナビゲーションのデザインは、とても重要である。

ナビゲーションの形式によって、レイアウトデザインは大きく変わる。

ナビゲーションは用途に合わせて様々なものがあり、どのタイプのナビゲーションを採用するかにより、レイアウト・デザインは、大きく変わる。

コンテンツ領域

Webサイトで主となる情報を掲載。

最新情報、ニュース、ユーザーにじっくり読んで欲しいコンテンツを掲載する。

フッター領域

サイト運営を行う上で必須となる著作権表示、会社・店舗の所在地、連絡先などの情報を掲載する。

サイトマップなどを表示するWebサイトもある。

 

フッターは、最後に辿り着くエリアであるため、そのほかのコンテンツへ誘導しやすく、ユーザーの回遊率を高めるため、様々な工夫を凝らしたサイトも増えている。

FacebookページやSNSなどへの誘導。

スマートフォン用のフッター領域では、ナビゲーションとしての役割の比重が大きくなる。

サイドバー

サブコンテンツや広告のエリア。

目出させたいキャンペーン広告などは、新着情報の記事内に埋め込んだり、メインコンテンツの領域にレイアウトされる。

構成要素とレイアウト

ヘッダー領域、ナビゲーション領域、フッター領域は、反復の原則を利用して、サイト全体で同じレイアウトを採用した方が、統一性のあるWebデザインを実現できる。

構成要素

ナビゲーション

ナビゲーションの役割

ナビゲーションの構造やデザインが悪いと、訪問ユーザーは、目的の情報に辿り着けず、サイト内で迷うことになる。

適切なナビゲーションとは、訪問ユーザーが迷うことなく、知りたい情報にアクセスできるようにデザインされたものです。

ナビゲーションの種類

• グローバルナビゲーション
• ローカルナビゲーション

グローバルナビゲーション

サイトの主要コンテンツへのリンクであるグローバルナビゲーションは、最も重要な要素と言える。

明確に認識できるデザインにすることが重要である。

グローバルナビゲーションの役割は訪問ユーザーをサイトのメインコンテンツへ誘導すること。

ローカルナビゲーション

通常、第2層以下のコンテンツページにに配置される。

同じ階層のページや1つ下の階層にあるページへ移動するためのナビゲーション。

そのほか、フッタナビゲーションやユーティリティナビゲーションなどもある。

メインビジュアル

サイトのトップページでは、比較的大きくビジュアルを利用し、ユーザーに視覚的にサイトを印象づける。

情報重視のポータルサイトなどでは、より多くの情報を提示しようと、ビジュアル要素を入れないという場合もある。

ロゴ

主にサイトの左上領域に配置され、サイト内のすべてのページの同じ位置において表示される。

同時に、ブランドのポリシーを表した短い言葉（ブランドステートメント）とマークを組み合わせて配置しているサイトもある。

トップページだけやや大きく、それ以外では小さめに表示する場合もある。

ロゴの種類

• シンボルマーク
• ロゴタイプ
• ロゴマーク

シンボルマーク

企業や製品、サービス、サイトなどを象徴する図柄。

ロゴタイプ

文字で表現。

ロゴマーク

シンボルマークとロゴタイプを組み合わせたもの。

タグライン（キャッチコピー）

商品やサイトを短い言葉で言い表したもの。

パンくずリスト

ページを見ているユーザーが迷子にならないように、ユーザーが見ているページを階層で表したもの。

他のITブロガーの方で装備している人もいますが、僕の場合、管理しているブログ全て階層が浅いのでつけていません。

ユーティリティ

サイト内検索、サイトマップ、、問い合わせ先、ヘルプなどがあり、サイトの総合掲示板の役割を果たしたり、サイトの機能を提供する。

情報量が多い大規模なサイトでは必須となる。

サイトの主要コンテンツへのリンクとは別に配置または異なるデザインを用い、少し控えめに表現する。

新着コンテンツより目立たせる必要はないが、サイト訪問者が求める時、目に付かなければならない。

通常、ヘッダ領域の右側かグローバルナビゲーションの右上、もしくはフッタ領域内に配置される。

 

レイアウトについてのためか、テキストに掲載されていませんでしたが、タブに表示されるファビコンも多くのタブからユーザーに認知されるため必要な要素ではないでしょうか。

WordPressの場合

WordPressの場合、サイドはウィジェットで、フッター、ヘッダーもウィジェットでリンクできるようになっているテーマもあります。

メインビジュアルは、ヘッダーという項目でヘッダー画像を装備できます。

ロゴもオプションでアップロードできるテーマも存在します。
また、Pluginでできるかも知れません。

ファビコンもテーマによりアップロードできるものがあります。
また、これは以前、利用していたのですが、ファビコンをアップロードできるようにするプラグインは幾つか存在します。

WordPressの構成要素

• 検索ボックス
• プロフィール
• 最近の投稿
• 人気記事
• 関連記事
• カテゴリー
• タグクラウド
• Google AdSense
• 広告
• 動画などリッチコンテンツ
• ソーシャルメディアのアイコン
• RSS
• アーカイブ
• メタ情報
• リンク
• 最近のコメント

などがあります。

それぞれ必要な構成要素は、個人用、企業用、業界別、ブログの用途、ジャンルによって異なるかと思いますが、ご自分でブログを運営されている方などは応用問題だと思い、是非どこへ配置すればいいかトライしてみてください。

という自身は、テーマ変更後、ほったらかしなのですが(^^ゞ

また、他のサイトを見る時に、どこに構成要素が配置され、そのため不便がないかなどチェックしてみてください。

では。

【参考図書】

[amazonjs asin=”4797354437″ locale=”JP” tmpl=”Small” title=”Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)”]

[amazonjs asin=”4844361813″ locale=”JP” tmpl=”Small” title=”すべての人に知っておいてほしい　WEBデザインの基本原則”]

[amazonjs asin=”4844360744″ locale=”JP” tmpl=”Small” title=”新版 プロとして恥ずかしくないWEBデザインの大原則 (インプレスムック エムディエヌ・ムック)”]

[amazonjs asin=”4844358146″ locale=”JP” tmpl=”Small” title=”プロとして恥ずかしくないWEBレイアウトの大原則 (エムディエヌ・ムック―インプレスムック)”]