シンプルでキレイなWebデザインを作る3つのポイントシンプルでキレイなWebデザインを作る3つのポイント2012年3月20日Webデザイン.スッキリしたデザインにしたいけど、寂しくなる、間延びする、バランスが悪くなる...。シンプルなデザインは簡単そうで実はとても難しいものです。今回は参考例とともに、シンプルなデザイン制作の3つのポイントをまとめてみました。シンプルなデザインと上手くつきあう3つのポイントシンプルでスッキリしたデザインはクセがないので、幅広い層に好かれるデザインです。個人的にもスッキリとしたデザインがとてもすきなのですが、シンプルなデザインこそ制作側としてはとても難しいのも事実ですよね。今回はシンプルなデザインをする上で抑えておきたい3つのポイントをまとめてみます。1.文字要素と写真要素のバランスを整えるシンプルであればある程、ホワイトスペースが多くなる傾向があります。グラフィックデザインでも、Webデザインでも、余白が多いとスッキリしますが、同時にバランスをとることが難しくなります。間延びしてしまわない程度のホワイトスペースの取り方は、レイアウト上ではバランス感覚が必要になります。2.フォントに気を使う要素が少なくなる分、一つ一つのパーツが全体に与える影響はぐっと高くなります。デザインの中にかならず入ってくるフォントは、全体の印象を決める大きな要素。タイトルまわりなど、画像化する部分はどのフォントにするかを慎重に選びます。3.メリハリを効かせるWebデザインやグラフィックデザインでは、「デザインが主役」ではなく、「伝えたい情報やモノが主役」なので、“きれいなだけ”では意味をなしません。ネットショップサイトで“いいデザイン”とは、商品がいちばん魅力的にみえるデザインがいいデザインです。していても商品のよさが人に伝わらなければ、それはいいデザインではないのです。ムダはなくしながら、見せたい部分を目立たせるためには、サイズや色を上手くつかってメリハリをつけることがポイントになります。参考になるシンプルできれいなWebデザインでは、実際の参考例を見ていきたいと思います。日本ではトップに情報が多いサイトが多いのですが、海外サイトではイメージ重視のサイトも多く存在します。ポートフォリオサイトや、フォトギャラリーサイトにはダイナミックでかつシンプルなデザインを参考にしてみるのもいいかもしれません。1.10yearsintypeダイナミックな動きとバランスのよさがここちいいサイト。思わず何ページもみてしまいます。>>link2.Lisidesignムダな要素を全て省いた作品集サイト。作品閲覧だけに集中できます。>>link3.appex今風のスッキリしたサイト。信頼感と清潔感があるので企業サイトとしても参考になります。>>link4.jcsuzanneフォトギャラリーの動き方も奇麗です。大人っぽいロゴがポイントになっています。>>Link5.dondemires.comビビッドなピンクをポイントにしたホワイトスペースの使い方が上手いサイト>>link6.landor要素が多いのにグリッド使いでスッキリと見せているサイト>>link7.alexandermunkこちらも作品ギャラリーにぴったりのデザイン。文字の大きさのバランスが奇麗です。>>link8.mobeldesignスライダーと丸いロゴで今の流行を上手にとりいれている素敵なサイト>>link9.blacktieおおきなナビゲーションボタン、ローディングムービーなど細部にまでこだわったサイト。空間の使い方が参考になります。>>linkショップサイト、企業サイト、ポートフォリオサイト、フォトギャラリーサイトなどの用途によって、レイアウトは様々ですが、フォントやホワイトスペースの使い方はどれも共通して勉強になります。していながらも寂しくないデザインの参考にぜひご活用ください。コメントをキャンセルメールアドレスが公開されることはありません。