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
690
オンラインデザイン講座を開催するための"いろは"
skinnybrian
1
620
器用貧乏なキャリアの考え方〜ブライアンの自己紹介も添えて〜
skinnybrian
0
240
爆速でアウトプットを鍛えるハッカソンのすゝめ
skinnybrian
1
5.4k
意外と知らない、InDesignのこんな使い方。
skinnybrian
3
8.9k
「コーチング」で始める、二人三脚型目標達成術
skinnybrian
0
170
kamatte
skinnybrian
0
180
チーム開発における「婚タクト」
skinnybrian
0
180
Other Decks in Design
See All in Design
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
170
portfolio
amitnk
1
130
Improve a service workshop
mastervicedesign
1
110
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
49k
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.4k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
620
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
790
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
820
(第1回) アーキテクト・テックリード育成講座
masakaya
0
100
Featured
See All Featured
A designer walks into a library…
pauljervisheath
204
24k
Facilitating Awesome Meetings
lara
50
6.1k
Building Applications with DynamoDB
mza
90
6.1k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Adopting Sorbet at Scale
ufuk
73
9.1k
Happy Clients
brianwarren
98
6.7k
A better future with KSS
kneath
238
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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!