calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

納品前に助かった!今Web制作している人必見の品質・納品チェックシート

Website_Quality_Control

テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

品質管理チェック項目

機能

要件定義をもとに指定の機能が実装済か確認します。

項目 解説
テスト公開ページ 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 、サイトマップ、パンくず設定

以上、納品前にサイトをチェックする時に使えるシートでした。

スポンサード リンク

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください