「スマホで見た時だけ表示が崩れています」どう伝えればいい？

旧マニュアル番号: No.55

Webサイトは、パソコンだけでなく、スマートフォンやタブレットなど様々なデバイスで閲覧されます。Webflowで制作されたサイトは、基本的にどのデバイスでも最適に表示されるように「レスポンシブデザイン」が採用されていますが、稀に特定のデバイスで表示が崩れることがあります。このような状況を制作会社に正確に伝えるためのポイントを解説します。 実画面例: 表示崩れを相談する時は、該当ページのURLと画面キャプチャーを一緒に送ると伝わりやすくなります。

1. なぜスマホでだけ表示が崩れるのか？

画面サイズの制約: スマートフォンはパソコンに比べて画面が非常に狭いため、レイアウトが複雑な部分や、画像とテキストの配置によっては、意図しない表示になることがあります。
コンテンツの量: 記事の本文中に非常に大きな画像や、横幅の広い表などを挿入した場合、スマホの画面に収まりきらずに表示が崩れることがあります。
Webflowのバグや設定ミス: ごく稀に、Webflowのシステム側の問題や、制作時のレスポンシブ設定に不備があった可能性もゼロではありません。

2. 制作会社に伝えるべき情報

表示の崩れを正確に伝えることで、制作会社は迅速に原因を特定し、対応することができます。以下の情報をできるだけ詳しく伝えましょう。

必須情報

表示が崩れているページのURL: どのページで問題が発生しているのかを正確に伝えます。（例: https://www.your-site.com/blog/article-title）
表示が崩れている箇所: ページのどの部分（例: 「トップページのこの画像の下の文章」「ブログ記事のこの見出しの後の箇条書き」など）で問題が発生しているのかを具体的に伝えます。
使用しているデバイスの種類:
- スマートフォンの機種名: （例: iPhone 15 Pro, Galaxy S24 など）
- タブレットの機種名: （例: iPad Air, Surface Pro など）
使用しているブラウザの種類とバージョン:
- ブラウザ名: （例: Safari, Google Chrome, LINEアプリ内ブラウザ など）
- ブラウザのバージョン: （例: Chrome 120.0.6099.199 など。ブラウザの設定画面で確認できます）
問題のスクリーンショットまたは動画: これが最も重要です。 実際に表示が崩れている画面のスクリーンショット（静止画）や、可能であれば動画を撮影して送ってください。言葉で説明するよりも、一目で状況が伝わります。

あると良い情報

いつから発生しているか: 「昨日までは大丈夫だったが、今日見たらこうなっていた」など、問題が発生し始めた時期が分かると、原因特定の手がかりになります。
何か操作をした後に発生したか: 「CMSで記事を更新した後からおかしくなった」「デザイナーモードで少し触った後から」など、直前に行った操作があれば伝えます。

3. スクリーンショットの撮り方

スマートフォン・タブレットの場合

iPhone: サイドボタンと音量アップボタンを同時に押す。
Android: 電源ボタンと音量ダウンボタンを同時に押す。（機種によって異なる場合があります）

4. まとめ

「スマホで表示が崩れている」と感じたら、焦らずに「どのページの」「どの部分が」「どのデバイス・ブラウザで」「どのように崩れているか」を、スクリーンショットや動画を添えて制作会社に伝えましょう。これにより、スムーズな問題解決に繋がります。

次のステップ: 表示崩れの伝え方はこれで完璧ですね。次は、サイトが表示されない時のトラブルシューティング「No.56 「サイトが”404 Not Found”と表示されます」どういう意味？」です。