Web制作実務役立ち

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説
本ページにはプロモーションが含まれています。

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

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

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

今回はコーディングのチェックポイントと、実際の活用方法に目を向けて解説します!

正しくできていない人がめちゃくちゃ多いので、刮目してください。

以前「Web制作でよくあるミス集」を解説しましたが、今回のセルフチェックができるようになれば、全部なくせるはずです。

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

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基本的にはここにある項目を埋めていけばいいのですが、確認の順番など使い方も解説していきます。

セルフチェックシート配布

以下Notionより複製してお使いください。

https://oil-molybdenum-7e8.notion.site/e186101751ca486287b69ca79c28204c?pvs=4

セルフチェック項目
  • Perfect Pixelでデザインカンプとズレがない
  • フォントが合ってるか(検証ツールで確認可能)
  • レスポンシブ時にフォントサイズが大きくなりすぎたり、小さくなりすぎないか
  • フォントのスマホ時の行間(line-hight)は自然か
  • フォントの色は合ってるか
  • サイトが重くないか
  • 横スクロールしないか
  • consoleエラーが発生していない
  • ページ内外リンクが正しく動作しているか
  • レスポンシブで崩れがないか(Responsive Viewerで確認)
    • iPhoneX(375px~414px)
    • iPad縦(768px~820px)
    • PC通常(1280px〜1420px)
    • PC大画面(1920px)
    • 手元の実機iPhoneで確認(方法はこちら
  • Faviconチェック
  • OGPチェック
  • title、descriptionが適切に設定されている
  • hタグの階層に問題はないか
  • コーディングにエラーが無いか
  • モダンブラウザ確認で問題ないか
駆け出しさん

こんなに大量に!!確認しきれないですよ。

しょーご

そう言うと思ったので、これから各項目の確認の順番とやり方を解説しますよ。

セルフチェックの順番
  1. サイトが重くないか確認
  2. Perfect Pixelでデザインカンプと合わせる
  3. Responsive Viewerでレスポンシブを確認
  4. フォント周りの諸々を確認
  5. Consoleのエラー確認
  6. ページ内外リンクの機能確認
  7. MetaタグやFiviconチェック
  8. コーディングチェック
  9. モダンブラウザ及びスマホ実機で確認

この順番に行っていけばいいので、一つずつ解説します。

❶サイトが重くないか確認

サイトが重いというのは、サイトの内容が表示されるまでの読み込み時間が長いということです。原因としては、

  • 重い画像を使っている
  • 重い日本語フォントを使っている
  • 不要なJavaScriptコードが多数存在する

このあたりが主な原因だったりします。

読み込み時間3秒で50%のユーザーが離脱する」とも言われますが、初学者の方は意外に気が付かない人が多いので、

必ず開発中からサイトの重さは確認するようにしてください。

検証ツール(デベロッパーツール)の中の「Network」タブの中から各リソースの重さを確認することができます。

例えば下記はデジタル庁のホームページですが、一つも1MBを超えるリソースが無いので、とても軽量なホームページになっています。

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

逆に以下のサイトは1MBを大きく超えるリソースが散見されるため、読込時間が非常に長いです。

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

もし「意図して重くても高画質な画像を見せたい!」というのがあるなら、1MBあってもいいですが、

そうでないなら、500KBぐらいには削って欲しいなというのがコーダー目線で思うことですね。

しょーご

ブログをしている人間からすると、300KBとかでも重い、まだ軽くできるなと思いますが、流石に若干画質が落ちるので、そこはデザイナーとも相談してみてください。

❷Perfect Pixelでデザインカンプと合わせる

Perfect Pixelはデザインカンプとブラウザを重ね合わせてデザインカンプとのズレを確認できる拡張機能です。

例えば以下の画像を見てもらうと、フォントを中心に微妙にデザインとのズレがあり、ぼやけて見えるのが分かると思います。

拡張機能Perfect Pixelを使ったピクセルパーフェクトのやり方【どこまでやるのか&できないこと】

これを一つ一つ修正してデザインに忠実なコーディングを行っていく必要があります。

しょーご

デザイン自体がずれていることも多いので、どこまで厳密にやるのかという話もあるんですが、少なくともやれと言われてできるぐらいの基礎力は必要だと思います。

詳しい使い方に関しては以下の記事にまとめていますので、みて導入してみてください。

❸Responsive Viewerでレスポンシブを確認(横スクロール問題含め)

Perfect Pixelではデザインカンプのあるサイズしか確認できないので、それ以外のレスポンシブ確認には「Responsive Viewer」を使うと便利です。

これを使うことで、複数の画面サイズを同時に確認することができます。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

セルフチェックシートにあった、

  • iPhoneX(375px~414px)
  • iPad縦(768px~820px)
  • PC通常(1280px〜1420px)
  • PC大画面(1920px)

このサイズを一気に確認することができるので、必ずレスポンシブ確認には「Responsive Viewer」を使うようにしてください。

詳しい導入方法や設定に関しては以下の記事にまとめていますので、まだ導入していない人は、今日から絶対に使い始めてください。

❹フォント周りの諸々を確認

フォントはめちゃくちゃ修正箇所が多い上に、Perfect Pixelだけだと見逃しやすいポイントなので、このタイミングで確認します。

  • フォントが合ってるか(検証ツールで確認可能)
  • レスポンシブ時にフォントサイズが大きくなりすぎたり、小さくなりすぎないか
  • フォントのスマホ時の行間(line-hight)は自然か
  • フォントの色は合ってるか

これらを確認します。

フォントが合っているか」については、要素を選択した状態で検証ツール下にあるComputedRendered Fontsを見ると実際にあたっているフォントが確認できます。

ただ全部を確認するのは難しいので、基本的にPerfect Pixelで確認しながら、フォント表示が怪しそうだったら調べるのが良いかと思います。

レスポンシブ時にフォントサイズが大きくなりすぎたり、小さくなりすぎないか

以下の2つの画像を見て欲しいのですが、どちらのほうがテキストが見やすいでしょうか?

明らかに後者だと思います。

フォントサイズをremやvwで一括管理している人にありがちですが、スマホの時にフォントが12px以下になっていて小さすぎたり、1920pxなどの大画面時に超巨大になったりします。

私の感覚だと、デザインカンプ以上の幅の時にフォントサイズも大きくする必要はなく、デザインのフォントサイズがマックスでいいのかなと思います。

大体フォントサイズに悩むのってタブレットあたりの時ですよね。

なので、もしフォントサイズをvwなどで自動で変える時はclamp関数を使って最大最小サイズを制御してほしいんですが、

font-size:clamp(20px, 2.6vw, 36px);

いずれにしても、フォントが見にくいサイズになっていないかをスマホサイズや1920pxなどの大画面で確認するときに意識してみてください。

❺Consoleのエラー確認

検証ツールのConsoleに、主にJavaScript関連のエラーが出ている人が多いので、ここも必ず確認するようにしてください。

注意点として、シークレットブラウザを使わないと拡張機能のJSエラーなども拾うので、シークレットブラウザで確認するようにしましょう。

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

❻ページ内外リンクの機能確認

ページ内のリンクが適切に機能するかを確認します。

特にWordPressのような「ローカル環境→本番環境の際にURLが変わる」時に、ローカルのURLのままの方が結構多いです。

WordPress案件の場合ページ数も多いので、チェックこぼれが起きている印象です。

大変だと思いますが、一つ一つ適切な位置にリンクしているかを確認してください。

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

❼MetaタグやFiviconチェック

  • title,description
  • OGP
  • Favicon

スクールなどの課題でこのあたりは指定されていないことが多いので初学者の方は忘れがちですが、必ず確認して、素材がなければ必ず相手に確認をしてください。

title,descriptionに関しては目視で確認してもいいですが、ページ数が多い場合は「Screaming Flog」を使うと一括で確認することができます。

OGPに関しては、OGP確認ツールを使えば楽に確認できます。

OGPとは何か?設定方法を徹底解説【確認ツールでHTML,WordPress両方対応、おすすめサイズあり】

OGPとファビコンの設置と確認方法については以前に解説記事を書いているので、参考にしてみてください。

❽コーディングチェック

  • hタグの階層に問題はないか
  • コーディングにエラーが無いか

コーディングチェックに関してはコーディングルールがあればそれに優先的に則るべきですが、最低でもこの二点は守りたいです。

コーディングのエラーに関しては、拡張機能「HTMLエラーチェッカー」を使うか

【チェックリスト配布】Web制作コーディングでのセルフチェック方法を解説

The W3C Markup Validation Service」を使って、HTMLのタグが正しく使えているかをチェックしておくといいですね。

❾モダンブラウザ及びスマホ実機で確認

ここが地味に大変な所です。多くの人は「Mac+Chorome」または「Windows+Chrome」を使っているかもしれませんが、制作ではもっと広範囲の環境で検証する必要があります。

モダンブラウザ確認
  • Mac + Safari(優先度:
  • Mac + Chrome
  • Mac + Firefox
  • Windows + Chrome
  • Windows + Firefox(優先度:
  • Windows + Microsoft Edge
  • iPhone + Safari(優先度:
  • Android + Chrome

基本的に全部確認するべきですが、本当に時間がない時でも、「優先度:」はかなり崩れやすいので、必ず確認するようにしたいです。

実機iPhoneでの確認はローカル環境でも簡単にできるので、必ず確認してください。

もし、iPhoneやAndroid実機を持っていない場合は、エミュレーターの使用がおすすめです。

また、Macしか持っていなくてWindows環境がない人は、以下の記事でWindows環境を導入してください。

サイトのユーザーの9割は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エラーの確認)

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

セルフチェックの習慣化

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

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

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!