CSS Nite LP, Disk 11　矢野 りんさんセッション

crema𝕏（黒野明子） @crema

#cssnitelp11 「人間に情報を伝わりやすくする。みやすい＝必要な情報がみつけやすい。余白による強調。ジャンプ率。（コントラストの法則）」

withoutsugar（みどり） @withoutsugar

「みやすい：必要な情報がみつけやすい（余白による強調、ジャンプ率→コントラストの法則）見出しそのものの大きさではなく、見出しまわりの余白を充分に確保し（周りに余計なものをおかない）、目立たせる。余白をいれると一つ一つのスペースに目がとまり、注目される。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「ジャンプ率。大きさの違いそのものの比率。どのくらいの飛び幅で違うのか。たとえば、大中小の文字サイズの差が激しければ激しいほど、文字サイズの役割が明確となる。大中小＋コントラスト有りでデザインする」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「みやすい→必要な情報がみつけやすい」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「白抜き文字やサイズによる強調など」

crema𝕏（黒野明子） @crema

#cssnitelp11 「文字そのものよりも背景で目立たせる方がスマート」

withoutsugar（みどり） @withoutsugar

「みやすい：重要な情報が目につきやすい　白ヌキ文字、サイズによる強調（ヒエラルキーの法則）文字はストロークが弱いので（太字にしたとしても）、目立たせようとする場合は背景を目立たせるのが近道。」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「よみやすい、のお話。色によるグループ化。ひとつひとつのディビジョンごとにテーマカラーを決めて見やすくしている」

withoutsugar（みどり） @withoutsugar

「みやすい：よみやすい　色によるグループ化（情報量が多いメニューも色づかいで理解しうる印象に）、コントラストの活用（目をやるポイントに明るさの差が大きい色を使う←5つ以上あると雑然とした印象になるので注意）」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「整列の法則のお話。余白の大きさを揃える。サイトIDの幅とその下のグラフィックの幅が揃っている。見ていて疲れない。整理されている＝ノイズが少ない＝疲れにくい」

withoutsugar（みどり） @withoutsugar

「短時間で使える―移動範囲の制限。フィッツの法則（UIをつくる際の思考ツール）対象物を特定する予測時間」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

フィッツの法則→ http://msdn.microsoft.com/ja-jp/library/cc421571.aspx #cssnitelp11

withoutsugar（みどり） @withoutsugar

「移動範囲の制限は、つまり大事なものは固めておこうねということ。操作の範囲は最小限に。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「わかりやすい：法則性を感じる（構造の法則）余計なことを考えさせなということ」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「デザイン（近代建築も）の世界では、うまくパターン化されていればいるほどよい」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「わかりやすい、のお話。法則性を感じる。グリッドレイアウト、サイズの規格化」

withoutsugar（みどり） @withoutsugar

「わかりやすい―サイズの規格化。サイト全体で「一番めだたせたい画像はこのサイズ」とパターンとしてきめておく。するとユーザは何も考えないで自然と目がいく。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「わかりやすい―文字にたよらない。アイコン（キーワードを絵に置き換え。パッとみて何を意味するかが伝わる）、イメージの活用（ポータルサイトなど画像と共にカテゴリーを配置）得てして一番目を引くのは人の顔、製品を目立たせたいとき水着のお姉さんを置くと逆効果」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「アップルは余程製品に自信があるのでしょう、人と一緒に製品を置く」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「グラフィックの中で人間の顔があったとき、見る人はそこを見てしまう。製品の写真をきちんと見せたいとき、隣に水着のお姉さんなどがいると、そちらに眼がいってしまう、というお話。Appleは例外」

crema𝕏（黒野明子） @crema

#cssnitelp11 「まとめ。強調と整列の法則は、いつも意識しよう。最終的には自分の感覚をたよりに『見づらさ、読みにくさ』を汲み取ろう。読みやすいサイトはそれなりにかっこよくなるもの、と考えよう」

withoutsugar（みどり） @withoutsugar

「と、ここまで話しましたが、デザインする際は、この法則はこうだから、ではなく、まず自分の目でみて見やすいかを判断しましょう」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「読みやすいサイトはそれなりにかっこよくなるものと考えよう」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「アップルのサイトって新商品紹介のときに人の顔が映り混んでますよね。フォーカルポイントに人の顔、人の顔が印象にのこってしまう←一般的には、あまりやらない。日本の広告ではタレント起用してまずタレントでおぼえてもらうことはあるが。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

質問「強調と整列は見やすさにつながると言うが、（質問者は）デザインをもらって組んでいる（コーディングのことか）のだが、動的なコンテンツを制作しているときはジャンプ率など閲覧環境によってことなってしまう。結果、どこを強調していいか伝わりずらくなることが」 #cssnitelp11