・コーディング後にする納品前チェックは何をすればよい？
こんな疑問にお答えします。
案件のコーディングが終わった後、そのまま納品するのは注意が必要です。
表示がおかしかったり、プログラムに不具合があったりする場合があります。
そのため必ず納品前にチェックしておくべし。
かなり大事です！
とはいえ、何をチェックすればよいかわからないはず。
ということで、この記事では「コーディング後の納品前チェックリスト30個」について紹介していきます！
コーディング後の納品前チェックリスト
目次
【見た目編】コーディング後の納品前チェックリスト【➀～➄】
というわけでコーディング後の納品前に、チェックするべき見た目編の項目を紹介していきます。
デザインカンプに記載されているテキストと、差異がないかの確認です。
コピペミスや、意図しない空白がないか確認しましょう。
デザインカンプにある通りの画像を設置しているの確認です。
上手く書き出せてなかったり、購入前マークが入ってないかを確認しましょう。
「ダミーテキスト」や「ダミー画像」の部分をどうするか、納品前に聞いておきます。
頂いたデザインカンプ通りに、コーディングができているかの確認です。
拡張機能の「Perfect Pixel」を使って確認したり、デザインカンプを横画面においてチェックします。
サイトにアップした時に、表示が崩れていないか確認しましょう。
- レスポンシブ時の表示
- 意図しない横スクロール などなど
また案件ごとに変わりますが、対応するブラウザやデバイス全てで表示崩れがないかの確認も必須です。
| ブラウザ例 | Google Chrome・Safari・Firefox・Edge |
| デバイス例 | Windows・Mac・Android・iPhone・iPadなど |
「safariでのみ表示崩れが起きていた」なんてことよくあります。
WindowsとMac両方持っておくのがオススメですね。僕自身も両方持って確認しています。
【マークアップ編】コーディング後の納品前チェックリスト【⑥～⑩】
続いてマークアップ編です。
HTMLコードが正しく記述されているか確認しましょう。
閉じタグがない、見出しの順番がめちゃくちゃ、適切なタグを使っているかなどチェックします。
拡張機能の「HTMLエラーチェッカー」を使うのがオススメ。
aタグに記述するリンク先があっているか確認しましょう。
- リンクに飛ぶか
- リンク切れてないか
- 別タブで開く場所は「target=“_blank”」
画像にもよりますが、適切なalt属性を記述しているか確認します。
ホバーアクションや、CSSやjQueryを用いたアニメーションはちゃんと動作しているか確認しましょう。
ブラウザによっては動きがおかしい場合があるので注意が必要です。
使用しないであろう不要なコメントアウトがないか確認しましょう。
ある場合は削除しておきます。
【headタグ編】コーディング後の納品前チェックリスト【⑪～⑮】
続いてheadタグ内に関するチェックリストです。
ページのタイトルやディスクリプションが、正しく記述されているか確認します。
検索した時に表示されるので、この部分は最重要チェックポイントです。
SNSにてシェアされた場合に表示される部分です。
ちゃんと設定されているか、また実際にシェアしてみようとしたときに正しく表示されてるか確認しましょう。
下記を使うのがオススメです↓
サイトのタブに出てくるアイコン部分です。
こちらがちゃんと設定されているか、また実際に表示されるか確認しましょう。
【favicon】スマホのファビコン設定方法【IOS（iPhone）・Android】 重複コンテントとみなされないように、「canonical」がちゃんと設定されているか確認しましょう。
「www.」の有無、末尾の「/」の有無、「/index.html」の有無など。正規URLを記述しておくべし。
こちらは案件にもよりますが、頂いた導入タグが正しく設定されているか確認しましょう。
「Googleアナリティクス」などのタグですね。
【サイト表示編】コーディング後の納品前チェックリスト【⑯～⑲】
続いてサイト表示に関するチェックリストです。
ページ読み込み速度を上げるために、画像の圧縮をしておきましょう。
ただ圧縮しすぎて粗くならないように注意。
下記の圧縮ツールがオススメ↓
SSL化のリダイレクト設定を確認します。「http」で検索したら「https」にリダイレクトするかチェックしましょう。
また古いURLから新しいURLにリダイレクトさせるときも、正しく動くか確認します。
xml形式のサイトマップのファイルが、正しく設置しているか確認しましょう。（アップする場合）
【解説】sitemap.xmlの作り方｜自動生成ツール【WordPressも】 リンク切れや、存在しないページにアクセスしたときにエラーページが表示されるか確認しましょう。（アップする場合）
【フォーム編】コーディング後の納品前チェックリスト【⑳～㉓】
続いてお問い合わせフォームを実装したときにチェックする項目を紹介します。
バリデーションルールがちゃんと動作してるか、確認しましょう。
必須項目だったり、メールアドレス表記だったり。
「入力画面」⇒「確認画面」⇒「完了画面」
「入力画面」⇒「確認画面」⇒「入力画面」
などちゃんとページ遷移するかどうか確認しましょう。
フォームを送信したときに、ちゃんと送信できているか。またメールが届いているか確認しましょう。
届いたメール「自動返信」「管理者宛て」のメールを確認しましょう。
文章はあっているか。メールアドレスはあっているか。
納品するときには本番サイト用のメールアドレスを設定しておきましょう。
【無料】静的サイトに使えるお問い合わせフォーム3選【オススメ】 【WordPress編】コーディング後の納品前チェックリスト【㉔～㉚】
最後にWordPressの案件にてチェックする項目を紹介します。
パーマリンクの設定がちゃんとされているか確認しましょう。
サイトタイトル部分がちゃんと設定されているか確認しましょう。
「検索エンジンがサイトをインデックスしないようにする」部分に、チェックが入っていないか確認しましょう。
ここにチェックがあると、検索エンジンに反映されません。。
デフォルトである投稿や、カスタム投稿にて作成する部分がちゃんと仕様通りか確認しましょう。
下記部分ですね↓
- タグ
- カテゴリー
- タクソノミー
- ターム
出力によって反映されている部分が、ちゃんと崩れなく表示されているか確認しましょう。
- 記事一覧
- 関連記事
- ページネーション
- カスタムフィールド
- 様々な大きさのアイキャッチ画像 などなど
記事数によって一覧ページや、ページネーションの数が変わります。その場合も崩れないかチェックすべし。
確認用に投稿した記事は、ちゃんと削除しているか確認しましょう。
セキュリティ対策はちゃんとしているか確認しましょう。
内容としては下記記事にてまとめております↓
【解説】WordPressのセキュリティ対策９つ【初心者必見】 【確認】コーディング後の納品前チェックリスト【30個】：まとめ
- 納品前にちゃんと確認すべし！
納品前のチェックリストとして使ってみてね！
