ZeroPlus Media > Web制作 > これだけは確認したい、コーディングデータ納品前チェック！

これだけは確認したい、コーディングデータ納品前チェック！

Web制作

2023/09/29

この記事ではコーディングデータの納品前にチェックすることについて解説します。

Web制作者は、制作したコーディングデータをクライアントに納品する前に、さまざまなことを確認する必要があります。

コーディングデータを納品する前に確認するべき項目について見ていきましょう。合わせて注意するポイントについても解説していきます。

この記事はこんな人に向けて書きました

納品前に何をチェックするのか分からない人

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

これだけは確認したい納品前チェック
まとめ：一つ一つ確認して対処しよう

これだけは確認したい納品前チェック

制作したコーディングデータをクライアントに納品する前に、データの各種チェックを行います。

確認するのは以下の項目です。

JavaScriptやjQueryで実装した部分の不自然な動きはないか
コンソールエラーはないか
デザインどおりのフォントは反映されているか
画像が最適な形式で書き出されているか
2倍書き出しされているか、画像圧縮したか
画像にwidth属性、height属性は記述したか
適切な箇所の画像に遅延読み込みがされているか
altタグは記述しているか
不要な画像は削除したか
ホバー時のアクションに不自然な動きはないか
ホバー時にポインターになっているか、SP時にポインターは切っているか
aタグのリンクチェック（遷移先の設定）
metaタグの設定（クライアントから情報を提供されている場合）
HTMLの閉じタグチェック
HTMLの文法チェック
CSSの文法チェック
ベンダープレフィックスの付与
実機でのレスポンシブで表示崩れはないか

なお、確認項目をあらかじめリスト化しておくと確認忘れ防止になるので便利です。

JavaScriptやjQueryで実装した部分の不自然な動きはないか

JavaScriptやjQueryで実装した部分を実際に動かしてみて、不自然な動きがないか確認しましょう。

確認するポイントの例

Swiperで実装した部分で、スライド枚数が少ないときはスライドを解除、特定の枚数以上の場合になったら、スライドできるようにする
ハンバーガーメニューオープン時、背景がスクロールできないようにする
ハンバーガーメニューを閉じた後、ハンバーガーメニューを開いたときの画面位置にいる
ハンバーガーメニューやメニュー以外の部分をタップしたら、ハンバーガーメニューが閉じる...etc

コンソールエラーはないか

コンソールエラーがないかトップページ、下層ページを含め確認します。もしエラーを見つけた場合は、エラーの解消をしましょう。

エラーが残っていると、JavaScriptで記述した処理が正常に動作しなくなる原因になります。

デザインどおりのフォントは反映されているか

フォントがデザインどおりに反映されているか確認しましょう。何のフォントが反映されているか確認するには、検証ツール画面右下にある「レンダリングフォント」をチェックします。

フォントの設定

フォントはGoogleフォント、Adobeフォント、フリーフォントなど種類があります。また有料フォント、無料フォントなどの違いもあります。

例えば、GoogleフォントならCDN、Adobeフォントなら埋め込みコード、などフォントによって読み込み方に違いがあるので注意しましょう。CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。

フォントをダウンロードして使用する場合、@font-faceプロパティを使うのが便利です。

【CSS】@font-faceでfont-familyを指定する方法

画像が最適な形式で書き出されているか

画像書き出し

デザインカンプから必要な画像を書き出します。

画像は用途や画像によって書き出し形式が変わってきます。

透過画像でパスで描画されているもの→ SVG
透過画像でパスで描画されていないもの→ PNG
写真など、１・２以外の画像→ JPG

それぞれのメリットとデメリットを表にまとめました。

	メリット	デメリット	主な用途
SVG	ベクターベースであり、拡大・縮小しても品質が落ちない。透過に対応。 CSSやJavaScriptで容易に操作・アニメーションが可能。	複雑なイメージや写真には不向き。サポートしていないブラウザや環境も存在する。	ロゴアイコンイラストや図 Webサイトでのアニメーション要素
PNG	圧縮が可逆で、画像品質が維持される。透過に対応。シンプルなイメージやテキストの表示が綺麗。	JPGに比べてファイルサイズが大きい。	ロゴアイコン WebサイトのUI要素（ボタン、バナーなど）
JPG	圧縮率が高く、ファイルサイズが小さい。カラーのグラデーションが豊か。写真や複雑なイメージに適している。	圧縮の過程で画像品質が劣化する（非可逆圧縮）。透過に対応していない。	写真高解像度のイメージ Webサイトの一般的な画像

2倍書き出しされているか、画像圧縮したか

書き出す画像は2倍書き出しで書き出します。

また、書き出した画像は、そのまま使用するには画像ファイルサイズが大きいです。そのまま使用するとWebサイトの表示速度低下の原因になるので、書き出した画像は「TinyPNG」や「iLoveJPG」のサイトなどで画像圧縮しましょう。

画像にwidth属性、height属性は記述したか

imgタグにはwidth属性、height属性を記述しましょう。

<img src="dummy.png" width="280" height="188">

これらの属性を指定すると「レイアウトシフト」対策になります。

レイアウトシフトとは、画面を更新すると、一瞬だけ画像がカクついて表示される現象のことです。Webサイトのページが読み込みから表示されるまでの間にレイアウトがずれたり崩れたりするので、修正する必要があります。

