Save 37% off PRO during our Black Friday Sale! »

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

8ada576a21f7c559aa754746308d5093?s=47 Brian🔆👕
December 21, 2018

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

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

8ada576a21f7c559aa754746308d5093?s=128

Brian🔆👕

December 21, 2018
Tweet

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. 本 題(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!