Image知って損なし!デザイン4原則のおさらいデザインの基本中の基本、4つの原則についておさらいです。プロでも初心者でも、デザインをするにあたってこの4つを守らなければいいデザインを作るのは難しいですし、逆にこの4つを守れば、デザインを始めてまだ日の浅い人でもそれらしい作品ができちゃいます。気になるウェブサイトを見て、デザインの四原則がどう適用されているかを見る。■まず、デザインの四原則とは?【近接、整列、コントラスト、反復】プロでも初心者でも、デザインをするにあたってこの4つを守らなければいいデザインを作るのは難しいですし、逆にこの4つを守れば、デザインを始めてまだ日の浅い人でもそれらしい作品ができちゃいます。それぞれの項目についておさらいしながら、実際に使われているウェブサイトで、どのようにその原則が適用されているのか見ていこう、というのが今回のテーマです。【近接】とは、1関連が強い要素を近くに、関連性が弱い要素を遠くに配置すること2コンテンツごとにグルーピングするすること近接の原則を用いることで、情報が伝わりやすくなると同時に、理解されやすくなったりします。本棚とかをイメージするとわかりやすいですが、例えばファッション誌ならファッション誌、小説なら小説が、同じ棚にまとめて収納されていたほうが、何がどこにあるか把握しやすいですよね。視覚的な効果で言えば、服屋でトップスのコーナーとパンツのコーナーが分かれていたり、黒っぽいシックな商品と、ポップなヴィヴィッドカラーの商品がそれぞれ分けて置かれているほうが見栄えもいいし、自分が欲しいものを買うにはまずどこを見ればいいのか、ひと目でわかると思います。この考え方と似ているのが、デザインにおける【近接】です。赤で囲まれた部分がひとまとまり。近接の原則を適用して、文章のまとまりをわかりやすくしています。どの文章がどの写真のことを説明しているのか、ひと目で把握できますね。文字、画像の揃えのこと。ワードやエクセルを使ったことのある方はイメージしやすいかもしれませんが、文字の表示設定の右揃え、左揃えという項目。「中央揃えもあるじゃん」と思った方、そうなんですが、中央揃えは文字の軸が真ん中にありますよね。同じように考えると、左揃えは文字の軸が左に、右揃えは右にあるわけです。この軸こそ、デザインで言う「グリッド」。photoshopには、グリッドで配置しやすくするために「グリッドツール」があります。赤線が「見えないグリッド」。文の始まりが意図的に揃えられているのです。http://our.co.jp/hunter-mountain-entrance-mall/こちらはデザインとして左揃えの軸が描かれています。http://uedahifuka.com/デザインにおいて文字や画像を配置するときは、見えない軸=グリッドを意識することで、綺麗に整頓されて見やすくなります。この原則を【整列】といいます。3.コントラスト【コントラスト】とは、主に2つ(あるいはそれ以上)の素材について、1フォントや色、サイズを変えながら、文字を配置すること2同じ画像の色違いや反転画像を並べて配置することこの原則を守ることで、ひと目で情報を把握しやすくなったり、デザイン全体にメリハリが出る効果があります。身近な例として、新聞記事や雑誌の表紙をイメージしてください。新聞は見出しと本文の大きさやフォントが違いますし、雑誌も、雑誌名と複数ある見出しのサイズやフォントがそれぞれ違いますよね。大きな文字で読者の目を引くと同時に、どんなことが書いてあるのかザックリ分かる。していて見苦しさはありません。http://www.webbyawards.com/2の例です。同じ選択フォームや素材画像を複数回使用すること統一感を出すという意味では、デザインとしてももちろんなのですが、ボタンや選択フォーム等にこの原則を適用することで、「どこを押せばどうなるのか」が伝わりやすくなるので、使いやすさが向上したりもします。Postsレイアウトの決まりごと。Comments良いレスポンシブデザインはメインヴィジュアルで決まる。参考にしたいテクニックまとめ。SNSキャンペーン方法論と実践」を開催しました。