こんにちは、現在フリーのWeb制作者として6年ほど活動しているしょーごと申します。
突然ですがみなさん、「コーディングのセルフチェック」って普段どうやっていますか？
今回はコーディングのチェックポイントと、実際の活用方法に目を向けて解説します！
正しくできていない人がめちゃくちゃ多いので、刮目してください。
以前「Web制作でよくあるミス集」を解説しましたが、今回のセルフチェックができるようになれば、全部なくせるはずです。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
YouTubeでもセルフチェックを解説しています！
そもそもコーディングのチェックとは何か
ここでいうコーディングチェックとは主に「表示確認」のことを指します。
もっと分かりやすい言葉でいうと
「デザインデータ通りにコーディング出来ているか」を確認する作業のことをここではコーディングチェックと呼びます。
例えば以下を御覧ください。
デザインデータとコーディングの結果で、フォントの太さ（font-weight）に差異があるのにお気づきでしょうか。
こういったミスを検証していく作業になります。
セルフチェックは最低限のマナー
以前おおまかなWeb制作の流れについて解説しました。
ここでも解説しているのですが、「初稿提出の前にセルフチェック」を行います。
この目的は「相手の負担を減らすこと」です。
考えてみたら当然のことですが、表示確認する先方からしてもセルフチェックをされているものは指摘ポイントが少なくて楽です。
- コミュニケーションコストがかからない
- 差し戻しが少ないので納期まで余裕ができる
- 後からのバグを防ぎやすい
セルフチェックしているフリーランスに好感
上記の理由からセルフチェックをされている成果物は表示確認する側にしてみたら非常に仕事がしやすいということになります。
当然一緒に引続き仕事をしたいと思いますので、継続案件にも繋がりやすいです。
具体的なセルフチェックポイント
それではここから具体的にどこをチェックしていけばいいのかチェックシートを公開します。
どのようなサイト制作でも活用できるように一般的な項目を網羅しました。
基本的にはここにある項目を埋めていけばいいのですが、確認の順番など使い方も解説していきます。
セルフチェックシート配布
以下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タグの階層は適切に入れ子か
- h1タグを適切に使っているか（特に複数ページの場合）
- コーディングにエラーが無いか
こんなに大量に！！確認しきれないですよ。
そう言うと思ったので、これから各項目の確認の順番とやり方を解説しますよ。
- サイトが重くないか確認
- Perfect Pixelでデザインカンプと合わせる
- Responsive Viewerでレスポンシブを確認
- フォント周りの諸々を確認
- Consoleのエラー確認
- ページ内外リンクの機能確認
- MetaタグやFiviconチェック
- コーディングチェック
- モダンブラウザ及びスマホ実機で確認
この順番に行っていけばいいので、一つずつ解説します。
❶サイトが重くないか確認
サイトが重いというのは、サイトの内容が表示されるまでの読み込み時間が長いということです。原因としては、
- 重い画像を使っている
- 重い日本語フォントを使っている
- 不要なJavaScriptコードが多数存在する
このあたりが主な原因だったりします。
「読み込み時間3秒で50%のユーザーが離脱する」とも言われますが、初学者の方は意外に気が付かない人が多いので、
必ず開発中からサイトの重さは確認するようにしてください。
検証ツール（デベロッパーツール）の中の「Network」タブの中から各リソースの重さを確認することができます。
例えば下記はデジタル庁のホームページですが、一つも1MBを超えるリソースが無いので、とても軽量なホームページになっています。
逆に以下のサイトは1MBを大きく超えるリソースが散見されるため、読込時間が非常に長いです。
もし「意図して重くても高画質な画像を見せたい！」というのがあるなら、1MBあってもいいですが、
そうでないなら、500KBぐらいには削って欲しいなというのがコーダー目線で思うことですね。
ブログをしている人間からすると、300KBとかでも重い、まだ軽くできるなと思いますが、流石に若干画質が落ちるので、そこはデザイナーとも相談してみてください。
❷Perfect Pixelでデザインカンプと合わせる
Perfect Pixelはデザインカンプとブラウザを重ね合わせてデザインカンプとのズレを確認できる拡張機能です。
例えば以下の画像を見てもらうと、フォントを中心に微妙にデザインとのズレがあり、ぼやけて見えるのが分かると思います。
これを一つ一つ修正してデザインに忠実なコーディングを行っていく必要があります。
デザイン自体がずれていることも多いので、どこまで厳密にやるのかという話もあるんですが、少なくともやれと言われてできるぐらいの基礎力は必要だと思います。
詳しい使い方に関しては以下の記事にまとめていますので、真似して導入してみてください。
❸Responsive Viewerでレスポンシブを確認（横スクロール問題含め）
Perfect Pixelではデザインカンプのあるサイズしか確認できないので、それ以外のレスポンシブ確認には「Responsive Viewer」を使うと便利です。
これを使うことで、複数の画面サイズを同時に確認することができます。
セルフチェックシートにあった、
- iPhoneX（375px~414px）
- iPad縦（768px~820px）
- PC通常（1280px〜1420px）
- PC大画面（1920px）
このサイズを一気に確認することができるので、必ずレスポンシブ確認には「Responsive Viewer」を使うようにしてください。
詳しい導入方法や設定に関しては以下の記事にまとめていますので、まだ導入していない人は、今日から絶対に使い始めてください。
もしこの段階で横スクロールなど発生しているのが分かったら、以下のコードを検証ツールのconsoleで実行すれば原因が分かります。
// ウェブページの幅を取得
var w = document.documentElement.clientWidth;
// 全ての要素を取得
var elements = document.querySelectorAll("*");
// 要素をループして、指定の条件を満たすものを探す
elements.forEach(function(v) {
v.style.outline = '1px solid red';
if (w < v.clientWidth) {
console.log(v);
}
});詳しい使い方は以下の記事で解説しています。
❹フォント周りの諸々を確認
フォントはめちゃくちゃ修正箇所が多い上に、Perfect Pixelだけだと見逃しやすいポイントなので、このタイミングで確認します。
- フォントが合ってるか（検証ツールで確認可能）
- レスポンシブ時にフォントサイズが大きくなりすぎたり、小さくなりすぎないか
- フォントのスマホ時の行間（line-hight）は自然か
- フォントの色は合ってるか
これらを確認します。
「フォントが合っているか」については、要素を選択した状態で検証ツール下にあるComputedのRendered Fontsを見ると実際にあたっているフォントが確認できます。
ただ全部を確認するのは難しいので、基本的にPerfect Pixelで確認しながら、フォント表示が怪しそうだったら調べるのが良いかと思います。
「レスポンシブ時にフォントサイズが大きくなりすぎたり、小さくなりすぎないか」
以下の２つの画像を見て欲しいのですが、どちらのほうがテキストが見やすいでしょうか？
明らかに後者だと思います。
フォントサイズをremやvwで一括管理している人にありがちですが、スマホの時にフォントが12px以下になっていて小さすぎたり、1920pxなどの大画面時に超巨大になったりします。
私の感覚だと、デザインカンプ以上の幅の時にフォントサイズも大きくする必要はなく、デザインのフォントサイズがマックスでいいのかなと思います。
大体フォントサイズに悩むのってタブレットあたりの時ですよね。
なので、もしフォントサイズをvwなどで自動で変える時はclamp関数を使って最大最小サイズを制御してほしいんですが、
font-size:clamp(20px, 2.6vw, 36px);いずれにしても、フォントが見にくいサイズになっていないかをスマホサイズや1920pxなどの大画面で確認するときに意識してみてください。
❺Consoleのエラー確認
検証ツールのConsoleに、主にJavaScript関連のエラーが出ている人が多いので、ここも必ず確認するようにしてください。
注意点として、シークレットブラウザを使わないと拡張機能のJSエラーなども拾うので、シークレットブラウザで確認するようにしましょう。
❻ページ内外リンクの機能確認
ページ内のリンクが適切に機能するかを確認します。
特にWordPressのような「ローカル環境→本番環境の際にURLが変わる」時に、ローカルのURLのままの方が結構多いです。
WordPress案件の場合ページ数も多いので、チェックこぼれが起きている印象です。
大変だと思いますが、一つ一つ適切な位置にリンクしているかを確認してください。以下はコーディング課題上級編の例です。
❼MetaタグやFiviconチェック
- title,description
- OGP
- Favicon
スクールなどの課題でこのあたりは指定されていないことが多いので初学者の方は忘れがちですが、必ず確認して、素材がなければ必ず相手に確認をしてください。
title,descriptionに関しては目視で確認してもいいですが、ページ数が多い場合は「Screaming Flog」を使うと一括で確認することができます。
OGPに関しては、OGP確認ツールを使えば楽に確認できます。
OGPとファビコンの設置と確認方法については以前に解説記事を書いているので、参考にしてみてください。
❽コーディングチェック
- hタグの階層に問題はないか
- セクショニング・コンテンツの適切な使用
- コーディングにエラーが無いか
コーディングチェックに関してはコーディングルールがあればそれに優先的に則るべきですが、最低でもこの3点は守りたいです。
コーディングのエラーに関しては、拡張機能「HTMLエラーチェッカー」を使うか
「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でサイトを閲覧しています。
納期の無い中で初稿前に実施できるかが重要
初稿という概念の理解
よく勘違いされやすいのですが、「納期」というのは「納品しなければならない日」になります。
納期までに初稿提出する人がいますが、その人の想定に「修正工程」が存在しないことが多いです。
基本的に
- コーディング
- セルフチェック
- 初稿提出（これは納品ではない、納期に出してては間に合わない）
- 再戻し、修正
- 再チェック
- 問題なければ納品←ここに納期までにたどり着く必要あり
となることが多いです。
具体的なスケジューリング
イメージしやすいように具体的な工程を組んでみました。
要件：3/10開始、3/28日納品のコーディング案件の場合
- 3/10 コーディング開始
- 3/20 セルフチェック、修正
- 3/21 初稿提出
- 3/22 修正依頼→修正開始
- 3/23 追加修正依頼
- 3/25 修正完了→再確認
- 3/26 納品
ちゃんとセルフチェックの工数を確保するのがとても大事になるので、これは頭に叩き込んでおいてください。
追加修正がくることがある
先方の校正も一回で全て出尽くすとは限りません。
ここも表示が崩れているようです！修正お願いします
というメッセージが修正開始してから来るのは日常茶飯事です。
なので、修正工程もある程度バッファをとっておくのがマストです。
おわりに：表示確認教材で練習しておこう
このようなセルフチェックをいきなり案件で行うのはハードルが高いです。
しかしちまたのコーディング教材やスクールではセリフチェックや表示確認を行っていないところばかりなのを課題に感じており、
私の出してるコーディング練習教材では
- セルフチェックポイントを指定
- 私が２回まで表示確認を行う（表示及びconsoleエラーの確認）
という特徴をつけることで
セルフチェックの習慣化
を意識した作りにしています（もちろんポートフォリオ活用可能です）
興味のある方はぜひ覗いてみてください。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
ご寄付を頂けると今後の更新の励みになります！
