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.4k
あなたの知らない「余白」の世界
社内勉強会でやったものです。
非デザイナ向けに、僕の過去事例をあわせてタイポグラフィやレイアウトの基礎を含めた内容でやってみました。
skinnybrian
December 21, 2018
Tweet
Share
More Decks by skinnybrian
See All by skinnybrian
チームのチャットで「デザイン実況」を発信したら沢山コミュニケーションが生まれた話
skinnybrian
1
210
チーム内コミュニケーションを加速させるUX Tips
skinnybrian
3
680
オンラインデザイン講座を開催するための"いろは"
skinnybrian
1
610
器用貧乏なキャリアの考え方〜ブライアンの自己紹介も添えて〜
skinnybrian
0
240
爆速でアウトプットを鍛えるハッカソンのすゝめ
skinnybrian
1
5.4k
意外と知らない、InDesignのこんな使い方。
skinnybrian
3
8.8k
「コーチング」で始める、二人三脚型目標達成術
skinnybrian
0
170
kamatte
skinnybrian
0
180
チーム開発における「婚タクト」
skinnybrian
0
170
Other Decks in Design
See All in Design
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
960
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
Tataki Ryu
olgastoryboard
0
120
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
540
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
180
WHAT ARE ME?
takuro_nakajima
PRO
0
1.9k
3 Reasons Why I Got into Design
harukausui
1
140
What Was UX Design All About?
ykazu
3
670
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
160
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
160
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
150
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
180
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
691
190k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Practical Orchestrator
shlominoach
185
10k
A better future with KSS
kneath
235
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Agile that works and the tools we love
rasmusluckow
327
20k
Visualization
eitanlees
142
15k
The Cult of Friendly URLs
andyhume
76
6k
How to name files
jennybc
75
98k
Designing for Performance
lara
604
68k
Rails Girls Zürich Keynote
gr2m
93
13k
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!