社内勉強会用に、フロントエンド開発で見落とされがちな仕様などをまとめました。Qiitaで公開した同名の記事とほぼ同じ内容です。

1. P R E S E N T A T I O N :
フロントエンドエンジニア 堀 祐磨(ほりでー)
実装を引き受ける前に
詰めておくべき
フロントエンドの想定漏れ

2. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
今回の内容
なぜデザイナーとのコミュニケーション
が大事なのか
よくある想定漏れの例
チェックシート
はてブでの反応
2

3. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
なぜデザイナーとの
コミュニケーションが
大事なのか
3

4. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
デザインカンプは動かない
4

5. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
実際のWebは動く
5

6. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
絵はすぐに修正できる
6

7. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
コードの実装はすぐに
変更できない
7

8. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
見栄えの良い理想的な
ダミーコンテンツ
8

9. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
顧客が入力した
泥臭いデータ
9

10. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
なぜデザイナーとのコミュニケーションが大事なのか
繰り返される悲劇
設計で考慮されていない機能の追加のため
に一部の実装を捨てる
先に決まっていなければいけなかったことが
実装段階で初めて明らかになる
気をきかせて自分の判断で決めたら違うと
言われて修正が必要になった
10

11. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
もっと要件･仕様を固めて
手を動かし始めてからの
修正を減らすべき!
11

12. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
あとで理不尽な思いをする
前に自分から動こう!
12

13. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ13

14. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
よくある想定漏れの例
14

15. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
1
ホバーとアニメーション
15

16. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
1 ホバーとアニメーション
あとで付ければ良いとか思っていると超危険
カンプで1つに見える要素が
実はバラバラにアニメーションするかもしれない
よかれと思って勝手に実装すると、あとで直させられるかも
16
!?

17. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
1 ホバーとアニメーション
アニメーションするSVG要素の中身が、アニメーションの
要件を実現できないパスになっている
17

18. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
2
想定より長いテキスト
18

19. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
2 長いテキスト
カンプよりも長いテキストが入った時の挙動が不明
テキスト量に合わせて可変?
省略して決まった行数以内に収める?
運用規約を定め、一定以上の文字数は動作保証しないのもあり
19
IDEAL
REAL !?

20. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
3
想定と違う画像
20

21. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
3 想定と違う画像
カンプと違う縦横比の画像が来たときの挙動が不明
枠の大きさが固定? 実際の画像のサイズから成り行き?
固定される場合のリサイズの挙動は?
運用規約を定め、想定外の縦横比は動作保証しないのもあり
21
?

22. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
4
可変レイアウトの挙動
22

23. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
4 可変レイアウトの挙動
リキッドレイアウトで要素の可変する挙動が決まっていない
23
?
% %
auto px
px auto

24. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
5
例外的な処理
24

25. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
5 例外的な処理
長い時に途中から省略される要素で、
省略するかどうかのしきい値が不明
25
?
MORE
MORE

26. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
5 例外的な処理
バリデーションフォームのエラー文言の仕様が決まっていない
バリデーション機能の詳細な仕様も不明
26
*********PASSWORD

27. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
6
その他
27

28. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
6 その他
実際のデータによって出現したりしなかったりする要素で、
カンプ以外のパターンのマージンなどが決まっていない
Ajax部分の通信エラーメッセージが想定されていない
必要そうなのにローディングのデザインが想定されていない
28
A
B
C
A
A
C
C
?

29. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
チェックシート
29

30. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ30

31. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ31

32. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ32

33. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ
はてブでの反応
33

34. 実装を引き受ける前に詰めておくべきフロントエンドの想定漏れ34
http://b.hatena.ne.jp/entry/qiita.com/y_hokkey/items/de88447bd31d9379b80a

35. みんな苦労してた

36. Thank you!
http://media-massage.net/
デザインとWeb開発とその他諸々。