社会人なら知っておくべきデザインの基本原則
見やすいプレゼン資料を作成するにはどうしたらいい？
わかりやすいレイアウトを作りたい。
デザインの基本を知りたい。
本記事はそんな人達に、読んでほしい内容になります。
皆さんはデザインの基本原則はご存知ですか？
デザインを正式には学んだことはないけれど、プレゼンテーション資料の作成、お知らせのパンフレット、ちょっとした広告など作成したことがありますよね。これから紹介するデザインの基本原則を守れば、自分の作成するページを見栄え良くし、誰がみても見やすい資料に変化します。
ここで紹介する内容はデザイン学校の4年間の代わりになるというつもりはありません。
しかし、この基本原則に従えば、あなたの作品がプロらしく、見やすい資料になり、デザインに自信が持てるようになるでしょう。
4つの基本原則
良いデザインの作品には必ず次の4つの基本原則に基づいています。
近接
近接の原則とは、関連する項目をまとめてグループ化するということです。関連する項目を物理的に近づければ、それらは、無関係な断片な群ではなく、1個のまとまったグループに見えるようになります。
この小さなカードには5つの個別の項目があり、あちこち見回してみにくくありませんか？
関連する要素を近接させてグループ化させると、この名刺は視覚的に組織化され、情報をはっきりと伝えるようになります。
このようにいくつかの項目が互いに近接しているとき、それらは、複数のばらばらの要素ではなく、1つの視覚的要素になります。互いに関連する項目は、必ずグループ化しましょう。
近接の基本的な目的は、組織化です。情報が組織化されていれば、読んでもらえる可能性が高くなり、覚えてもらえる可能性も高くなります。
ページを眺め、視線が止まった回数を数えれば、視覚的要素の数がわかります。それが1ページあたり3～5個を超えている場合、近接によってグループ化して、1個の視覚的要素にできるものがないか検討しましょう。
１．ページ上に個別の要素を作りすぎないこと。
２．見出し、小見出し、キャプション、画像などが、本文のどの部分に関連するかを、読者が一瞬でも迷わないようにすること。
３．関連しない項目は、離して配置すること。
４．ただ空いているという理由だけで、隅や中央に何かをはりつけないこと。
整列
整列の原則というのは、ページ上のすべてのものを意識的に配置しなければならないということです。ページ上の項目が整列しているときは、より強く団結した要素になります。
この名刺の各要素は、ただ無造作に放りだされして貼り付けただけのように見えます。
すべての要素を右にうごかして整列方法を一種類にしたら、たちまち情報がより組織的になりました。
整列で注意していただきたいのが、中央揃えは少し弱く見えることがよくあります。テキストを右揃えか、左揃えにするほうがレイアウトはより力強くなります。
この標準的な報告書は、素人っぽい臭いが感じますね。
左揃えにしたほうが洗練された印象を与えます。
中央揃えを使いたい場合は、明確に意図的な場合にしましょう。そこでは最大の効果が発揮され、無秩序に置かれた必然性のない要素郡に見えるのではなく、目的を持ったデザインに見えるのです。
ページ上すべてのものを根拠なく配置してはいけません。すべての要素が、他の要素と視覚的繋がりをもつようにしましょう。ページ上ここの要素が物理的に離れている場合でも、ただ配置のしかただけで、それらが結びつき、関連し、一体化されているように「見せる」ことができるのです。
整列の基本的な目的は、ページの一体化と組織化です。床に散らばった犬のおもちゃを、おもちゃ箱に片付けることによく似ています。
意識的に要素を配置してください。物理的に離れていても、揃えることができるほかの要素を必ず見つけましょう。
１．同じページで2種類以上の文字揃えを用いないこと（たとえば、中央揃えと右揃えを同じページで使うようなこと）
２．フォーマルで意識的に作る場合は別として、中央揃えにする癖をやめること。中央揃えを選ぶなら、「とりあえず」ではなく意識的に選択しましょう。
反復
反復の原則とは、デザイン上何かの特徴を作品全体をとおして繰り返すということです。反復させる要素としては、太いフォント、太い螺旋、ビュレットの種類、デザインの要素、色、フォーマット、配置など、読者が視覚的に認識できるものなら、なんでもいいです。
反復的な要素がないので見にくいニュースレターになってしまっています。
見出しや小見出しの書体を一貫した要素で作成し、強調をしたら、見やすいニュースレターになりました。
特に多くのページがある資料などでは、反復が中心的な役割をします。読者が本を開いたときに、3ページ目と12ページ目が同じ資料の一部であることがひと目で完全にわかるようになっているべきなのです。
この講義の告知は典型的な例で、情報をグループ分けにされてはいますが、中央揃えの弱さが見られ焦点が定まっていません。
演題に焦点が当たり、黒い帯を、底辺で細くした形で反復させています。このようにシンプルな要素でも反復要素になります。
このようにデザイン全体を通して視覚的要素を反復すると、孤立している部分が結びつき、作品が一体化され強化されます。1ページの制作物でも役に立ちますが、複数ページの文章では欠かせない存在になります。
反復の基本的な目的は、一体化と視覚的な面白さを加えることです。おもしろそうに見えれば、読んでもらえる可能性が高くなるので、軽く見てはだめです。
反復とは、一貫性と考えてください。見出しのような一貫性のある要素を、意識的なグラフィックの一部に変えてみましょう。ページの底と見出しの下に1ポイントの罫線を引いているなら、それを4ポイントの罫線に変えて反復要素を強調してみましょう。
反復は、、、服装にアクセントを付けることと似ています。ある女性がすてきな黒のドレスとシックな黒い帽子を身に着けているとしたら、赤いハイヒール、赤い口紅、小さな赤いピンで服装にアクセントを付けることができるでしょう。
１．うるさく脅迫的に感じるほどには反復させないように、コントラストを意識すること。
コントラスト
コンストラストの原則とは、読者の目をページに引き込むために、作品のさまざまば要素にコンストラストを付ける、ということです。情報を組織化し、階層構造を明らかにし、ページ上の道案内となり、焦点を作りだします。
大きな活字と小さな活字、優雅なオールドスタイル書体と力強いサンセリフ書体。細い線と太い線、寒色と暖色、なめらかなテクスチャーと粗いテクスチャーなどでコンストラストを付けることができます。
コンストラストは臆病になってはいけません。２つの要素が異なっているように見えて、本当は異なっていない場合は、「コンストラスト」ではなく「衝突」が発生してしまいます。12ポイントの活字と14ポイントの活字の間にコンストラストは生まれません。また0.5ポイントの罫線と1ポイントの罫線の間にもコンストラストは生まれません。濃い青と黒の間にもコンストラストは生まれません。コンストラストは、はっきり異ならせましょう。
よくできていて小綺麗ですが、読者の目を引くものがあまりありません。目を引かなければ、読んでくれる人は少ないでしょう。
この例のほうが、どれほど強く目をひきつけるか実感できると思います。
このようにページ上のコンストラストは、目を引きつけます。私達はコンストラストが「好き」なのです。また、コントラストを効果的にするには、2つの要素がはっきりと異なっている必要があります。
コントラストには、ページにおもしろみを作り出すことと、情報の組織化を支援する目的があります。
書体の選択、先の太さ、色、形、サイズ、空きなどでコントラストをつけましょう。コントラストは、視覚的な面白さを加えるための、効果的な手段です。大切なのは強調するということです。
１．力強くさせること。太そうな線ともっと太そうな線とでコントラストを付けようとしないこと。
２．よく似た書体を複数使わないこと。
３．よく似た色を使わないこと。
4つのデザイン原則のまとめ
デザインには全般的に通用することが、「臆病になるな」ということです。
空白がたくさんできること、左右対称でないこと。文字を極端に大きくしたり小さくしたり、視覚的表現を恐れてはいけません。
この退屈で典型的なデザインを、デザインの4原則を順番に適用していきましょう。
近接
項目が関連しているなら、近接させてグループ化させましょう。関連を持たない項目は、離します。そうすると、ページの見栄えが良くなる上に、情報がもっと正確につたわるようになります。
整列
ページ全体の一体性を維持するために、どのオブジェクトも端に揃えるようにしましょう。意図的な中央揃えは別として、右揃えや左揃えのほうが洗練された見え方をもたらす傾向があります。
反復
ビュレット、書体、線、色など、すでに繰り返し使っている要素を見つけて、どれかを強調して反復要素として使えないか、検討してみましょう、
コントラスト
読者の目を引かせるのがコンストラストです。強い黒と白をつけるなど、さまざまな方法でコントラストをつけることができます。
書体
自分の作品が素人臭くみえないようにするには、いくつかの基本的な書体を知っている必要があります。ほとんどの書体は、6つのカテゴリーのどれかに分類することができます。
オールドスタイル（Oldstyle）
オールドスタイルの形は先の尖ったペンで書かれたような書体です。この書体は文章を読むのに目障りになるような強い個性はありません。つまり、文字そのものに注意を引くことがないのです。
人に実際に読んでもらいたい大量の活字を組むときには、オールドスタイルの書体から選ぶようにしましょう。
モダン（Modern）
モダンの書体は、冷たくエレガントで、人をはっと驚かせる姿をしています。特に大きなサイズで使われるとその傾向が強まります。強い太さの推移をもっているせいで、ほとんどのモダン書体は、長文な本文には向いていません。
見出しや看板、目を引くものに使われる場面が多いです。その反面、強い書体なので本文では使わないようにしましょう。
スラブセリフ（Slab serif）
スラブセリフ書体は、文字の形全体が太いのが特徴です。オールドスタイルの書体に比べると、全体的に暗いページになります。ストロークが太く、太さの推移が少ないからです。
スラブセリフ書体は、可読性の面でたいへん優れているので、安心して大量のテキストに使うことができます。スッキリと単純な姿をしているので、子供向けの本でよく使われます。
サンセリフ（Sans serif）
「サン」（sans）というのはフランス語で、「～がない」という意味です。なのでサンセリフ書体には、ストローク先端にセリフがありません。ストロークに視覚的な太さの推移がなく、文字の形が全部どこでも同じ太さです。
多くの企業のロゴに採用されており、目につく機会が多かったりします。ゴシック体に近いもので、読んでいると圧迫されるように感じます。アピール度は抜群で、こちらも目を引くものに使われる場面が多いです。
スクリプト（Script）
スクリプト書体のカテゴリーには、カリグラフィ用のペンや筆や、ときには鉛筆や製図ペンなどで書いた手書き文字のように見える書体がすべて含まれます。
長文には絶対に使うべきではありません。また、全部大文字にしてはいけません。大きいサイズで使うと、衝撃的な効果を発揮します。臆病にならないことです。
デコラティブ（Decorative）
デコラティブ書体は、楽しくて、目立って、使いやすくて、風代わりなアイデアを表現したいときに使うフォントです。非常に個性的で目立つという理由のために、使えるケースが限られています。
デコラティブ書体は、情感を伝えることが得意なフォントです。くだけた雰囲気、フォーマルな雰囲気、西部の荒野の雰囲気、花屋さんの雰囲気、その書体に抱いた第一印象を超えるような使い方をしてみましょう。
デザインに役立つおすすめツール
作品のクオリティをぐっと引き上げてくれる便利なツールを紹介していきます。
全て無料で利用可能です。
画面検索サイト：Pinterest
画面の画像が投稿されている、画像投稿のSNSです。サービスのデザインを決めるときにとても役立ちます。
配色を決めるサイト：Coolors
「配色」を自動で作成してくれるツールです。色を使いすぎてしまったり、メイン色が原色になってしまったり、見ずらい配色になってしまいがちです。このツールを使って、見やすい配色にすれば見え方が変わってきます。
アイコン素材：Font Awesome
無料で使えるアイコンが紹介されています。サイズや色を柔軟に変えることができます。
イラスト素材：Storyset
ビジネスやITで使えそうなイラストが多く紹介されていて、色の変更も可能です。
写真素材：Unsplash
世界中のプロのカメラマンが投稿しているフォトサイトです。無料とは思えないほど高クオリティの作品があるのでおすすめです。
参考本
今回の紹介した4つの基本原則は、「ノーデザイナーズ・デザインブック」という本の内容から抜粋したものになります。もっと詳しく知りたいという方は、購入してみてください。デザイン例などもたくさん載っているので、とても参考になる本です。
