【💻】デザインの４原則について学んでみる

2024年12月9日 21:09

デザイナーではないけど、デザインのスキル最低限は必要やな〜と感じたから勉強始めてみる。
「ノンデザイナーズデザインブック」っていうまさしくな本見つけたからこれから読んでいくで。
ちなみにデザインの勉強やけどnoteでは文章のアウトプットだけ。デザイン性皆無だ。
英語の本そのまま翻訳感あるから、ちょっと読みにくさ感じるかも…。

デザインは4つの原則守ってればOK！っぽい内容やから、これについてメモ程度にまとめていく。

※本アカウントの記事について

完全に自分のメモ用アウトプット記事になります🙌
読みやすさや完成度・記事の信憑性には自信ありません(　-`ω-)👍🏻

内容がとんでもなく薄い記事もあるかも…。
とにかく間違っていても”自分の言葉で”を意識したいので、関西弁がところどころ強い記事もあるかもです、ご了承ください😖

4つの基本原則

まず大まかに4つの基本原則がなんなのか？概要だけ

・近接(Proximitiy)
とにかく関連する項目は近づけてグループ化しなさい！みたいなの。似てるの項目やのにバラバラは許さんよ〜ってやつ。

・整列(Alignment)
意図を持って要素を並べること。全ての空白や並び方、なんとなくじゃなくてそれぞれが意味を持つように。他の項目との視覚的な関連を持つように。

・反復(Repetition)
色とかフォントとか位置関係とか、作品を通して繰り返せるところは一貫性を持って繰り返そうねっていうやつ。たしかにいろんな技術モリモリやのになんかバラバラよりかは、シンプルやけど統一感ある方が綺麗やから、そういうことかな？

・コントラスト(Contrast)
なんか地味に似てるな〜みたいな要素は作らないようにってことかな？書体とか色とか線の太さとか、少しでも異なるなら、はっきり異なるようにしなさいとのこと。地味に似てるとかなら寧ろごちゃごちゃやから同一にした方が良いのかな？違うなら違う、同じなら同じで明確に差異を作りましょう的な。ちょっとコントラストの理解が一番難しいかも。

ということで「グループ化しましょう」「意図的に並べましょう」「繰り返しましょう」「あえて違いをつける時は盛大にしましょう」っていうのが４原則かな。
大前提として、基本的には良いなって思われるどのデザインにもこの4つの原則が全て使われてるはずらしい。
でも実際にデザインするときはこれを1つずつ行なっていく方がいいらしい。一気に全部実装してしまったらどっちつかずになってしまうんやね。

近接(Proximitiy)

関連する要素は視覚的にグループ化しましょうね。の近接。
意図的にくっつけることで、情報の関係性がわかりやすくなるとか。
でも大事なのはなんでもくっつければ良いというわけではないっぽい。
くっついてる部分とくっついてない部分の差が明らかになることで、寧ろその空白部分も意味をちゃんと持つようになるとか。

大切そうなところ箇条書きで

・初心者は空白を嫌う傾向ある。とにかくびっちり埋めてる方が「デザインされてる」と思いがち。でもそんなデザインはたいてい無秩序に見えてしまう。
⇨ちゃんと関連項目は明確にグループかしようね。

・グループが多すぎてもダメ。個体差があれど一目みたときに視線が止まる部分が3~5個ほどに抑えられていたらOK。つまりグループ化されたユニットが3~5個程度になるように。視覚的要素が多すぎるとどこから見始めたら良いか、どこが見終わりなのか、結局わかんなくて読んでもらいにくくなる。

・くっついてる部分は「関連していること」。それだけじゃなく、くっついていないことは「関連していないこと」を表す。関連しない項目は、逆に明確に離した方が良いらしい。

・グループ間で、そしてグループ内でもフォントや文字の太さを意図的に変更して、情報に階層を作る。見出しは太字、本文は通常のサイズとか。
⇨読み手にとってどこが重要な要素なのか、どこから読み始めるべきなのかが瞬時にわかりやすくする。

・ただ空いてるってだけの理由でそこを埋めようとしないこと！！空白が寧ろ大事なデザインの要素！！
この空白は近接でグループ化してたら勝手に生まれるものということですな。

ということでこれだけ覚えよう。
空白嫌うな！！グループ化して寧ろ空白を作れ。

整列(Alignment)

適当に要素を配置するな！全てのものを意識的に配置しなさい！ってやつ。
どれひとつとして「なんとなく」「適当で」配置されてる要素がないように、全ての項目がなにかと関連しているように意識しようね、な整列。

大切そうなところ箇条書きで

・整列の基本は、要素の縁を見えない透明の線でなぞっていくこと。このベースラインが揃うことを意識する。テキストの左揃え右揃えはこの線がハードな垂直になるからレイアウトに力強さが生まれる。

・逆に中央揃えはそういう面で言うと少し弱く見える。縁の線がソフトな感じななって力強さは感じられないから。見えない線が力強ければ力強いほど整列の原則にはあってる。

・デザインの初心者はなんでも中央揃えにしたがる傾向がある。失敗の危険はないけど、割とマジで退屈感が生まれてまう(線が引けない＝力強さは感じにくいし退屈)！！

・フォーマルな印象とか、中央揃えも意識的に使うことができれば良いデザインになる。けど初心者が中央揃えの効果引き出して使いこなすのは至難の業！
→一旦マジで慣れるまでは中央揃え封印してみるのが効果的！一切使わない！

・文字揃えは使いこなせるまで１種類だけに絞った方が良い。つまり左揃えか、右揃えか、中央揃えか、ページ上で１個だけにしようってやつ。
(見出しは中央揃えで本文は左揃えとかよくみるけど、整列としてはでこぼこで欠けてるデザイン。大学のレポートとかでよくみる形のやつやね。)

・似たような強い線があったら、できる限り近づけて揃える。お互いの強い線が強調される。

・意識的に崩すっていう感じのテクニックが輝くのは、それ以外の整列がめっちゃ強い時だけ。ルールを破るためにまずルールを知って覚えること。

整列のおまとめ！

「見えない真っ直ぐの線が引けるように並べる！」
「中央揃えと左揃え、とか２種類以上同時に使わない！」
「まじで使いこなすのむずいから中央揃え使う癖一旦やめろ！！」

ってかんじやね。

反復(Repetition)

フォントとか罫線とかフォーマットとか、何かしらデザイン上の要素を繰り返す「反復の原則」。デザインに視覚的な一貫性を作り出そうねのやつ。

・反復の例：太字体、細字体、インデント、空き幅、整列、フォントなど、意識的に繰り返せるものならなんでもいい。画像部分や色なんかは反復のイメージがしやすいと思うけど、何もそれだけにこだわる必要はない。ほんまに意識的に繰り返せるものならなんでもいい！

・反復の基本的な目的は、一体化と視覚的な面白さを加えること。一目見た時の面白さが、読んでもらえるかどうかの大事なポイントになる。

・反復を１から作り出すよりも、まず始めはすでに存在している反復を見つけて、それをもっと強調していくトレーニングした方が簡単。見出しとかは1番わかりやすい反復。こういったすでに存在するわかりやすい一貫性を、より意識的に強められるようにする。
例：書体をダイナミックなものに変える、罫線を付け足してみるなど

・反復の考え方と見え方になれてから、新しく「反復を作り出す」意識をし始めてみる方がいいかも。作り出すときは既存の要素のデザインを変えるだけじゃなくて、反復のためだけの要素を足していく考え方も必要。(リストかするために番号の要素を足すとか。)

・要素が全く同じでなくても、反復を作り出すことができる。例えば全く同じではないが”画風の同じイラスト”を2つ以上入れたら、その時点で反復要素として確立することができる。確立してしまえばある程度そこから変形させても一貫性のある見え方を保つことも可能。

・1ページ内での反復だけじゃなく、それを作品全体にも反復させることでより効果が出る。

・太字の統一による反復なんかは読者の視線のコントロールにつながるわかりやすい例。(視線が太字と太字の間を自然と行き来する。→読者の注意を少しでも長くページ上に引き留めることができる。)

・反復は情報の組織化につながる。ページ内の離れた部分でも例えばデザイン部分の反復が強調されているだけで統一している要素だとわかる。

・あくまで反復はうるささを感じないレベルに抑える。少しでも圧迫感を感じたら、反復としてはやりすぎ。

コントラスト(Contrast)

これ最初、理解難しそうやなぁって思ってたけど、要は明らかな違いを作って、読者が一目みたときに注目できる場所を増やそうってやつかな？
とにかく「少し違うけど、ミスなのか意図的なのかわかんない」レベルの小さな違いを作るのはNG！

大事そうなところメモ

コントラストの生み出し方の例：
大きな活字と小さな活字、書体の違い、太い線と細い線、寒色と暖色、広い行間と狭い行間、小さな画像と大きな画像などなど。

・とにかくいろんな要素でコントラストをつけること。コントラストつける時は明確に異らせること！！
(0.5ポイントの罫線と1ポイントの罫線なんかではコントラスト生まれない！大きい罫線との差異を明らかにしたいなら0.5ポイントと4ポイントを使うとかやるなら盛大にやること！！)

・2つの要素間に微妙なレベルでしか違いが見られないなら、それは「コントラスト」やなくてむしろ要素の「衝突」としか言えない。

・大きな要素を目立たせるために小さい要素をより小さくするのも一つの手。例えば見出しと本文とか。本文小さくするのが怖いから見出しを大きくする流行りがちやけど、それで不格好になってしまうなら本文小さくなる方が良い。本文小さくすると読まれなくなるんじゃとか思うかも知れんけど、一目見た時に注目して興味持ってもらえるかの方が大事！！興味持ってもらえたらどんだけ本文が小さくても読んでもらえる。

・コントラストは第一印象を決める重要な要素。やってることはシンプルな変更加えるだけ(小さくするとか色を変えるとか。)でもそれが手に取ってもらえるかどうかを決めるからとにかくコントラストは「見返りが多い」。

・大切なのは見て欲しい部分を強調すること。情報の組み立てが読者に一瞬で分かるように。コントラストつけたせいで、焦点でない部分が強調されてるようではダメ。

とにかく大体同じではダメ！！！！コントラスト生み出す時は、違いをはっきり際立たせること

という感じ！視覚的表現をめちゃくちゃ大胆にしたり最小限にすることを恐れないのが大事らしい。なんとなくここは微妙に違うフォントにしよとかは意味ないよ。

4つの基本原則、1つずつ順番に適用していくだけでも効果的だとか。
項目グループ化して、空白を恐れず関連するグループは近接させて→１種類に絞って整列方法使って→反復したりあえて違く部分作ってコントラスト生み出したり！

とりあえず「無難に中央揃えするな！空白恐ることなかれ！」は意識したいね(　-`ω-)