.png)
Wix Studioのレスポンシブ設定方法とは？スマホで崩れるレイアウトをデバイス別に直す手順を初心者向けに解説
- 3 時間前
- 読了時間: 9分
PCで見たときはきれいに整っているのに、スマホで開いた瞬間に文字がはみ出したり、ボタンが画面からずれたりしていた。
そんな経験はありませんか。
これはWix Studioのレスポンシブ設定がまだうまく効いていないサインです。
この記事では、Wix Studioのレスポンシブ設定方法を、要素をスタックでまとめる下準備から、デバイス表示の切り替え、崩れの直し方、文字サイズと横幅の個別調整まで、初心者の方でも順番どおりに進められるよう解説します。
専門用語はそのつど噛み砕いて説明するので、はじめてWix Studioを触る方も安心して読み進めてください。
Wix Studioのレスポンシブ設定とは？PC・タブレット・スマホで自動で変わる仕組み
Wix Studioのレスポンシブ設定とは、PC・タブレット・スマホという画面サイズの違うデバイスごとに、レイアウトや文字の大きさを画面幅に合わせて自動で調整する仕組みのことです。
同じページでも、大きなモニターでは横に広く、スマホでは縦にすっきりと並ぶよう、表示が切り替わります。
この切り替わりの境目になるのが「ブレイクポイント」と呼ばれる横幅の境界です。
Wix Studioでは、おおまかに次の範囲でデバイスが分かれています。
デバイス | 横幅の目安 |
モバイル | 320〜750px |
タブレット | 751〜1000px |
デスクトップ | それ以上 |
ここで押さえておきたいのが、以前からある「Wix Editor」との違いです。
Wix Editorのレスポンシブ設定はPCとモバイルの2段階だけで、あいだにあるタブレットを最適化する手段がありませんでした。
そのため実機のタブレットで開くとレイアウトが崩れて見えることがありました。
Wix Studioはこれにタブレットを加えた3段階以上に対応しているため、中間サイズの端末でも整えられるようになっています。
項目 | Wix Editor | Wix Studio |
レスポンシブの段階 | PC・モバイルの2段階 | タブレットを加えた3段階以上 |
タブレットの最適化 | 個別調整が難しい | デバイス別に調整できる |
大きなモニターでの見え方 | 横に大きな空白ができやすい | 画面幅に合わせて整う |
Wix Studioは2023年9月にリリースされた比較的新しいツールで、この「デバイスごとに整えられる」点が最大の特徴です。
まずはこの仕組みをイメージできれば、以降の手順がぐっと理解しやすくなります。
レスポンシブ設定の前にスタックで要素をまとめる手順
デバイス別の調整に入る前に、ぜひやっておきたい下準備があります。
それが「スタック」で要素をまとめる作業です。
スタックとは、タイトル・段落・ボタンといった複数の要素を、ひとつのグループとしてまとめたものです。
バラバラの要素をそのまま置いておくと、デバイスを切り替えたときに一つひとつの位置がずれてしまいがちですが、スタックにまとめておけばグループ単位できれいに並び替わり、レスポンシブ調整の単位として扱いやすくなります。
スタックを配置する手順は次のとおりです。
編集画面に入り、画面上の「パーツを追加」を開く。
メニューのなかから「スタック」を選んで、ページ上に配置する。
まとめたい要素（例：タイトル＋段落＋ボタン）をスタックのなかに入れる。
スタックの並び方が意図どおりか、この段階でざっと確認しておく。
たとえば「見出し・説明文・問い合わせボタン」がワンセットになっているブロックなら、この3つをひとつのスタックにまとめておきます。
こうしておくと、後でスマホ表示に切り替えたときも、3つがバラけずにまとまったまま縦に並んでくれるので、崩れの手直しが最小限で済みます。
レスポンシブ設定でつまずく方の多くは、この下準備を飛ばして個別要素のまま調整しようとしています。
急がば回れで、まずはスタックにまとめることが、崩れにくいページづくりの第一歩です。
デバイス表示を切り替えてスマホ・タブレットの崩れを確認する方法
スタックで要素をまとめたら、次は今の状態が各デバイスでどう見えているかを確認します。
Wix Studioでは、この確認をエディタ上で簡単に行えます。
やり方はシンプルです。
編集画面の上部にある表示切り替えで「タブレット」「モバイル」を選ぶと、そのデバイスでの見え方に画面が切り替わります。
編集画面の上部にある表示切り替えを開く。
「タブレット」に切り替えて、文字サイズやレイアウトの崩れがないか確認する。
続けて「モバイル」に切り替えて、同じように見え方をチェックする。
気になる箇所（文字が小さい、ボタンがはみ出す、など）をメモしておく。
このとき、よくあるのが「タブレット表示で文字が極端に小さい」というケースです。
たとえば段落の文字が9pxまで縮んでしまい、実機ではほとんど読めない状態になっていることがあります。
これはデバイスを切り替えてみないと気づきにくいので、必ず一度は各デバイス表示で目視することが大切です。
崩れをそのまま放置すると、実際にサイトを訪れたスマホユーザーにそのまま届いてしまいます。
「PCで作って終わり」にせず、タブレット・モバイルの表示を切り替えて確認する習慣をつけると、公開後のトラブルを大きく減らせます。
PCのレイアウトがそのままスマホに流用されて崩れるときの直し方
デバイス表示を確認したときに、PCのレイアウトがそのままスマホに引き継がれていて、要素がはみ出したり重なったりしている。
これはレスポンシブがまだ効いていない状態です。
ここが、この記事でいちばん伝えたいポイントです。
結論：Wix Studioのレスポンシブは、要素をスタックでまとめてからデバイス別に調整すればスマホの崩れを直せます。
PCで横に3つ並べたカードが、スマホでは横幅が足りずにはみ出してしまう、というのは典型的な崩れ方です。
Wix Studioではデバイスごとに別々の調整ができるので、崩れているデバイスの表示に切り替えて、そのデバイスだけを個別に直していきます。
PCの設定を触らなくても、スマホ側だけを変えられるのが大きな利点です。
直し方の基本の流れは次のとおりです。
崩れているデバイス（例：モバイル）の表示に切り替える。
はみ出している要素やスタックを選び、そのデバイス用に配置や並び方を整える。
横に並びきらない要素は、スマホでは縦に積み重なるよう並び順を調整する。
直したあと、PC表示に戻してPC側が崩れていないことも確認する。
大切なのは、スマホの崩れを直したことでPCが崩れる、という心配が要らない点です。
Wix Studioは各デバイスの設定を別々に保持するため、スマホをいくら調整してもPCの見た目はそのまま守られます。
まずはこの「デバイスごとに独立して直せる」感覚をつかむと、レスポンシブ調整が一気にラクになります。
各デバイスで文字サイズと横幅を個別に調整する設定手順
崩れの大きな原因が整ったら、次は仕上げとして文字サイズと横幅を各デバイスに合わせて調整します。
レスポンシブ調整で手を入れる箇所は、多くの場合この2つに集約されます。
文字サイズについては、デバイスごとに読みやすい大きさの目安があります。
制作現場での経験則としては、次の範囲がひとつの基準になります。
デバイス | 本文（段落）の文字サイズ目安 |
PC | 18px程度 |
タブレット | 14〜16px |
スマホ | 12〜14px |
たとえばタブレット表示で段落が9pxになっていたら、14px前後まで手動で引き上げると読みやすくなります。
なお、見出しや英語表記の場合はこの目安とは別に調整が必要になることもあるので、あくまで本文の基準として使ってください。
具体的な調整手順は次のとおりです。
調整したいデバイス表示に切り替える。
文字要素を選び、そのデバイス用の文字サイズを設定する（例：タブレットの段落を14pxに）。
スタックや要素の横幅を、画面からはみ出さず余白が不自然にならないよう調整する。
ボタンのサイズや横幅も、指でタップしやすい大きさに整える。
横幅については、iPhoneなどの実機で確認しながら最適な値を決めるのがおすすめです。
エディタ上の見た目と実機の見た目は微妙に違うことがあるため、可能であれば実際のスマホでも一度チェックしておくと安心です。
文字サイズと横幅、この2点を各デバイスで押さえるだけで、見やすさは大きく変わります。
設定後にPC表示へ戻して全デバイスが別々に整っているか確認する
各デバイスの調整が終わったら、最後にPC表示へ戻して、すべてのデバイスがそれぞれ独立して整っているかを確認します。
ここまで来れば、レスポンシブ設定はほぼ完成です。
確認の流れは次のとおりです。
PC表示に戻し、PCのレイアウトが崩れていないかを確認する。
PCとタブレットが、それぞれの画面幅に合った別々の整い方になっているかを見る（例：PCで4行に収まる見出しが、タブレットでは2行に整うなど）。
モバイルもあらためて切り替え、文字サイズと横幅が整っているか最終チェックする。
余裕があれば、大きなモニターでも横スクロールしながら挙動を確認する。
ひとつ補足しておきたいのが、確認するモニターサイズについてです。
「PCは1440pxで作れば十分」と思いがちですが、世の中には1920pxの一般的なモニターも多くあります。
1440pxで作り終えたあと、1920pxでも崩れないかをもう一段階チェックしておくと、より安全です。
320pxのスマホから1920pxの大画面まで、どのデバイスでも完全に整っている状態を「フルレスポンシブ」と呼びます。
ここを目指せると、どんな環境で見られても見栄えのするサイトになります。
デザイナーがFigmaで作るときも、PCは1440px、スマホは390pxといったアートボードを基準にすることが多いので、その幅を意識して実装すると、デザインと実装のズレも小さくできます。
よくある質問（FAQ）
Q. Wix EditorとWix Studioでは、レスポンシブ設定はどう違いますか。
A. Wix Editorのレスポンシブ設定はPCとモバイルの2段階のみで、あいだのタブレットを最適化する手段がありませんでした。
Wix Studioはタブレットを加えた3段階以上に対応しており、中間サイズの端末でも崩れを直せます。
Q. Wix Studioのブレイクポイントの目安を教えてください。
A. おおまかにモバイルが320〜750px、タブレットが751〜1000px、それ以上がデスクトップです。
この横幅の境界を境に、レイアウトや文字サイズの表示が切り替わります。
Q. デバイスごとの本文の文字サイズはどれくらいが読みやすいですか。
A. 制作現場での経験則としては、PCの本文が18px程度、タブレットが14〜16px、スマホが12〜14pxが目安です。
見出しや英語表記の場合はこの目安とは別に調整することがあります。
Q. タブレットの制作幅は何pxで作ればよいですか。
A. デフォルトの768pxで作ることが多いです。
まずはこの幅を基準に整え、必要に応じて微調整するとよいでしょう。
Q. スマホの崩れを直すと、PCのレイアウトも崩れてしまいませんか。
A. 崩れません。
Wix Studioは各デバイスの設定を別々に保持するため、スマホをいくら調整してもPCの見た目はそのまま保たれます。
安心して崩れているデバイスだけを直してください。
Q. Wix Studioはいつ登場したツールですか。
A. Wix Studioは2023年9月にリリースされました。
デバイスごとにレイアウトを整えられる点が、以前のWix Editorとの大きな違いです。
Q. フルレスポンシブとは何ですか。
A. スマホの320pxから大画面の1920pxまで、どのデバイスでも完全に整っている状態のことです。
1440pxで作ったあと1920pxでも確認する2段階チェックを行うと、フルレスポンシブに近づけやすくなります。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
