Help us understand the problem. What is going on with this article?

静的Webサイト検品ガイド 2019

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は設置されているか

ブラウザチェック

理想はネイティブ端末でのチェックですが、環境がない場合は以下のツールを使いましょう。

OSバージョン、ブラウザバージョンについて

最近のOSは自動的に最新OS,ブラウザがアップデートされるため、特に定めがない場合最新OS,ブラウザでの検品で良いです。古いブラウザについてはバージョンアップを促すメッセージを表示させるのが理想です。サポート対象外のブラウザを使用することはセキュリティの観点から推奨されないため、適宜クライアントを説得しましょう。幅広い年齢層の不特定多数のユーザーの利用が見込まれるサイト、サービスにおいては下記ページを参考に適宜古いOS、ブラウザ対応を行いましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away