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
220
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
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Is Xcode slowly dying out in 2025?
uetyo
1
190
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
Benchmark
sysong
0
250
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
A comprehensive view of refactoring
marabesi
0
970
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
GoのGenericsによるslice操作との付き合い方
syumai
3
680
Featured
See All Featured
A designer walks into a library…
pauljervisheath
206
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
GraphQLとの向き合い方2022年版
quramy
47
14k
Writing Fast Ruby
sferik
628
61k
Designing for humans not robots
tammielis
253
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Code Reviewing Like a Champion
maltzj
524
40k
Become a Pro
speakerdeck
PRO
28
5.4k
Building an army of robots
kneath
306
45k
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