さて、第４回は「ページレイアウト」の基礎を学びます。すでにわかっていることもありますが再確認です。

前回にもご紹介しましたが「デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン」を題材にした勉強会となっております。以下は、自分メモですので、動画を見ると説明が付け加えられててわかりやすいです。

4章に書いてあること
ページの意味や操作を伝達するために、ページ内でユーザの注意をいかに操るか

ページレイアウトの基礎
1. 何が重要なのか？
今デザインしているページで最も重要なものは何か？
重要度をランク付け。フォントサイズとか
背景色 コントラストの強弱
位置とサイズ ページの上部/中央/下部の位置
リズム 繰り返しの回数

重要度を表現する方法や落とし穴
人物の顔写真で人物の目と、目線の先に誘導されやすい。
広告っぽい要素は見落とされやすい。

2. 何が関係しているのか？
ある項目だけが、その仲間よりも特殊ならばどうするべきか？
一貫性を保つデザイン vs. 他と異なるデザイン を使い分けて、ページ要素間の関係を表現する。
グループ化、レイアウト、配色、順序・整列

3. 次は何を見ればいいのか？
ユーザはまずどこに目を向けたくなるのか、それはなぜか?
注目点 (Focal Point) から，より重要度の低い情報へと視線を導く
視覚的な流れ（Path Layout パスレイアウト）の作り方　→　余白を使って流れの中からあえて外してみたり、流れの最後に「これでおしまい」を置くとか

◇　◇　◇

ページレイアウトの基礎を13個頑張って覚えよう！
内容グループ　1～3　4～8　9～10　11～13
1. Visual Framework
視覚的なフレームワーク
色・フォント・文体と言葉遣いを全体を通して共通化する
今自分がどこのページにいるのかわかるように

2. Center Stage
中央ステージ Newfangled（ブログのような形）
重要なものを大きくレイアウトする、そうでないものは小さく

3. Grid of Equals
等分グリッド（Nikeのページなど）

4. Titled Sections
強調されたタイトル付きセクションを入れる
いまほしい情報にすぐアクセスできる

5. Module Tabs
モジュール別タブ
いま見ている情報以外のものは隠すことによって見やすくなる。

6. Accordion / アコーディオン
小さなサイドバーの中に収めたい場合など

7. Collapsible Panels
開閉可能パネル Googleマップ、Firefox Bookmark Sidebar、YouTube

8. Movable Panels
移動可能パネル iGoogle、MyYahoo!
ドラッグ＆ドロップで追加削除ができるような

9. Right/Left Alignment
左側の項目を右揃え、右側の項目を左揃え（中央に集める）
視覚的に関連性を理解しやすい。

10. Diagonal Balance
対角線バランス / 左上に大きなロゴ→右下に次のアクション領域
スクロールなしで1ページに収まる場合に効果を発揮しやすい。

11. Responsive Disclosure
反応的な追加表示 / ユーザの選択したものに応じて次を表示するようなしくみ

12. Responsive Enabling
反応的なイネーブル化 / 11とは対照的で全て表示してある状態。
ここちょっと専門用語入ったりしてわかってません（あせ

13. Liquid Layout / リキッドレイアウト
どんなウィンドウサイズにも適応する。ページ内に情報が全て入る。

という感じで、過去3回分のまとめが終わりました。