Webレイアウトの構成要素

 

ページの領域

• ヘッダー
• コンテンツ
• フッタ
• サイド

 

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

情報のまとまり

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

構成要素

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

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

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

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

近接の原則

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

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

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

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

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

使いにくいWebサイトの共通点は、情報が整理されていないことである。
利用者が直感的に操作できる仕組みを考えなければならない。

構成要素とレイアウト

レイアウト

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

左上

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

ヘッダー領域

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

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

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

ナビゲーション領域

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

グローバルナビゲーションやメニューボタンなどを掲載。

ナビゲーションは用途に合わせて様々なものがある。

コンテンツ領域

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

フッター領域

一般的には著作権情報、コピーライト表記、サイトの機能を提供するリンクである会社情報、サイト管理者情報、問い合わせ、サイトポリシー（プラバシーポリシー、アクセシビリティポリシー）やメインコンテンツを補足するような内容のページやリンクを掲載。

サイドバー

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

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

構成要素

ナビゲーション

ナビゲーションの役割

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

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

ナビゲーションの種類

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

サイトの主要コンテンツへのリンクであるグローバルナビゲーションは、最も重要な要素と言える。
明確に認識できるデザインにすることが重要である。

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レイアウトの大原則 (エムディエヌ・ムック―インプレスムック)”]