デザインの基本原則を理解するとデザイナーとチーム作業をするエンジニアにとっても作業がスムーズになります。デザインの基本がわかる記事をまとめました。
デザインも配色も「メリハリ」が9割！基本を身につける学習方法
【デザインの基本4原則】
- 近接
- 整列
- コントラスト
- 反復
【配色の基本】
- 色の三属性（色相・明度・彩度）
- 面積比（メイン、ベース、アクセント）
※参考：デザインも配色も「メリハリ」が9割！基本を身につける学習方法
【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた
主なアスペクト比の一覧
- スクエア(1:1)
- 白銀比(1.414:1)
- 黄金比(1.618:1)
- デジカメ4:3(1.333:1)
- デジカメ3:2(1.5:1)
- デジカメ16:9(1.777:1)
※参考：【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた
【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた
【「分割比」による分割】
- シンメトリー（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分割）
※参考：【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた
画面分割の内容でCSS Grid版を作りました！
※参考：CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）
【行長・行間・ジャンプ率】タイポグラフィ事始め（適度な箱組みとは）
※参考：【行長・行間・ジャンプ率】タイポグラフィ事始め（適度な箱組みとは）
- 箱組み
- 行長
- 行間
- ジャンプ率
【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール）
【カラーモード】
- RGB
- CMYK
- HSB
【色相環】
- HSB色相環
- マンセル色相環
- オストワルト色相環
- PCCS色相環
- イッテン色相環
- HUE/360色相環
- Paletton色相環
- Adobe Color CC色相環
※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール）
【配色の基本】面積比（メイン、アクセント、ベース）と色相分割【Adobe Color CC】
【主従をつける配色（メイン、ベース、アクセント）】
- カラーパレットより面積比で考える
- アイデンティティ（同一色相）
- アナロジー（類似色相）
- ダイアード（補色）
【同等に分類する配色（色相分割）】
- トライアド（正三角形）
- テトラード（正四角形）
- ペンタード（正五角形）
- ヘクサード（正六角形）
※参考：【配色の基本】面積比（メイン、アクセント、ベース）と色相分割【Adobe Color CC】
おまけ：デザトレ
デザイントレーニング略してデザトレ。現フロントエンドエンジニアの私がWebデザイナー時代に行っていたデザイン模写&研究です。
デザイン模写
世に出たプロの作品から構成、配色、タイポグラフィを研究する
※参考：デザトレ01 デザイン模写
※参考：デザトレ002
※参考：デザトレ03
※参考：デザトレ04
※参考：デザトレ005
※参考：デザトレ006
※参考：デザトレ007
テクスチャ
非Adobe環境で同じことができるかテスト
家紋研究
家紋のシンメトリーな美しさはどうやって成立しているのか。自作してみる。
※参考：デザトレ009 家紋研究その1
※参考：デザトレ010 家紋研究その2
※参考：デザトレ011 家紋研究その3
※参考：デザトレ012 家紋研究その4
※参考：デザトレ013 家紋研究その5
パターン研究
上下左右がの模様が繋がっている繰り返しパターンの作り方
※参考：デザトレ014 自作パターン1