納品後に困らない、サイト公開前のチェックリスト

サイト納品・公開後は想定外のトラブルが多く、防ぐためにも正しい確認と事前のテストが必須です。
誤字・脱字といった目で見える部分はお客様でも簡単に確認できますが、システム側・技術面の確認は知識がないと難しいものです。

そこで、この記事では弊社が実施している「納品前チェックリスト」をもとに大切な確認事項をまとめます。

表示・動作の確認

主要デバイスでの表示・動作確認

レスポンシブWebデザインが主流な現在、様々なデバイスでレイアウトが崩れていないか確認を行います。
主に、主要なPC・スマートフォン・タブレットでの確認は必須です。
弊社ではデベロッパーツールだけでなく、実機での確認も大切にしています。

• 意図しない横スクロールが発生していないか
• 小さい画面でコンテンツの被りが生じていないか

主要ブラウザでの表示・動作確認

Chrome、Safariの最新バージョンを中心とした主要ブラウザで、問題なくサイトが表示・動作するかをテストします。
ブラウザごとに多少違うルール・解釈を捉え、その対処がシステム側で行えているかも大切です。

• 適切なベンダープレフィックスでブラウザ間の差異に対処できているか
• クロスブラウザテストの実施

コンテンツ確認

テキストの表記ゆれ・誤字・脱字

単純な誤字・脱字確認に加え、ひらがなと漢字の混在などによる表記ゆれやスペルミスも重点的に確認します。
この際、2人以上でチェックするようにしています。

• ひらがなと漢字の表記ゆれ（例：致します、いたします）
• 日付の表記ゆれ（例：1月1日、1/1、01/01）
• 英語の大文字、小文字の区別
• 全角、半角の区別

画像や動画の表示・サイズ

画像のリンク切れや制作中のダミーが残っていないか、デザインに適切な画像サイズで設定されているかなどを確認します。
うまく表示されていない問題は気づきやすいですが、画像データが不要に大きなサイズとなっている場合、サイトの表示速度に大きく影響します。
このため、適切なサイズ、かつ圧縮効率が高いWebPで設定されているかといったシステム側でのチェックも重要です。

• リンク切れがないか
• ダミー画像が残っていないか
• デザインに合わせた適切なサイズになっているか
• 圧縮効率が高い拡張子で設定されているか
• alt（代替テキスト）が適切に設定されているか

リンクの確認

サイト内に存在する全てのリンクが正しく設定され、目的のページへ遷移するかを確認します。
内部リンク・外部リンクも適切に区分し、外部リンクは原則別タブで表示などユーザーが迷わない配慮も大切です。
また、リンクと一目でわかるhover設定がされているかの確認も全てのリンクで行います。

• リンク切れがないか
• 目的のページへ遷移できるか
• 外部リンクは原則別タブで表示しているか
• hoverの抜けや漏れがないか

フォーム・インタラクションの動作確認

確認画面の設定

ユーザーの誤送信・途中送信を防ぐための対処として確認画面を設けます。
このページを入力画面と完了画面の間に挟むことで意図しない送信を防ぎ、機会損失やお客様の負担も軽減できます。

テキストボックスの文字制限

予期せぬ問題を避けるために適切な文字制限を設けます。
セキュリティ対策の一環や、どれだけ入力できるか事前に把握できることでの操作性向上につながります。

プレースホルダーの設定

項目ごとにどのように入力するべきか薄く仮に表示しておきます。
氏名の間にスペースを入れるべきか、電話番号にハイフンを入れるべきか、お問い合わせ内容にはどのような書き方をするべきかなど事前に案内できます。

バリデーション設定

必須項目の入力漏れや項目ごとに適切な入力がなされているかなど、フォームのバリデーションはユーザーの正しい入力に導く重要な仕組みです。
例えば、メールアドレスに@が抜けている、正しい電話番号ではないなど形式的な部分も自動で判別しアラートを出すことが可能です。

自動返信メール設定

フォーム送信後、ユーザーに対して送信完了やその内容を保存するため、自動的にシステムから送信する返信です。
本文には送信内容と合わせて、どれくらいで返信・回答するか、返信がなかった場合の対処方法などを記載します。

フォームの表示・動作確認

入力から確認・送信まで正しく適切に表示されているか、または動作しているか、一連の確認を行います。
基本的な確認項目は以下です。

