Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketchで実装しやすいデザインデータをつくる

Ryo Nakae
March 05, 2018
Programming
0
120

 Sketchで実装しやすいデザインデータをつくる

MobileApp Design #1にてLT枠で登壇した際の資料です。

Ryo Nakae

March 05, 2018
Tweet

More Decks by Ryo Nakae

See All by Ryo Nakae
個人開発でReact Native + Expo製アプリを作った話
ryonakae
1
610
Payment Request APIで実現できる Web決済の体験
ryonakae
2
1.7k
アイカツはスプラトゥーンだった…？
ryonakae
2
2.3k

Other Decks in Programming

See All in Programming
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
240
Comparing Native Java REST API Frameworks - Seattle JUG 2022
mraible
PRO
1
180
AWSKRUG DS 2022/09 발표 - 클라우드 데이터 플랫폼을 구성하는 최신 기술 알아보기
woongseok
0
400
OpenAPIで 楽に始めるスキーマ駆動開発実践論 - PHP Conference 2022
komtaki
0
240
IaC運用してみて感じた 素晴らしさとアンチパターン
yuki_kurono
0
160
SceneKit AND SwiftUI
akkeylab
0
170
なるべくJavaScriptを書かないで
SymfonyのUIをリッチにする Symfony UX
ippey
1
440
使用Helm搭配CI/CD供多 團隊使用的DevSecOps
demoyuw
0
480
php_mecabをFFIで実装してみよう
rsky
0
130
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
akitotsukahara
0
180
設計初心者のための「伝わる」フロー図 / How to draw a communicative flow diagram for beginners
rs_tukki
1
400
切り取り方を工夫してアプリケーションを漸進的に改善する / Incremental improvement by devising application change boundaries
yammerjp
1
130

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
65
7.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
16k
Designing the Hi-DPI Web
ddemaree
273
32k
YesSQL, Process and Tooling at Scale
rocio
157
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
28k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Automating Front-end Workflow
addyosmani
1351
200k
Teambox: Starting and Learning
jrom
124
7.8k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M
Fantastic passwords and where to find them - at NoRuKo
philnash
29
1.7k

Transcript

  1. Ryo Nakae
 DeNA Co.,Ltd. 2018.3.3 Sketchで 実装しやすいデザインデータをつくる

  2. ⾃⼰紹介 WHOAMI

  3. ⾃⼰紹介 中江 亮 / Ryo Nakae（@ryo_dg） 株式会社ディー・エヌ・エー
 システム&デザイン本部 デザイン戦略部
 UI/UXデザイン第⼆グループ

    Web/UIデザイナー、フロントエンドエンジニア
 2015年⼊社

  4. Sketch.app での「実装しやすいデザインデータ」
 の作り⽅、特に「⽂字まわり」についてお話しさせて
 いただきます

  5. Sketchの⽇本語フォント問題

  6. Sketchの⽇本語フォント問題 テキストレイヤーに⾏間を設定するとバウンディングボックスが
 意味わからんことになってしまう
 （上に余⽩ができて、下はキツキツ） OpenTypeフォントを使うと起きるバグ（参考）

  7. Sketchの⽇本語フォント問題 ⾏間を設定していない場合

  8. Sketchの⽇本語フォント問題 ⾏間を設定している場合 ↓謎の余⽩

  9. Sketchの⽇本語フォント問題 Noto SansなどのTrueTypeフォントでは起こらない
 とはいえ全部のデザインをNotoでやるわけでもない… →「Line-Height Fixer」プラグインを使って解決しましょう

  10. Line-Height Fixerプラグイン 「Line-Height Fixer」プラグインをダウンロードしてインストール 「Adobe Blank」フォントをダウンロードしてインストール テキストレイヤーを選択→「Plugins」→「Line-Height Fixer」を実⾏

  11. Line-Height Fixerプラグイン Line-Height Fixerを適⽤していない場合

  12. Line-Height Fixerプラグイン Line-Height Fixerを適⽤している場合
 上下の余⽩がいい感じになる！

  13. テキスト上下の余⽩が変だと何か問題がある？ 「サムネイル画像の下に30pxの余⽩をとって、テキストを配置」
 →Sketch上で律儀に30pxあける
 →⾒た⽬上は30px以上あいてしまう 「⾒た⽬上は30pxになるように、⾏間バグを考慮して狭めに余⽩をとろう」
 →Sketch上では20pxの余⽩にしておく
 →マークアップの際にmargin-top:20px;と指定されてしまう
 →「なんか実装されたら余⽩詰まってません？」「は？データ通りですけど？」 つらい

  14. Line-Height Fixerを使うと、
 上下の余⽩が実装時のものと近くなる →マークアップの際にSketchの余⽩をそのまま⼊れたら
  デザインが再現できる みんな幸せ！（Sketchは早く直して欲しい）

  15. Appleのシステムフォント問題

  16. Appleのシステムフォント問題 Appleのシステムフォントは、
 英数字に合わせて⽇本語が少し⼩さく表⽰されたり、
 字間などが⾃動で調整される仕組みになっている Sketchで「San Francisco」や「Hiragino Sans」で⽂字を打っても、
 iOSのシステムフォントを再現することはできない

  17. Appleのシステムフォント問題 実際にあった例 デザイナー
 ・ナビゲーションバーのタイトルは17ptなので、17ptでデザインを作る
 ・17ptだとどう考えても実機より⽂字が⼤きいぞ…？15ptでデータを作ろう エンジニア
 ・Sketch上は15ptなので、15ptでタイトルを配置しよう
 ・タイトルが⼩さくないですか？なんで17ptじゃないんですか？？ つらい けど、「I

    Want Apple System Font」プラグインを使うと解決できる！

  18. Appleのシステムフォント問題 「I Want Apple System Font」プラグインをダウンロードしてインストール テキストレイヤーを選択→「Plugins」から実⾏
 もしくはフォントインスペクタ周辺に追加されたインスペクタから実⾏

  19. I Want Apple System Fontプラグイン I Want Apple System Fontプラグインを適⽤していない(グレー)

    / いる(オレンジ)テキストの⽐較

  20. I Want Apple System Fontプラグイン 実装時に適⽤されるフォントをデザインで再現できる
 →不要なコミュニケーションが減る ちなみに「I Want Apple

    System Font」プラグインは
 「Line-Height Fixer」プラグインと共存できます
 ※I Want Apple System Font→⾏間を設定→Line-Height Fixer

  21. 実装の時のことを考えたデザインデータを作ることで
 に制作を進めていきましょう

  22. Thank You