【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原則、だそうです。
これらは意識的に気をつける、というよりも、無意識でも行えるくらいのレベルにならないと、仕事にはならない（＝プロとしてやっていく、という意味で）ような気もします。
売り上げランキング: 212582
ビー・エヌ・エヌ新社
売り上げランキング: 248733
オーム社
売り上げランキング: 586036
ビー・エヌ・エヌ新社
売り上げランキング: 5980
一つのアプローチとして
「美しい」という概念についてのデザイン法則 これからデザインを学ぶ人へ デザインの良し悪しを理解し、議論するための、理論武装の道具として本書は必読。 数学的理論の先にあるもの…デザイン？
ビー・エヌ・エヌ新社
売り上げランキング: 11004
良い物を作るために感覚としてプロが行っていることを文章にした本 デザイナーじゃなくても 長い付き合いになる本 すごい。 デザイン原理の便利な一冊
MdN
売り上げランキング: 29160
参考書ではなく・・・。 “読み物”としてのXHTML＋CSS本
ビー・エヌ・エヌ新社
売り上げランキング: 206922
デザイン初心者にはレコメンド 事例がいっぱい
Tweets that mention 【design】イケてるWebデザインの4原則ー『4 Principles of Good Design for Websites | My Ink Blog』 | glad design blog 2.0 -- Topsy.com
[…] This post was mentioned on Twitter by yuuya shibata. yuuya shibata said: 【design】イケてるWebデザインの4原則ー『4 Principles of Good Design for Websites | My Ink Blog』 | glad design blog 2.0 http://bit.ly/b0KZXj […]