ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > これだけは確認したい、コーディングデータ納品前チェック!

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

Web制作

2023/09/29

2023/09/29

納品前にこれだけはチェックしよう記事サムネイル

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

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

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

この記事はこんな人に向けて書きました
  • 納品前に何をチェックするのか分からない人
ZeroPlus Gateについて

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

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

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

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

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元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プロパティを使うのが便利です。

 

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

画像書き出し

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

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

  1. 透過画像でパスで描画されているもの→ SVG
  2. 透過画像でパスで描画されていないもの→ PNG
  3. 写真など、1・2以外の画像→ 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ページ内に多くの画像があると、一般的に表示が遅くなります。

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

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

<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エラーチェッカー

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

 

HTMLの文法チェック

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

https://validator.w3.org/

HTML文法チェック

確認方法は、以下の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コードを貼り付けます。

コード入力画面

Checkボタンをクリックすると、下記の画面が表示されます。

Error部分が修正する必要がある箇所です。

チェック画面

 

CSSの文法チェック

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

https://jigsaw.w3.org/css-validator/

CSSもHTML文法チェックと同様の操作で確認できます。

 

ベンダープレフィックスの付与

ベンダープレフィックスが必要な場合は、下記のサイトを使用しましょう。

https://autoprefixer.github.io/

Autoprefixer CSS online

左側に「ベンダープレフィックスを付与したいCSS」を貼り付けると、右側に「ベンダープレフィックスが付与されたCSS」が表示されます。

Autoprefixer CSS online

画面下部のBrowserslistで、ブラウザのどのバージョンまで対応するか設定することができます。

例えば、browserslist last 4 versionsでは、最新バージョンから4つ前まで対応したベンダープレフィックスが付与されます。

 

実機でのレスポンシブで表示崩れはないか

WindowsPC、MacPC、Android、iOSなどの端末で、以下の主要ブラウザで制作したサイトの表示確認をしましょう。

  • Chrome
  • Edge
  • Firefox
  • Safari

 

確認する画面幅は、以下のとおりです。

  • デザインカンプで作成したデザイン幅
  • ブレイクポイントが切り替わる境目の画面幅
  • 375px、768px、1280px、1440px、1920pxなどの主要な画面幅
  • 画面幅が狭い320pxや360px
  • 画面幅が広い2000px以上
  • それ以外の画面幅

つまり、320px~2000px以上まで全ての画面幅でスタイル・レイアウト崩れがないか確認する必要があります。

それぞれの画面幅で見るべきポイントは次のとおりです。

 

デザインカンプで作成したデザイン幅

デザインカンプと比べて、明らかにレイアウトが大きく崩れていないか、デザインカンプどおりコーディングできているか確認します。

 

ブレイクポイントが切り替わる境目の画面幅

例えば、768px幅でPC表示とSP表示を切り替えるように設定している場合、767pxと768pxの画面幅を確認します。これをブレイクポイントの数だけ同様に確認しましょう。

768pxではデザイン通り表示されていても、意外と直前の画面幅でスタイルが崩れている、ということがあります。

 

主要な画面幅

375px、768px、1280px、1440px、1920pxなどは比較的多くのディスプレイに使われている主要な画面幅です。これらの主要画面幅でも確認します。

 

画面幅が狭い320pxや360px

画面幅が狭いときの状態も確認します。画面幅が狭くなると、テキストや画像、コンテンツなどが画面幅よりはみ出して表示され、横スクロールが発生することがあります。横スクロールが発生しないように調整しましょう。

 

画面幅が広い2000px以上

画面幅が広いとき、コンテンツ幅が広がらないようになっているか、コンテンツが左右中央寄せになっているか確認します。中央寄せになっていないと、画面幅が広がったとき、コンテンツが左右どちらかに寄ってしまいます。

 

それ以外の画面幅

上記以外の画面幅についても確認します。こちらも横スクロールが発生していないか、レイアウト崩れがないかなどを確認します。

 

まとめ:一つ一つ確認して対処しよう

コーディングデータの納品前チェックについて解説しました。最低限確認するべき項目は多いですが、一つ一つ対処していきましょう。

納品前チェックリスト

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

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから