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
240
チーム内コミュニケーションを加速させるUX Tips
skinnybrian
3
740
オンラインデザイン講座を開催するための"いろは"
skinnybrian
1
640
器用貧乏なキャリアの考え方〜ブライアンの自己紹介も添えて〜
skinnybrian
0
270
爆速でアウトプットを鍛えるハッカソンのすゝめ
skinnybrian
1
5.6k
意外と知らない、InDesignのこんな使い方。
skinnybrian
3
9.2k
「コーチング」で始める、二人三脚型目標達成術
skinnybrian
0
210
kamatte
skinnybrian
0
220
チーム開発における「婚タクト」
skinnybrian
0
210
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
660
minpaku-community-scrum-patterns
norinity1103
1
440
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.2k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
500
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
What makes a great Director?
_limex_
0
280
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
#Dubois Challenge 2025: Economics
ajstarks
1
180
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
9k
Code Review Best Practice
trishagee
72
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Six Lessons from altMBA
skipperchong
28
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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!