PC・スマホ・タブレットで表示を見比べてから共有する方法

実機で見比べる意味

ブラウザの開発者ツールで画面幅を変える方法もありますが、実機での見え方とは細かい差が出ます。フォントのレンダリング、タップ領域の押しやすさ、スクロールの挙動などは、実際の端末で開いて初めて分かるものです。

共有URLを発行しておけば、同じURLをPC・スマホ・タブレットそれぞれで開くだけで、本番と同じ配信経路を通った表示を確認できます。HTTPSは自動で付き、CDNのエッジ配信で速く開けるため、確認のテンポも落ちません。

レビュー相手が使う端末はこちらでは選べません。だからこそ、依頼前に主要な端末で自分の目で確かめておくことが、手戻りを減らす近道になります。

各端末で確認すべきポイント

スマホでは、文字が小さすぎないか、横スクロールが発生していないか、ボタンやリンクが指で押せる間隔かを重点的に見ます。縦長の画面で読み進めやすいかも大切です。

タブレットは、スマホとPCの中間の幅で崩れやすい領域です。2カラムが中途半端に折り返していないか、画像が間延びしていないかを確認します。

PCでは、ウィンドウを広げたときに余白が極端に広がらないか、想定どおりの最大幅で収まっているかを見ます。各端末で同じ箇所を比べると、どの幅から崩れるかを把握しやすくなります。

最短手順：まずこの3ステップで完了

PC・スマホ・タブレットで表示を見比べてから共有は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

共有URLで見比べる手順

一度発行したURLを各端末で開くだけなので、特別な準備は要りません。

1. ギガサイト便にHTML、またはZIPをドロップして共有URLを発行する
2. PCのブラウザでURLを開き、レイアウトと最大幅を確認する
3. スマホで同じURLを開き、文字サイズ・横スクロール・タップ領域を確認する
4. タブレットで同じURLを開き、中間幅での折り返しや画像を確認する
5. 崩れが見つかったら修正し、同じURLのままファイルを差し替える
6. 各端末で再度開き直して、崩れが直ったか確かめる

差し替えで確認サイクルを回す

崩れを直したら、同じURLのままファイルを差し替えられるので、確認のたびに新しいURLを開き直す必要がありません。各端末のブラウザでURLを再読み込みするだけで、修正後の表示を見比べられます。

ただしブラウザのキャッシュで古い表示が残ることがあるため、再確認はシークレットウィンドウやキャッシュ削除を併用すると確実です。とくにスマホはキャッシュに気づきにくいので注意します。

崩れがなくなるまでこのサイクルを回し、すべての端末で問題ないことを確かめてからレビュー依頼に進みます。

確認が済んだらレビュー依頼へ

自分での端末確認が終わったら、同じ共有URLをそのままレビュー相手に渡せます。崩れを潰した状態で渡すので、相手の環境特有の問題に集中して見てもらえます。

相手にも複数端末で見てほしいときは、その旨を一言添えると、確認の抜けを防げます。アクセスログで誰がいつ見たかを把握できるため、レビューの進み具合も追えます。

社外に渡す場合は、内容の機密度に応じて認証を足し、公開期限を設定しておくと安心です。一時公開ページにはnoindexが付きますが、これはアクセス制御ではないので、見せたくない相手がいるなら認証を併用してください。