プログラミング

【継続案件につながる】Web制作コーディングでのセルフチェックは必須です【チェックリスト配布】

【継続案件につながる】Web制作コーディングでのセルフチェックは必須です【チェックリスト配布】

こんにちは、現在フリーのWeb制作者として3年ほど活動しているしょーごと申します。

突然ですがみなさん、「コーディングのセルフチェック」って普段どうやっていますか?

まさひろくん
まさひろくん
コーディングチェック…?なんですかそれ
ありさちゃん
ありさちゃん
私のコーディングはほとんど完璧なのでぱっと見で問題なければ提出してます!
しょーご
しょーご
いやそれダメだから!
しょーご
しょーご
今回はコーディングのチェックポイントとそれを踏まえてセルフチェックのポイントを解説します!

この記事を呼んで得られること

コーディングのチェック方法とポイントがわかり、差し戻しが少なくなる

本記事で扱うのは「Web制作」「マークアップ」のコーディングチェックです。「プログラミング」のコーディングチェックとは毛色が違うためご注意ください。

そもそもコーディングのチェックとは何か

プログラミングおすすめ動画教材 udemy

ここでいうコーディングチェックとは主に「表示確認」のことを指します。

もっと分かりやすい言葉でいうと

デザインデータ通りにコーディング出来ているか」を確認する作業のことをここではコーディングチェックと呼びます。

例えば以下を御覧ください。

Windows Mac 游ゴシック 違い
Windows Mac 游ゴシック 違い

デザインデータとコーディングの結果で、フォントの太さ(font-weight)に差異があるのにお気づきでしょうか。

こういったミスを検証していく作業になります。

ありさちゃん
ありさちゃん
いやソースコード見ないのにコーディングチェックっていうのおかしいやろがい!

という言葉が聞こえてきそうですが、コードも見ますのでご安心ください。

Web制作でのコーディングチェックの重要性

セルフチェックは最低限のマナー

以前おおまかなWeb制作の流れについて解説しました。

ここでも解説している通り、「初稿チェックの前にセルフチェック」を行います。

初稿」というのは出版・デザイン業界では一番最初の提出原稿のことを指します。反対に確認作業のことを「校正」と呼びます。

この目的は「相手の負担を減らすこと」です。

考えてみたら当然のことですが、表示確認する先方からしてもセルフチェックをされているものは指摘ポイントが少なくて楽です。

セルフチェックされていると楽に感じるポイント
  1. コミュニケーションコストがかからない
  2. 差し戻しが少ないので納期まで余裕ができる
  3. 後からのバグを防ぎやすい

セルフチェックしているフリーランスに好感

上記の理由からセルフチェックをされている成果物は表示確認する側にしてみたら非常に仕事がしやすいということになります。

当然一緒に引続き仕事をしたいと思いますので、継続案件にも繋がりやすいです。

具体的なセリフチェックポイント

それではここから具体的にどこをチェックしていけばいいのかチェックシートを公開します。

どのようなサイト制作でも活用できるように一般的な項目を網羅しました。

基本的にはここにある項目を埋めていけばいいと思います。

セルフチェックシート

表示確認ポイント例
  • フォントが合ってるか(拡張機能で確認可能)
  • フォントサイズは合ってるか
  • 行間(line-hight)は合ってるか
  • 色は合ってるか
  • インナー幅は合ってるか
  • 画像が正しく表示されてるか(404や潰れがないか)
  • 画像のリサイズや圧縮されてるか
  • 横スクロールしないか
  • 余白幅は適切か(padding・margin)
  • consoleエラーが発生していない
  • パンくずは正しく表示されてるか
  • ページリンクが正しく動作しているか
  • レスポンシブで崩れがないか
    • iPhoneX(375px)
    • iPad縦(768px)
    • PC通常(1280px)
    • PC大画面(1600px)

ポイント解説

  • フォントはFonts Ninjaなどで確認
  • consoleエラーは検証ツール>consoleで確認可能、赤いバツマークを消していく
  • レスポンシブ幅はサイトごとに調整
コード部分の確認
  • インデントが汚くないか
  • エディターでエラーが発生していない
  • 使っていないクラスやCSS,JSファイルが残っていないか

インデントはエディターの自動整形で基本はOK。ただしWordPressなどPHPだと整形されていない場合多し。

クロスブラウザ確認

クロスブラウザ・端末確認

  • Mac + Safari
  • Mac + Chrome
  • Mac + Firefox
  • Mac + Microsoft Edge
  • Windows + Internet Explorer
  • Windows + Chrome
  • Windows + Firefox
  • Windows + Microsoft Edge
  • iPad + Safari
  • iPhone + Safari
  • Android + Chrome

理想を言えばAndroid,iPhone実機両方で確認したいですが(制作会社開発会社では開発用に両デバイスがあります)
なければエミュレーターなどで検証してみてください。

注意点として、検証ツールのiPhoneとiPhone実機はかなり表示が違ってきます。なのでなるべく実機かエミュレーターを見る必要があります。

まさひろくん
まさひろくん
うわ、セルフチェック項目おおすぎ…
しょーご
しょーご
WIndowsの人はMacOSでのSafariチェック、MacOSの人はWindowsでのEdge確認(IEは先方次第)が最低限必要ですので環境を準備しておきましょう!
しょーご
しょーご
またMacとWindowsでデバイスフォントが違うので、フォント確認の意味でも準備しておきたいですね

納期に余裕を持ったスケジューリングを

初稿という概念の理解

よく勘違いされやすいのですが、「納期」というのは「納品しなければならない日」になります。

納期までに初稿提出する人がいますが、その人の想定に「修正工程」が存在しないことが多いです。

基本的に

納品までのコーディングの流れ
  1. コーディング
  2. セルフチェック
  3. 初稿提出(これは納品ではない、納期に出してては間に合わない)
  4. 再戻し、修正
  5. 再チェック
  6. 問題なければ納品←ここに納期までにたどり着く必要あり

となることが多いです。

具体的なスケジューリング

イメージしやすいように具体的な工程を組んでみました。

要件3/10開始、3/28日納品のコーディング案件の場合

  1. 3/10 コーディング開始
  2. 3/20 セルフチェック、修正
  3. 3/21 初稿提出
  4. 3/22 修正依頼→修正開始
  5. 3/23 追加修正依頼
  6. 3/25 修正完了→再確認
  7. 3/26 納品

追加修正がくることがある

先方の校正も一回で全て出尽くすとは限りません。

クライアント

ここも表示が崩れているようです!修正お願いします

というメッセージが修正開始してから来るのは日常茶飯事です。

なので、修正工程もある程度バッファをとっておくのがマストです。

おわりに:表示確認教材で練習しておこう

模写コーディング教材

このようなセルフチェックをいきなり案件で行うのはハードルが高いです。

しかしちまたのコーディング教材やスクールではセリフチェックや表示確認を行っていないところばかりなのを課題に感じており、

私のコーディング教材では

  • セルフチェックポイントを指定
  • 私が2回まで表示確認を行う(表示及びconsoleエラーの確認)

という特徴をつけることで

セルフチェックの習慣化

を意識した作りにしています(もちろんポートフォリオ活用可能です)

興味のある方はぜひ覗いてみてください。

教材でチェックしているポイント
  • 表示確認ポイント全て
  • MacのChrome
  • 実機iPhoneのSafari