納品前のチェック項目
webmaster| チェック項目 | チェック方法 |
|---|---|
| 誤字脱字がないか | テキスト比較ツールで比較 |
| 改行位置は適切か | タブレットやスマホ時の<br> |
| フォントは適切か | WhatFontで確認 |
| 色が適切か | ColorPick Eyedropper or デベロッパーツールから設定されているcolor、background-color、border-colorをデザインカンプと比較 |
| スムーズにレスポンシブ化されるか | レスポンシブデザインモードで目視確認 |
| スマホ（320px）、タブレット（768px）、PC（カンプ）の3パターンの表示に崩れはないか | レスポンシブデザインモードで目視確認 |
| 水平スクロールしないか | レスポンシブデザインモードで目視確認 |
| リンク要素（ボタン等）のホバー時の挙動は設定されているか | 実際に確認（人的作業なので、何をチェックしたかの指示書があるといいかもしれない…） |
| JavaScriptの挙動は正しいか | 実際に確認（何をチェックしたかの指示書が別にあるといいかもしれない…） |
| altが正しく設定されているか | Webサービス → 画像ALTチェッカー Chrome拡張 → Alt & Meta viewer |
| 見出し構造が不自然ではないか | ブックマークレット → https://www.pixelimage.jp/blog/2015/08/bookmarklet_seo.html |
| TDK(Title, Description, Keyword)は正しく設定されているか | 同上 |
| 閉じタグチェック | Chrome拡張 → HTMLエラーチェッカー ブックマークレット → https://oops0011.blog.fc2.com/blog-entry-214.html |
| W3Cチェック（HTML、CSS） | HTML → https://validator.w3.org/ CSS → http://jigsaw.w3.org/css-validator/ |
| デザインカンプの効果をCSSで表現できているか（box-shadow、opacityなど） | 目視確認 |
| デザインカンプとWebサイトを見比べてズレがないか | デザインカンプを画像で書き出して、PerfectPixelでチェック。 |
| Chrome、Firefox、Safari、Edgeで表示崩れが起きていないか | 実際に各ブラウザから目視で確認 |
| リンク切れが起きていないか | Frogを回して確認 |
| コンソールエラーが出てないか | デベロッパーツール |
| 画像が圧縮されているか | 圧縮サービスなどを活用 → https://tinypng.com/ |
| 画像が同じか | 目視 |
