「Top 10 Best Designed Blogs(Elliott Back)」という記事が注目を集めているせいか、デザインについての記事が目に付きました。
How C.R.A.P is Your Site Design?(Vitamin Features)
この手のハックっぽくまとめた記事はとても人気があるので、便乗して紹介します(笑)
「C.R.A.P」の各々は、「対照(Contrast)」・「反復(Repetition)」・「位置あわせ(Alignment)」・「近接配置(Proximity)」を指します。私の勝手な判断で試みた日本語への「置換」は適切かどうかはわかりません。
異なるコンテンツをページ内に配置する場合は、その旨をはっきりと認識させるべきという至極当然のことが指摘されています。貧弱なデザインのサイトはすべからくこれができていない、と明言されています。
同記事の後半で、「悪い例」として上げられているサイトにこのブログが似ています(笑) ただ、異なる色で背景を塗り分けさえすればいいというわけでもないのでしょうから、ちょっと困ってしまいます。
ブログによくある複数の記事を反復させて並べたページでは、どこからどこまでがひとつの記事なのかを明確にしなければならないことを指摘されているのだと、読み取りました。
記事の中見出しとタイトルが紛らわしいなどは論外なので、その点でもこのブログはどうかな…と思ってしまいます。タイトル回りやフッタ部分のデザインでメリハリを付けるのが妥当なところでしょうか。例示されたブログは確かにこの点がとても分かりやすくデザインされています。
特に説明は不要でしょう。左右マージンはもちろんのこと、上下に隣接するセレクタの間隔も注意深く揃えると見やすくなる、と実例を挙げて説明されています。
とにかくCSSに数値を記述する際には気を付けたいところです。
"Proximity"という単語を見てもすぐに訳しづらかったのですが、実例の説明をみると一目瞭然でした。
親和性の高いコンテンツ同士をより密接に配置することによって、意味のまとまりを視覚的に把握しやすくなる、ということでしょうか。
同じコンテンツで、この近接配置の手法を適用する例としない例とを対比させ、その違いが誰にでも分かるように提示されています。上の「反復(Repetition)」とも関連する観点だと思いました。
