エンジニア転職日記

エンジニア転職に向けての日記です

デザイン - 4つの基本原則 -

概要

今回はデザインの話です。以前から気になっていた『ノンデザイナーズ・デザインブック』を読んだのでアウトプットします。

この本は、タイトルの通り、デザイナーではないけれども、デザインをする必要のある人たちに向けて書かれた本です。

例えば、

・Webサイト製作者

・プレゼンター

・社内文書を書くビジネスマン

など、音声としての言葉以外で何かを伝えようとする人ならば誰しもが当てはまります。

私はデザイナーではないので、「おしゃれでかっこよく」というよりかは「いかに伝わりやすくするか」を意識して読みました。

4つの原則

この本では、良いデザインには4つの基本原則があるといいます。

それは、

・近接

・整列

・反復

コントラスト

の4つです。

私たちは、気に入らないデザインを見て、気に入らないと感じることはできますが、どこが悪いのかを明確に指摘することはできません。それは、この4つの基本原則を知らないからだといいます。しかし一度この原則を見通す目を養ってしまえば、「ノンデザイナー」に求められるデザインのスキルは達成されます。

近接

近接は、情報をグループ化し、読者に構造をわかりやすくするために使います。

互いに関連する項目は、1つのまとまりとして認識できるように配置しなければなりません。視線の流れを意識して要素を配置します。どこから見始めるか、どういう道筋をたどるか、どこで見終わるか、読み終わった後どこに目がいくか。全体の論理の流れが視覚的に把握できるようになっている必要があります。

実現方法

近接を実現するには、まず情報をグループ化します。そして、視線の流れを意識します。目を細めてページを眺め、視線が止まる回数を数えれば、視覚的要素の数がわかります。それが伝えたい内容と合致しているのであれば成功です。

注意点

・ページ上に個別の要素を作りすぎないこと

・要素間に均等の空白を作らないこと(まとまりの境界線が見えづらくなるため)

・見出し、小見出し、キャプション、画像などが本文のどの部分に関連するかを読者が一瞬でも迷わないようにすること

・異なる関連の要素を近づけないこと

・ただ空いているというだけで隅や中央に何かを貼り付けないこと

整列

整列は、右揃えや左揃えなどを使い、要素を秩序立てて並べることです。ページ上の全てのものは、根拠なく配置してはいけません。ページ上の全ての要素が他の要素と視覚的な繋がりを持つように配置します。

実現方法

意識的に要素を配置することです。要素が離れていたとしても、透明の線が見えるようにきちんと揃える必要があります。

注意点

・同じページで2種類以上の文字揃えを使わないこと

・「とりあえず中央揃え」にしないこと

反復

デザイン全体を通して視覚的要素を反復すると、孤立している部分が結びつき、作品が一体化され強化されます。反復は、考え抜かれたデザイン的選択であることがひと目でわかるので、誰かが責任をもって作ったという印象を読者に与えます。

実現方法

既にある一貫性を、もう一歩進めることです。見出しのような一貫性のある要素を意識的に、ドラマチックに変えることです。

注意点

・要素をうるさく感じるほどには反復させないこと。

コントラスト

コントラストは読者の目を惹きつけます。同じページ上に異なる2つの要素がある時、それらを似せてはいけません。コントラストを効果的にするには、2つの要素がはっきりと異なっている必要があります。

読者はいったん興味をもてば小さな印字も読んでくれます。コントラストをつけるのに臆病になってはいけません。

コントラストのもう一つの効果は、情報を組み立てが一瞬でわかるようになることです。流し読みしていても伝えたいメッセージに目が止まるようにしてください。

実現方法

書体の選択、線の太さ、色、形、サイズ、空間などでコントラスト付けます。視覚的な面白さを意識することが大切です。

注意点

コントラストをつけるなら、力強くつけること

・似たような書体、色、線の太さで適用しないこと

デザインの手順

何から手をつければいいかわからない場合は、以下の手順で進めます。

 

①焦点から始める

読者に真っ先に見てもらいたいものをまず決めます。そしてそれにコントラストを付けます。

 

②情報を論理的なグループにまとめる

グループ間の関係を判断します。この関係を互いに近づけたり離したりすることで表現します。

 

③反復を作る

見出しなど、自然に反復している要素を見つけて、デザインにも関連性を持たせます。

 

感想

センスだと思っていたデザインを方法論的に学べたのはとてもよかったと思います。

これからスクールの制作物発表会の資料を作成するので、早速、「近接・整列・反復・コントラスト」を取り入れて伝わりやすいデザインにしたいと思います。

出典

https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=UCGDU0V7O7OE&dchild=1&keywords=non+designers&qid=1599785397&sprefix=nonde%2Caps%2C264&sr=8-1