Edited at

【デザイン】基本がわかる6記事(メリハリ、縦横比率、画面分割、タイポ、色相環、配色)まとめ

デザインを作る側もレビューする側も基本原則を理解するとデザイン制作がスムーズになります。基本がわかる記事をまとめました。


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


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


  • 近接

  • 整列

  • コントラスト

  • 反復


【配色の基本】


  • 色の三属性(色相・明度・彩度)

  • 面積比(メイン、ベース、アクセント)

20190304212704.jpg

※参考:デザインも配色も「メリハリ」が9割!基本を身につける学習方法


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


主なアスペクト比の一覧


  • スクエア(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

※参考:【黄金比、白銀比】代表的なアスペクト比(縦横比率)を一覧にしてみた


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


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


  • シンメトリー(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

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

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

※参考:CSS Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し!!)


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

20190304212845.jpg

※参考:【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)


  • 箱組み

  • 行長

  • 行間

  • ジャンプ率


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

【カラーモード】


  • RGB

  • CMYK

  • HSB

【色相環】


  • HSB色相環

  • マンセル色相環

  • オストワルト色相環

  • PCCS色相環

  • イッテン色相環

  • HUE/360色相環

  • Paletton色相環

  • Adobe Color CC色相環

20190225212559.jpg

※参考:【配色】色相環のH値をいろいろ測ってみた(HSB、マンセル、オストワルト、PCCS、Web配色ツール)


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

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


  • カラーパレットより面積比で考える

  • アイデンティティ(同一色相)

  • アナロジー(類似色相)

  • ダイアード(補色)

【同等に分類する配色(色相分割)】


  • トライアド(正三角形)

  • テトラード(正四角形)

  • ペンタード(正五角形)

  • ヘクサード(正六角形)

20190304212959.jpg

※参考:【配色の基本】面積比(メイン、アクセント、ベース)と色相分割【Adobe Color CC】