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
210
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.4k
Payment Request APIで実現できる Web決済の体験
ryonakae
2
2.2k
アイカツはスプラトゥーンだった…?
ryonakae
2
2.4k
Other Decks in Programming
See All in Programming
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
ARA Ansible for the teams
kksat
0
150
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Unity Android XR入門
sakutama_11
0
140
Spring gRPC について / About Spring gRPC
mackey0225
0
220
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Visualization
eitanlees
146
15k
A designer walks into a library…
pauljervisheath
205
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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