Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あなたの知らない「余白」の世界
Search
skinnybrian
December 21, 2018
Design
1
1.5k
あなたの知らない「余白」の世界
社内勉強会でやったものです。
非デザイナ向けに、僕の過去事例をあわせてタイポグラフィやレイアウトの基礎を含めた内容でやってみました。
skinnybrian
December 21, 2018
Tweet
Share
More Decks by skinnybrian
See All by skinnybrian
チームのチャットで「デザイン実況」を発信したら沢山コミュニケーションが生まれた話
skinnybrian
1
230
チーム内コミュニケーションを加速させるUX Tips
skinnybrian
3
730
オンラインデザイン講座を開催するための"いろは"
skinnybrian
1
640
器用貧乏なキャリアの考え方〜ブライアンの自己紹介も添えて〜
skinnybrian
0
270
爆速でアウトプットを鍛えるハッカソンのすゝめ
skinnybrian
1
5.6k
意外と知らない、InDesignのこんな使い方。
skinnybrian
3
9.1k
「コーチング」で始める、二人三脚型目標達成術
skinnybrian
0
200
kamatte
skinnybrian
0
210
チーム開発における「婚タクト」
skinnybrian
0
200
Other Decks in Design
See All in Design
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
140
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.1k
Storyboard Honey
rocioparronrubio
0
280
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
660
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
490
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
480
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
460
Haley's adventure chase
ivettetwin
0
240
Featured
See All Featured
Visualization
eitanlees
146
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing Experiences People Love
moore
142
24k
Raft: Consensus for Rubyists
vanstee
140
7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Fireside Chat
paigeccino
37
3.5k
Faster Mobile Websites
deanohume
307
31k
Unsuck your backbone
ammeep
671
58k
Transcript
www.skinnybrian.com by Brian December 21st, 2018 The World of "Margin"
Don't You Know あ な た の 知 ら な い「 余 白 」 の 世 界
www.skinnybrian.com 2 A g e n d a 1. 自
己 紹 介 2. 本 題(2つ のレッスン) 3. まとめ (それぞれ)
www.skinnybrian.com 3 #1 self-introduction 自 己 紹 介
www.skinnybrian.com 4 ブ ラ イ ア ン( 2 6) 本
名 : 堀 口 慎 之 介 福 岡 工 業 大 学 短 期 大 学 部 九 州 工 業 大 学 情 報 工 学 部 編 入 留 年 H a m e e 株 式 会 社 入 社 現 在 新 卒 - 0 . 5 年 目 ( 異 動 の た め ) 2 017 2 015 2 014 2 012
www.skinnybrian.com 5 こ こ 最 近 の 体 重 推
移
www.skinnybrian.com 6 こ こ 最 近 の 体 重 推
移 2 012 4 0 k g
www.skinnybrian.com 7 こ こ 最 近 の 体 重 推
移 2 012 4 0 k g 5 0 k g 2 017. 3
www.skinnybrian.com 8 こ こ 最 近 の 体 重 推
移 2 012 4 0 k g 5 0 k g 6 7 k g 2 017. 3 2 018 ※ ピ ー ク 時
www.skinnybrian.com 9 こ れ か らも た くさ ん 食
べ ま す ( ´ ▽ ` ) ノ
www.skinnybrian.com 10 #2 Today's Main Contents さ て 本 題
で す
www.skinnybrian.com 11 「 余 白 」 と 言 う と
www.skinnybrian.com 12
www.skinnybrian.com 13
www.skinnybrian.com 14 「 余 白 」 Button A
www.skinnybrian.com 15 C S S で 書 い たり {
padding: 7px 15px; margin: 7px; }
www.skinnybrian.com 16 余 白 を 見 つ け て デ
ザ インちょっと わ か る よう に な ろ う!! 余 白って デ ザ イン の 中 で も 大 事 な 要 素
www.skinnybrian.com 17 具 体 的 に は 今 日 の
ゴ ー ル 今まで " 見 え て な か っ た" 余 白 が " 見 える " よ う に な る ① ② 心 地 よ い 余 白を 見 つ け る 審 美 眼 が ちょっ と 身 に つ く
www.skinnybrian.com 18 そ ん な 2 つ の「 余 白
」を 学 び ま す 文 字 の 余 白 レ イ ア ウ ト の 余 白 Training #1 Training #2
www.skinnybrian.com 19 Training #1 文 字 の 余 白
www.skinnybrian.com 20 AWESOME!
www.skinnybrian.com 21 AWESOME!
www.skinnybrian.com 22 AWESOME! AWESOME!
www.skinnybrian.com 23 ど ち ら が 綺 麗 に 見
え ま す か ?
www.skinnybrian.com 24 AWESOME! AWESOME! ↓ の ほ う が 多
い ( と 思 い た い )
www.skinnybrian.com 25 AWESOME! AWESOME! 調 整 前 ( 普 通
に 打 ち 込 ん で し ま う と バ ラ ン ス が 崩 れ る ) 調 整 後
www.skinnybrian.com 26 AWESOME! AWESOME! 文 字 の 間 隔 調
整 = カ ー ニ ン グ す る
www.skinnybrian.com 27 文 字 の 間 隔 が 違 い
ま す AWESOME! AWESOME!
www.skinnybrian.com 28 字 と 字 の ス ペ ー ス
を 均 等 に 曲 線 が か っ て た り 、 斜 め の と き ほ ど 狭 め て あ げ る AWESOME! AWESOME!
www.skinnybrian.com 29 す る と 綺 麗 に な る
! AWESOME!
www.skinnybrian.com 30 日本 語 の 場 合 は ちょっと 厄
介
www.skinnybrian.com 31 ほ り ぐ ち 慎 之 介
www.skinnybrian.com 32 ほ り ぐ ち 慎 之 介
www.skinnybrian.com 33 ほ り ぐ ち 慎 之 介 平
仮 名 は と に か く 細 い ※ フ ォ ン ト に も よ る = 間 隔 が 空 き す ぎ る 印 象
www.skinnybrian.com 34 こ れ も カーニ ングし て み る
www.skinnybrian.com 35 ほ り ぐ ち 慎 之 介 こ
こ の 間 隔 を 基 準 に す る と
www.skinnybrian.com 36 ほりぐち慎 之 介
www.skinnybrian.com 37 ほりぐち慎 之 介
www.skinnybrian.com 38 ほりぐち慎 之 介 ち ょ っ と ひ
ろ い か も ち ょ っ と せ ま い か も
www.skinnybrian.com 39 ほりぐち慎 之 介 綺 麗 に な っ
た !
www.skinnybrian.com 40 も う い っ ち ょ い っ
て み よ う
www.skinnybrian.com 41 高 輪 ゲ ー ト ウ ェ イ
www.skinnybrian.com 42 高 輪 ゲ ー ト ウ ェ イ
www.skinnybrian.com 43 高 輪 ゲ ー ト ウ ェ イ
こ の 「 ェ 」 が ミ ソ
www.skinnybrian.com 44 高 輪ゲートウェイ こ れ ち ょ っ と
難 し い
www.skinnybrian.com 45 高 輪 ゲ ー ト ウ ェ イ
元 の や つ
www.skinnybrian.com 46 ま と め る と カ ー ニ
ン グ を 使 い こ な せ ば ( 特 に 見 出 し 文 字 ) が 綺 麗 に 仕 上 る こ と が で き る !
www.skinnybrian.com 47 W e b で 練 習 できま す
https://type.method.ac
www.skinnybrian.com 48 Training #2 レ イ ア ウ ト の
余 白
www.skinnybrian.com 49 余 白 を 見 つ け れ な
か っ た 大 学 時 代
www.skinnybrian.com 50
www.skinnybrian.com 51 結 構 見 る 人 を 困 惑
し て し ま う レ イ ア ウ ト 誰 が 誰 な の か わ か り に く い … 名 前 ? 職 業 ? 区 切 り 謎 …
www.skinnybrian.com 52 余 白 が な い ! !
www.skinnybrian.com 53
www.skinnybrian.com 54 パ ッ ト 見 わ か り づ
ら い !
www.skinnybrian.com 55 そ も そ も 要 素 を 確
認 ・ フ ァ ッ シ ョ ン 写 真 ・ 番 号 ( ナ ン バ リ ン グ ) ・ 名 前 ・ 年 齢 ・ 職 業 ・ 一 言
www.skinnybrian.com 56 伝 え た い 優 先 順 位
を 考 え る フ ァ ッ シ ョ ン 系 か つ 若 者 の フ リ ー ペ ー パ ー な ん だ し … ① フ ァ ッ シ ョ ン 写 真 ② 名 前 ( 誰 な の か ) ③ 年 齢 ( ど の く ら い の ) ④ 職 業 ⑤ 番 号 ( ナ ン バ リ ン グ ) ⑥ 一 言
www.skinnybrian.com 57 そ し て 2 年 後 … プ
ラ イ オ リ テ ィ を 考 え な が ら レ イ ア ウ ト を 考 え る
www.skinnybrian.com 58 こ こ ま で 改 善 し た
www.skinnybrian.com 59 ① フ ァ ッ シ ョ ン 写
真 ② 名 前 ( 誰 な の か ) ③ 年 齢 ( ど の く ら い の ) ④ 番 号 ( ナ ン バ リ ン グ )
www.skinnybrian.com 60 余 白 を 意 識 す れ ば
印 象 が 変 わ る 誰 の 写 真 か わ か っ た ! お し ゃ れ !!
www.skinnybrian.com 61
www.skinnybrian.com 62
www.skinnybrian.com 63
www.skinnybrian.com 64 ま と め 受 け 手 の 印
象 が 変 わ る ◎ 余 白 を 工 夫 す る = 情 報 整 理
www.skinnybrian.com 65 街 頭 の 広 告 と か 「
余 白 」 観 察 し て み て は ?
www.skinnybrian.com 66 Thanks for your Attention!