知って損なし!デザイン4原則のおさらい

///知って損なし!デザイン4原則のおさらい

知って損なし!デザイン4原則のおさらい

デザインの基本中の基本、4つの原則についておさらいです。プロでも初心者でも、デザインをするにあたってこの4つを守らなければいいデザインを作るのは難しいですし、逆にこの4つを守れば、デザインを始めてまだ日の浅い人でもそれらしい作品ができちゃいます。
■この記事を読むと
デザインの四原則
について分かります!
■今回の課題
気になるウェブサイトを見て、デザインの四原則がどう適用されているかを見る。

 

■まず、デザインの四原則とは?

【近接、整列、コントラスト、反復】
プロでも初心者でも、デザインをするにあたってこの4つを守らなければいいデザインを作るのは難しいですし、逆にこの4つを守れば、デザインを始めてまだ日の浅い人でもそれらしい作品ができちゃいます。それぞれの項目についておさらいしながら、実際に使われているウェブサイトで、どのようにその原則が適用されているのか見ていこう、というのが今回のテーマです。

1.近接

【近接】とは、
①関連が強い要素を近くに、関連性が弱い要素を遠くに配置すること
②コンテンツごとにグルーピングするすること
近接の原則を用いることで、情報が伝わりやすくなると同時に、理解されやすくなったりします。本棚とかをイメージするとわかりやすいですが、例えばファッション誌ならファッション誌、小説なら小説が、同じ棚にまとめて収納されていたほうが、何がどこにあるか把握しやすいですよね。視覚的な効果で言えば、服屋でトップスのコーナーとパンツのコーナーが分かれていたり、黒っぽいシックな商品と、ポップなヴィヴィッドカラーの商品がそれぞれ分けて置かれているほうが見栄えもいいし、自分が欲しいものを買うにはまずどこを見ればいいのか、ひと目でわかると思います。この考え方と似ているのが、デザインにおける【近接】です。
★近接
赤で囲まれた部分がひとまとまり。近接の原則を適用して、文章のまとまりをわかりやすくしています。
★近接 (2)
どの文章がどの写真のことを説明しているのか、ひと目で把握できますね。

2.整列

【整列】とは、
文字、画像の揃えのこと。
ワードやエクセルを使ったことのある方はイメージしやすいかもしれませんが、文字の表示設定の右揃え、左揃えという項目。これも【整列】です。「中央揃えもあるじゃん」と思った方、そうなんですが、中央揃えは文字の軸が真ん中にありますよね。同じように考えると、左揃えは文字の軸が左に、右揃えは右にあるわけです。この軸こそ、デザインで言う「グリッド」。photoshopには、グリッドで配置しやすくするために「グリッドツール」があります。
 ★整列 (2)
赤線が「見えないグリッド」。文の始まりが意図的に揃えられているのです。
整列
こちらはデザインとして左揃えの軸が描かれています。
デザインにおいて文字や画像を配置するときは、見えない軸=グリッドを意識することで、綺麗に整頓されて見やすくなります。この原則を【整列】といいます。

3.コントラスト

【コントラスト】とは、主に2つ(あるいはそれ以上)の素材について、
①フォントや色、サイズを変えながら、文字を配置すること
②同じ画像の色違いや反転画像を並べて配置すること
この原則を守ることで、ひと目で情報を把握しやすくなったり、デザイン全体にメリハリが出る効果があります。例えば身近な例として、新聞記事や雑誌の表紙をイメージしてください。新聞は見出しと本文の大きさやフォントが違いますし、雑誌も、雑誌名と複数ある見出しのサイズやフォントがそれぞれ違いますよね。大きな文字で読者の目を引くと同時に、どんなことが書いてあるのかザックリ分かる。しかも、然としていて見苦しさはありません。
コントラスト (2)
①の例です。
コントラスト (4)コントラスト
②の例です。

4.反復

【反復】とは、
同じ選択フォームや素材画像を複数回使用すること
統一感を出すという意味では、デザインとしてももちろんなのですが、ボタンや選択フォーム等にこの原則を適用することで、「どこを押せばどうなるのか」が伝わりやすくなるので、使いやすさが向上したりもします。
 反復反復 (2)

デジタルマーケティングで最近気になることはありますか?調査して記事にします!

2017-02-09T14:44:40+09:00