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
Sketchで実装しやすいデザインデータをつくる
Search
Ryo Nakae
March 05, 2018
Programming
0
230
Sketchで実装しやすいデザインデータをつくる
MobileApp Design #1
にてLT枠で登壇した際の資料です。
Ryo Nakae
March 05, 2018
Tweet
Share
More Decks by Ryo Nakae
See All by Ryo Nakae
個人開発でReact Native + Expo製アプリを作った話
ryonakae
2
1.5k
Payment Request APIで実現できる Web決済の体験
ryonakae
2
2.2k
アイカツはスプラトゥーンだった…?
ryonakae
2
2.5k
Other Decks in Programming
See All in Programming
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
110
print("Hello, World")
eddie
1
470
Design Foundational Data Engineering Observability
sucitw
3
160
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
420
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
3
2k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.7k
複雑なドメインに挑む.pdf
yukisakai1225
5
970
Honoアップデート 2025年夏
yusukebe
1
910
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
670
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
MLH State of the League: 2026 Season
theycallmeswift
0
220
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
KATA
mclloyd
32
14k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Site-Speed That Sticks
csswizardry
10
810
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Pragmatic Product Professional
lauravandoore
36
6.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
Ryo Nakae DeNA Co.,Ltd. 2018.3.3 Sketchで 実装しやすいデザインデータをつくる
⾃⼰紹介 WHOAMI
⾃⼰紹介 中江 亮 / Ryo Nakae(@ryo_dg) 株式会社ディー・エヌ・エー システム&デザイン本部 デザイン戦略部 UI/UXデザイン第⼆グループ
Web/UIデザイナー、フロントエンドエンジニア 2015年⼊社
Sketch.app での「実装しやすいデザインデータ」 の作り⽅、特に「⽂字まわり」についてお話しさせて いただきます
Sketchの⽇本語フォント問題
Sketchの⽇本語フォント問題 テキストレイヤーに⾏間を設定するとバウンディングボックスが 意味わからんことになってしまう (上に余⽩ができて、下はキツキツ) OpenTypeフォントを使うと起きるバグ(参考)
Sketchの⽇本語フォント問題 ⾏間を設定していない場合
Sketchの⽇本語フォント問題 ⾏間を設定している場合 ↓謎の余⽩
Sketchの⽇本語フォント問題 Noto SansなどのTrueTypeフォントでは起こらない とはいえ全部のデザインをNotoでやるわけでもない… →「Line-Height Fixer」プラグインを使って解決しましょう
Line-Height Fixerプラグイン 「Line-Height Fixer」プラグインをダウンロードしてインストール 「Adobe Blank」フォントをダウンロードしてインストール テキストレイヤーを選択→「Plugins」→「Line-Height Fixer」を実⾏
Line-Height Fixerプラグイン Line-Height Fixerを適⽤していない場合
Line-Height Fixerプラグイン Line-Height Fixerを適⽤している場合 上下の余⽩がいい感じになる!
テキスト上下の余⽩が変だと何か問題がある? 「サムネイル画像の下に30pxの余⽩をとって、テキストを配置」 →Sketch上で律儀に30pxあける →⾒た⽬上は30px以上あいてしまう 「⾒た⽬上は30pxになるように、⾏間バグを考慮して狭めに余⽩をとろう」 →Sketch上では20pxの余⽩にしておく →マークアップの際にmargin-top:20px;と指定されてしまう →「なんか実装されたら余⽩詰まってません?」「は?データ通りですけど?」 つらい
Line-Height Fixerを使うと、 上下の余⽩が実装時のものと近くなる →マークアップの際にSketchの余⽩をそのまま⼊れたら デザインが再現できる みんな幸せ!(Sketchは早く直して欲しい)
Appleのシステムフォント問題
Appleのシステムフォント問題 Appleのシステムフォントは、 英数字に合わせて⽇本語が少し⼩さく表⽰されたり、 字間などが⾃動で調整される仕組みになっている Sketchで「San Francisco」や「Hiragino Sans」で⽂字を打っても、 iOSのシステムフォントを再現することはできない
Appleのシステムフォント問題 実際にあった例 デザイナー ・ナビゲーションバーのタイトルは17ptなので、17ptでデザインを作る ・17ptだとどう考えても実機より⽂字が⼤きいぞ…?15ptでデータを作ろう エンジニア ・Sketch上は15ptなので、15ptでタイトルを配置しよう ・タイトルが⼩さくないですか?なんで17ptじゃないんですか?? つらい けど、「I
Want Apple System Font」プラグインを使うと解決できる!
Appleのシステムフォント問題 「I Want Apple System Font」プラグインをダウンロードしてインストール テキストレイヤーを選択→「Plugins」から実⾏ もしくはフォントインスペクタ周辺に追加されたインスペクタから実⾏
I Want Apple System Fontプラグイン I Want Apple System Fontプラグインを適⽤していない(グレー)
/ いる(オレンジ)テキストの⽐較
I Want Apple System Fontプラグイン 実装時に適⽤されるフォントをデザインで再現できる →不要なコミュニケーションが減る ちなみに「I Want Apple
System Font」プラグインは 「Line-Height Fixer」プラグインと共存できます ※I Want Apple System Font→⾏間を設定→Line-Height Fixer
実装の時のことを考えたデザインデータを作ることで に制作を進めていきましょう
Thank You