C.R.A.P : ウェブデザインを検討する上での4つの観点(PamGau)
「C.R.A.P」の各々は、「対照(Contrast)」・「反復(Repetition)」・「位置あわせ(Alignment)」・「近接配置(Proximity)」を指します。
これらの4つのポイントをわかりやすく解説されていましたが、レイアウトの目的は「情報の視覚化」だと考えます。
以前のブログで書いたものの順番を入れ替えましたが、
4つの頭文字「C.R.A.P」にひとつプラスして、意識しているポイントをわたしも便乗して書いてみます。
■第1の法則 「メリハリをつける」(Contrast)
ズバリ一点豪華主義。
「ココを見てほしい!」という箇所を強調して視線を誘導します。
太字や色の使いすぎには注意。
■第2の法則 「繰り返す」(Repetition)
ページごとにレイアウトやボタンの位置が変わると迷子になりやすい。
繰り返しは理解されやすく、安心感と信頼性が生まれます。
■第3の法則 「揃える」(Alignment)
何はともあれ左揃え!
写真や詩など例外もありますが、動線にバラつきが出ると目が疲れます。
個人的な好みもあると思いますが、左揃えが一番リスクが少なく見やすいとわたしは思います。
■第4の法則 「グループ化」(Proximity)
探している情報がどこにあるのかひと目でわかるように、
グループごとにカテゴリやタグでまとめます。
■第5の法則 「立体化」(Solid)
スタイルシートなどで画像や文字にちょっと影を落とすだけで、
立体的でオシャレに見えます。
以上、5つの頭文字をとって「C.R.A.P.S」 クラップス…?
もうひとつ参考になったのは、ウェブページを見る目の動きは「F」パターンという記事。
人の目の動きは「左から右・上から下」で、わたしは「Z」だと思っていたんですが、こちらの記事の図を見ると、ちゃんと「F」になってる!
「ここを見て欲しい」というものは、右よりも左に置く方が効果的なんだそうです。
しかし、中には「S」とか「L」とか「I」という人もいるんじゃないかなぁ…と思っていたら、はてなダイアリーを見る目の動きは「@」パターン らしいですよ。
やっぱりクネクネが好きなんですね。(笑)
追記:ブクマのコメント見たら、「CRAP」って糞って意味なんですね…。
kanimasterさんありがとう!
第1の法則:某ブログの反対でつな。無意味な装飾は余計なタグも加わって非常に無駄。
第2の法則:その通りでございまふ。ページ毎に「戻る」や「トップ」のリンクが違うところにあるサイトは不便極まりない。
第3の法則:文書は左か上からしか読まないのでその通り。
第4の法則:そうでつ。htmlもボックスで囲むなどしてグループ化でつな。
第5の法則:影は・・・一部のブラウザしかサポートしてませぬ。
BS テレビジョン
間違ってCGIのコードやらなにやらを削除しちゃって、エラーの荒らしに合いますた。
なので全て初期化して再スタートしますた。
そっか。5の法則にあげたスタイルシートで影をつけるのは、
ブラウザによって違うのか。
カスタマイズの前にバックアップを取っておくのは大切だね。
わたしも気をつけまつ。(笑)
コメントありがとう。