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

Transcript

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!