.png)
Wix Studioでスマホ表示を確認したい！URLを送らずQRコードで実機チェックする方法をご紹介
- 10 時間前
- 読了時間: 8分
スマホでサイトを見たとき、「PCではきれいだったのに、実機だと文字が切れている」「ボタンが画面からはみ出している」といった崩れに気づいた経験はありませんか？Web制作では、PCの画面上でどれだけ丁寧に整えても、実際にスマホで開いてみて初めて見えてくる問題が少なくありません。
Wix Studioには、その実機確認を驚くほど手軽にしてくれる機能があります。
それが「QRコードによるスマホプレビュー」です。
エディタに表示されるQRコードをスマホのカメラで読み取るだけで、いま作っているサイトをそのまま自分のスマホで確認できます。
この記事では、Wix Studioのスマホプレビューの基本から、QRコードでの実機チェックの手順、そして実機確認で見つかりやすいレイアウト崩れの対処法まで、お客様の目線でわかりやすくご紹介します。
Wix Studioのスマホプレビューとは？PC上でスマホ表示を確かめる仕組み
Wix Studioのスマホプレビューとは、制作中のサイトがスマートフォンでどう表示されるかを、公開前に確認するための仕組みです。
Wix Studioで作るサイトは、PC・タブレット・スマホといった画面幅ごとに見え方を調整できるようになっており、スマホでの表示を事前にチェックすることは制作フローの中でとても大切な工程になります。
プレビューには大きく2つの考え方があります。
エディタ上でスマホの画面幅に切り替えて確認する方法
今回ご紹介する、実際のスマートフォン端末で開いて確認する方法
PC上のプレビューは手軽に何度も見られる一方で、実機での見え方とは細かな差が出ることがあります。
だからこそ、公開前には実機での確認を挟むのが安心です。
ここで登場するのが「テストサイト」という考え方です。
テストサイトは、クライアントへの事前確認や公開前の社内チェックに使う確認用のサイトのこと。
このテストサイトを、URLをやり取りすることなくスマホで開けるようにしたのが、Wix StudioのQRコードによるスマホプレビューです。
結論：QRコードでWix Studioのスマホ表示を実機確認する手順
結論から言うと、Wix StudioはエディタのQRコードを読み取るだけで、URLを送らずにスマホ実機で表示を確認できます。
ここが今回いちばんお伝えしたいポイントです。
実際の手順はとてもシンプルなので、順番に見ていきましょう。
Wix Studioのエディタ上部にある「端末でプレビュー（モバイル端末でプレビュー）」を押します。
画面にQRコードが表示されます。
手元のスマートフォンのカメラアプリでそのQRコードを読み取ります。
カメラに表示されたリンクを開くと、いま制作中のテストサイトがそのままスマホ実機で確認できます。
ポイントは、PCとスマホの間でURLをコピーしてメールやチャットで送る、といった作業がまったく不要になることです。
エディタを開いたままスマホをかざすだけなので、「ちょっと直してすぐ確認」という細かい往復がとても速くなります。
なお、スマホのカメラでQRコードがうまく読み取れない場合は、画面の明るさを上げる、カメラとQRコードの距離を調整する、といった基本的な対処で解決することがほとんどです。
同じWi-Fi環境や、スマホがネットに接続されている状態であることも確認しておくと安心です。
Wix Studioでのサイト制作やスマホ最適化でお困りごとがあれば、お気軽にご相談ください。
従来のURL共有フローと何が変わった？スマホ確認の手間が減るポイント
QRコードによるスマホプレビューが便利なのは、これまでの確認フローと比べると一目瞭然です。
従来、スマホでテストサイトを確認するには、いくつかの手順を踏む必要がありました。
従来の流れと新しい流れを比べると、次のようになります。
項目 | 従来のURL共有フロー | QRコードによるプレビュー |
手順 | テストサイトを発行 → PCでURLを発行 → そのURLをスマホに送信 | エディタでQRコードを表示 → スマホで読み取る |
PCとスマホの往復 | URLをコピーして送る作業が必要 | かざすだけで完結 |
確認までのスピード | 数ステップかかる | ほぼ即時 |
細かい修正との相性 | 都度URLを送り直すと手間 | 直してすぐ読み取れる |
従来はテストサイトを発行し、PC側でURLを発行して、そのURLを自分のスマホにメールやチャットで送る、という流れが一般的でした。
1回だけならそれほど負担ではありませんが、制作中は「少し直して確認、また直して確認」を何度も繰り返します。
その都度URLを送り直すのは、地味に時間と集中力を奪う作業でした。
QRコードによるプレビューなら、エディタに表示されたコードをスマホでかざすだけ。
送信の手間がなくなることで、確認の回数を気軽に増やせるようになり、結果として細かな崩れの見落としも減らしやすくなります。
PCプレビューだけだとスマホの崩れに気づけない理由
「PCのプレビューで確認したから大丈夫」と思いたくなりますが、実はここに落とし穴があります。
PC画面上でスマホ幅に切り替えて見ても、実機で開いたときの見え方とは差が出ることがあるためです。
実機ならではの要素は意外と多くあります。
たとえば、スマホ本体の画面サイズや解像度の違い、フォントの表示のされ方、指でのスクロールやタップの操作感、通信環境による画像の読み込み方などです。
これらはPCのブラウザ上でスマホ幅を再現するだけでは、完全には再現しきれません。
スマホ表示を確認できる拡張機能を使う方法もありますが、実機で実際に起きる崩れまで特定するのは難しい場面があります。
使い方にも慣れが必要で、結局「本当にこれで大丈夫か」の確信が持ちにくいこともあります。
その点、QRコードで実機を直接開いて確認する方法は、実際の見え方をそのまま目にできるため、確実で早いのが強みです。
だからこそ、公開前には必ず一度、実機でのスマホ確認を挟むことをおすすめします。
QRコードでの確認なら手間が少ないので、「面倒だから省略する」ということも起こりにくくなります。
実機チェックでよくあるスマホのレイアウト崩れと確認のコツ
実際にスマホでテストサイトを開いたら、どこを見ればよいのでしょうか？実機チェックで見つかりやすい崩れと、確認のコツを整理しておきます。
よく起きるレイアウト崩れには、次のようなものがあります。
見出しや長い文章がスマホ幅に収まらず、はみ出したり途中で切れたりする。
ボタンや画像が画面幅を超えて、横スクロールが発生してしまう。
余白（マージン・パディング）が広すぎたり詰まりすぎたりして、要素同士が窮屈になる。
画像の縦横比が崩れて、写真が引き伸ばされたり潰れたりする。
タップしたい箇所（ボタンやリンク）が小さすぎて、指で押しにくい。
確認のコツは、まず上から下までスクロールして全体を通しで眺めることです。
そのうえで、文字が読みやすいか、横方向にはみ出していないか、ボタンが押しやすいか、という視点で見ていくと、崩れに気づきやすくなります。
QRコードでの確認は手軽なので、1か所直したらすぐに読み取り直して、直った状態を実機で見届ける習慣をつけると安心です。
こうした実機チェックを丁寧に行うことが、公開後の「スマホで見たら崩れていた」というトラブルを防ぎます。
とはいえ、崩れの原因を突き止めて根本から直すには、Wix Studioのレスポンシブ設計の知識が必要になる場面もあります。
スマホ表示の最適化やサイトの見直しでお困りでしたら、ぜひご相談ください。
よくある質問（FAQ）
Q1. Wix StudioのスマホプレビューをQRコードで表示するにはどこを押せばよいですか？
A. Wix Studioのエディタ上部にある「端末でプレビュー（モバイル端末でプレビュー）」を押すと、画面にQRコードが表示されます。
それをスマホのカメラで読み取れば、実機でテストサイトを確認できます。
Q2. QRコードでスマホ確認する場合、URLを送る必要はありますか？
A. いいえ、必要ありません。
従来は「テストサイト発行 → PCでURL発行 → URLをスマホに送信」という手順が必要でしたが、QRコードによるプレビューではエディタのQRコードをスマホで読み取るだけで完結します。
Q3. PCのプレビューだけでスマホ表示を確認するのでは不十分ですか？
A. PCの画面上でスマホ幅に切り替えても、実機での見え方とは差が出ることがあります。
画面サイズや解像度、操作感などは実機でないと再現しきれないため、公開前には一度実機での確認を挟むことをおすすめします。
Q4. スマホ表示確認の拡張機能とQRコードでの実機確認は、どちらがよいですか？
A. 拡張機能でもスマホ版の表示を確認できますが、実機で実際に起きる崩れまで特定するのは難しい場合があります。
確実さとスピードの面では、QRコードで実機を直接開いて確認する方法が扱いやすくおすすめです。
Q5. 実機でスマホ表示を確認するとき、特にどこを見ればよいですか？
A. 見出しや文章が画面幅に収まっているか、横スクロールが発生していないか、ボタンや画像がはみ出していないか、タップしやすいかを中心に見ると、崩れに気づきやすくなります。
上から下まで通しでスクロールするのがコツです。
Q6. QRコードがうまく読み取れないときはどうすればよいですか？
A. 画面の明るさを上げる、カメラとQRコードの距離を調整する、スマホがネットに接続されているかを確認する、といった基本的な対処で解決することがほとんどです。
それでも読み取れない場合は、カメラアプリを一度閉じて開き直してみてください。
Q7. QRコードで確認できるのは公開前のサイトですか？
A. はい、制作中・公開前のテストサイトを確認できます。
テストサイトはクライアントへの事前確認や公開前の社内チェックに使う確認用のサイトで、公開前の段階でスマホでの見え方をチェックできます。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
