8/8より火曜日担当はちふねこさん
2023年12月12日 根拠あるきれいなデザインの作り方
【黄金比を使ったレイアウトのヒント】

おしながき
1⃣黄金比って何?
2⃣どのようにデザインに応用されているのか
3⃣簡単に黄金比を活用する方法
黄金比具体的な数値だと 1:1.6
1⃣黄金比って何?
✅人が最も美しいと感じるバランスの比率
✅何百年も前から、デザインや建築物で活用されている(主に西洋で使われていた)
パリの凱旋門、モナリザ、クレジットカードの比率など(株式会社アーティス様HPより引用 ↓)

✅デザインのための数学 著者:牟田 淳

大昔から美しい建造物、絵画の構図にも活用されている比率、黄金比。
黄金比は美しさを感じるデータがある。
黄金比 およそ1:1.6 活用することによって、美しいという根拠が生まれる。
✅デザインするうえで禁句なのは「なんとなく」
デザインは色々な作業がある
レイアウト決めるときに、
・メインのエリアと補足情報のエリアを分けるときの比率
・文字大きさの差
・タイトルと補足情報の差
・ランダムでたくさん写真を散りばめるデザインするとき、
その画像同士の大きさの差、比率など
→ 色々な作業で、初心者は「なんとなく」だとうまくいかない
→ 経験が少ないうちは、「なんとなく」は禁句
✅全てにおいて、根拠を持たせる気持ちで作らないといけない
その根拠の一つとして、黄金比は使える
2⃣どのようにデザインに応用されているのか
✅一番、活用されるのはレイアウト
✅黄金螺旋
黄金比率の四角の中にさらに螺旋が描かれているような図形
それを使ったレイアウトがとても活用できる
✅シンプルな活用例
写真をしきつめるデザインのバナーを作る時に、黄金比の中に
しきつめられている四角形にならって写真を配置したり、
余白のバランスとかも黄金螺旋にならって作る

一番広い部分、広い正方形部分はたっぷり余白を開けて、
だんだん螺旋のうずまきの内側、その部分は密集しているので、
文字情報もたくさん載せ、細かい情報はそこに集めるなど、
デザイン全体の余白、密度をこの黄金螺旋にならって、レイアウトする事が多い
✅黄金比のレイアウトについてとても分かりやすい本
→ 最強構図 知ってたらデザインうまくなる。

✅レイアウト以外だと、ロゴデザインや文字サイズを決めるときなどに使われている。
黄金比のいいところは、「根拠のある出来るデザイン」という事と、
なにより、時短になる
文字のサイズ、写真の大きさ、
ランダムに○を並べて楽しい雰囲気のデザインを作りたい時、
サイズのバランスを自分がいちから決めると難しい。
最適なバランスに出会うまで時間かけて、微調整したりする
はじめに黄金比をベースにやってみると、
それでしっくりくるならそれでいいし、
いまいちだったら、そこから少し調整すればいい
まず黄金比で基準とするとデザイン制作するうえで効率よく制作できる
3⃣簡単に黄金比を活用する方法
→ すばり三分割法
カメラを撮るときの構図などで活用される
3×3に分けたグリッドの線
三分割法にならって、分割線の上に注目させたい写真を置いたり、
タイトルを配置したりというテクニックがある。
それが実は1:2という比率が書かれているが、1:2というのは黄金比の1.:1.6に近い
→ 簡単に黄金比の使いたいときは「三分割法」を意識するといい
根拠あるきれいなデザインの作り方
【黄金比を使ったレイアウトのヒント】
ありがとうございます!
黄金比、黄金螺旋の図、なんとなく
聞いたことありましたが、具体的な説明をしていただき、
とても理解できました。
(あ、「なんとなく」は禁句でしたw)
クレジットカードもそうなんですね。
とても面白いです。
黄金比の事を知ると、また、
ものの見方が変わって楽しくなります。
そして、三分割法。
1:2とても分かりやすいです。
たしかに1:1.6と1:2は近いので、
この感覚だととても簡単ですね。
ありがとうございます。
今回もありがとうございました!
よろしければ、
「フリ校ボイシー火曜日まとめ」もどうぞー