![見出し画像](https://assets.st-note.com/production/uploads/images/161575317/rectangle_large_type_2_81790475e2e1b34765b2b78d78c04a6a.png?width=1200)
Photo by
isshi_projects
【デザインの原則】分かりやすいデザインとは?
今日は、こんな相談を受けました
「アプリの要件も、機能も、項目も
できてない状態で
UIを作るんですが、どう作ったらいいのか困ってて」
アプリの要件も、機能も、項目もない。。。
つまり、変更ありきのUIを作るというもの。
その時に出てきたUIの条件に
『分かりやすく、見やすい』
がありました!
最近ね
『分かりやすく、見やすい』って
デザインの4原則に沿って作ること
なのではと思ってます。
『分かりやすく、見やすい』デザインって?
分かりやすく、見やすいのをお願いします。
とよく言われます。
50代の人は
文字か大きい方が見やすい
でも、本文の文字を大きくすると
タイトル文字との強弱がなくなって
見づらい。
分かりやすく、見やすいってなんだ?
と思ってました!
でもね
デザインには「近接」「整列」「反復」「対比」
という原則があって
これを守ると見やすいんです!
だから
最近は「近接」「整列」「反復」「対比」
を守ることが見やすデザインってことにしてます!
「近接」「整列」「反復」「対比」とは?
「近接」
仲間同士は近くに配置する
![](https://assets.st-note.com/img/1731397584-dUskAfeWG5joqHInQMPKVhbT.png?width=1200)
「整列」
始まりが揃ってないより揃ってた方が見やすい
(わざとインデントをつける場合は別)
↓こっちより
![](https://assets.st-note.com/img/1731397814-jiYArntBkQoJlcOfCaTDVMux.png?width=1200)
↓こっち
![](https://assets.st-note.com/img/1731397899-uKCQ6oh79dAW01J2jspNGRmv.png?width=1200)
「反復」
似た構成や役割は繰り返すと分かりやす!
![](https://assets.st-note.com/img/1731397999-M7EfBR1CagYy9nhqbNTUOzlr.png?width=1200)
「対比」
強弱ともいうが、
タイトルは大きく、本文は小さく
など対比をさせることで見やすくなる
![](https://assets.st-note.com/img/1731398147-wSzmTsGJytDpfvPZeorUnukC.png?width=1200)
デザインは知識とバランス感覚
今まで書いてきた
デザインの原則も
実際に手を動かしてみたら実感するはず
でね、
こういう知識を知ってることで
デザインは上手くなる!
そして
手を動かすことで
そのバランス感覚が磨かれてきます!