前回、「【ディレクター向け】コーディングをお願いする前に共有・確認しておくこと一覧」という記事を投稿しましたが、今回は成果物に対しての確認項目を書いていきます。
基本的には、非エンジニアの方でも確認出来るような内容になっているかと思いますので、ぜひ参考にしてみてください。
※大前提として、提供している仕様書やデザインの通りになっているかは確認してください
HTMLバリデーターでエラーが出ていないか
https://validator.w3.org/
エラーが出ている場合は、許容として良いものかを確認する
CSSバリデーターでエラーが出ていないか
https://jigsaw.w3.org/css-validator/
エラーが出ている場合は、許容として良いものかを確認する
コンソールエラーが出ていないか
ブラウザの開発者ツールを開き、コンソールタブを確認する
文書構造が正しいか
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
見出し構造が正しく作られているかを確認する
共通部分がインクルード化されているか
- ヘッダー、フッター、サイドナビ
- 共通CSS、共通JS
- viewport、og:image
- アクセス解析タグ
※よくインクルードされる項目を抜粋
パンくずに schema.org が適用されているか
http://schema.org/BreadcrumbList
パンくずに適用するのは割と一般的なイメージなので、入れておきたい
strongタグを多用していないか
ただデザイン的に目立たせたい場合には、別のタグを使用すること
※設計の話でもある
ネイティブのSNSシェアボタンを使用する場合、非同期処理になっているか
altが正しく入っているか
画像の中にテキストが入っている場合は、そのテキストが入っているか、
それ以外の場合は、意味が通じるテキストが入っているかを確認する
ファビコンがマルチアイコン化されているか
画像がボヤけてないか
ブラウザで正しいサイズで表示されているかを確認する
ページ描画時の挙動に問題がないか
ページを開いた瞬間にカクツクことがないかを確認する
モバイル フレンドリー テストで確認して問題が無いか
https://www.google.com/webmasters/tools/mobile-friendly/
合格評価が出ることを確認する
PageSpeed Insightsで確認
https://developers.google.com/speed/pagespeed/insights/
「画像の圧縮」「キャッシュの活用」は、ウェイトが大きいため対応しておきたい
デザイン以外の形に変化した際に崩れないか
よくある事例として、
デザイン上では3個並んでいる要素が実際のページでは4個になった場合や、テキストが1行から複数行になった場合など、考慮されてないために崩れることがある。
そのため、要素数やテキスト量の増減があり得るものは、開発者ツールで増やしたり減らしたりして崩れないかを確認する
※実際のページでも要素数が変わらない場合でも、今後ページが増えた際に必要となる可能性があるので確認しておいた方が良い
まとめ
全ての確認項目をリスト化させるのは、なかなか難しいのですが、
筆者が最低限忘れずに確認する項目をまとめてみました。
出来る人には当たり前すぎる項目もあったかと思いますが、
確認漏れの可能性はゼロにならないので、このように必ずチェックリストにしておく癖をつけておくと良いと思います。