§1 - レイアウト

1-1 レイアウトの基本

▼レイアウトって何?
WEBサイトの目的は、訪問者へ情報を正確にストレス無く伝える事です。
そのために、情報を伝わりやすい形に配置する作業をレイアウトと言います。
具体的には、何をどこにどんなサイズで、と言った内容になります。
製作者のみが満足する様な、見た目のインパクトのみを重視して気を引く事は最優先されるものではありません。
レイアウトとはセンスだの何だのといったモノで行うものではないという事です。

サイトの構成要素
・ビジュアル要素
画像、バナー、サイトID、ロゴ、ナビゲーションパーツなど。
・テキスト要素
リード、本文、テキストリンク、著作権表示など。


▼視線の動き
視線の動きで、多くの人に共通する特徴は二つ。

・視線は左上から右下へ動く(縦組みの場合は右上から左下)
・視線の中央だけでなく、その周辺の情報も拾う
⇒移動距離が長くなると疲れる

また、WEB特有の問題として、
・モニタで文章を読むのは紙よりも辛く感じる
⇒精読せずに、目立つ要素だけ読む傾向

これらを踏まえると、
・左上から右下へと流れるレイアウト
・目立つ要素や要点は視線の流れ上に配置

以上によって、スムースな情報伝達が期待出来ます。


▼近接の原則
近接の原則とは、
「関連性の高い要素同士は近くに。低い要素は遠くに」
配置する事です。
これにより、各要素の関係を把握し易くなります。

-○ 関連要素は近づけて配置
画像が10個と、その説明文10個が等間隔で並んでいたとします。
その場合、どの文章がどの画像を説明するものか、瞬時に把握出来ません。
ある画像とその説明文を近くに配置すれば、関係の把握は容易です。(画像1-1-1、1-1-2)
また、「画像+説明文」のセット同士で、関係が強いものは近くに、弱いものは遠くに配置します。
要素間の距離が近い程関係が強い、遠い程弱い、という事になります。


画像j1-1-1



画像j1-1-2



-○要素のグループ化と重み付け
各要素はその役割によって重みが異なります。
テキストを例にすると、「タイトル」「小見出し」「本文」「リスト」などにわけられます。
これらに視覚的な差異がなければ、各々の重要度がわかりません。
従って、その重みによって視覚的な差異を与えます。
視覚的な差異とは、文字サイズ、色、装飾などです(画像j1-1-3)

同じ重みの要素が多数ある場合は、関係の強弱によってグループ分けし、色や距離で視覚的な差異を与えます。(画像j1-1-4)


画像j1-1-3




画像j1-1-4



▼揃える
グループ化と重み付けした各要素は、その重みによって同一の扱いをします。
例えば、同じ文字サイズ、同じ色、同じ装飾、同じ位置に配置するなどです。
同じ重みの要素なのに扱いが異なると混乱の原因になります。(画像j1-1-5)


画像j1-1-5

同一ページ内はもちろん、同サイト内は全て統一します。
ページ間を移動しても、同じものは同じ位置に同じ状態で配置する事によってサイト内の印象と操作性を統一出来、閲覧性が良くなります。

-○ページ全体を走る力線
同じ重みの要素を揃えるだけでなく、異なる重みの要素とも揃えます。その際は、ページ全体を走る力線を意識すれば統一感のある配置が出来ます。(画像j1-1-6)
画像j-1-1-6の赤線に注目して下さい。これが力線です。


画像j1-1-6


▼訪問者の閲覧環境を考慮する
WEB製作においては、訪問者の閲覧環境を常に考慮する必要があります。
閲覧者の環境は様々ですので、ターゲット層に合わせたサイトデザインを行います。

訪問者の特徴
・画面解像度は1024x768ピクセルが主流
 (ネットブックは1024x600ピクセルが主流)
・横スクロールバーが出ると閲覧性が低下し、嫌われる
・解像度が同じでも小型ノートPCなどは画面が小さい(文字が小さい)

高齢者がメインターゲットの場合は文字サイズに注意します。
特定ターゲット層がない場合は、一般的な1024x768ピクセルがひとつの目安となります。
ただし、ツールバーなどがあるため、使用出きる領域は980x580ピクセル程度になります。
後述しますが、画面サイズに合わせてページ幅が変動するレイアウト手法はとりません。
これは、画面サイズによってレイアウトが崩れてしまうためです。ページ幅は一定にします。
ページ幅が一定の場合、ワイドモニタや高解像度モニタだと余白が気になる場合があります。その際はサイト全体をブラウザの中央に表示するなどして対処します。


>>このページの上に戻る

スポンサードリンク

SponsoredLink

MENU

§1 - レイアウト
1-1 レイアウトの基本
1-2 コンテンツとは
1-3 ナビゲーション手法
1-4 ナビゲーション配置例

§2 - カラー
2-1 属性
2-2 連想作用
2-3 配色の掟
2-4 配色の掟2

§3 - WEB標準とユーザビリティ
3-1 WEB標準
3-2 アクセシビリティ
3-3 ユーザビリティ

§4 - WEB制作の流れ
4-1 ワークフロー1
4-2 ワークフロー2
4-3 ワークフロー3
4-4 ワークフロー4
4-5 ワークフロー5
4-6 ワークフロー6
4-7 ワークフロー7
4-8 ワークフロー8
4-9 ワークフロー9

about

将来WEB制作の職に就きたい、アフィリエイトを本格的にやってみたいという初心者向けのサイトです。
WEB制作を行う上で知っておくべき常識を、体系的に解説しています。
記事内容は初心者を想定しています。

当サイトのプライバシーポリシー及び運営者情報については、下記リンク先のページをご覧ください。
プライバシーポリシー
運営者情報

アクセスランキング

アクセスランキング