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

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