Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

skinnybrian
December 21, 2018

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

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

skinnybrian

December 21, 2018
Tweet

More Decks by skinnybrian

Other Decks in Design

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 4 ブ ラ イ ア ン( 2 6) 本

    名 : 堀 口 慎 之 介 福 岡 工 業 大 学 短 期 大 学 部 九 州 工 業 大 学 情 報 工 学 部 編 入 留 年 H a m e e 株 式 会 社 入 社 現 在 新 卒 - 0 . 5 年 目 ( 異 動 の た め ) 2 017 2 015 2 014 2 012
  4. www.skinnybrian.com 7 こ こ 最 近 の 体 重 推

    移 2 012 4 0 k g 5 0 k g 2 017. 3
  5. www.skinnybrian.com 8 こ こ 最 近 の 体 重 推

    移 2 012 4 0 k g 5 0 k g 6 7 k g 2 017. 3 2 018 ※ ピ ー ク 時
  6. www.skinnybrian.com 15 C S S で 書 い たり {

    padding: 7px 15px; margin: 7px; }
  7. www.skinnybrian.com 16 余 白 を 見 つ け て デ

    ザ インちょっと わ か る よう に な ろ う!! 余 白って デ ザ イン の 中 で も 大 事 な 要 素
  8. www.skinnybrian.com 17 具 体 的 に は 今 日 の

    ゴ ー ル 今まで " 見 え て な か っ た" 余 白 が " 見 える " よ う に な る ① ② 心 地 よ い 余 白を 見 つ け る 審 美 眼 が ちょっ と 身 に つ く
  9. www.skinnybrian.com 18 そ ん な 2 つ の「 余 白

    」を 学 び ま す 文 字 の 余 白 レ イ ア ウ ト の 余 白 Training #1 Training #2
  10. www.skinnybrian.com 25 AWESOME! AWESOME! 調 整 前 ( 普 通

    に 打 ち 込 ん で し ま う と バ ラ ン ス が 崩 れ る ) 調 整 後
  11. www.skinnybrian.com 28 字 と 字 の ス ペ ー ス

    を 均 等 に 曲 線 が か っ て た り 、 斜 め の と き ほ ど 狭 め て あ げ る AWESOME! AWESOME!
  12. www.skinnybrian.com 33 ほ り ぐ ち 慎 之 介 平

    仮 名 は と に か く 細 い ※ フ ォ ン ト に も よ る = 間 隔 が 空 き す ぎ る 印 象
  13. www.skinnybrian.com 35 ほ り ぐ ち 慎 之 介 こ

    こ の 間 隔 を 基 準 に す る と
  14. www.skinnybrian.com 38 ほりぐち慎 之 介 ち ょ っ と ひ

    ろ い か も ち ょ っ と せ ま い か も
  15. www.skinnybrian.com 46 ま と め る と カ ー ニ

    ン グ を 使 い こ な せ ば ( 特 に 見 出 し 文 字 ) が 綺 麗 に 仕 上 る こ と が で き る !
  16. www.skinnybrian.com 51 結 構 見 る 人 を 困 惑

    し て し ま う レ イ ア ウ ト 誰 が 誰 な の か わ か り に く い … 名 前 ? 職 業 ? 区 切 り 謎 …
  17. www.skinnybrian.com 55 そ も そ も 要 素 を 確

    認 ・ フ ァ ッ シ ョ ン 写 真 ・ 番 号 ( ナ ン バ リ ン グ ) ・ 名 前 ・ 年 齢 ・ 職 業 ・ 一 言
  18. www.skinnybrian.com 56 伝 え た い 優 先 順 位

    を 考 え る フ ァ ッ シ ョ ン 系 か つ 若 者 の フ リ ー ペ ー パ ー な ん だ し … ① フ ァ ッ シ ョ ン 写 真 ② 名 前 ( 誰 な の か ) ③ 年 齢 ( ど の く ら い の ) ④ 職 業 ⑤ 番 号 ( ナ ン バ リ ン グ ) ⑥ 一 言
  19. www.skinnybrian.com 57 そ し て 2 年 後 … プ

    ラ イ オ リ テ ィ を 考 え な が ら レ イ ア ウ ト を 考 え る
  20. www.skinnybrian.com 59 ① フ ァ ッ シ ョ ン 写

    真 ② 名 前 ( 誰 な の か ) ③ 年 齢 ( ど の く ら い の ) ④ 番 号 ( ナ ン バ リ ン グ )
  21. www.skinnybrian.com 60 余 白 を 意 識 す れ ば

    印 象 が 変 わ る 誰 の 写 真 か わ か っ た ! お し ゃ れ !!
  22. www.skinnybrian.com 64 ま と め 受 け 手 の 印

    象 が 変 わ る ◎ 余 白 を 工 夫 す る = 情 報 整 理
  23. www.skinnybrian.com 65 街 頭 の 広 告 と か 「

    余 白 」 観 察 し て み て は ?