デザイナーがWEBデザインを作ってくれたタイミングで、ここはチェック・質問・詰めておきたいというリスト。
ずっと使えるなと思ってリスト化しました。
普段はSketchでデザイン、Ruby on Rails・SCSSで作って、AWSのホスティングするパターンが多いので、全体的にそんな前提になっています。
画面幅ごとの挙動。
- media queryとか込みでどう実装するか考える。グリッドシステムの挙動など。
- 比で指定されるべきところはどこか（特にスマホ版）逆に固定長で作るところはどこか
- 画面幅が狭まったときにテキストが縦に長くなる個所がないか確認する。その場合デザインが崩れないか確認する。
SEO
- どこにどのHTMLエレメントを当てるのか（特にHタグ）
- title、description、canonical、パンくず、
仕様面
- DB叩いてそうなところは叩き方を確認する。
- リンクが張られている領域を全て洗い出す。文字なのか領域なのか、忘れてる場所がないか。
- position: fixedな所がないか確認する。
- 押したら動きを見せる個所がないか確認する。ここ実は開きます的な。Sketch上ではわかりにくいため確認したい。
- 全ページにフラッシュメッセージが出せるようになっている必要がある（という前提で作ったほうが良い）。error、notice、successの3種類
スピーディーに実装するために
- font-awsmとかでズルして作れる要素あったら教えてもらう
- 何度も使っている色を全部洗い出してSASS|SCSSのVariableに入れらるようにする
- 使いまわしてるデザイン表現を洗い出す（角丸の大きさ、色、フォント、文字サイズ）
- Sketchでくれる場合は、画像書き出しようのページをつくって、画像1枚毎にアートボードを作って欲しい。一括で書き出せるようになり、便利。
- 画像を全部書き出してS3に入れて、開発者がURLで使えるようにする。retina対応で2x（と3x）も作る。
- borderやpadding、marginがどっちに着くイメージなのか確認する。できるだけ使いまわしやすいようにする。
その他
- フォントサイズに関して、親要素に対する比率でつくっているところがある場合確認する。
- 表示数が変動するものは、変動したときの挙動を確認する。数字の桁数が変動する、文字数の増減、値に応じて星が増えるなど。増えすぎる場合（レイアウト崩れ）、0になる場合の表示を確認する。
- ユーザー側が画像アップロードする場合、サイズが大きい場合、小さい場合にどうなるかを確認する。（記事中の画像など）
- divの構造作る
- faviconは用意されているか。
- OGPはどうするか。画像はページごとに動的か全ページ固定か、必要なサイズの画像が用意されているか。
- プレースホルダーはどうするか。画像がない場合（サムネなど）
-
テキストで横着してpxがわからないようになっている個所はないか。グローバルメニューを
項目1 | 項目2 | 項目3 | 項目4みたいにテキストでデザインされると幅がわからない。 - 画像の書き出しは誰がするのか。
けっこう抜け漏れあるとおもうので、是非コメントで確認項目の追加をお願いします。