TL;DR
テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。
機能
要件定義をもとに指定の機能が実装済か確認します。
| 項目 | 解説 |
|---|---|
| テスト公開ページ | IP 制限・ベーシック認証のテスト.htaccess ファイルを作成 |
| ログイン | ユーザー認証失敗時のメッセージや動作の確認、ログイン時の IP 制限管理画面に IP 制限をかける |
| カスタムフィールド | 膨大なデータでも保存可能か、他ブラウザで稼働するか。Firegoby |
| 予約管理 | フォームからの問い合わせが指定のメールに届くか、SSL を使用しているか |
| SSL テスト | SSL 証明書がインストールされているか確認 － ＠IT |
| リダイレクト | 旧 url から新 url へのリダイレクト、同一ドメイン内のリダイレクト、URL の書き換え・リダイレクト処理。mod_rewrite の説明書（WP） |
| google map | 埋込画面で、スクロールによる制御を調整したか、googleMap V3 を使っているか |
| 検索ボックス | 検索結果ページで検索キーワードを正しく拾っているか |
| 問い合わせ | メール自動返信、メール送信後にリダイレクト、表示を切り替え |
| CRM | 問い合わせやメールアドレス管理、CRM（顧客関係管理）は正しく動作するか Flamingo |
| スパム対策 | Akismet の設定 Akismet を有効化してスパムコメントを防ぐ設定と API キーの取得方法 - SEO のホワイトハットジャパン |
コーディング
| 項目 | 解説 |
|---|---|
| バリデーション | マークアップは正しいか、文字コードは UTF-8 になっているか The W3C Markup Validation Service |
| ビューポート設定 | スマートフォン OS ブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=no と指定すればピンチイン／ピンチアウト（拡大・縮小）を無効化できます。 |
| レタリング | 文字・書体は指定どおりにデザインされているか、他環境 PC でも、フォントにズレがないか |
| 表示速度 | パフォーマンス・チューニングテストを行う。表示速度に問題はないか |
| 不要なソース | ファイル内にサイトの絶対パスが残っていないか、ソース内の不要なコメントは除去しているか |
ドメイン
| 項目 | 解説 |
|---|---|
| co.jp の新規取得 | 会社情報や登記簿謄本が必要な旨を先方に伝えたか※ co.jp の新規取得の場合時間がかかります。 |
| ドメイン本登録の確認 | ※ 「有限会社」は、2006/05/01 以降は新規設立をすることができない組織として上位登録機関(JPRS)により、制限されています。 |
| google apps 用に DNS を設定 | メールを GoogleApps で利用させる場合、サーバで A レコード情報（CNAME レコード情報）を設定します。 ※反映に大体数時間～ 3 日かかります。 |
UX
| 項目 | 解説 |
|---|---|
| スクロール | 快適にスクロールできるか、スクロール量に問題ないか |
| 不要なエフェクト | ローディングエフェクトなど、指定以外のデザインを多様していないか |
| インタラクション | ユーザーの入力に応じて適切な応答や画面遷移ができているか |
| テーブル | スマホ時の table の見え方に問題ないか、縦長に伸びていないか。レスポンシブ Web デザインでテーブルを使う時の小技 │ Design Spice |
| 解像度と画像 | 様々なパターンによる解像度でグリッド崩れや画像周辺の崩れが起こっていないか |
| ファインダビリティ | スムーズに情報へのアクセスができるか、必要な情報を探しやすく配置しているか。ナビやパンくず、メニューなど。 |
表記とレイアウト
| 項目 | 解説 |
|---|---|
| 表記 | 企業指定の表記規定のゆれ、文章のスペルミス、改行の位置、行間、ジャンプ率の見直し |
| ダミー画像 | 画像切れはないか、画像なしの場合ダミー画像は表示されるか |
| アンカーリンク | リンク切れはないか、ページ内リンクは正常に動作するか |
| 階層 | ディレクトリの階層が深くなっていないか |
| プログレッシブ・エンハンスメント | プログレッシブ・エンハンスメントの考え方を先方に話したか。どの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。 |
| スマートフォン | スマートフォンでの表示崩れはないか、実機でチェックしたか |
| 404 ページ | 404 ページの設置と画面を先方に確認 |
ブログ
| 項目 | 解説 | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | | RSS 配信（ブログ・ニュース）の確認 | ブログ・ニュースの配信は行えるか、feedly のアイキャッチ画像設定は済んだか。アイキャッチ画像を RSS リーダーに表示 - ネタワン | | インポートエラー | phpmyadmin エキスポート、xml インポート処理の確認。 制限のエラーがでないか、移行前に既存記事のバックアップ（データ全て）は取ったか。WordPress のエクスポートで全部出力されない問題の対処法 | IDEA*IDEA |
WP 管理画面
| 項目 | 解説 |
|---|---|
| 問い合わせリンク | 管理画面内に自社への問い合わせリンクを設置したか、ダッシュボードに注意書き、使い方などの文言を追加 |
| モデレーション | 読者が投稿したコメント等をチェック可能か、メールで先方へ通知できるようになっているか |
| 設定 | テーマ、プラグイン、バージョンアップ通知 OFF、管理画面内のデフォルト設定・プラグインを非表示、自社の設定画面を設置したか、稼働するか |
| 権限 | 管理画面内のユーザー権限の設定、通知メール先の設定を行ったか |
| 画像アップロード調整 | 記事投稿時、画像アップロード時に制限をかけているか、大きな写真ファイルでテストしたか |
| 固定ページ | 管理画面内で、固定ページのコンテンツ内を簡単に編集できるようにしてあるか、テンプレートを適用しているか |
管理マニュアル
| 項目 | 解説 |
|---|---|
| 表記 | ログインの ID とパスを記載したか、管理画面と管理マニュアルの内容（メニューのスクショ等）は一致しているか |
| URL | 参考 URL のアドレスは打ち込みやすいように短く記載してあるか、または QR コードを貼ってあるか |
| 使い方 | 画像とリンク挿入の解説は分かりやすいか、PDF ファイルの挿入を記載しているか、コメントの扱いを明確に解説してあるか |
| SNS 運用 | SNS の簡易的な運用方法を記載したか（現担当者が変わる場合があるので） |
Google Analytics
| 項目 | 解説 |
|---|---|
| 埋め込み | Google Analytics の埋め込み、複数のサイトを一元管理できるように設定したか |
| コンバージョンの設定 | Google Analytics コンバージョンの設定（問い合わせ／資料請求／予約／メルマガ登録／発注） |
SEO
| 項目 | 解説 |
|---|---|
| メタ設定 | タイトル・ディスクリプション・キーワードの設定 ※クライアントのメタ入力労力を省く場合、ブログ記事のメタは自動出力（本文からの抜粋）にする |
| マイクロフォーマット | マイクロフォーマット（文章をクローラーに正しく伝える） リッチスニペット設定。microdata について - ウェブマスター |
| ウェブマスター設定 | Webmaster の設定、GA との連携は済んだか |
| クローラー対策 | OGP 、サイトマップ、パンくず設定 |
以上、納品前にサイトをチェックする時に使えるシートでした。