レイアウトシフトに関しては下記の記事をご覧ください。

Webサイトのページ表示速度を上げる方法について解説

適切な箇所の画像に遅延読み込みがされているか

Webページ内に多くの画像があると、一般的に表示が遅くなります。

これを改善するには、画像の遅延ロードで対応します。

画像の遅延ロードとは、ブラウザ画面領域内にある画像のみ読み込むことです。領域外にある画像は読み込まないことで、画面表示を早くすることができます。

<img src="dummy.png" loading="lazy" width="280" height="188">

ChromeやEdge、Safariではloading属性をサポートしています。

ただし、ファーストビューやファーストビューに近いエリアの画像にはloading属性は付けないようにしましょう。ファーストビューやファーストビューに近い画像は遅延読み込みではなくすぐに表示する必要があるため、loading="lazy"を付けてしまうとかえって表示のスピードが遅くなってしまうためです。

altタグは記述しているか

altタグには、画像の意味を説明するテキストを入力できます。画像が表示されない場合に表示される「代替テキスト」にもなります。

imgタグのaltタグには、画像を説明するテキストを記述しましょう。

<img src="画像のパス" alt="画像の説明文">

altタグは、検索エンジンが画像の意味を理解するために、コンテンツの内容を適切に伝える役割があります。

また、視覚障がいなどの理由で画像が見られない人に「音声」で内容を伝えることもできます。altタグに記述されたテキストは、スクリーンリーダーなどの機能によって、音声で読み上げられます。

altタグ自体には、直接的なSEO効果はありません。しかし、画像の内容を検索エンジンのクローラーに伝えるメリットがあります。適切なキーワードで記述すれば、画像検索で上位表示を狙えます。

altタグの確認

コーディングしながらaltタグを記述していけば記述忘れは減りますが、最後に確認する場合は、VSCodeで「Ctrl + F」または「Command + F」で検索欄を開き、「alt=」と入力することで、ファイル内のaltタグをすべて調べることができます。

一つ一つ確認し、記入忘れがあればテキストを入力していきます。

ホバー時のアクションに不自然な動きはないか

ホバー時のアクションで不自然な動きはないか、実際にホバーしてみて確認しましょう。transitionプロパティが必要な場合はtransitionを設定しましょう。

また、transitionプロパティを設定する場合は、どのプロパティに対してtransitionを適用するのか記述しましょう。

例えば、以下の場合ではcolorプロパティに対してtransitionを適用しています。

これによって、colorプロパティに0.4秒のlinear変化（速度が変わることなく一定に変化）しながら文字色が変わります。transitionプロパティはcolorプロパティに対してのみ指定しているので、他のプロパティに影響はありません。

.element {
  color: red;
  /* colorプロパティにtransition適用 */
  transition: color .4s linear;
}

.element:hover {
  color: pink;
}

ホバー時にポインターになっているか、SP時にポインターは切っているか

ホバー要素にはパソコン表示時にポインターを表示させ、スマートフォン表示時にはポインターを切っておきましょう。

また、ホバー時のスタイルはSP時は不要なので、PC時の場合だけホバースタイルを適用しましょう。

aタグのリンクチェック（遷移先の設定）

aタグには遷移先を指定し、クリックして遷移先に遷移するかもチェックしましょう。

遷移先が不明な場合はクライアントに確認します。未確定の場合は空欄で問題ありません。

metaタグの設定（クライアントから情報を提供されている場合）

headタグのmetaタグを記述しましょう。

headタグの中に記述できる情報例（メタタグ）

文字コード：HTMLファイルがどの文字コードで保存されているのか指定する。文字化け防止。HTML5ではUTF-8が推奨。
viewport：Webサイトのページが表示される画面の表示領域
title：Webページのタイトル
description：Webページの説明
format-detection：電話番号の自動リンク機能
favicon（ファビコン）: ブラウザのタブに表示されるアイコン
OGP設定：SNSなどでシェアされたときに表示される情報

クライアントから記載する情報を共有してもらっていない場合は、クライアントに確認しましょう。

HTMLの閉じタグチェック

HTMLのチェックに便利なツールHTMLの閉じタグチェックは、Chrome拡張機能の「HTMLエラーチェッカー」が便利です。

HTMLエラーチェッカー

HTMLエラーチェッカーは、現在見ているWebページのHTMLをチェックし、閉じタグがない、開きタグが不足している、などの簡単なチェックを行ってくれます。

HTMLの文法チェック

HTMLの文法チェックは下記のサイトで行えます。

https://validator.w3.org/

確認方法は、以下の3つがあります。

Webサイトのページをチェックしたい場合
→「Validate by URL」にサイトURLを貼り付け
ファイルをチェックしたい場合
→「Validate by File Upload」にファイルをアップロード

コードで確認したい場合
→「Validate by Direct Input」にHTMLコードを貼り付け
→CheckボタンクリックでHTMLをチェック

例えば「Validate by Direct Input」で次のようなHTMLをチェックするとします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <a href="">
    <a href="">aタグの中にaタグ</a>
  </a>
</body>
</html>

Validate by Direct Input のタブの入力欄にチェックしたいHTMLコードを貼り付けます。