効率よく実装する上でデザイナーに知っておいてほしい事を技術的な解説もしつつ、僕自身がどういう風にデザイナーと作業していきたいか。っていうマインドも一緒にまとめました。 at 2017/1/10 SONICJAM自主制作MTG

1. デザイナーに知っておいてほしい事
フロントエンドエンジニア
池田 亮

2. フォントサイズ
モジュール化

3. フォントサイズ
モジュール化

4. 幅375pxでデザインされたpsdをもらって、そのとおりの
フォントサイズで実装したら、幅320pxのiPhone5では文
字が大きすぎて、予期せぬところで改行されてしまい、
レイアウトがくずれた。

5. 幅375pxでデザインされたpsd通りに
実装したら、iPhone7plusで見たとき
文字が小さく感じた。

6. 解決策
• viewportでdevice-widthを375pxにす
る
• デザインし直す
• フォントサイズを可変にする
• 諦める

7. 解決策
• viewportでdevice-widthを375pxにす
る
• デザインし直す
• フォントサイズを可変にする
• 諦める

8. 可変フォントサイズ
javascript使えば色々方法はあるし、
複雑な可変ルールもつくれる。
が、やりすぎるとパフォーマンスも落
ちるし、できればCSSで一発でやり
たい。

9. 単位vwを使う
viewportWidth = 画面幅に対して可変する単位
幅320pxの場合、100vwで320pxと同じ
px = vw / 100 * 画面幅

10. 存在は知ってる。
知らないけど実装者がよしなにやってくれていた
。

11. • フォントサイズをvwで指定してくるデザイ
ナーは少ない。
• 逆に指定してくれるデザイナーは、画面幅
に対するフォントの見え方にものすごくこ
だわってる。

12. • 正直、可変フォントサイズはイメージしづらい
• Photoshopで何画面もつくって検証するのはか
なり大変

13. スケジュールと相談して、フォントサイズをリア
ルタイムに変更確認できるデザインツールを実装
者に作ってもらう

14. 例えばこんなの
https://github.com/ikeryou/responsive_fontSize

15. 実装者がなんとかしてくれるのを毎回期待して、FIXさせ
たデザインを丸投げするのではなく、起こる問題を一緒
に予想し、検証しながらデザインをFIXさせるのが理想。

16. • photoshopだけで様々な画面サイズに対応できるデザイ
ンをFIXさせるのは無理。
デザインを決めるためのツールを実装者につくってもら
う。
どういうツールが必要なのか判断できるのもスキルのひ
とつ。(デザイナー&エンジニア)
お気軽に実装者にご相談ください。

17. フォントサイズ
モジュール化

18. どういう順序で実装してるか

21. こんな感じで、順番には実装していない

23. 共通レイアウトを探してモジュール化

24. 共通レイアウト？
タイトル
• サイズは10vw
• 色は白
• 下に20pxのマージン
画像
• サイズは画面幅に対して80%
• 高さは可変
• 上下に10pxのマージン
見出し&テキスト
• 見出しのサイズは8vw
• 見出し下に10pxのマージン
• テキストのサイズは5vw
• テキスト下に10pxのマージン
• 色は白

25. 困るパターン
トップページの
見出し&テキスト
• 見出しのサイズは8vw
• 見出し下に10pxのマージン
• テキストのサイズは5vw
• テキスト下に10pxのマージン
• 色は白
アバウトページの
見出し&テキスト
• 見出しのサイズは7.5vw
• 見出し下に10.5pxのマージン
• テキストのサイズは5.2vw
• テキスト下に9.5pxのマージン
• 色は白

26. 見出し&テキストの基本モジュール
• 見出しのサイズは8vw
• 見出し下に10pxのマージン
• テキストのサイズは5vw
• テキスト下に10pxのマージン
継承
トップの見出し&テキスト
• 色は白
アバウトの見出し&テキスト
• 色は青
こういう考え方はあり

27. • こういった感じでモジュール化できると実装効率がぐ
っと上がる。
デザインルールを決めた上であえて微妙な差をつけるの
は全然OK！
なんとなく1pxずらしてみた。とかはやめてほしい。微
妙な差は適当なのか計算なのかわかりづらいので。

28. まとめ

29. • デザインFIX後に実装者へ丸投げはやめる(汗)
• FIX前に一緒に検証しながら進める。場合によ
っては専用のデザインツールをエンジニアが作
る。
• デザインルールをちゃんと作って、大事な部分
、見逃しやすい部分は、それを実装者に伝える
。

30. おわり