「スマホで見たら、下のボタンが横にはみ出してるんですけど」。金曜の夕方、公開直前にディレクターからこの一報が来ると、制作会社もこちらも一気に慌ただしくなります。原因をたどると、行き着く先はたいてい同じ数カ所。だから僕は納品前、毎回ほぼ同じ順番でサイトを一周します。そのとき何を見ているかを、そのまま開示します。外注コーダーの納品品質をどこで測るか——制作会社側のチェック基準としても、そのまま使えるはずです。

納品前に一周するチェック5領域。表示崩れ、実機ブラウザ、動く・届く・出る、アクセシビリティと構造、速度と渡し方

表示崩れは「幅」で起きる。境界を疑う

レイアウトが崩れる場所は、ブレイクポイントの境界に集まります。カンプ通りの幅だけ見て「OK」にすると、その隙間で崩れが残る。

  • カンプにある幅（375 / 768 / 1440 など）だけでなく、切り替わる1px手前と直後を見る。メディアクエリの境界は事故が起きやすい。
  • 横スクロールが出ていないか。100vw と padding の足し算、はみ出す画像、固定幅のテーブルが犯人になりがち。
  • 中間幅（600〜900pxあたり）。カンプが用意されていない幅ほど崩れます。

実際、僕のところに来る崩れ報告の大半は「カンプにない幅」で起きています。境界と中間幅を先に潰しておくと、報告そのものが激減する。なぜ1pxがずれるのかは別の記事でも掘り下げています。

ブラウザと実機は「どこまで」見るか

エミュレータで整えて終わり、にはしません。実機でしか出ない挙動があるからです。

  • デスクトップは Chrome / Safari / Firefox / Edge の最新版。モバイルは iOS Safari と Android Chrome を実機（またはそれに近い環境）で。
  • iOS Safari 特有の落とし穴——アドレスバーで変わる 100vh、position: sticky、-webkit- 前提の描画差。
  • DevToolsのデバイスエミュレータは便利ですが、iOSの実挙動とは別物。

stickyヘッダーがiOSだけカクつく、といった話はエミュレータでは見つかりません。手元の端末で一度スクロールすれば数秒で分かることが、見ないと納品後に跳ね返ってくる。

「動く・届く・出る」を一つずつ押す

見た目が整っていても、動く部分が抜けていると必ず後で問題になります。静的な確認とは別に、手を動かして一つずつ押します。

  • リンク：ナビ・フッター・CTAを実際にクリック。404、アンカーのずれ、target の付け忘れ。
  • フォーム：テスト送信して、確認メールが届くところまで見る。必須漏れ、二重送信、バリデーションの文言。僕はテスト送信の結果をそのまま制作会社に渡します。
  • メタ / OGP：title・description、OG画像がSNSカードで出るか。faviconの抜けは地味に多い。
  • 画像：alt、遅延読み込み、拡大表示でボケないか。

アクセシビリティと構造は「最低ライン」をコードで担保する

W3Cのバリデーションが通っても、それは品質保証ではありません。文法エラーがゼロでも、見出しがぐちゃぐちゃなことはある。最低ラインだけは機械と目の両方で押さえます。

  • 見出し階層：h1は1ページ1つ、h2→h3を飛ばさない。スクリーンリーダーと検索エンジンの両方が構造を読みます。
  • 代替テキストとラベル：画像の alt、フォームの input と label の紐付け。
  • コントラスト：通常テキストで 4.5:1、大きめの文字（およそ18pt以上、または14pt太字以上）で 3:1（WCAG 2.1 AA基準）。満たしていない配色は、実装で無理に寄せず、デザイン側へ相談で返します。
  • キーボード：Tabだけで主要導線をたどれて、いまどこにフォーカスがあるか見える。

このあたりを実装でどこまで担保するかは、アクセシビリティの実装で具体的に整理しています。

速度と、渡し方

最後に速度。ここも数値を一度は見ておきます。

  • LCPの主役になる画像に適切な sizes が入っているか、不要なブロッキングがないか。後から入る画像や広告でガタッと動くCLSも確認。Lighthouseのスコアはモバイルで一度見ておく。速度の考え方は表示速度とCore Web Vitalsにまとめています。

そして、地味に効くのが渡し方です。チェックした結果を一言添えて納品する。「主要4ブラウザとiOS/Android実機で表示確認、フォームはテスト送信済み、Lighthouseはモバイルで確認済み」——この一文があるだけで、制作会社の安心感はまるで違います。何を確認したかが見えると、レビューの手間も減る。

崩れの報告を減らす一番の近道は、派手な技術ではなく、この地味な一周を毎回サボらないことだと思っています。実装を安心して任せられるコーダーを探している制作会社の方は、お問い合わせからお気軽にご相談ください。

本記事は2026年7月時点の情報です。