Wix Studio 運用マニュアル｜05. レスポンシブ編集方法
はじめに
このページでできること
- PC／タブレット／スマホごとに見え方を調整できる
- デバイス切替、配置・サイズの微調整、このデバイスだけ非表示の使い方がわかる
使う場所：Wix Studio エディタ（見た目の編集）
1. 基本の考え方
- 手順は PCで整える → スマホで最終調整 が基本
- 1つの変更が他のデバイスにも影響することがあるため、デバイスごとに確認
- 不要要素は削除ではなく 「このデバイスだけ非表示」 を活用
💡ポイント：スマホでは縦に読みやすい配置を優先。テキストは短め・画像は軽量に。
2. デバイスを切り替える
編集中に、PC／タブレット／スマホの表示を切り替えます。
❶表示したいデバイス（PC／タブレット／スマホ）を選ぶ
3. PC表示を整える
まずはPCで基本のレイアウトを完成させます。
手順（3ステップ）
❶見出し・本文・画像の位置と余白をガイド線に合わせてそろえる
❷アイテムの配置ツールを使用して整列（左右・上下の間隔などを一定に）
❸画像は比率を保ったままサイズ調整
⚠注意：PCで幅や高さを大幅に変更すると、スマホで崩れることがあります。
4. スマホ／タブレットで最終調整
スマホは画面が小さいため、読みやすさ優先で微調整します。
手順（全2ステップ）
❶デバイスをタブレットに切替てテキストの改行と行間を確認（長文は段落を分ける）
❷次にデバイスをスマホに切替え、画像やテキストサイズ・位置を微調整
※スマホ画面では、タップしやすい余白にも配慮する（指で押しやすい間隔）
💡コツ：フォントサイズは既存のスタイルを使い、むやみに小さくしない。
5. 「このデバイスだけ非表示」を使う
PCでは必要でも、スマホでは邪魔な要素を非表示にできます。
手順（3ステップ）
❶非表示にしたい要素を選択して「非表示」 をON
❷表示を戻したい時はレイヤーから目のアイコンをタップまたは「表示」 をON
※他のデバイス表示で「表示されているか」「崩れていないか」を確認
⚠注意：削除ではなく非表示にすること。削除すると他デバイスにも影響する場合があります。
6. 画像の比率とトリミングの注意
- 画像は同じ比率で差し替えると崩れにくい
- ズームで切り抜くと上下左右が切れることがあるため、プレビューで四辺を確認
- 重要な文字や顔が端に寄らないように配置
7. チェック
- 文字の折返しは自然？
- 重要要素（見出し・CTA）が下に埋もれていない？
- ボタンは押しやすい大きさと余白がある？
- 画像は粗くない／はみ出していない？
- PC／スマホで同じ内容が表示されている？（非表示の誤設定なし）
💡順番：PCで整える → スマホで最終調整（タブレットも必要に応じて確認）
8. よくあるミスと対処
- PCで広げすぎてスマホで崩れる → PCの幅を少し戻す／スマホで要素幅を調整
- 要素を削除して他デバイスからも消えた → 次回は「このデバイスだけ非表示」を使用
- 改行で無理に整える → 文章を短く、段落で整理（改行頼みは崩れの原因）
- 画像の端が切れる → 余白を広げ、中央寄せで配置
このあと読むとよいページ
専門サポートの案内
- モバイル優先レイアウト再設計（上から順に伝わる導線づくり）
- タップ領域最適化（ボタン間隔・誤タップ防止）
スマホで「読みにくい」「押しづらい」をゼロに。レイアウトの再設計と検証は私たちにお任せください。
