Slide 1
Slide 1 text
www.skinnybrian.com
by Brian
December 21st, 2018
The World of "Margin" Don't You Know
あ な た の 知 ら な い「 余 白 」
の 世 界
Slide 2
Slide 2 text
www.skinnybrian.com 2
A g e n d a
1. 自 己 紹 介
2. 本 題（２つ のレッスン）
3. まとめ
（それぞれ）
Slide 3
Slide 3 text
www.skinnybrian.com 3
#1 self-introduction
自 己 紹 介
Slide 4
Slide 4 text
www.skinnybrian.com 4
ブ ラ イ ア ン( 2 6)
本 名 : 堀 口 慎 之 介
福 岡 工 業 大 学 短 期 大 学 部
九 州 工 業 大 学 情 報 工 学 部 編 入
留 年
H a m e e 株 式 会 社 入 社
現 在 新 卒 - 0 . 5 年 目 ( 異 動 の た め )
2 017
2 015
2 014
2 012
Slide 5
Slide 5 text
www.skinnybrian.com 5
こ こ 最 近 の 体 重 推 移
Slide 6
Slide 6 text
www.skinnybrian.com 6
こ こ 最 近 の 体 重 推 移
2 012
4 0 k g
Slide 7
Slide 7 text
www.skinnybrian.com 7
こ こ 最 近 の 体 重 推 移
2 012
4 0 k g 5 0 k g
2 017. 3
Slide 8
Slide 8 text
www.skinnybrian.com 8
こ こ 最 近 の 体 重 推 移
2 012
4 0 k g 5 0 k g 6 7 k g
2 017. 3 2 018
※ ピ ー ク 時
Slide 9
Slide 9 text
www.skinnybrian.com 9
こ れ か らも た くさ ん 食 べ ま す
( ´ ▽ ` ) ﾉ
Slide 10
Slide 10 text
www.skinnybrian.com 10
#2 Today's Main Contents
さ て 本 題 で す
Slide 11
Slide 11 text
www.skinnybrian.com 11
「 余 白 」
と 言 う と
Slide 12
Slide 12 text
www.skinnybrian.com 12
Slide 13
Slide 13 text
www.skinnybrian.com 13
Slide 14
Slide 14 text
www.skinnybrian.com 14
「 余 白 」
Button A
Slide 15
Slide 15 text
www.skinnybrian.com 15
C S S で 書 い たり
{
padding: 7px 15px;
margin: 7px;
}
Slide 16
Slide 16 text
www.skinnybrian.com 16
余 白 を 見 つ け て
デ ザ インちょっと わ か る
よう に な ろ う！！
余 白って デ ザ イン の 中 で も 大 事 な 要 素
Slide 17
Slide 17 text
www.skinnybrian.com 17
具 体 的 に は 今 日 の ゴ ー ル
今まで " 見 え て な か っ た" 余 白 が
" 見 える " よ う に な る
①
② 心 地 よ い 余 白を 見 つ け る
審 美 眼 が ちょっ と 身 に つ く
Slide 18
Slide 18 text
www.skinnybrian.com 18
そ ん な 2 つ の「 余 白 」を 学 び ま す
文 字 の 余 白
レ イ ア ウ ト の 余 白
Training #1
Training #2
Slide 19
Slide 19 text
www.skinnybrian.com 19
Training #1
文 字 の 余 白
Slide 20
Slide 20 text
www.skinnybrian.com 20
AWESOME!
Slide 21
Slide 21 text
www.skinnybrian.com 21
AWESOME!
Slide 22
Slide 22 text
www.skinnybrian.com 22
AWESOME!
AWESOME!
Slide 23
Slide 23 text
www.skinnybrian.com 23
ど ち ら が 綺 麗 に 見 え ま す か ？
Slide 24
Slide 24 text
www.skinnybrian.com 24
AWESOME!
AWESOME!
↓ の ほ う が 多 い ( と 思 い た い )
Slide 25
Slide 25 text
www.skinnybrian.com 25
AWESOME!
AWESOME!
調 整 前 ( 普 通 に 打 ち 込 ん で し ま う と バ ラ ン ス が 崩 れ る )
調 整 後
Slide 26
Slide 26 text
www.skinnybrian.com 26
AWESOME!
AWESOME!
文 字 の 間 隔 調 整 ＝ カ ー ニ ン グ す る
Slide 27
Slide 27 text
www.skinnybrian.com 27
文 字 の 間 隔 が 違 い ま す
AWESOME!
AWESOME!
Slide 28
Slide 28 text
www.skinnybrian.com 28
字 と 字 の ス ペ ー ス を 均 等 に
曲 線 が か っ て た り 、 斜 め の と き ほ ど 狭 め て あ げ る
AWESOME!
AWESOME!
Slide 29
Slide 29 text
www.skinnybrian.com 29
す る と 綺 麗 に な る ！
AWESOME!
Slide 30
Slide 30 text
www.skinnybrian.com 30
日本 語 の 場 合 は ちょっと 厄 介
Slide 31
Slide 31 text
www.skinnybrian.com 31
ほ り ぐ ち 慎 之 介
Slide 32
Slide 32 text
www.skinnybrian.com 32
ほ り ぐ ち 慎 之 介
Slide 33
Slide 33 text
www.skinnybrian.com 33
ほ り ぐ ち 慎 之 介
平 仮 名 は と に か く 細 い
※ フ ォ ン ト に も よ る
＝ 間 隔 が 空 き す ぎ る 印 象
Slide 34
Slide 34 text
www.skinnybrian.com 34
こ れ も カーニ ングし て み る
Slide 35
Slide 35 text
www.skinnybrian.com 35
ほ り ぐ ち 慎 之 介
こ こ の 間 隔 を 基 準 に す る と
Slide 36
Slide 36 text
www.skinnybrian.com 36
ほりぐち慎 之 介
Slide 37
Slide 37 text
www.skinnybrian.com 37
ほりぐち慎 之 介
Slide 38
Slide 38 text
www.skinnybrian.com 38
ほりぐち慎 之 介
ち ょ っ と ひ ろ い か も
ち ょ っ と せ ま い か も
Slide 39
Slide 39 text
www.skinnybrian.com 39
ほりぐち慎 之 介
綺 麗 に な っ た ！
Slide 40
Slide 40 text
www.skinnybrian.com 40
も う い っ ち ょ い っ て み よ う
Slide 41
Slide 41 text
www.skinnybrian.com 41
高 輪 ゲ ー ト ウ ェ イ
Slide 42
Slide 42 text
www.skinnybrian.com 42
高 輪 ゲ ー ト ウ ェ イ
Slide 43
Slide 43 text
www.skinnybrian.com 43
高 輪 ゲ ー ト ウ ェ イ
こ の 「 ェ 」 が ミ ソ
Slide 44
Slide 44 text
www.skinnybrian.com 44
高 輪ゲートウェイ
こ れ ち ょ っ と 難 し い
Slide 45
Slide 45 text
www.skinnybrian.com 45
高 輪 ゲ ー ト ウ ェ イ
元 の や つ
Slide 46
Slide 46 text
www.skinnybrian.com 46
ま と め る と
カ ー ニ ン グ を 使 い こ な せ ば
（ 特 に 見 出 し 文 字 ） が
綺 麗 に 仕 上 る こ と が で き る ！
Slide 47
Slide 47 text
www.skinnybrian.com 47
W e b で 練 習 できま す
https://type.method.ac
Slide 48
Slide 48 text
www.skinnybrian.com 48
Training #2
レ イ ア ウ ト の
余 白
Slide 49
Slide 49 text
www.skinnybrian.com 49
余 白 を 見 つ け れ な か っ た
大 学 時 代
Slide 50
Slide 50 text
www.skinnybrian.com 50
Slide 51
Slide 51 text
www.skinnybrian.com 51
結 構 見 る 人 を 困 惑 し て し ま う レ イ ア ウ ト
誰 が 誰 な の か
わ か り に く い …
名 前 ？ 職 業 ？
区 切 り 謎 …
Slide 52
Slide 52 text
www.skinnybrian.com 52
余 白 が な い ！ ！
Slide 53
Slide 53 text
www.skinnybrian.com 53
Slide 54
Slide 54 text
www.skinnybrian.com 54
パ ッ ト 見 わ か り づ ら い ！
Slide 55
Slide 55 text
www.skinnybrian.com 55
そ も そ も 要 素 を 確 認
・ フ ァ ッ シ ョ ン 写 真
・ 番 号 ( ナ ン バ リ ン グ )
・ 名 前
・ 年 齢
・ 職 業
・ 一 言
Slide 56
Slide 56 text
www.skinnybrian.com 56
伝 え た い 優 先 順 位 を 考 え る
フ ァ ッ シ ョ ン 系 か つ 若 者 の フ リ ー ペ ー パ ー な ん だ し …
① フ ァ ッ シ ョ ン 写 真
② 名 前 ( 誰 な の か )
③ 年 齢 ( ど の く ら い の )
④ 職 業
⑤ 番 号 ( ナ ン バ リ ン グ )
⑥ 一 言
Slide 57
Slide 57 text
www.skinnybrian.com 57
そ し て 2 年 後 …
プ ラ イ オ リ テ ィ を 考 え な が ら
レ イ ア ウ ト を 考 え る
Slide 58
Slide 58 text
www.skinnybrian.com 58
こ こ ま で 改 善 し た
Slide 59
Slide 59 text
www.skinnybrian.com 59
① フ ァ ッ シ ョ ン 写 真
② 名 前 ( 誰 な の か )
③ 年 齢 ( ど の く ら い の )
④ 番 号 ( ナ ン バ リ ン グ )
Slide 60
Slide 60 text
www.skinnybrian.com 60
余 白 を 意 識 す れ ば 印 象 が 変 わ る
誰 の 写 真 か
わ か っ た ！
お し ゃ れ ！！
Slide 61
Slide 61 text
www.skinnybrian.com 61
Slide 62
Slide 62 text
www.skinnybrian.com 62
Slide 63
Slide 63 text
www.skinnybrian.com 63
Slide 64
Slide 64 text
www.skinnybrian.com 64
ま と め
受 け 手 の 印 象 が 変 わ る
◎ 余 白 を 工 夫 す る
＝ 情 報 整 理
Slide 65
Slide 65 text
www.skinnybrian.com 65
街 頭 の 広 告 と か
「 余 白 」 観 察 し て み て は ？
Slide 66
Slide 66 text
www.skinnybrian.com 66
Thanks for your Attention!