Webサイトの品質向上のため、弊社でテスト期間に行うチェックリストを紹介します。ユーザーにとって分かりやすく、できるだけ不都合がないWebサイト制作を心がけております。対応環境などは案件ごとに適宜調整しています。
確認環境
- MacのGoogle Chromeで全ページ確認
- 印刷プレビューも確認
- Chrome DevToolsでその時々でのスマホの最適サイズで確認
- ブラウザのウィンドウを広げた状態で確認
- ブラウザのウィンドウを狭くした状態で確認
- MacのSafariで確認
- WindowsのMicrosoft Edgeで全ページ確認
- WindowsのGoogle Chromeで確認
- iPhoneのSafariで全ページ確認
- ランドスケープモードで確認
- iPadのSafariで確認
- ランドスケープモードでも確認
- Android OSのGoogle Chromeで確認
表記がないものは最新バージョンとする。
meta要素の確認
- 文字コードはUTF-8
- meta descriptionはトップページが必須。他は任意
- meta keywordsは不要
- og:title og:description og:url og:image は全ページ必須
- og:titleとog:urlはページによって値を変更
- og:descriptionとog:imageは共通のものとページごとの指定で分ける
- faviconは必須、touch-iconは任意
文言について
- リンクの文言で「Read more」「詳しく見る」はできるだけ控えて、リンク先のコンテンツが分かる文言が理想
- トップページのことを「top」か「home」かで称する時は統一すること
フォームの確認
- 必須の入力項目は見た目で分かるか
- inputのtype属性は適切か
- labelがついてるか
- パソコンでのメール送信確認
- スマートフォンでのメール送信確認
- エラー時の挙動の確認
文章の確認
- 誤字脱字表記ゆれの確認
- 見出しや小見出しはhタグでマークアップされているか
- テキストは選択ができる状態か
画像の確認
- 重要な画像はRetina対応になっているか
- スマホ版の画像はRetina対応になっているか
- 画像データが必要以上に大きすぎないか
- 適切なalt属性がされているか
リンクの確認
- リンク切れはないか
- リンク箇所は見た目で分かるか
- Tabキーでリンクがフォーカスされているか
- ホバーで状態が変わっているか
- スマホ版の電話番号はリンクになっているか
WordPressの確認
- phpのバージョンは7.4以降を推奨
- 管理画面へのログインページ変更、XMLRPC防御も適用。他は適宜
- パスワードは長めで半角の英数字、かつiやoなど大文字小文字数字含めて判別しづらいものは避ける
- パーマリンクは数字ベース、SEO意識してお客様に投稿してもらえるなら投稿名
- リリース時には「検索エンジンがサイトをインデックスしないようにする」のチェックを外しておく
- ヘッダーフッターはテンプレートを分けること
- 画像はどのサイズの画像を挿入してもレイアウトが崩れないようにする
- ビジュアルエディターで投稿しても問題ないCSSにしておくこと
その他
- スマホ版でGoogle マップにアクセスできるか
- スマホ版から電話番号にアクセスできるか
- 表示速度は気にならないか
- Google Search ConsoleとGoogle Analyticsの導入
- SSLの導入
- 404エラーの対応
- wwwありなしを統一
- HTTP（非SSL）アクセスでHTTPS（SSL）にリダイレクト
