2006-04-21 Fri

レイアウト5つの法則「C.R.A.P.S」 RSS あとで読む kwout this!

DESIGN How C.R.A.P is Your Site Design?(Vitamin Features)というデザインについてまとめた海外の記事を、日本語で解説されている記事をみつけました。


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さんありがとう!
del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(2)  | TrackBack(0)  | 04 Design*.
Comments
(*´・ิ3・ิ)ふむ。
第1の法則:某ブログの反対でつな。無意味な装飾は余計なタグも加わって非常に無駄。

第2の法則:その通りでございまふ。ページ毎に「戻る」や「トップ」のリンクが違うところにあるサイトは不便極まりない。

第3の法則:文書は左か上からしか読まないのでその通り。

第4の法則:そうでつ。htmlもボックスで囲むなどしてグループ化でつな。

第5の法則:影は・・・一部のブラウザしかサポートしてませぬ。

BS テレビジョン
間違ってCGIのコードやらなにやらを削除しちゃって、エラーの荒らしに合いますた。
なので全て初期化して再スタートしますた。
しんのす at 2006-04-22 22:38
■しんのすさん
そっか。5の法則にあげたスタイルシートで影をつけるのは、
ブラウザによって違うのか。

カスタマイズの前にバックアップを取っておくのは大切だね。
わたしも気をつけまつ。(笑)
コメントありがとう。
らぶ at 2006-04-23 18:35
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのトラックバック

人気エントリー Top 10
MoMAstore