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

サイト構築 -制作

Post on:2017年7月24日

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

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

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

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

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

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