2016.12.09 Fri

重要!デザインの四原則

%e3%83%96%e3%83%ad%e3%82%b0%e7%94%bb%e5%83%8f皆様こんにちはジーニアスウェブの長友です。

先日今年10月に発売されたiPhone7を購入しました。
7を使用したの私なりの感想としては
・電子マネー等が使えるようになった。
・色が私の大好きなまっ黒が復活したこと(笑)
・端末自体を傾けることによってスリープ状態を解除する機能をオフにすることができる
などなどあります。
逆に不便だなと思った瞬間としては通話中にスリープモードにすると勝手に通話が終了してしまうことです。
ついにクレジットカードの情報をスマートフォン事態に入れることができるなんて・・・・改めて時の流れの速さを感じました(笑)
10年後は、どんな機能付きのiPhoneが発表されるのかすごく楽しみですね。

突然ですが皆さんは「デザインの四原則」ってご存知でしょうか?
デザインをする上では重要と言われているこの「デザインの四原則」について
詳しくお話させていただきます。

そもそもデザインの四原則とは、
近接 Proximity
役割は「関係する情報を近づけるや情報をグループ化あるいは、情報の組織化」

整列 Alignment
役割は「要素に一体性を持たせる、視覚的なつながり」

強弱   Contrast
役割は「情報の優先度を明確にし、はっきりと違わせる。二つの項目を異ならせる。」

反復 Repetition
役割は「特徴的なものを、意識的に繰り返し使用する。デザイン上のある特徴を繰り返す」
で構成されております。
この4つは単に「レイアウトのコツ」をまとめただけでなく
見た目以外のデザインの役割やデザインに対しての「思考・概念を組み立てる」
という部分にも関係しています。

ではひとつずつご説明させていただきます。

近接
人間は位置的に近いものを「関係があるもの」と認識をする習性があると言われております。
ということは、位置関係を整理するだけで、視覚的に理解しやすいレイアウトを作ることができます。
この位置関係でもっとも重要視されているのが「余白」と言われるものです。
関係する要素同士の余白と関係しないものの余白を空けるという風に一つ一つの余白を整理することによって
「近接」を効果的に使用することができます。

近接をする上でNGなこと
・空いている真ん中や隅に要素を無理矢理詰めないこと
・同一のページ上に個別の要素を多く作りすぎないこと
などがありますのでご注意下さい。

結論
近接をする上で重要とされていることは、情報の組織化です。関連する情報を近づけグループ化することによって情報の組織構造ができます。例えとしては、似た趣味を持つ人同士の集まりということです。
大事なことは、「関連する項目の距離を近づけ一つの塊を作る」ということです。

整列
まず「整列」をする上での準備としては「全ての情報を整理することから始める」ことです。
考え方としては、どれが関係ある要素なのか、またはそれぞれどの要素を「近接」にすればよいかです。
これを考えることによって目的が明確に見えてき、先ほど「近接」した要素に対して「整列」を使用することができます。
「整列」をするうえでNGなこと
・同一ページで2種類以上の文字揃えを用いない
・中央揃えを無意識に選択する癖を止める
・タイトル付きの長い文章を書く際には最初の段階はインデントしない

結論
部屋の散らかっているものを整理し収納することによく似ています。「一体化と組織化」をするものです。また相応しい書体と組み合わされた「力強い整列」は、洗練さ・楽しさ・真面目さを生み出す主役ともなります。

強弱
役割としては「情報の優先度を明確にし、はっきりと違わせる。二つの項目を異ならせる。」

ここでのポイントとしては、「臆病にならず思いきって差をつけること」です。
強調すべき要素がわかっていても、中途半端な強弱では見てもらう人に伝わりにくい時もある。
例として似た書体を複数使用したり、あまり違いのない太さの線を使用したり、色を黒と濃いグレーで差をつける。
という中途半端な違いではなく、明確に変えること。またシンプルな画面構成にしたい場合でも強弱ははっきりとさせることが重要です。
こうすることによってページ上にコントラストがあることで見る人の目を引きつけることができる。

結論
コントラストがはっきりしている方がデザインにメリハリが生まれ、自らの目は自然をそのデザインに引き込まれていく。またコントラストには「近接」と同じ効果である「情報の組織化」を支援する効果あります。

反復
役割としては「特徴的なものを、意識的に繰り返し使用する。デザイン上のある特徴を繰り返す」

役割でもあったように反復とは、デザイン上のある特徴を作品全体を通して繰り返すことです。
反復させるものとしては、太字体や行の間の境の線こと罫線、色やアイコンなど様々。
こうすることによって、作品全体に一体感や統一感が生まれます→注意として「変化のある一体感」を心がけけましょう。
またウェブや広告で、全体に一体感を持たせるためのスタイルやルールのことを「トーン&マナー」といいます。

結論
この部分は「リズム」を意識することと言われています。
同じものを複数使用することは、「リズム」をつけることと同じです。
そうすると視覚的な面白さが生まれ、読者に読んでもらえる可能性が高くなる。

まとめ
いかがでしたでしょうか?
デザインをする上で重要なことが未だにわかってなかった私ですが、今回のテーマを通してデザインの基礎について詳しく分かったのではないかと思います。
次回は、フォントの重要性について詳しくお話させていただきます。それでは。

WRITERこの記事を書いた人

長友 勇介

CATEGORY

Genius Web in Japan コーポレートサイト

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW

CATEGORY