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