Webサイトを制作後、納品前、公開前に必ず検品を行います。ブラウザチェックは実機が理想ですが、ないものについてはChromeのシミュレータやVirtual Box による仮想環境で確認してください。
検品項目一覧
下記項目をチェックし、基準を満たせばかなり質の高いWebサイトであると言えます。
| 検品項目 | 概要 | 合格基準 |
|---|---|---|
| ブラウザチェック | さまざまなブラウザでの表示、動作チェック | 表示崩れや動作バグがないこと |
| HTML Validator | HTML品質チェック | エラーがない状態にする(外部ソースは除く) |
| CSS Validator | CSS品質チェック | エラーがない状態にする(外部ソースは除く) |
| Lighthouse | 総合チェック | レッドがないこと |
| Page Speed Insights | パフォーマンス改善 | PC, SPともにグリーンスコア |
| モバイルフレンドリー | スマホ対応 | エラーがない状態 |
| シェアデバッカー | SNSシェア時にサムネイルなど表示するタグ | エラーがない状態 |
| 構造化データテストツール | SEO対策 | エラーがない状態 |
| Test My Site | 表示速度と同業比較 | 要改善でないこと |
| AMPテスト | AMPの場合 | エラーがないこと |
その他見落としがちなチェック項目
- favicon, スマホhome画面用アイコンは設置されているか
- titleは正しく設定されているか
- Sitemapは設置されているか
ブラウザチェック
理想はネイティブ端末でのチェックですが、環境がない場合は以下のツールを使いましょう。
- Chrome DevTools- とりあえずの端末チェック
- Xcode - より正確なiOS端末のチェック
- Android Studio - より正確なAndroid端末のチェック
- VirtualBox(OS) - IE系のチェック
OSバージョン、ブラウザバージョンについて
最近のOSは自動的に最新OS,ブラウザがアップデートされるため、特に定めがない場合最新OS,ブラウザでの検品で良いです。古いブラウザについてはバージョンアップを促すメッセージを表示させるのが理想です。サポート対象外のブラウザを使用することはセキュリティの観点から推奨されないため、適宜クライアントを説得しましょう。幅広い年齢層の不特定多数のユーザーの利用が見込まれるサイト、サービスにおいては下記ページを参考に適宜古いOS、ブラウザ対応を行いましょう。