Webサイトの制作現場では、デザインデータ（PC・スマホ）の実装や確認作業で、エンジニアとデザイナーの間にすれ違いが生じることがあります。特に、「PCブラウザ幅を縮めてスマホ表示を確認する」という行為は、実際のスマホでの表示と異なることがあり、修正指示のズレを招きがちです。
よくあるやり取りのすれ違い例
- デザイナー：「スマホ表示で余白が大きすぎます」
- エンジニア：「どの端末で確認しましたか？」
- デザイナー：「PCのブラウザ幅を狭めて見ました」
一見些細なやり取りですが、端末固有の表示特性を無視したフィードバックは、エンジニアにとっては「的外れな修正指示」に見えてしまいます。
なぜPCブラウザ幅だけの確認では不十分なのか？
PCでブラウザ幅を縮めて表示を確認する方法は、レスポンシブ対応の動作確認には便利ですが、スマホ実機の表示を完全に再現できるわけではありません。その理由は以下のとおりです。
主な違い
- ピクセル密度（DPR）や解像度の違い
スマホは高DPI端末が多く、拡大縮小率や文字サイズ、レンダリングに差があります。 - ブラウザやOSの挙動差
iOS SafariとAndroid Chromeでは同じCSSでも表示が異なる場合があります。 - 実際の操作感
タップの当たり判定、スクロールの挙動、UIコンポーネントの反応など、実機でしか体験できない要素があります。
実機での確認をデザイナーが行うべき理由
エンジニアからすれば「スマホのデザインに関しては、スマホで確認してほしい」というのが本音です。
その理由は、スマホ表示の最終的な責任を担っているのは実装側であり、最も正確に意図を伝えるには、実機でのスクリーンショット＋端末情報を添えるのがベストだからです。
スムーズなやり取りを実現するためのルール
確認時のベストプラクティス
- PCでの幅縮小は参考程度（動作確認用）
- スマホ表示の確認は実機で行う
- 指摘は「端末名」「OS」「ブラウザ」と「スクショ付き」で伝える
確認用チェックリストの例
- 実機（iPhone/Android）で対象ページを開く
- 意図と異なる表示がある箇所をスクリーンショット
- 使用端末名、OS、ブラウザを添えてSlackやFigmaで共有
便利な補助ツール例
- QRコード生成サービス：テストアップURLをスマホで読み取りやすくする
- BrowserStackなどのマルチデバイステスト：手元に端末がない場合の補完手段
デザイナー・エンジニア間の信頼構築が第一
「どちらが正しいか」ではなく、どうすればお互いに効率よく、再現性のある確認ができるかが重要です。
デザイナーが実機で確認し、エンジニアが環境依存の挙動も加味して調整する。このような連携があれば、無駄な手戻りやストレスを減らすことができます。
ブラウザ幅の拡大・縮小過程まで指摘されるケースについて
一部のデザイナーまたはエンドクライアントが「ブラウザ幅を拡大・縮小させても崩れないサイト設計」＝「演出」として捉えて、ブラウザ幅をスライドさせながらその過程の見え方までチェックし、そこに対して修正指示を出してくるケースがあります。
しかしこの場合、制作側としては以下のような課題が発生します。
- 画面サイズに応じた**無段階の可変レイアウト**対応が必要になる
- 意図されていない中間サイズ（例：tablet幅や変則的なノートPCサイズ）でも整った見た目を維持するため、追加のスタイル設計・テスト対応が必要
- リキッドデザイン対応の要件が明確に定義されていないまま、細かな指摘が繰り返されることで作業工数が大幅に増加
そのため、もし「拡大・縮小のすべての幅で見た目が崩れないようにしたい」という要望がある場合は、以下の点をご理解いただく必要があります。
事前に共有・合意すべきこと
- リキッド対応を明示したデザイン指示が必要（PC・SPの2パターンだけでなく、中間幅のモックやルール定義）
- リキッド設計による追加工数や費用の見積もり調整
- 納期に対して十分な設計・テスト期間が確保できるかの確認
ブラウザ幅を自在に変えて中間過程を細かく見るのは、UIチェックとして有効なケースもありますが、それを「本番品質」として求める場合は設計段階から対応が必要です。
一方的に「この幅でもレイアウトが崩れてる」といった指摘を受けても、初期仕様に含まれていなければ追加対応扱いとなるため、双方で共通認識を持っておくことが重要です。
まとめ：連携ルールで品質もスピードも向上
| 確認方法 | 目的 | 推奨度 |
|---|---|---|
| PCブラウザ幅縮小 | 大まかなレスポンシブ動作確認 | △（参考程度） |
| 実機スマホでの表示確認 | 最終的なUI/UXチェック | ◎（必須） |
| 実機スクショ＋端末情報付き指摘 | 正確なフィードバック共有 | ◎（強く推奨） |
エンジニアから一言
「どうしてスマホ表示がズレてるのに気づかないの？」と思うこともありますが、環境の違いを前提にしたルールづくりでお互いのストレスはぐっと減らせます。
エンジニアも、確認用URLの共有方法や補助ツールの提供など、デザイナーが実機確認しやすい環境づくりに協力しましょう。
最後に
デザイナーとエンジニアが、相手の立場を理解しつつ、確認ルールや補助ツールを共有することで、制作の質とスピードは格段に向上します。
「伝わる指摘」と「受け取りやすい実装」、両者の歩み寄りが、よりよいWeb制作につながります。
※参考にされる場合は自己責任でお願いします。
