意図・設計・問題解決

id:yune_kotomiてんてー作の Marble Note がアップデートしてるようです。

これについて、id:nobml:20071218:1197907153 で略歴の中の人いわく、

Marble Note 見て思ったこと。基本的に 4 色での配色 (見出し部の背景色に限れば 3 色か) で、かつ見出し部に全部背景色をつけるスタイルを取っているので、見た目にちょっと賑々しい印象を受けるかもしれない。色だけでなくフォントスタイルのメリハリなども組み合わせることによって、もう少し見易さが増すのでは？といった感じがしました。

2007-12-18

仰るとおり、こういった暖色系を多発すると目に入った時の印象が賑々しく感じすぎてしまいます。
あと、全て背景色、というのは確かにメリハリがつきにくいと私も思います。
ただ、確かに賑々しいんですけど、この４色は殊海夕音的マーブル配色なんで変えるのもどうかな、と。

で、こういう時に私だと何をするか。

例えば今回のような場合、ページをグレイスケールで表示しなおしてみます。
グレイスケール表示は、Mac OS X だとユニバーサルアクセス環境設定で簡単に変更できます。

http://www.apple.com/jp/articles/tutorial/panther/vol5_20.html
http://docs.info.apple.com/jarticle.html?path=Mac/10.4/jp/mh1713.html

これで見ると、強調しなければいけない上位エレメント（h3）がその下位エレメント（h4）より印象薄く見えませんか？
あと、やたらと段落間隔が詰まってるのが目に付きます。
そして、ワンポイント強調したいはずの「新規ユーザ登録」や「アカウント」が意外と強調されていないことにも気づきます。

ノンデザイナーズ・デザインブック Second Edition

さて、ここからは「ノンデザイナーズ・デザインブック」でも片手にとって聞いてください。
ご存知この本にある、

• 近接
• 整列
• 反復
• コントラスト

を元に議論してみましょう。

HTMLの場合、整列や反復は結構勝手に成立してしまうケースが多いんです。
でも、近接について考えて見ましょう。

なんだか 小見出し（h3）単位の文章間隔が、小々見出し（h4）単位の文章間隔と同じじゃないですか？

こうなると、小見出しと小々見出しの上下関係がわかりにくくなります。
しかも、小々見出しの方が輝度も色相も強い色を選択して、文字のサイズも近いです。
こうなると、近接の原理でどこが区切りだか脳が混乱しちゃいます。全ての小見出しと小々見出しを全部ひとつのゲシュタルトとして脳が認識してしまいかねません。

まずは、

• 小見出しをボールドに変えてみる
• 小々見出しを背景色からラインあたりにする
• 小見出しの上マージンを多めにする（もしくは、小見出しが引っ張る本文の下マージンを多めにする）

あたりから入ってみてはどうでしょうか。

あとは、コントラストを適宜つけなおせば多少見やすくなるんじゃないかな、と。
ワンポイント強調したいはずの「新規ユーザ登録」は、もっとアクセントが効いた、たとえば太枠で囲うなり思い切って反転してみるなりしてもいいかもしれません。そこはセンス次第で。

とりあえず一言。
ソフトウェアでもグラフィックでも、デザインは問題解決の道具です。
センスはいずれ発露してくれます。まずは考える基盤を身につけて、そこから自己流へと流れたほうがいいです。