【デザインの基本】メリハリ、縦横比率、画面分割、タイポ、色相環、配色 まとめ

デザインの基本原則を理解するとデザイナーとチーム作業をするエンジニアにとっても作業がスムーズになります。デザインの基本がわかる記事をまとめました。

# デザインも配色も「メリハリ」が9割！基本を身につける学習方法

###【デザインの基本4原則】

* 近接
* 整列
* コントラスト
* 反復

### 【配色の基本】

* 色の三属性（色相・明度・彩度）
* 面積比（メイン、ベース、アクセント）

![20190304212704.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/57e1f102-f4b3-86a1-f430-505c89b90922.jpeg)

※参考：[デザインも配色も「メリハリ」が9割！基本を身につける学習方法](https://www.i-ryo.com/entry/2018/11/08/224924)

# 【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた

### 主なアスペクト比の一覧

* スクエア(1:1)
* 白銀比(1.414:1)
* 黄金比(1.618:1)
* デジカメ4:3(1.333:1)
* デジカメ3:2(1.5:1)
* デジカメ16:9(1.777:1)

![20190304212747.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/a841dcd4-2ac0-5e4c-d643-3951a4e379b7.jpeg)

※参考：[【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた](https://www.i-ryo.com/entry/2019/02/12/223530)

# 【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた

### 【「分割比」による分割】

* シンメトリー（1:1）
* 白銀分割（1.414:1）
* 黄金分割（1.618:1）
* 3分割（2:1）
* 4分割（3:1）
* 5分割（4:1）

### 【カラム数による分割】

* グリッドシステム（12分割）
* 6:6カラム（=シンメトリー）
* 7:5カラム（≒白銀分割）
* 8:4カラム（=3分割）
* 9:3カラム（=4分割）
* 10:2カラム（=5分割）

![20190304212817.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/d3afd37a-cecb-652d-f003-1a794acdfb0e.jpeg)

※参考：[【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた](https://www.i-ryo.com/entry/2019/02/17/184952)

画面分割の内容でCSS Grid版を作りました！

※参考：[CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）](https://www.i-ryo.com/entry/2019/06/08/161253)


# 【行長・行間・ジャンプ率】タイポグラフィ事始め（適度な箱組みとは）

![20190304212845.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/2e940026-2d6b-ebc1-3c91-dd2cfdeb13c6.jpeg)

※参考：[【行長・行間・ジャンプ率】タイポグラフィ事始め（適度な箱組みとは）](https://www.i-ryo.com/entry/2019/02/19/230354)

* 箱組み
* 行長
* 行間
* ジャンプ率

# 【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール）

【カラーモード】

* RGB
* CMYK
* HSB

【色相環】

* HSB色相環
* マンセル色相環
* オストワルト色相環
* PCCS色相環
* イッテン色相環
* HUE/360色相環
* Paletton色相環
* Adobe Color CC色相環

![20190225212559.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/df562a73-533d-c9d9-c050-a2783a31de23.jpeg)

※参考：[【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール）](https://www.i-ryo.com/entry/2019/02/24/211711)


# 【配色の基本】面積比（メイン、アクセント、ベース）と色相分割【Adobe Color CC】

【主従をつける配色（メイン、ベース、アクセント）】

* カラーパレットより面積比で考える
* アイデンティティ（同一色相）
* アナロジー（類似色相）
* ダイアード（補色）

【同等に分類する配色（色相分割）】

* トライアド（正三角形）
* テトラード（正四角形）
* ペンタード（正五角形）
* ヘクサード（正六角形）

![20190304212959.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83918/764ab414-d1d7-8713-de21-2e086bd56a27.jpeg)

※参考：[【配色の基本】面積比（メイン、アクセント、ベース）と色相分割【Adobe Color CC】](https://www.i-ryo.com/entry/2019/02/28/215606)

# おまけ：デザトレ

デザイントレーニング略してデザトレ。現フロントエンドエンジニアの私がWebデザイナー時代に行っていたデザイン模写&研究です。

### デザイン模写

世に出たプロの作品から構成、配色、タイポグラフィを研究する

※参考：[デザトレ01 デザイン模写](https://www.i-ryo.com/entry/2017/02/14/081331)

※参考：[デザトレ002](https://www.i-ryo.com/entry/2017/02/17/005539)

※参考：[デザトレ03](https://www.i-ryo.com/entry/2017/02/20/004042)

※参考：[デザトレ04](https://www.i-ryo.com/entry/2017/03/02/020147)

※参考：[デザトレ005](https://www.i-ryo.com/entry/2017/03/06/005547)

※参考：[デザトレ006](https://www.i-ryo.com/entry/2017/03/07/005434)

※参考：[デザトレ007](https://www.i-ryo.com/entry/2017/03/10/022020)

### テクスチャ

非Adobe環境で同じことができるかテスト

※参考：[デザトレ008 グランジ風テクスチャ文字](https://www.i-ryo.com/entry/2017/03/12/020958)

### 家紋研究

家紋のシンメトリーな美しさはどうやって成立しているのか。自作してみる。

※参考：[デザトレ009 家紋研究その1](https://www.i-ryo.com/entry/2017/03/14/020427)

※参考：[デザトレ010 家紋研究その2](https://www.i-ryo.com/entry/2017/03/16/012653)

※参考：[デザトレ011 家紋研究その3](https://www.i-ryo.com/entry/2017/03/16/234519)

※参考：[デザトレ012 家紋研究その4](https://www.i-ryo.com/entry/2017/03/17/022254)

※参考：[デザトレ013 家紋研究その5](https://www.i-ryo.com/entry/2017/03/18/191939)

### パターン研究

上下左右がの模様が繋がっている繰り返しパターンの作り方

※参考：[デザトレ014 自作パターン1](https://www.i-ryo.com/entry/2017/03/19/170403)

※参考：[デザトレ015 ランダムシームレスパターン](https://www.i-ryo.com/entry/2017/03/26/072401)