プログラミング

Webコーディング納品前のチェックリスト16

イケゾー
この記事は、こんな人におすすめ!
・コーディング初心者
・高品質なコーディングをしたい
・納品前のコーディングのチェックリストを知りたい

このような疑問にお答えします。

本記事の内容

  • コーディング納品前のチェックリスト
  • チェックの方法

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人
   

Webコーディング納品前のチェックリストを作成しました。

私はこれまで、頭の中にあるリストで、チェックをやってきました。
しかし、コーディングを外注することが増えてきて、コーディングの品質もバラバラになってしまいました。


品質を一定にしたいなと考え、チェックリストを作成し、納品前にチェックさせています。
チェック方法も合わせてご確認ください。

今回は、XDのデザインカンプデータからコーディングした想定です。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

Webコーディング納品前のチェックリスト16

納品前にチェックすべき項目15を解説します。
それぞれのチェック方法もぜひご覧ください。

デザインカンプ通り作れているか

通常、XDやPhotoShop、Figmaでデザインカンプをもらい、同じようにコーディングをします。

合わせられる部分は、デザインカンプ通りにします。
どうしても難しい部分はありますので、その場合はクライアントと相談して進めます。

フォントは正しいか

デザインカンプには、文字のフォントは指定されています。
標準のフォントであったり、珍しいフォントが指定されている場合もあります。

珍しいフォントの場合は、近いWebフォントで代用したり、フォントデータをもらう、または画像にするといった方法があります。

フォント情報はフォントパネルで確認します。

フォントパネル

納品する時に、どのフォントにしたのかクライアントに伝えます。
「Macでは”ヒラギノ角ゴシックW3″、Windowsでは”Noto Sans Japanese”が当たるようにしています。(珍しいフォント)は、(Webフォント)で代用しています。」のように伝えると、親切です。

色は正しいか

文字色や背景色は、デザインカンプ通りにしましょう。

コーディング時に、Sassの変数に入れておくと効率的です。変数に入れておくと、色の変更時にかなり楽になります。

色情報の取得方法は、スポイトツールを使います。

作成したページの場合は、「What Font」「ColorPick Eyedropper」などのChrome拡張機能を用いて色を吸い上げられます。

誤字脱字はないか

誤字脱字チェックは、コーダーの大切な仕事と考えています。

コピペでもミスは起こり得ますし、元々のテキストにも誤字脱字があるでしょう。よくあるのが空白が入ってしまっていることです。ぱっと見では気づけないので、比較ツールを使いましょう。
>>テキスト比較ツールはこちら

テキスト比較ツール

hover時の動き

ボタンhoverの動きは、指示されないことが多いですが、コーディング時によしなに設定しておきます。

このよしなにっていうのが難しいところですが、私はopacityくらいを当てています。その後に指示があれば、従うのが無駄がないかなと思います。

JavaScriptの動き

自分で追加したJSの動きは確実に確認しましょう。

条件によって異なる動きをするものは、全ての条件についてテストしましょう。

レスポンシブ表示はできているか

通常3パターン(PC、タブレット、スマホ)を確認しましょう。

最終的には、実機で確認できると安心ですが、便利なツール「Responsively App」を使っても良いでしょう。

デザインカンプとWebサイトを重ねて確認

最終的には、重ねて確認するのが良いです。
さまざまな条件により、デザインカンプと全く同じにすることは難しいです。ズレすぎでなければ、問題ないことが多いです。

これも便利なツールがありまして、どの程度ずれがあるか確認ができます。
>> PerfectPixel by WellDoneCode

最後にはデザインカンプと重ねて確認しよう

イケゾー

正しいコーディングが出来ているか

コーディングが正しくできているか確認します。
正しいコーディングはSEO優位になり、Webサイトのアクセス数を左右する場合もあります。

HTMLタグ

HTMLの閉じタグが正しく設定できているか確認します。

コーディングの基本なので、抜けていると信頼がなくなってしまいます。

GoogleChromeの拡張機能を使って、エラーが無いことを確認しましょう。
>>GoogleChrome拡張機能「HTMLエラーチェッカー」

HTMLエラーチェッカー

見出し構造は適切か

どのテキストにh1やh2が当てるかは、指示がありません。
コーダーに任される部分なので、適切に設定しましょう。

TDKは設定されているか

TDKの設定を確認します。
T:タイトル
D:ディスクリプション
K:キーワード

タイトルとディスクリプションは必ず入力しましょう。キーワードはほとんどの場合、入力しません。

altは設定されているか

画像に設定するalt属性はクライアントに指示されません。

コーダー次第になりますが、サイトロゴ画像には必須で入れましょう。私の場合、広告やバナーな重要な画像には入れますが、他の画像は無くても良いかと思います。

クライアントに指示されない部分も汲み取って、コーディングしよう

イケゾー

プロとしての最終チェック

これ以降の確認は、プロならではの視点かと思います。
やらなくても良いですが、高品質を謳うならチェックしましょう。

複数のブラウザでの確認

複数のブラウザ(Chrome、FireFox、IE、Safari、Edge)で表示 や動作崩れが起きていないか確認します。

対応するブラウザは、事前にクライアントと調整しておくと良いでしょう。

リンクの設定、リンク切れの確認

リンクが正しく設定されていることはもちろん、リンク切れの確認をします。

リンク切れは、Googleのクローラに対してマイナスの影響を与え、SEO面で不利になります。特に、404ページは放置せずに、早期対処が必要です。
>>リンク切れの確認方法と対応

画像の圧縮

サイト表示速度は、SEO面でも影響があります。

表示速度が遅い原因のほとんどが、画像サイズが大きいことです。画像を多く使うサイトは、必ず圧縮してから使うようにしましょう。

私がよく使うのが、TinyPNGです。ファイルサイズを約30%小さくできます。

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

デベロッパーツールでエラーが無いか確認しましょう。
JavaScriptの記述ミスを検出できます。

正常に動いていても、エラーがあるとカッコ悪いです。

ネットワークエラーは無いか

同じくデベロッパーツールでネットワークのパネルを見ておきましょう。
404エラーが起きてないこと、リンク設定ミスを確認できます。

ここまで確認できれば、自信を持って納品できるね

イケゾー

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

まとめ

Webコーディング納品前のチェックリストを公開しました。

コーディングの品質を一定にするために、チェックリストを作成し、納品前にチェックさせています。
チェック方法も合わせてご確認ください。

ポイント

・デザインカンプ通りにできているか確認

・正しいコーディングが出来ているか確認

・プロとしての最終確認

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング