矢野りん「Webレイアウトの『解法』」(2010)
評価
★★★★
ひとこと
「デザインのへそ」が読みものだとすると、こちらは実践書。
単純なハウツーではなくきちんと解説が書かれているので勉強にもなる。
私のような素人には最適な一冊です。職場に必携。
分類
目次
Chapter1 Webデザインの基本技法
- Section1 Order & Balance
- Section2 Grid System
- Section3 Proportion
- Section4 Coloring
Chapter2 ビジュアルデザインのソリューション
1.ラビルの長いナビゲーションをレイアウトする
2.リンクリスト数の多いページを単純に見せる
3.フッターをサイトマップとして整える
4.使いやすい問い合わせフォーム
5.使いやすいアクセスマップのデザイン
6.読みやすいリストナビゲーション
7.グローバルナビゲーションをバランスよく配置する
8.グローバルナビゲーションとローカルナビゲーションの展開方法
9.ナビゲーションのラベルサイズの決め方
10.ツールの配置
11.トップページで写真を美しく見せる
12．ページの背景にグラフィックを採用する
13．メインのビジュアルにイラストを採用する
14．トップページに抽象的なグラフィックを採用する
15．写真が目立つレイアウトをしたい
16．リアルなテクスチャを使ってページをデザインする
17．切り抜き写真を多用してトップページをまとめたい
18．トップページに素材集の写真を使う
19．グラフィカルなトップページを作る
20.メインのカラ―が赤系のデザインをまとめる
21.メインのカラ―が緑系のデザインをまとめる
22.メインのカラ―が青系のデザインをまとめる
23.メインのカラ―がオレンジ系のデザインをまとめる
24.メインのカラ―が黄系のデザインをまとめる
25.少ない色数でまとめる
26.ダークオンライント系デザインを採用する
27.立体感のある色使いでまとめる
28.マットな印象のデザインを作る
29.透明感があり光を感じるデザインを作る
30.文字要素の多いレイアウトを画面に収める
31.問い合わせ先をわかりやすくレイアウトする
32.文字量の多いページを読みやすくレイアウトする
33.異なる話題を並列させたレイアウト
34.コピーのレイアウトに工夫する
35.新着情報の整理
36.ニュースを読ませる
37.ツールを目立たせる
38.縦書きをとり入れる
39.見出しサイズを決める
40.本文サイズを決める
41.段組みが三段以上のレイアウト
42.複数のリンク先を平等に紹介する
43.文字とビジュアルの協調
44.リンクリストのグループ化
45.文字の多いトップページを読みやすくまとめる
46.ユーザーの疑問に答える構成
47.項目数の多いFAQページ
48.取り扱い説明のコンテンツ
49.サービスを単純に説明するデザイン
50.図で手続きを説明する
メモ
- グリッドシステム：ヨゼフ・ミュラー・ブロックマンが理論としてまとめた文字と図版を二次元的な平面に配置するためのガイドライン
- ラベルの長いナビゲーション
- 帯状デザイン（複雑なボタンなどにしない）
- 行の高さ位置を揃える
- 左揃えが基本（中央揃えはバランスがとりやすいが、情報デザインの観点からは視線の動きがジグザグになってよくない）
- 情報をグループ化する時。囲みの中の色も統一感をもたせること。
- フォーム揃えにはラベルのコピーライティングにも気を配る（なるべく同じ文字数になるように）
- 写真を美しく見せる
- 写真の周囲は彩度を低く
- 枠に白やグレーの罫線を
- 素材のトーンを統一
- 抽象的なグラフィックを採用する
- サイトの目的を理解して素材を選ぶ
- 写真の色合いを統一する
- 色や素材を詰め込みすぎない
- 文字数の多いレイアウトを画面に収める
- 文字情報を囲みで分ける
- 部分的に背景をつけて差別化する
- 細かい箇所に余白を作る
参考文献
- Beth Tondreau「レイアウトデザイン、新・100の法則」
- Kimberly Elam「美しくみせるデザインの原則」
- アンドレジュート「Grids」
- ティモシー・サマラ「実例でわかるデザインの法則」
- 鈴木誠一郎「レイアウトの教科書。」
- アラン・ヴェイユ「グラフィックデザインの歴史」
- オブスキュアインク「ウェブデザイン見本帳」
- 矢野りん「WEBデザインメソッド」
- 益子貴寛「Web標準の教科書」
- Jim Thatcherほか「Webアクセシビリティ」
- D.A.ノーマン「誰のためのデザイン？」
- 佐々木正人「レイアウトの法則」
最終更新：2010年08月21日 17:24
