[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

レイアウト(レイアウトデザイン)とは?

情報を視覚化する作業。

レイアウトとは、サイトの目的に沿って、どの情報をどこに、どのように配置するかである。

伝えたい情報を正しく伝えるために行う。

方法

情報をまとまりにグルーピングし、優先順位を付け、その優先度に応じて配置していく。

伝えたい情報より、ユーザーが要求する情報本位に構成していく。

そのため、ユーザーに求められやすい情報は、デザイン要素も加味し、見やすい位置、注目しやすい配置を行う。

ユーザーの視線の動きを考慮する。

全体として、左上から右下の方に視線は流れる。

Web ページの特徴

Web ページの閲覧は、目が疲れやすいという特徴が有る。




そため、ユーザーは、目立つ見出し、画像、イラストで、ページの内容を把握しようとする傾向がある。

したがって、目立つ要素を効果的に配置する必要がある。

レイアウトの基本原則

  • 近接の原則
  • 整列の原則
  • 対比(コントラスト)の原則
  • 反復の原則

近接の原則

関連性の高い要素同士は近づけ、関連性の低い要素は離すという原則。

グループ化を行う際は、要素ごとの重要性も加味する。

整列の原則

各要素の位置、大きさ、形状、配色などを揃えるという原則。

揃える。

各要素間の関連付けを視覚化していく。

要素を整列する方法

左揃え、右揃え、センター揃え。

センター揃えの欠点

センター揃えでは、「見えない力線」が生じないため、バラバラな印象を与える。

見えない力線

各要素に秩序を与え、サイト訪問者に素早く、情報の理解を促す。

対比(コントラスト)の原則

要素間の重要度を考慮し、差別化するという原則。




対比させることで、要素間の関係性を表現する手法。

メリハリを付ける。

アピールしたい要素を目立たさせる。

フォントの大きさ、形状、写真の編集などに、メリハリを付け、他の要素と差別化する。

一方、目立たす必要のないサブ的要素は、小さく扱い、メリハリを付ける。

情報の重要度により、構造的に扱い、デザインからユーザーに情報の重要度を理解させる。

 

情報の重要度により、訪問者の視線誘導を意識し、レイアウトしていく。

反復の原則

同じ構成・デザインの要素を繰り返し使用するという原則。

同じ要素を繰り返し使うことで、統一感のあるレイアウトを実現することができる。

一貫性を持たせる。

複数のページで特定の要素を繰り返し、使用する場合は、一貫性が、とても重要となる。

固定幅レイアウトとリキッドレイアウト

固定幅レイアウトとは?

コンテンツの横幅を固定値で設定する。

固定幅レイアウトの特徴




ウインドウのサイズを変更しても表示される Web ページのレイアウトは、変わらない。

デザイナーの意図したデザインを維持できる。

リキッドレイアウトとは?

画面サイズに応じてレイアウト幅を変更するレイアウト手法。

リキッドレイアウトのデメリット

想定以上に高い解像度で表示されると、横に広がりすぎて、テキストの可読性が落ちる。

【参考書籍】

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

(Visited 168 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください