見た目のデザインの分解｜デザイン苦手さん、非デザイナー必見
↓↓↓↓↓ こちらの話の続きです！
「デザインとアートは違う」
「デザインは見た目だけがよくてもダメ」
よく聞きます。
ですが、私は逆に
「表層（見た目）が苦手なデザイナーが多い」
方が気になります。
ということで、今回は見た目のデザインの分解をしてみます。
見た目のデザインの分解
レイアウト
色
文字
画像
図形（線・面）
この5つの要素に分解します。
それぞれを
機能
イメージ
によって、調整する作業が表層づくりです。
それぞれをもう少し分解します。
レイアウト
位置
規則的／不規則
関係性
大きさ
優先順位
読みやすさ
ジャンプ率（大きさの差で強さを伝える）
余白
関係性
強調
イメージ（盛り上がっている／落ち着き、ゆったり、高級感）
読みやすさ
色
色相
色み（赤、橙、黄、緑、水色、青、紫）
それぞれの色相が持つイメージ
トーン
色あい（彩度＋明度）
強弱（彩度）
重い／軽い（明度）
トーンが持つイメージ
配色
色相・トーンが近い…なじむ（同系色、類似色、同一トーン、類似トーン）
色相が遠い…印象的になる（アクセントカラー）
有彩色／無彩色（白・黒・グレー）
背景との明度差が低いと文字は読めない（視認性）
文字
書体
読みやすい書体（可読性）
見やすい書体（視認性）
イメージの再現
太さ
太さ…力強さ
細さ…洗練、美しい
文は細くないと読めない
文字間・行間
リズムよく読ませるために文字間・行間を調整する
高級感を伝えたい時は文字間・行間はゆるめる
新聞、雑誌、小説等の本文は文字間をツメない（ベタ組み）
画像
写真
文字では表現しきれない複雑な表現（・色 ・形 ・質感 ・雰囲気）
情報伝達が早い
情報量が多い
具体的にわかりやすい
イラスト
ぬくもりを与える
自由度が高い
ピクトグラム
情報伝達が早い
言語の壁を超える
表・図
複雑な仕組み、流れ、変化、差を見える化できる
文字ばかりのデザインになると単調になるので、画像には単調さを防ぐという役割もあります。
図形（線と面）
情報のグループ化
分ける
区切る
つなぐ
囲む
優先順位の定義
強調
補足
Webサイト、アプリケーションのリンク、ボタン
線（文字の下線）…リンク
面（文字の囲み）…ボタン
形によるイメージの伝達
規則性
通常、規則性のある形（水平線、垂直線、長方形、円）を使う
不規則な形を使うとぬくもりや柔らかさが表現できる
太さ
太い…力強い、元気、こども
細い…洗練さ、美しさ
区別するための線は一番細い線（印刷物は0.25〜0.3ptや0.1mm、Webは1px）の使用が多い
鋭い or 丸い
ぬくもりを与えたい時は丸くする
まとめ
という感じで、見た目のデザインを分解してみました。
今回は超簡潔にまとめているだけなので、実際には一つひとつ掘り下げてお教えさせていただいています。
求める機能やイメージに合わせて、それぞれをどうするかが決まっていきます。
そういう意図がない状態で以上の要素を決めているとすれば、それは「当てずっぽう」と言わざるをえません。
再現性がないものは能力ではなく、たまたまです。
ということで、今回羅列した事柄について一つひとつ、後日お話させていただきます（時間がかかると思うので…）。
乞うご期待✊
↓↓↓ 出だしから好評な「デザイン個別講義」です〜
↓↓↓ 完全マンツーマンでお教えするスクールをやってます〜