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
150
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
1
1.2k
Payment Request APIで実現できる Web決済の体験
ryonakae
2
2k
アイカツはスプラトゥーンだった…?
ryonakae
2
2.4k
Other Decks in Programming
See All in Programming
document.write再考
brn
5
2.5k
TDDと今まで
kanayannet
0
140
TCA魔法学入門🪄
dazy
0
280
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
1.8k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
13k
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
Featured
See All Featured
Fireside Chat
paigeccino
19
2.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Atom: Resistance is Futile
akmur
258
25k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Embracing the Ebb and Flow
colly
78
4.1k
The Invisible Customer
myddelton
114
12k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How GitHub (no longer) Works
holman
301
140k
What the flash - Photography Introduction
edds
64
11k
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