あなたの知らない「余白」の世界

社内勉強会でやったものです。
非デザイナ向けに、僕の過去事例をあわせてタイポグラフィやレイアウトの基礎を含めた内容でやってみました。

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