search
LoginSignup
7

More than 1 year has passed since last update.

posted at

updated at

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

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

デザインも配色も「メリハリ」が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】

おまけ:デザトレ

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

デザイン模写

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

※参考:デザトレ01 デザイン模写

※参考:デザトレ002

※参考:デザトレ03

※参考:デザトレ04

※参考:デザトレ005

※参考:デザトレ006

※参考:デザトレ007

テクスチャ

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

※参考:デザトレ008 グランジ風テクスチャ文字

家紋研究

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

※参考:デザトレ009 家紋研究その1

※参考:デザトレ010 家紋研究その2

※参考:デザトレ011 家紋研究その3

※参考:デザトレ012 家紋研究その4

※参考:デザトレ013 家紋研究その5

パターン研究

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

※参考:デザトレ014 自作パターン1

※参考:デザトレ015 ランダムシームレスパターン

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7