ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。

2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。

Webサイトを公開した時に確認しておきたい項目のまとめ

イラスト: Girls Design Materials

「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。

確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。

サイトのキャプチャ

Web Launch Checklist
Web Launch Checklist -GitHub

そのまま利用してもよし、また編集して自分用のリストを作成することもできます。

パフォーマンスの面で確認したい項目

  • 画像の最適化
    デスクトップアプリケーションを使用して、すべての画像を圧縮。
    CSSやHTMLでサイズを変更するのではなく、各要素の正確なイメージサイズを生成。
    スプライト画像を使用して、HTTP要求と帯域幅を節約。
  • ページのサイズとリクエストの削減
    目安は、ページのサイズは2MB、リクエスト数は50個。
    サードパーティのライブラリとスクリプトを制限。
    リソースとリクエストは非同期にロード。
    静的なページやアセットはCDNを検討。
  • Webフォントの使用は制限
    使用するWebフォントは多くても3個まで。
  • JavaScriptとCSSは圧縮
    JavaScriptファイルとCSSファイルはそれぞれ1つのファイルに結合して、圧縮。
    可能であれば、GZIPを使用。
  • HTTP/2で実装
    HTTP/2は最新のHTTPプロトコルで、ブラウザ間の優れたサポートを持ち、ロードスピードを大幅に改善します。
  • 非同期および遅延属性の追加
    ブラウザに他のリソースをブロックしないようにAsync属性やDefer属性を使用する。
  • リソースのヒントを追加
    サードパーティのアセットを使用している場合、これらのリソースと独自のリソースが互いにブロックされたり、順序が乱れたりすることがあるので、rel属性をガイドに使う。
  • キャッシュヘッダの設定
    パフォーマンスが大幅に低下するため、キャッシュヘッダを設定する。
  • Service Worker APIを検討する
    キャッシュを正確に制御し、オフラインのWebエクスペリエンスを作成できるようにします。
  • テストを重ねる
    一般的なデバイスだけでなく、4G、3G、Wi-Fi環境でもテストを行う。

SEOで確認したい項目

  • ページ固有のキーワードをセットする
    title, h1, URLにキーワードが含まれるようにする。
  • Google AnalyticsとSearch Consoleを準備する
  • Google AnalyticsとSearch Consoleを準備し、それぞれを連携させる。
  • XMLサイトマップの作成
    XMLサイトマップを作成し、検索エンジンに送信する。
  • Robots.txtの作成
    検索エンジンのロボットが訪問できるページを指定する。
  • リンク切れがないかクロール
    ツールを使用して、サイトにリンク切れがないかチェックする。
  • canonicalリンクをセットする
    canonical属性でURLを正規化する。
  • リッチスニペットと構造化データを加える
    リッチスニペットはランキングに直接影響しませんが、検索結果ページの表示をより魅力的にします。構造化データは検索エンジンにHTMLの構造をよりよく理解させます。
  • FacebookとTwitterの対応
    FacebookのOpen GraphとTwitterカードを設定しておくと、それらで共有された際に、より魅力的にします。

セキュリティで確認したい項目

  • HTTPSに対応する
    HTTPSはセキュリティとパフォーマンスの面で優れているため、ログインページだけでなく、実装する必要があります。
  • セキュリティヘッダをセットする
    CSPX-Frame-Optionsなどのヘッダを設定することで、セキュリティは向上します。
  • ユーザの入力やパラメータをサニタイズ
    フォームでは「data://」「javascript://」をサニタイズするのを忘れないようにしてください。
  • scryptまたはbcryptに保存されたパスワードハッシュ
    bcryptはscryptよりも多くの解析と実装を受けていますが、多くの場合、scryptがより高速で強力です。
  • APIパスに制限
    DoS攻撃から身を守るために、ログインやトークン生成などのAPIパスに帯域制限を与えます。

アクセシビリティで確認したい項目

  • コントラストが十分かどうか
    テキストと背景に4.5:1のコントラスト比があるか確認します。
  • キーボードナビゲーションの追加
    ブラウザのキーボードショートカットを上書きせずに、ナビゲーションを提供します。
  • メニューがアクセシブルか
    セマンティックなマークアップを使用して、すべてのページと一致するメニュー要素と構造を伝えます。
  • 非テキスト要素に代替タグをセット
    alt属性を使用して、ビジュアルの内容と機能を伝えます。
  • フォームがアクセシブルか
    フォームはキーボードで移動可能で、はっきりと直観的でなければなりません。

コンテンツで確認したい項目

  • 誤字脱字を確認
    ダミーのテキストや画像はすべて削除します。
  • お問い合わせとソーシャルメディア
    ビジターがバグや脆弱性を報告できるよう窓口を設ける。ソーシャルメディアの数は最小限にし、より多くのフォーカスを作る。
  • リンクの確認
    リンクがクリックできるか確認する。
    外部リンクに、「rel=noopener」を記述する。
    重要なリンクは移動させない(スライダーやカルーセルなど)。
    ナビゲーションにないリンクにtitle属性を。
  • ファビコンとAppアイコン
    デスクトップやスマホ用にアイコンを用意する。
  • 404ページ
    404ページを用意し、ビジターにフィードバックの機会を与える。

機能性で確認したい項目

  • ブラウザとプラットフォームとの互換性
    主要なブラウザで検証し、ビジターが利用できる機能のみを使用する。
  • レスポンシブの確認
    スマホからワイドスクリーンまで、主要なスクリーンサイズで検証する。
  • 入力フォームはスマホに最適化
    フォームはユーザーエクスペリエンスを向上させるためにtype属性を設定する。

top of page

©2017 coliss