• ①入力画面にて、設定した必須項目や形式が正しくバリデーションされているか
• ②確認画面に遷移し、入力した内容が正しく表示されているか
• ③完了画面に正しく遷移するか
• ④自動返信メールは内容ともに正しく送信されているか
• ⑤送信内容は設定したメールアドレスに正しく受信できているか

reCAPTCHAの設定

Googleが提供するセキュリティ対策ツールで、悪意のあるスパムメールの防止、不正アクセスやパスワードの総当たり攻撃（ブルートフォース攻撃）から保護するものです。
多い場合は日に数百件と送信されるスパムメールが止まり、人が送信する本来のメールのみ受信できるようになります。

SEO・パフォーマンスの確認

meta情報の設定

主に検索結果に表示されるtitle、descriptionをはじめとしたサイト情報を適切に設定します。
SNSでサイトが表示される際の設定（OGP）も大切で、テキストだけでなくシェアされた時の画像なども最適化しておきます。

Googleサーチコンソールの設定

Googleサーチコンソール（Google Search Console）とは、Googleが提供しているWebサイト分析ツールです。
検索結果に関する分析やサイトのインデックス登録など、SEO対策に重要な各種設定が一通り行えます。

サイト表示速度の最適化

表示に時間が必要以上にかかるとユーザーのサイト離脱の原因になります。
Googleが提供する「PageSpeed Insights」などを利用し、スピードの評価と問題診断で改善します。
また、適切なローディングなど読み込み中の対処ができているかも重要です。

404ページの作成

ユーザーの離脱防止やSEO対策にも影響する、存在しないページにアクセスした際に表示されるエラーページです。
URLの入力ミスや削除・変更となったページに対し適切な404ページを作成することで、ユーザーが迷わずサイト内で適切なアクションを取れるようになります。

インデックス除外ページの設定

フォームの完了画面など、検索ページに表示させないページからインデックスを除外します。
不要なアクセスを除くことで、サイト解析で正しい評価に導きます。

XMLサイトマップの生成

サイト内のページURLをリスト化し、検索エンジンに効率的にクロールしてもらうためのファイルです。
検索エンジンからの評価を向上させるとともに、正しい検索結果の表示につながります。

CMS（主にWordPress）の動作確認

パーマリンクの設定

公開後のパーマリンク構造の変更はSEOの評価に影響するため、納品までにルールを決めておきます。
日本語サイトはタイトルをそのままパーマリンクにすると文字化けが起きるので、数字やIDで自動的に付与されるよう設定しておきます。

管理者の設定

納品後の権限譲渡にてWordPressをお客様管理下へ設定変更します。
主に以下の項目をお客様情報へ変更します。

• 管理者のメールアドレス
• ユーザーのメールアドレス
• フォーム受信用メールアドレス

バックアップの管理

納品後のサイト改善や変更時、ないし予期しないトラブルでサイトが正しく表示・動作しなくなった場合に備えて、事前にバックアップ方法およびそのスキームを検討しておきます。
万一の際に即時復旧できる管理体制は、サイトの大小関わらず必須です。

操作方法・マニュアルの作成・提供

サイト仕様によっては複雑な管理画面になることもあり、お客様が自由に記事やコンテンツを更新するにあたって適切な操作方法・マニュアルを納品する必要があります。
また、随時不明点には迅速にサポート（電話/メール）があるかも大切な点です。

必要に応じて

契約内容やサイト仕様に合わせて、GoogleアナリティクスやGoogleタグマネージャーなどの解析ツール設定、フォーム受信メッセージのCSV出力など、お客様のビジネス・運用に適した設定・確認を行います。

まとめ

このように目で見える部分だけではなく、内部の技術的な点においても適切に確認することで納品後のトラブルを回避することができます。制作者の方でなければ難しく感じると思いますが、できる限り確認は重点的に行うようにしてください。

弊社では実際の納品時にお客様といっしょに確認していく、より細かなチェックリストを用意しています。

サイト納品・公開後の体制

弊社では、サイト納品・公開後に以下の体制づくりをしています。
安心してご相談ください。

• サポートデスクによる不備や改善の随時ご相談
• 納品後、規定期間の無償瑕疵対応
• サイト解析、Web広告運用（別途ご依頼の場合）