トラブルシュート

レスポンシブ画像が荒く見えるときに相手へ伝える確認依頼の書き方

HTMLを共有した相手から「画像がぼやけている」という報告を受けると、原因が自分側か相手側かすぐに判断できず、やり取りが増えがちです。最初の確認依頼メッセージで必要な情報を一度に集めることで、問題解決までの時間を大幅に短縮できます。

よくある原因

相手から荒いと報告される原因の多くは、閲覧環境(デバイス・DPR・ブラウザ)の組み合わせに起因します。送り手側では問題なく見えているのに受け手側で荒く見える場合、高DPRのRetina端末で2x画像が用意されていないことが最多原因です。

一方で、相手がブラウザのズームを変えていたり、古いOSでWebPが対応していなかったりするなど、相手環境固有の問題であることも少なくありません。最初の確認メッセージで「どのデバイスで、どのブラウザで見ているか」を聞かずにHTML修正を始めると、無駄な作業が発生します。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

相手へ確認依頼を送る前に、自分でも同じURLをスマートフォン実機で確認しておきましょう。自分も荒く見えるなら画像ファイルまたはHTML側の問題で、自分には問題ないのに相手には荒く見える場合は環境差異の可能性が高いです。この違いを把握してから依頼文を書くと、相手に適切な確認項目を伝えられます。

確認依頼を送る前に、共有URLが最新のHTMLを指しているか確認します。古いキャッシュのURLを送っていると、修正済みファイルではなく古い版が表示されている場合があります。ギガサイト便などの共有サービスでは更新後にURLが変わることがあるため、最新URLを再取得してから案内してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

確認依頼メッセージには次の情報を聞く項目を含めましょう:①使用デバイス(iPhone/Androidの機種名)②ブラウザとバージョン③ブラウザのズーム率(100%か否か)④スクリーンショットの添付。この4点があれば原因の8割は絞り込めます。

「Shift+リロードで再読み込みしてから確認してください」とキャッシュクリアの手順も依頼文に含めておくと効果的です。キャッシュ起因のトラブルは再読み込みで解消することが多く、相手に手順を案内することで不要な往復を減らせます。Chromeなら「Ctrl+Shift+R(Mac: Cmd+Shift+R)」と具体的なショートカットを書くとわかりやすいです。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

よく使う確認依頼文をテンプレートとして保存しておくと、次回から文章を考える手間が省けます。「ご確認ありがとうございます。お手数ですが以下をお知らせください:①ご利用の機種②ブラウザ③ズーム率④荒く見える画像のスクリーンショット」のように、コピー&ペーストで使えるフォームを用意しておきましょう。

共有サービスを使う場合、URLごとにアクセスログやフィードバック機能が使えるサービスを選ぶと、相手がフォームから問題を報告できる仕組みが整います。毎回チャットで確認依頼を送らなくても済むようになり、コミュニケーションコストが下がります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

相手がスクリーンショットを送ってくれたがぼやけているかどうか判断できない場合は?

スクリーンショット自体が圧縮されて荒く見えることがあります。「スクリーンショットをLINEではなくメールかSlackで送ってください」と転送方法を指定すると、圧縮なしの画像で確認しやすくなります。

相手のデバイスがiPadの場合、確認の仕方は変わりますか?

iPadはDPRが2.0のモデルが多いため、Retina対応が必要な点はiPhoneと同じです。ただし横幅が広く、スマホ向けに最適化した画像サイズでは逆に大きく引き伸ばされることがあるため、tabletブレークポイント用の画像確認も依頼してください。

相手が「他のサイトは普通に見えるのにここだけ荒い」と言う場合の返し方は?

このHTML固有の問題である可能性が高いです。「恐れ入りますが、荒く見える画像の上で右クリックして画像URLをお知らせください」とリソースURLを確認することで、低解像度画像が読み込まれているかどうかをこちら側で検証できます。

関連記事

トラブルシュート

レスポンシブ画像が荒く見えるときの原因と直し方

PCでは綺麗に表示されるのにスマホで画像が荒く見えると困っているデザイナー・エンジニア向けに、srcsetやCSSの不備を素早く診断し修正するための手順を具体的にまとめました。

5分で読める
「トラブルシュート」の記事をもっと見る →