Frontend Nagoya#3 LT時資料

1. デザイン通りのコーディング！
～消耗しないまちがい探し～
株式会社アルタ 小林明日香

2. デザインカンプ→webサイト
 名前：小林 明日香
 Web屋歴：もうすぐ5年
 株式会社アルタにて webデザイナー1年半 → フロントエンド3年ちょい
 社内外のデザイナーさんから
デザインカンプをいただき
コーディングしています。

3. 消耗しないまちがい探し？

4. コーディング結果のどこが
デザインと違うか
気づくためのチェック作業
を時短したい！

5. 間違いポイント
font-weight
line-height
margin
padding
パーツ漏れ・原稿入れ間違い

6. 「デザイン通り」に作りたい
デザインカンプ web
理想

7. 「デザイン通り」に作りたい
デザインカンプ web
現実

8. 理想に近づけるために
まちがい探しをする
デザインカンプ web
余白太くない？
上の余白せまい？
目視

9. 理想に近づけるために
まちがい探しをする
デザインカンプ web
余白太くない？
上の余白せまい？結構しんどい
しかも 見落とす

10. 修正は出すのも直すのも大変
デザインと違いすぎ！
修正指示出すの大変すぎ！
ちゃんとやってよー！
修正細かすぎ～
終わらないよー！！

11. チェックをもっと簡単確実に
↓
気づける＝直せる
↓
みんな幸せ

12. まちがい探し時間短縮で、サクサク修正！
この辺
だいぶずれてる
この辺も
なんかずれてる
文字の位置違う
重ねる

13. 重ねれば、考えなくても分かる！
この辺
だいぶずれてる
この辺も
なんかずれてる
文字の位置違う
気づける＝直せる

14. 超簡単に重ねる方法
 Chrome拡張
「PerfectPixel」
 webページ上に半透明jpgを簡単
に重ねられる。
 透明度や位置の調整も自由自在。
 スマホのカンプの時は、
scaleを0.5にして重ねればOK

15. でも、どこまでならずれられる？
 社外デザイナーさんのデザインの時
 人によって違うので、反応をうかがう。
 1pxたりともずれることは許さぬ系もあるし
10pxくらいずれてても平気な時もある。
 社内のデザイナーさんのデザインの時
 一回見せてみて、聞く。

16. まとめ
 つらい「目視まちがい探し」はやめよう
 デザインカンプとサイトを重ね合わせる作戦
 ずれないコーディング＋コミュニケーション
→ みんな幸せ
小林 明日香＠株式会社アルタ
個人ブログもやってます
http://deep-space.blue/
みなさまどうぞいろいろ教えてください💛