こんにちは、株式会社Pentagonでデザイナー(時々コーダー)をしているmaoです。
今日は完成したWebサイトを納品する前にチェックしておくべきことについてお話します。
デザインやコンテンツに関するチェック項目
デザインチェック
デザインどおりにコーディングで再現できているかチェックします。
私はコーディング後の画面にデザインを重ね合わせ、余白や文字サイズなどがデザインどおりかどうかチェックしています。
ぴったりハマった時は達成感と爽快感が味わえます!
デバイスチェック
パソコンだけでなく、タブレットやスマートフォンで見た時に表示崩れを起こしていないか確認します。
ブラウザ幅が縮まった時に表示崩れを起こすことも多いので、ブラウザ幅を縮めたり広げたりしてあらゆる幅での表示を確認しています。
また、スマートフォンやタブレット用のデザインが準備されている場合はそちらのデザインのとおりにできているかも忘れず確認しましょう。
誤字・脱字チェック
誤字・脱字・スペルミス、意図しない表記ゆれが無いか確認します。
誤字を無くすためにもなるべくテキストは手打ちせず、デザインデータからのコピペを徹底しましょう。
ダミーチェック
制作過程でダミーとして挿入しておいた画像やテキストがそのまま残ってしまっていないか確認します。
faviconチェック
faviconが設定されているか確認します。
OGP設定チェック
OGP設定ができているか確認します。
コーディングに関するチェック項目
ブラウザチェック
表示するブラウザによっては、対応していないタグやCSSなどがあったり、表示崩れを起こしてしまったりする場合があります。
主要ブラウザで正しく表示されるか確認しています。
リンクチェック
リンク切れを起こしていないか確認します。
404ページチェック
ページが存在しない場合に表示されるエラーページが正しく動作するか確認します。
バリデート、JSチェック
作成したサイトのHTMLやCSSが正しく記述されているか確認します。
また、JSが正しく動作するかも確認します。
フォームチェック
お問い合わせフォームなどのフォームが正しく動くか確認します。
また、納品時はフォームの宛先を本番用のものに変更しましょう。
リダイレクトチェック
Webサイトをリニューアルする際など、URLが変更になる場合は古いURLから新しいURLに自動的に遷移する処理を行います。
この動作が正しく行われているか確認します。
SEOに関するチェック項目
metaタグ情報、h1、alt属性が正しく設定できているか確認します。
また、各画像にaltテキストが記載されているかも確認しましょう。何等かの問題で画像が表示されない場合はalt属性に記載した内容が表示されます。
権利やセキュリティに関するチェック項目
SSL設定チェック
SSL設定を行ったか、正しくSSL通信できているか確認します。
コピーライトチェック
コピーライト表記を入れているか、公開年になっているか、会社名の表記は間違っていないかなどを確認します。
解析ツール導入に関するチェック項目
解析ツール用のタグチェック
Webサイトの運用開始後、アクセス状況を確認するための解析ツール(Google Analyticsなど)のタグが設定されているか確認します。
コンバージョンチェック
コンバージョンの測定を行う場合、お問い合わせフォームの送信完了ページなどのコンバージョンページにタグが埋め込まれているか確認します。
Search Consoleチェック
Search Consoleの設定を行ったかどうか確認します。
また、sitemap.xmlを送信したか、Search ConsoleとGoogle Analyticsの連動を行ったかも合わせて確認しておきましょう。