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
650
器用貧乏なキャリアの考え方〜ブライアンの自己紹介も添えて〜
skinnybrian
0
280
爆速でアウトプットを鍛えるハッカソンのすゝめ
skinnybrian
1
5.6k
意外と知らない、InDesignのこんな使い方。
skinnybrian
3
9.2k
「コーチング」で始める、二人三脚型目標達成術
skinnybrian
0
220
kamatte
skinnybrian
0
220
チーム開発における「婚タクト」
skinnybrian
0
210
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
2
270
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
270
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
170
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
390
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
490
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
630
harutaka Vision Deck
zenkigenforrecruit
0
260
minpaku-community-scrum-patterns
norinity1103
1
460
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Balancing Empowerment & Direction
lara
4
690
Agile that works and the tools we love
rasmusluckow
331
21k
Producing Creativity
orderedlist
PRO
347
40k
Side Projects
sachag
455
43k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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!