WEB制作のコーディング後にサイトの表示確認とかはするけど
「他になにか漏れていないか不安」「そもそも何をチェックすればいいかわからない」
といった方向けに、確認必須のセルフチェック項目を紹介します。

ぜひ参考にして高品質な納品を目指しましょう！

確認必須セルフチェック項目13選

案件で実際に確認している内容を13選紹介します。
意外と確認が抜けてしまう項目もあるので、ぜひ実際に使ってみてくださいね。

デザインの通りに再現できているか

まずは大前提デザインの通りにコーディングがされている必要がありますよね！
Adobe XDやPhotoshopなどで作成したデザインと、サイトを並べて比較してみましょう。

サイトのボリュームが多いと、1セクションを抜かしてしまったり、ボタンなどの要素を抜かしてしまっていることが、意外とあります。

デザインの通りにコーディングできている状態で、この先のチェックをしないと確認のやり直しが発生してしまうので、しっかりチェックしましょう。

チェック方法

• デザインとサイトを並べて比較し、目視で確認する。

レスポンシブが崩れないか

スマートフォンやタブレットでwebサイトを見るのが当たり前になってきているので、レスポンシブの確認は必須です。

320pxは古いiPhoneのサイズですが、最小のサイズなので、対応できているとすべてのデバイスに対応できてると言えるでしょう。

デザイン的に実装が厳しい場合は、クライアントと相談して最小サイズを決めると良いでしょう。

以下の幅で崩れないか確認しましょう！

チェック方法

• デベロッパーツール使用して、サイズを可変させ、どのサイズでも崩れないか確認する。
• 実際にスマートフォンで表示を確認してみる。

誤字脱字がないか、改行が適切か

コピーミスによる誤字や、そもそもデザインで誤字がある場合があります。
一度読んでみたり、比較ツールで確認してみましょう。

また、改行はぱっと見で気づきにくいため、ミスしていることが多いです。
こちらも比較ツールでしっかりと確認していきましょう。

チェック方法

• 実際に文章を読み上げてみる。
• 比較ツールを使用し、コピーミスや改行ミスがないか確認する。

筆者が使用している比較ツールサイト（https://tool-taro.com/diff/）(https://difff.jp/)

フォントはあっているか

フォントが指定のフォントになっているか確認しましょう。

反映されていなかったり、cssを流用して使ったりすると流用元のフォントのままになってしまうことがあり、見落としがちです。
怠らずにチェックしましょう！

リンクは正しいか

サイトにあるすべてのリンクを実際にクリックして、正しく遷移するか確認しましょう。
URLのコピペミスや、ドメインが変わったことでURLが古い状態になってしまうなどリンクのミスも多い印象です。

怠らずに確認しましょう。

リンクをクリックしたら、別タブで開く場合もあると思うので、その点も忘れずに確認しましょう。

チェック方法

• PCやスマートフォンですべてのリンクをクリックし、遷移先が正しいか確認する。

※OKだったリンクは、デザインに直接メモや色を変えるなどすると確認の精度が上がります。

リンクのホバー時動作が正しいこと

リンクのホバー時の表示に指示がある場合は、そのとおりに実装できているか確認しましょう。
多くの場合は、ボタンとメニューのリンクそれぞれにホバー時の指示があることが多いです。

また、ホバー時の指示がない場合は、見落とされている可能性があるので、確認してみましょう。

最低限、色を薄くしたり反転させたりして、リンクとわかりやすいように実装すると良いと思います。

チェック方法

• PCですべてのリンクホバー時動作を確認する。

コーディングルールに沿っているか

コーディングのルール指示がある場合は、ルール通りに実装できているか確認しましょう。
例えば「class名の付け方」「リンクのホバー時や遷移先」「OGPは設定すること」など指示内容は案件によって様々です。

指示内容が漏れていないか今一度チェックしましょう。

チェック方法

• 指示書の内容が網羅されているかすべてチェックする。

ファビコンが設定されていること

ファビコン画像のURLや名前が間違っていてうまく反映されなかったりと見落としがちなので、忘れずに確認しましょう。

また、ファビコンはデザインに記載されていいないことも多いので用意されているか確認したり、ロゴから流用して「これでよいですか？」と提案してみましょう！

チェック方法

• ファビコンが表示されているか確認する。

SEO対策がされているか

EO対策は、指示書に記載されていたり特に何も指示がない場合もあります。
指示がある場合はそのまま従い、ない場合は最低限以下を実装して確認するようにしましょう。

SEO対策

• OGPの設定
• titleの設定
• altの記入

チェック方法

• 指示通りのSEO対策または上記のSEO対策内容が実装されているか確認する。

ブラウザごとの表示確認

ブラウザごとに表示のされ方が違ってたり崩れてしまう場合もあります。
特にフォームは表示が違くなりやすいので、注意して確認するようにしましょう。

チェック方法

最低限、以下ブラウザで表示が崩れていないか確認する。

• Chrome
• Edge
• Safari
• Firefox

Javascriptの動作が正常か

javascriptの動作を全ブラウザで確認しましょう。
また、指示書やデザインに動作の内容が書かれていることがあるので、網羅できているか確認します。

例えば

• ページ内遷移
• ハンバーガーメニュー
• TOPへ戻るボタン
• ヘッダーを上部に固定する

などの動作はよく実装します。

ブラウザによっては動作しなかったりする場合もあるので、ブラウザごとに確認し、スマートフォンでもしっかり確認しましょう。

チェック方法

• Chrome、Edge、Safari、Firefoxでjavascriptが動作するか確認する。
• スマートフォンでjavascriptが動作するか確認する。

コメントアウトしたゴミ設定が残っていないか

コメントアウトは、最後に忘れずに確認してゴミ設定は削除しましょう。

特にcssに多いです。
すぐに戻せるようにコメントアウトして残したりして、そのまま納品してしまう…
なんてことはよくあります。

別のコーダーがみたときに見づらいですし、汚いまま納品するのもよろしくないですよね。

チェック方法

• ファイルの上から下まで確認し、不要なコメントアウトが残っていないか確認する。

解析ツールは設定されているか

アナリティクスなどの解析ツールとの連携が必要な場合は、埋め込みができているか確認しましょう。

クライアントにアカウントを作ってもらい、埋め込み内容を共有してもらうことも多いので早めに確認しておきましょう。

チェック方法

• 解析ツールが埋め込みできていることを確認する。
• 解析ツール側で連動できているか確認する。

セルフチェック一覧

セルフチェックでは面倒なことでも、飛ばさずに１つ１つ怠らずにチェックすることを心がけています。

チェック項目とチェック方法の一覧をまとめたので実際に使ってみてください！

今回ご紹介した記事を参考に、セルフチェックしてみてくださいね。

高品質な納品をしてクライアントから信頼を得ましょう！