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
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
310
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Java on Azure で LangGraph!
kohei3110
0
170
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
31k
XSLTで作るBrainfuck処理系
makki_d
0
210
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
180
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
20250613-SSKMvol.15
diostray
0
100
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
390
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Navigating Team Friction
lara
187
15k
BBQ
matthewcrist
89
9.7k
RailsConf 2023
tenderlove
30
1.1k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Raft: Consensus for Rubyists
vanstee
140
7k
Become a Pro
speakerdeck
PRO
28
5.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Typedesign – Prime Four
hannesfritz
42
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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