![見出し画像](https://assets.st-note.com/production/uploads/images/171543033/rectangle_large_type_2_d368d82265904c9e540ff286baac10b8.png?width=1200)
『デザイン入門教室』を読んで|知識ゼロから体系的に学ぶデザインの基本
『デザイン入門教室』という本を、実は以前に購入したことをすっかり忘れてしまい、デザインを学び始めたときに改めて買い直してしまいました。結果として、家とオフィスに1冊ずつ置かれることになりましたが、デザインの基礎を学ぶうえで非常に役立つ一冊だったので、今となっては2冊あってよかったと思っています。
デザインを学び始めたころは、何が重要なのかもわからず、例えば「グリッド」という言葉が急に出てきたときに「それって何?」と戸惑うことが多々ありました。しかし本書は、デザインの基本を体系的にまとめ、視覚的にもわかりやすく解説しているため、初心者でもスムーズに学べる内容になっています。
今回は、本書を読んで特に学びが多かった「レイアウト」と「写真・画像」に関する知識を中心に紹介します。
1.本書の構成
本の構成としてはまず最初のChapter1「デザインをはじめる前に」という内容から始まります。
デザインとはセンスなのかな?とぼんやりと持っていた当時の感覚を、そうではない、ということが明確に書かれていて、色々な本を読みながら手法を学ばないといけない、と思いました。
そして改めて今読み直しても、Chapter1の「01.デザインにはルールがある」に書かれている以下の文章は、軸としてとても必要な考えだと思います。
・誰に何を伝えたいのかを明確にすること(目的)
・その目的の実現に最適なデザインの手法(基本ルール)を選び、制作すること
・デザインはあくまでも手段であって、目的ではありません。
・「読み手が必要としている情報は何か」、「読み手はどのような感じるか」といった、読み手(第三者)を主体としてデザインを検討することが大切です。
そして続けてChapter1の02では、以下のようなデザイン制作の流れが整理されています。
1.情報の整理|いつ・誰が・どこで・何を・どのように・目的は・結果
2.レイアウト①(版面・マージンの設定)
3.レイアウト②(グリッドの設定)
4.レイアウト③(役割を与える)|紙面のどの部分に情報を配置するか
5.レイアウト④(強弱の設定)|要素ごとの役割に応じて強弱をつける
6.配色
7.書体選び
8.情報の図式化|文字情報よりも一目で必要な情報を認識させる
この後のChapter2以降は以下のようになっていて、上記の制作の流れを進める上で必要な各知識について、具体的な図などを豊富に使い、体系的に解説されています。
Chapter2.レイアウトの基本ルール
Chapter3.写真と画像
Chapter4.配色の基本
Chapter5.文字と書体
Chapter6.文章のデザイン
Chapter7.インフォグラフィック
Chapter8.実践演習
2.デザインの基礎を学ぶ|レイアウトの知識集
レイアウトについてはこれまでなんとなく感覚でやっていたことが、本書では明確に解説されていて、とても参考になりました。以下に参考になったと思うことを備忘録も兼ねて、挙げてみたいと思います。
版面・マージン
・版面率が高い紙面では、たくさんの情報を掲載できるため、読み手に「にぎやか」や「楽しい」といった印象を与える。版面率が低い紙面では、マージンが広くなるため「静か」や「落ち着いた」、「高級感」などの印象を読み手に与える。
・印刷物の場合は最低でも紙の端から5mm〜10mm程度はマージンを取る。
・基本的には上下のマージン、左右のマージンは揃えた方が良い。特に左右のマージンが異なっっていると安定感のない仕上がりになってしまう。
・ウィリアム・モリスのマージン設計(冊子などの複数ページ構成の紙面における美しいマージンの比率)とは、「のどのマージンを1とすれば、天1.2、小口1.44、地1.73の比率」
*のど:冊子を開いた時に内側にあたる、中央の綴じ目が来る部分
グリッド
・紙面の縦横に等間隔で配置される格子状のガイド。グリッドを用いたレイアウト手法のことを「グリッドシステム」という。
・基本となる矩形のグリッドを1つの単位として考え、その組み合わせで紙面を構成していく。
・グリッドシステムを利用するメリットは、グリッドに沿って各要素を配置していくと、まとまりのある、整然とした美しいレイアウトを実現できる。
・さらに事前にグリッドを作成しておけば、それが配置する要素の基準となるため、グリッドがない場合に比べ、レイアウト作業が格段に容易になる。
配置の基本(近接・揃える・対比・反復)
・人は無意識のうちに同じ形をしたものや、近くにあるもの同士を、1つの「まとめり」として認識しようとする。この性質のことを「ゲシュタルトの法則」という。
・複数の要素をグループ化する際のポイントは「揃えて配置すること」。グループ化する際に、各要素をただ単に近づけるだけでは美しく仕上がらず、要素間のアキ(余白)の幅、要素間の位置や大きさを揃えると、デザインに統一感が生まれる。
・中央揃えは基本的なレイアウト手法の一つではあるが、中央の「基準線がわかりづらい」というデメリットがある。読み手として明確な基準線がみえた方が制作者の意図を容易に理解できるため、最初から中央揃えを考えるのではなく、左右どちらかで揃えることも検討すべき。
・斜めの補助線を使用することで、要素が揃っていることによる安定感・まとまり感の演出と、斜めであることの「動き」の演出の両方を一挙に実現できる。
・形の異なる要素(形がアヒルや犬、鶏などのようにバラバラの図形)を揃える場合は、単に端を揃えるのではなく、各要素の視覚上の重量(軸)または占有領域を基準にして、実際に要素を見ながら手作業で、各要素の重量の均衡点で揃えていく。
・紙面上の「大きい部分」と「小さい部分」の比率のことを「ジャンプ率」という。比率が高いことを「ジャンプ率が高い」、小さいことを」「ジャンプ率が低い」と表現する。文字のジャンプ率とは、「本文のサイズ」に対する「タイトル」「見出し」「キャプション」の大きさの比率。それぞれの文字要素の役割を加味したうえで、文字サイズを変えてコントラストをつける。
配置のテクニック
・裁ち落とし(たちおとし)は、写真や図面などを紙面からはみ出すように配置する技法。空間の広がりや被写体の動きを効果的に表現することができる。紙面に空間的な広がりを持たせることができるもっとも基本的なレイアウト技法の一つ。
・紙面にデザイン要素を配置する際は、各要素の「重さ」を見定めたうえで、全体の「重心」を考慮してレイアウトする。「重さ」は文字、写真、図版、色面の濃度差に置き換えて考える。色の濃淡でも変わってくる。
・余白とは、紙面上の何も配置されていない空白の部分のこと。余白には、紙面を演出する要素であると同時に、要素同士を結びつける役割や、重要な部分を強調する役割などがある。「静かな空間=広い余白」
・シンメトリーとは「左右対称・反転」という意味。デザイン制作においては、対象物の中央に反転の軸となる仮想のラインや点を配置し、その軸を中心に各要素を対称的に配置する技法のことを差す。シンメトリーにして左右の余白を均等にすると、安定感のある静的な印象の紙面になる。シンメトリーは高貴でゆったりとした印象のデザインに向いているため、書体にはサンセリフ体よりも、セリフ体を使用した方が効果的。
・比較とは、紙面を二分割にして関連性の強い要素同士を対比させるレイアウト方法。お互いの関係性を強調したい場合(例:海外では自社と他社の製品比較、日本では商品の使用前後)などによく使われる。要素同士を同等に扱うことが基本となり、鏡面対称・点対称・平行移動がある。
・黄金比とは近似値1:1.618(約5:8)の比で表される比率。この比率で作成された四角形を「黄金長方形」という。黄金比で面分割することを「黄金分割」という。パルテノン神殿やミロのヴィーナス像、iPhoneやタバコの箱などに使われる。
・白銀比とは近似値1:141(1:√2)の比で表される比率。日本の伝統的な建造物の比率によく見られ、法隆寺や五重塔などもこの比率で造られる。
・1/3の法則とは、紙面を三等分し、それぞれの基準線や各エリアを基準にして要素を分けたり、目立たせたいポイントを配置したりすることで、全体のバランスを取るレイアウト技法。写真を撮影する際の構図の取り方としても広く知られている。
・逆ピラミッドとは、重要度の高い情報から順に情報を提示するという情報の提示方法。結論→結論を実現する特徴や機能→特徴を支える詳細な説明として、情報を短時間で効率よく読み手に伝えることができる。5W1Hの6つの要素の整理を行うことが重要。
3.デザインの基礎を学ぶ|写真・画像の知識集
写真・画像については、これまでプレゼン資料を作る際にもあまり重視していなかったのですが、この本で解説されていることを考えると、いかに写真・画像を使いこなすかは、情報伝達上、とても重要なことだと改めて感じます。
・情報は、どのような言葉よりも写真や図版の方がより伝わり、また認識されやすい傾向にある。これを「画像優位性効果」という。
・モンタージュ理論とは、写真同士の関係性で状況を暗示させる技法。モンタージュとはフランス語で「組み合わせる」「組み立てる」という意味。複数の写真を個別に見れば関係性のない写真でも、隣り合わせると、そこに意味があるような印象を与えることができる。
・写真の基本レイアウトは、四角版(落ちついた印象となる)、切り抜き版(楽しげで動きのある紙面を演出しやすい)、四方断ち落とし(文字要素が多い場合には不向き)、三方裁ち落とし(文字要素が多い場合にも向いている)
・トリミングとは、写真の不要な部分を削除したり、写真に含まれる情報を整理する作業のこと。同じ写真でも、トリミング次第で読み手に与える印象は大きく変わる。
・被写体を写真の中心からずらしてトリミングすることで、空間に意味を持たせることができる。人物が横を向いた写真の場合に、視線の先に空間を設けると前に踏み出す感じや前向きな印象となり、視線の背後に空間を設けると何かを思い出すような印象になる。
・同じ写真であってもトリミングで「寄りの写真」にするか、「引きの写真」にするかで紙面の印象は異なる。どの情報を優先して読み手に伝えたいかによって、メインで利用する写真のトリミング方法を検討する。
・フェース率とは、人物画像の「顔の占める割合」。フェース率が高くなると、信頼感・知的・野心的などの印象になる。フェース率が低くなると、肉体的な魅力が強調される。選挙ポスターなどでは信頼感や知的な印象を与えるためにフェース率は高い。
・写真の構図を整える際は「3分割法構図」(3分割した線上にメインの被写体を配置する)や「日の丸構図」(被写体を写真の中央にもってくる)などの方法を利用する。
・メインとなる被写体の周辺にある余分な情報は、トリミングして削除する。また写真が傾いている場合は、傾きを直してから使用することが基本となる。
・同じ重要度の写真を複数枚配置する場合は、写真自体の大きさや配置位置を揃えることに加えて、被写体の大きさも揃えることが重要。
・配置する写真に「向き」がある場合には、どの向きで配置するかによって紙面の印象が変わる。
・複数の写真を同じ大きさで配置すると、写真同士の関係性が強調される。この効果を利用すると、時間の経過や対比を表現できる。
・写真の上に文章をレイアウトすると、デザインに一体感が生まれ、相乗効果で写真がより良く見えるようになる。文字は写真上の情報量が少ない部分に配置する。必要に応じて写真をトリミングするなどして、背景とのコントラストが十分に確保できる場所を作る。場合によっては、写真の上に半透明の色面を配置して文字スペースを確保する。
4.本書を読んでの感想と今後の活用
デザインを学び始めたときは、本当に何もわからない状態でしたが、本書を読むことでデザインの基礎をしっかり理解することができました。特に、グリッドやジャンプ率といった専門用語を学ぶことで、実際のデザイン作業がスムーズになったと感じています。そしてプレゼン資料などを作る際には、この知識を活用するようにしています。特に画像優位性効果を知り、プレゼン資料には最近写真を頻繁に使っています。
また、デザインの良し悪しは感覚ではなく、体系的なルールに基づいているということを改めて実感しました。これは初心者が陥りがちな「センスがないからデザインは無理」という誤解を解くためにも、とても重要な考え方だと思います。
本書には、今回紹介しきれなかった配色・書体・文章・インフォグラフィックについての詳しい解説もあり、デザインの幅を広げるヒントが多く詰まっています。機会があれば、これらのテーマについても改めて紹介したいと思います。
デザインを基礎から学びたい人や、資料やプレゼンの見栄えを向上させたい人には、ぜひ一読をおすすめしたい一冊です。ちょうど改訂版がでたところのようです。