スマホ表示の修正指示を正確に伝える方法｜制作会社向けの端末・幅・再現手順
Contents
「スマホで崩れてます」。
この一文だけで実装に入ると、だいたい一度は往復します。
どの端末か、どの幅か、スクロールしたあとか。
条件がないと、制作側は再現しづらく、相手は「ちゃんと見てくれてない」と感じやすい。
どちらも、悪気があるわけではないことが多いです。
この記事では、スマホの指摘を少しだけ正確にするための書き方をまとめます。
あるあるのすれ違い
ディレクターは実機で見て指摘したつもりでも、チャットには「スマホだとキツい」しか残っていない。
実装側はPCの開発者ツールで見て、「こちらでは再現しません」。
お互いに正しそうで、話がかみ合わない。
スマホ確認は、感覚の共有より、条件の共有が先に立つテーマです。
ずれやすいポイント
端末名と、実際の表示幅は別物になりやすい
「iPhoneで」でも、機種や表示設定で幅は変わります。
分かれば、機種名とおおよその幅を添えるだけで再現が楽になります。
着地直後と、操作後で画面が違う
固定ヘッダー、遅延読み込み、スライダー。
同じURLでも、見た瞬間が違います。
「着地直後」「フォームまでスクロール」など、一手間あると助かります。
実機とツール、どちらも完全ではない
開発者ツールは便利です。
ただ、セーフエリアや実機のツールバーまでは拾いにくいこともあります。
公開前に重要な画面だけ、実機を見る運用でも十分効果があります。
指摘に乗せたい項目（短くてよい）
全部を長文にする必要はありません。
次がそろっていると、実装の一発目が通りやすいです。
- 対象URL
- 端末の目安
- 幅の目安（例: 390）
- ブラウザ
- 再現手順
- 現状と期待
- スクショ
基本の型は指摘の書き方と同じです。
スマホで足すのは、主に端末・幅・再現手順です。
通じやすい文例
【対象】https://staging.example.com/lp/
【端末】iPhone、幅390想定、Safari
【再現】着地直後（スクロールなし）
【箇所】申込ボタン直上の注記
【現状】2行目がボタンに重なり、注記が読めない
【期待】注記がボタンと重ならず読める
【優先】公開前
「なんかキツい」より、「何が読めないか」が残っていると動きやすいです。
クライアントの一言を、現場向けに翻訳する
原文が「スマホだときつい」だけでも、制作側で少し補えます。
- URLを特定する
- できれば同じ条件で見る
- 再現できたら条件を文面に固定する
- 期待は役割で書く（例: 親指で押しやすい余白）
再現できないときは、質問は一つで十分です。
こちらでは幅390のSafariで再現できていません。機種名か、スクショを追加してもらえますか。
聞きすぎると、相手も答えにくくなります。
実機が少ないときの現実的なやり方
全部の実機をそろえられない現場の方が多いと思います。
その場合でも、次で精度は上げられます。
- 幅390と360の2点を固定で見る
- 重要画面だけ実機や遠隔実機を使う
- クライアントのスクショには機種名を添えてもらう
代替で見たときは、「実機未確認・幅390相当」と書いておくと、後からの認識ずれが減ります。
公開前に、短時間で見る順番
全ページ全機種は現実的ではありません。
よく効くのは、この順番です。
- 主要CTAとフォーム
- 価格・注意書きなど折り返しやすい文言
- 固定ヘッダー／下部バーがある画面
- 画像が多いセクション
ここを一度見られるだけでも、致命的な漏れは減りやすいです。
指摘はチャットに溜めず、確定分から画面付きのタスクへ移すと、流れるスクショ問題も同時に防げます。
指摘する側も、受ける側も楽になる残し方
スマホの指摘は、熱量が高いほど短くなりがちです。
「無理」「キツい」「なんか違う」は気持ちとしては分かります。
ただ、実装に渡すときは、気持ちのあとにある事実だけを拾います。
たとえば「親指が届きにくい」「文字がボタンに埋もれる」など。
事実が残れば、デザインでもコーディングでも打ち手が選べます。
逆に、形容詞だけのままだと、直しても「まだ違う」が続きやすいです。
これはクライアントを正す話ではなく、制作側の翻訳仕事に近いです。
忙しいときほど、テンプレに当てはめるだけで十分です。
スクショを残すときの、ちょっとしたコツ
スマホのスクショは、情報が多いほど助かります。
可能なら、指摘箇所が画面の中央付近に来るように撮る。
必要なら、指や赤枠で場所を示す。
ただし、加工に時間をかけすぎなくても大丈夫です。
大切なのは、あとから見て同じ状態を思い出せることです。
同じ指摘を二度説明しなくてよくなれば、それで十分です。
枚数が増えるときは、1指摘1枚を目安にすると整理しやすいです。
まとめて何枚も貼ると、どれが未対応か分かりにくくなります。
完璧な再現情報がなくても進める
情報が欠けていても、止まらなくて大丈夫です。
分かる範囲で仮の条件を書き、「未確認点」を一行添える。
端末不明。幅390相当で確認。実機名が分かれば共有ください。
仮置きがあるだけで、実装は進められます。
後から条件が埋まれば、タスクを更新すれば十分です。
情報が揃うまで何もしない、より現場には優しいです。
まとめ
スマホの修正指示は、感想勝負になりやすいテーマです。
端末・幅・再現手順・現状・期待が短く残っているだけで、実装との往復はかなり減ります。
完璧なQAより、共有できる条件を残すことが目的です。
Revoolなら、スマホ画面の指摘を条件付きのまま共有できます
文章の条件と、見た目のキャプチャをセットで残したいときに使えます。
レビューキャンバスでは、撮影した画面に指示を付けて投稿できます。
公開前のスマホ必須だけを追うときは、タスクテーブルの検索やステータスが便利です。
詳しい画面の流れは、Revoolトップから確認できます。
