デザイン周辺のチェック項目
デザインチェック
Fixしたデザインとコーディング後のキャプチャを重ね合わせて、デザインを忠実に再現できているか確認します。文字サイズ・太さはもちろん、文字間隔や余白など、隅々まで厳しくチェックします。
表記チェック
表記ゆれがないか、スペルミスがないかをチェックします。クライアント様ご指定の表記ルールがある場合は、特に注意深くチェックします。
ダミーチェック
制作過程にダミーとして入れていたテキストがないかチェックします。またご提案の際に、素材サイトから当てはめたダミー画像がないかどうかも再度確認します。
コーディング周辺のチェック項目
ブラウザチェック
ブラウザによって表示崩れや動作不良が起きることがあるため、ブラウザチェックもきっちり行います。近年ではスマートフォンやタブレットの普及に伴い、確認する端末の種類も年々増えています。
案件によってチェック項目は異なりますが、PLAN-BのPC、スマートフォンの動作環境基準の一例をご紹介します。
レスポンシブサイトの場合、スマートフォン実機での確認はもちろん、PCでブラウザ幅を縮めたり、広げたりして、レイアウト崩れがないか確認します。
バリデート
コーディングしたHTMLやCSSが要求された仕様にそって適切に記述されているのかをソフトウェアで確認します。
誤った記述がある場合、エラーが返ってくるため、修正して再度確認を行います。そうすることでW3C(※)に準拠したHTMLに近づきます。
※W3C:ティム・バーナーズ=リーによって創設された、HTMLやXMLをはじめとするWWW(World Wide Web)で利用される様々な技術の標準化を推進することを目的とした非営利団体の名称です。
リンクチェック
リンク切れがないか、ページ内リンクは意図した通りリンクしているかチェックします。全てのページで共通して読み込むヘッダーやフッターは1ページのみ、その他のページについては、ページごとにチェックします。
サイトのボリュームが多い場合、人的チェックだけでは漏れる恐れがあるため、リンク切れを確認するツールを利用することもあります。
404ページ
リンク切れなどで、アクセスしたページが存在しなかった場合に表示されるエラーページが正しく動作するのか確認します。
フォーム周辺のチェック項目
バリデーション
未入力項目があった場合に、正しくバリデーションが動作しているか、確認します。
フォーム
フォームの確認画面、完了画面に正常にページ遷移するか確認します。
自動返信メール
ユーザー宛て、管理者宛てそれぞれに、フォームからメールが正常に届いているかを確認します。
クライアント様テスト
クライアント様にもフォームのテスト送信を行っていただき、最終確認を行います。
SEO周辺のチェック項目
metaタグ情報
各ページに適したタイトル、ディスクリプション、キーワードが設定されているのか確認します。検索でヒットさせたいキーワードを必ず含めること、そして各ページに適したユニークな文言を入れることが必須となります。
h1
大見出しh1は、検索順位に比較的強く影響するため、SEOを考慮した見出しをSEOチームと連携して進めます。
alt属性
alt属性には、各画像の説明を記述します。画像が表示されない場合、alt属性の記述内容が表示されます。ただし、あまりにもキーワードを詰め込みすぎず、その画像のポイントを抑えながら記述するようにします。
またalt属性にわかりやすいキーワードを入れておくことで、Googleの画像検索のような検索エンジンからの流入も期待できます。
XMLサイトマップ
検索エンジンがサイト内のURLを集めやすくするため、URLを一覧で記述したxml形式のファイルをサーバーに設置できているか確認します。
robots.txt
サーバーに設置した、XMLサイトマップのファイルの場所をクローラーに明示します。そうすることで、クローラーのサイト全体の巡回速度の向上と、最新の状態の評価が検索結果に反映されやすくなります。
canonicalの設定
「www.」の有り無し、「/index.html」などの有り無しなどで重複コンテンツとみなされないように、canonicalタグの設定を行います。 ※htaccessによるURLの正規化を行う場合もあります。
また、レスポンシブサイトではなく、PCサイトとスマートフォンサイトを別々に制作する場合、canonicalタグを正しく設定できているか確認します。
導入タグ周辺のチェック項目
解析ツール系タグ
GoogleAnalyticsなど、クライアント様指定のタグが埋め込まれているか確認します。問い合わせ数・資料請求数などを計測する場合は、コンバージョンの目標設定が正しく行えているのかも確認します。
コンバージョン計測系タグ
問い合わせフォームのサンクスページなど、コンバージョンページにタグが埋め込まれているか確認します。
例:Google Adwords コンバージョンタグ、Yahoo! プロモーション広告 スポンサードサーチ コンバージョンタグ、Yahoo! プロモーション広告 YDNコンバージョンタグなど
リマーケティング系タグ
リマーケティングのリストを集めるためのタグで、全ページにタグが埋め込まれているか確認します。
例:Google Adwords リマーケティングタグ、Yahoo! プロモーション広告 YDNリターゲティングタグなど
また、タグを一元管理できるツールとしてGoogleタグマネージャとYahoo!タグマネージャがありますが、Googleタグマネージャの場合、2016年11月にコードの設置場所が変わったため、特に注意して設置します。
以前はscriptタグとnoscript タグを<body>直下に設置していましたが、新しいコードの設置場所は、scriptタグを<head>内に、noscriptタグを<body>直下に設置します。
リダイレクト周辺のチェック項目
リダイレクト
Webサイトのリニューアルの場合に、古いURLから新しいURLに自動的に移動させる処理を行い、正しく動作するのか確認します。
その他
favicon
ブラウザのタブに表示される小さいアイコン(favicon)が設定されているか確認します。
Open Graph Protocol(OGP)
SNSでコンテンツがシェアされた時に、そのページのタイトル・概要・アイキャッチ画像が表示されるか確認します。サイトリニューアルの際は、新しいOGPが認識されるよう各ページにデバッカーを通していきます。
まとめ
以上が納品前に行う基本的なチェック項目です。プロジェクトに応じては、上記に追加してチェックすることもあります。
PLAN-Bでは、ミスや不具合のないWebサイトをクライアント様に納品するため、ディレクター、デザイナー、コーダー複数名でのチェック体制を徹底しています。
このように、チェック体制を強化し、精度の高い納品物を治めることで、クライアント様から信頼していただくことにも繋がっています。これらの納品前のチェック項目を、是非、参考にして頂ければと思います。