クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

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

デザインってどうやるの?むずかしそう。自分にできるのかな?私もそう思っていました。デザインにはいくつかの「基本原則」があります。その原則をギュッと凝縮した6記事をご紹介。「これを読めば独学デザイナーでもデザインに取り組める!」を目指して書きました♪

【目次】

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

デザインは「メリハリ」が重要。要素の「主役」を「脇役」をはっきりされるのがデザインの第一歩です。後半ではデザインの学習方法も。

f:id:idr_zz:20190304212704j:plain

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

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

【配色の基本】

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

【デザインの学習方法】

  • インプット
  • アウトプット

※参考:デザインも配色も「メリハリ」が9割!基本を身につける学習方法 - クモのようにコツコツと

www.i-ryo.com

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

デザインを形作る画面の縦横比を掘り下げています。正方形(シンメトリー)、伝統的な白銀比・黄金比、デジカメサイズなど。

f:id:idr_zz:20190304212747j:plain

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

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

www.i-ryo.com

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

画面の中の分割位置を掘り下げています。どこで分けるかで主従のメリハリが変わる。「画面構成」の第一歩です。

f:id:idr_zz:20190304212817j:plain

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

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

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

www.i-ryo.com

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

画面構成の次は文字のデザイン。タイポグラフィの基本です。箱組みの中の見出しと本文に「メリハリ」を付ける方法。

f:id:idr_zz:20190304212845j:plain

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

※参考:【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは) - クモのようにコツコツと

www.i-ryo.com

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

HSBは色の三属性(色相・明度・彩度)を数値化したカラーモード。いろんな「色相環」の色相(H値)を掘り下げました。一筋縄ではいきません。。

f:id:idr_zz:20190225212559j:plain

【カラーモード】

  • RGB
  • CMYK
  • HSB

【色相環】

  • HSB色相環
  • マンセル色相環
  • オストワルト色相環
  • PCCS色相環
  • イッテン色相環(2019/02/25追加!)
  • HUE/360色相環
  • Paletton色相環
  • Adobe Color CC色相環

私の愛してやまない「Adobe Color CC」はどうやら「イッテン色相環」に近いと判明!

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

www.i-ryo.com

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

複数の色を組み合わせる「配色」の基本。主従をつける「面積比」と同等に分類する「色相分割」を掘り下げました。

f:id:idr_zz:20190304212959j:plain

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

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

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

  • トライアド(正三角形)
  • テトラード(正四角形)
  • ペンタード(正五角形)
  • ヘクサード(正六角形)

そして後半では私の愛してやまない「Adobe Color CC」での配色方法をご紹介!

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

www.i-ryo.com

最後に

これまでなんとなく知識としては知っていたデザインの基本原則を掘り下げることで、自分の中でもいろいろ明確になりました。

なお、記事の中で紹介しているデザインツール「Figma」と配色ツール「Adobe Color CC」のおかげでブログ内の図が作りやすくなりました。

※参考:Figma: the collaborative interface design tool.

※参考:Adobe Color CC

これがあればCodePen感覚で気軽にデザインができます!

デザインを諦めない!ということで、中断していた「デザイン模写」を再開しようと思っています。(このブログのルーツネタです)

※参考:デザトレ の検索結果 - クモのようにコツコツと

それではまた。