デザイン入門基礎でデザインを学ぶ : デザインの基本の流れ編
ebi_yuモチベーション
- エンジニアとして最低限のデザインの知識を身につけたい
- デザインレビューに対して、的確な指摘ができるようになりたい
- 自身の個人開発無価のデザインができるようになりたい
教材
デザイン入門教室［特別講義］ 増補改訂版 確かな力を身に付けられる 学び、考え、作る授業
その他サイトから画像を引用させていただいた場合は下にリンクを記載する
ebi_yuデザインを学ぶ前に一度デザインをつくてみる
要件
### 制作物の概要
制作物 : オープン告知チラシ
店名 : UNSAND (サンドイッチ)
開店日 : 10月15日
営業時間 11:00~20:00
住所 100-0021 渋谷区広尾1丁目 123-xx WWW BLD 1F
電話 03-5466-xxxx
URL www.unsand.no.nr
### 使用するテキスト
オープン記念20%OFF
NEW OPEN10:15 OPEN 11:00~
新鮮な野菜をメインに使った体に優しいサンドイッチ専門店
「UNSAND」が10月15日広尾にオープンします。
100-0021 渋谷区広尾1丁目 123-xx WWW BLD 1F
OPEN : 11:00~20:00
URL : www.unsand.no.nr
### 使用するアイコン/画像
- サンドイッチの写真
- 店アイコン
### デザインテイスト
スタイリッシュなヨーロピアンテイストにしたい
成果物
工夫ポイント
- 色合いはサンドイッチの具材の色に合わせる
- 図形や写真の横幅を合わせる
- URLや地図はイラストやQRコードを用いて視覚的にわかりやすくする
- 文字に強弱をつける
ebi_yu以下からデザインの本を読んで学んでいく。
デザイン制作の基本の流れ
1. 情報の整理
2. レイアウト① 版面・マージンの設定
3. レイアウト② グリッドの設定
4. レイアウト③ 役割を与える
5. レイアウト③ 強弱を与える
6. 配色
7. 書体選び
8. 情報の図示化
1. 情報の整理
5W1Hで情報を整理する
- いつ : 10月15日 11:00~20:00
- 誰が : サンドウィッチショップ
- どこで : 広尾
- 何を : サンドウィッチ
- どのように : チラシで手渡し
- 目的は : オープンについて知ってもらう/オープンキャンペーンの告知
- 結果 : 店に来てもらう
優先順位
伝えたいこと=目的が最優先である。
店名などはどこでの情報になるので、そこまで優先度は高くない?
もし依頼を受けて行う場合は、事前にクライアントと意識のすり合わせと合意は必須。
### 1. 目的は
オープン記念20%OFF
NEW OPEN10:15 OPEN 11:00~
### 2. いつ
10月15日 11:00~20:00
### 3. どこで
UNSAND (サンドイッチ)
住所 100-0021 渋谷区広尾1丁目 123-xx WWW BLD 1F
電話 03-5466-xxxx
URL www.unsand.no.nr
2. レイアウト① 版面・マージンの設定
- 最初にマージンと版面を設定する
- 版面が大きい = マージンが小さい と情報量が大きく、にぎやかな印象を受ける
- 反面が小さい = マージンが小さいと情報量が少なく、落ち着いて見える。
版面が大きい
版面が小さい
ebi_yu3. レイアウト② グリッドの設定
グリッドを使うことでデザインにまとまりが生まれる。
グリッドが細かいほど、さまざまなレイアウトのバリエーションが生まれる
グリッドのサイズは文字の大きさの倍数が良い。
3 x 3 グリッド
6 x 8 グリッド
3 x 3よりもさまざまなデザインを検討できる
グリッドサイズ（縦×横）：27.5mm × 27.5mm
縦の隙間（ギャップ）：8.14mm
横の隙間（ギャップ）：5mm
マージン（上下左右）：10mm
ebi_yu4. レイアウト③ 役割を与える / 5. レイアウト③ 強弱を与える
グループ化
- 同じ役割を持つもの/同グループのものは近くに配置する。
- 別の情報はマージンを開けて、離れたところに配置する。
揃える
- レイアウトは揃えることが基本
- 中央揃えは扱いが難しい。
強弱
- ジャンプ率をつける (大きい要素と小さい要素の比率の差)
- 文字の大きさ、画像の大きさ、
実際の例
名刺を例にとった例
(左 : ダメな例 / 右 : 良い例)
-
画像グループ名前グループ会社情報グループに分ける -
名前、会社名を文字の大きさ、太字で強調する - グループとグループの間にできるだけ、余白を取る
ebi_yu6. 配色
トーンや色相を意識する。
配色のサンプルを提供しているサイトがあるので、そこから選ぶのもアリ。
6-1. トーン
色が持つ彩度と明度の組み合わせ。
配色を考える際は同じトーンまたは近いトーンからカラーを選ぶのが基本
ペールトーン
淡い、柔らかい、軽い、優しい、女性的、かわいい
ダークトーン
暗い、知的、大人、落ち着いた、丈夫な
6-2. 色相
補色と反対色
色相環において、隣り合う色を類似色、反対側にある色を補色
捕食の両サイドを反対色と呼ぶ。
6-3. 配色の例
調和の取れた配色の基本はトーンを合わせること。
背景にトーンが違う色を設定してメリハリをつけることもある。
参考までに以下のような配色パターンがある
-
ドミナント・カラー配色
同じ色相や類似色で配色したもの。 -
ドミナント・トーン配色
同じトーンで配色したもの。 -
カマイユ配色
濃度や明度のみが違う色で配色したもの。
ebi_yu下記サイトから画像を引用
7. 書体選び
書体は基本的に以下に分類できる。
- 和文 : ゴシック体/明朝体
- 欧文 : サンセリフ体/セリフ体
7-1. 明朝体/セリフ体
明朝体/セリフ体には飾り(うろこ)が付いており、横線より縦線の方が太い.。
小さくても可読性に優れているため、長文など読ませたい文字に有用。
明朝体/セリフ体の特徴
- 文字の線幅が太いほど、権威的、歴史的、男性的、大人な印象を与える。
- 文字の線幅が小さいほど、柔軟、モダン、中世的、品格といった印象を与える。
7-2. ゴシック体/サンセリフ体
ゴシック体/サンセリフ体は飾り(うろこ)がなく、縦線と横線の太さが同じ。
小さくても視認性に優れているため、タイトルなど見せたい文字に有用。
ゴシック体/サンセリフ体の特徴
- 文字の線幅が太いほど、力強い、元気な、男性的、安定感、厳格な印象を与える。
- 文字の線幅が小さいほど、明るい、繊細、女性的、都会的といった印象を与える。
7-3. フォント選び
Googleフォントなどからフォントを検索して選ぶ。
- 基本的に細い書体ほど文字が読みやすい。
- 複数書体を使う場合は、**ファミリー書体(線幅や角度のみを変えた書体)**を使うと統一感が出る。
ebi_yu8. 情報の図示化
読ませる文字ではなく、一瞬で目に飛び込んで認識してほしい見せる文字は
アイコン化して読ませるという手法がある。
アイコン化の際は文字の大きさのメリハリ、伝えたい文字は囲む、全体が一つの塊に見えるように揃えるなどのポイントがある。
アイコン化の例
-
20のフォントを欧文にする。 - 文字サイズのメリハリをつける。
-
20%OFFという文字が塊になるように幅を合わせる。
ebi_yuその他有用な知識
1/3の法則
- 構図を1/3で区切ると美しく見える
- 1/3が画像、2/3が説明など
裁ち落とし
- 余白を気にせず、写真を紙面全体に使うと、ダイナミックなデザインになる。
- 写真が持つ印象が際立つ、また空間の広がりがより際立つ。
重心や重さを意識する
- 色の濃度さによって文字や画像の「重さ」は異なり、紙面全体の重心を考えることが大事
- 重心を紙面の中央にいくように配置すると安定感が生まれる。
ジャンプ率
- ジャンプ率とは「文字の太さ、大きさ、色などによってテキストに強弱をつける」こと。
- ジャンプ率が高いと賑やか、躍動的、若年向けの印象
- ジャンプ率が低いと落ち着いた、高級感のある、大人っぽい印象
- ジャンプ率が高いと見やすくなる。
- 読ませたい場合はジャンプ率が低い方が良い。
ebi_yu最初に作ったデザインをもう一度作り直してみる。
要件
### 制作物の概要
制作物 : オープン告知チラシ
店名 : UNSAND (サンドイッチ)
開店日 : 10月15日
営業時間 11:00~20:00
住所 100-0021 渋谷区広尾1丁目 123-xx WWW BLD 1F
電話 03-5466-xxxx
URL www.unsand.no.nr
### 使用するテキスト
オープン記念20%OFF
NEW OPEN10:15 OPEN 11:00~
新鮮な野菜をメインに使った体に優しいサンドイッチ専門店
「UNSAND」が10月15日広尾にオープンします。
100-0021 渋谷区広尾1丁目 123-xx WWW BLD 1F
OPEN : 11:00~20:00
URL : www.unsand.no.nr
### 使用するアイコン/画像
- サンドイッチの写真
- 店アイコン
### デザインテイスト
スタイリッシュなヨーロピアンテイストにしたい
パターン1
マージン線あり
- グリッドを使い書面を横6 x 縦9に分けて配置。
- マージンを設定する。
- 写真を全体の2/3になるように配置。
- 写真を裁ち落としさせる。
- 一番目立たせたい情報を上に持ってくる。
- 図の方が伝わりやすい情報は図式化する。
- 使う色に統一感を持たせる
- フォントを統一させる。
パターン2
マージン線あり
- できるだけ、写真を大きく配置させる。
- 文字を写真に埋め込む。
- 写真の中の文字を際立たせる。
ebi_yuまとめ
- デザインを行う際は情報を整理/グループ化して優先順位をつける
- マージンとグリッドをまず考える。
- フォントや色は統一したものを使う
- 情報をグループ化して配置することを意識する。
- 1/3の法則や裁ち落としを用いる。
ebi_yu感想
- 思ったよりもwebデザインというより、紙面でのデザインを意識した本だった。
- グリッドやマージンなど、一般的なデザインの知識が身についたのはよかった。
- 手を動かしながら、デザインをしたい人にはおすすめできそう。