Pinto!

企業のマーケティングを支援する「ピント!」

【制作会社向け】Webサイト納品前に確認したいチェックリスト無料DL!

Writerライター

渡辺 知子

株式会社PLAN-B プロジェクト推進室 クリエイティブユニット

2016年、中途社員としてPLAN-Bに入社。クリエイティブユニットのWeb制作ディレクターとして制作の進行・案件のクオリティ管理に従事。

目次
    1. デザイン周辺のチェック項目
      1. デザインチェック
      2. 表記チェック
      3. ダミーチェック
    2. コーディング周辺のチェック項目
      1. ブラウザチェック
      2. バリデート
      3. リンクチェック
      4. 404ページ
    3. フォーム周辺のチェック項目
      1. バリデーション
      2. フォーム
      3. 自動返信メール
      4. クライアント様テスト
    4. SEO周辺のチェック項目
      1. metaタグ情報
      2. h1
      3. alt属性
      4. XMLサイトマップ
      5. robots.txt
      6. canonicalの設定
    5. 導入タグ周辺のチェック項目
      1. 解析ツール系タグ
      2. コンバージョン計測系タグ
      3. リマーケティング系タグ
    6. リダイレクト周辺のチェック項目
      1. リダイレクト
    7. その他
      1. favicon
      2. Open Graph Protocol(OGP)
    8. まとめ

デザイン、コーディングが完了し、いざサイト納品!と、その前に大切な納品前チェックを行います。デザイン通りにコーディングできているか、リンク切れはないか、などサイト納品前のチェックは、特に注意深く行います。

ディレクターはもちろん、デザイナー・コーダーとともに行う厳しいPLAN-Bのチェック項目をご紹介します。納品データの精度を高めたいと考えておられるWebディレクターの方はぜひ参考にしてみてください。


デザイン周辺のチェック項目

デザインチェック

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サイトをクライアント様に納品するため、ディレクター、デザイナー、コーダー複数名でのチェック体制を徹底しています。

このように、チェック体制を強化し、精度の高い納品物を治めることで、クライアント様から信頼していただくことにも繋がっています。これらの納品前のチェック項目を、是非、参考にして頂ければと思います。

サイト改善の最新事例 サービスページはこちら

関連する記事を読む