【design】イケてるWebデザインの4原則ー『4 Principles of Good Design for Websites | My Ink Blog』

4 Principles of Good Design for Websites | My Ink Blogという記事より。
ウェブデザインにおける4つの原則が紹介されていました。
4原則とは、
・Contrast コントラスト・対比
・Repetition 繰り返し・反復
・Alignment アライメント・整列
・Proximity 近接

どういったことなのでしょうか。
事例を引いて見てみます。

(1)Contrast コントラスト・対比

これは、メインイメージをどーんと大きく配置しているので、見る人の目線を一瞬にして集めます。
これにより印象深く記憶に残りやすくなっていますね。
一方で色に関しては、モノトーンを基調にアクセントはブルーのみ。
カラーリングを押さえてることで、逆にメインイメージが引き立ちます。


タイポグラフィの好例。
「i Love」と「 typography」で色を変え、文法的には大文字であるべき「I」を小文字の「i」にすることで、印象に残りますね。
他にフォントの大きさとフォントフェイスを変えることで、コントラストのある、引き締まったビジュアルになっています。


これもフォント使いが抜群にかっこいいですね。
フォントフェイス・大きさ・太さ・配置のバランスが絶妙です。
ここもやはりカラーリングは抑えめです。
モノトーンを基調にアクセントはブルーのみになっています。

(2)Repetition 繰り返し・反復

何が繰り返されているのか、というと、ヘッダー(というよりはメインイメージか)のイラストがなだらかな丘陵になっていて印象強いのですが、フッターにまた丘陵が登場するのです。
たったこれだけでもサイト全体がまとまり、好感度がグッと上がります。

(3)Alignment アライメント・整列
引用もとブログでは「グリッドデザイン」を強く推奨しています。
グリッドデザインというのは、全体に仮想の格子(グリッド)を表示させ、そのグリッド単位でデザインする事により、機能的で整然としたデザインを行う1手法のこと。
このあたりが参考になるかも。
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
CSS 3でグリッドデザイン | クリエイティブ・タブロイド withD
Design A Fresh Blog Theme On The 960 Grid | My Ink Blog
ただ、まあ、昔から印刷の世界では当たり前にやってきたことなので、別段目新しい概念というわけでもないのですが、webに適用するにあたっての細かいところもあるので、勉強しておくのもよいかな、と思います。

(4)Proximity 近接

近接、というとちょっと分かりにくいと思いますが、要するに紙面(画面)にある情報をある程度ひとかたまりのグループとして見せる、ということでしょうか。
カテゴリ分けをする際に、単純に罫線で区切るのではなく、パッと見て一瞬で判断できる程度にグループ分けして見せることが大切でしょう。

以上が4原則、だそうです。
これらは意識的に気をつける、というよりも、無意識でも行えるくらいのレベルにならないと、仕事にはならない(=プロとしてやっていく、という意味で)ような気もします。