Studioのレスポンシブ設定のやり方【基本と順番】

Studioでサイトを作り込んだあと、スマホで見たらレイアウトが崩れていた——ノーコードでWeb制作を始めた方から、こうした相談はよく聞かれます。レスポンシブ（画面幅に応じた表示の最適化）は、どの画面から作るか、どの順番で調整するかで作業のしやすさが大きく変わります。順番を意識せずに各画面をバラバラに直していくと、あちこちで崩れが再発し、いつまでも整いません。

本記事では、Studioのレスポンシブ設定のやり方を、作る順番の基本から、ブレークポイントごとの調整手順、崩れにくくするコツまで解説します。150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、実案件で意識している「崩れにくいレスポンシブの進め方」を整理しました。なお、すでに表示が崩れて困っている場合は、原因別の直し方をまとめたStudioのレスポンシブが崩れる原因と直し方を先に読むと、該当箇所の対処が見つかりやすくなります。本記事は「これから正しい順番で設定する」ための基本編です。

結論：レスポンシブは「大きい画面から小さい画面へ」

先に結論をお伝えすると、Studioのレスポンシブ設定は大きい画面（PC）で作り込み、そこからタブレット、スマホへと順に調整していくのが基本です。

Studioでは、上位の画面幅（大きい画面）で設定したスタイルが、下位の画面幅（小さい画面）にも引き継がれます。つまり、PCでしっかりデザインを固めてから、下の画面幅で「引き継いだ設定のうち、崩れているところだけ直す」進め方になります。これを理解しておくと、なぜスマホだけを直しても他の画面に影響が出ないのか、逆にPCを直すとスマホにも反映されるのかが腑に落ちます。

• 手順の骨格：PC（大画面）で作り込む → タブレットで崩れを調整 → スマホで最終調整
• 引き継ぎの原則：上の画面の設定が下の画面に引き継がれる。下で上書きした部分だけが個別に変わる

この「上から下へ」の流れを守るだけで、作業の見通しが良くなり、崩れの再発が減ります。ノーコードサロンの制作現場でも、レスポンシブはまずこの順番を徹底するところから始めます。全体の学習の流れを整理したい場合はノーコードWeb制作の独学ロードマップもあわせて参考になります。

ブレークポイントごとの設定手順

Studioには、PC・タブレット・スマホといった画面幅の区切り（ブレークポイント）が用意されています。この区切りごとに表示を調整していきます。

手順1：PC（大画面）でデザインを作り込む

まずは大きい画面で、レイアウト・文字サイズ・余白・画像などをしっかり作り込みます。ここが土台になり、下位の画面幅に引き継がれます。この段階で構造（ボックスの入れ子）を整理しておくと、後の調整が格段に楽になります。余白の考え方はStudioのボックス・余白の仕組みで解説しています。

手順2：タブレット幅で崩れを調整する

次にタブレット幅に切り替え、引き継がれたレイアウトのうち崩れている箇所を直します。よくあるのは、横並びの要素が窮屈になる、文字が大きすぎる・小さすぎる、といった点です。ここで直した内容はタブレット以下に引き継がれます。

手順3：スマホ幅で最終調整する

最後にスマホ幅で調整します。スマホでは、PCで横並びだった要素を縦積みにする、文字サイズを読みやすく整える、ボタンやメニューを押しやすくする、といった調整が中心です。ナビゲーションは、スマホではハンバーガーメニューに切り替えるのが定番です。切り替え方はStudioでハンバーガーメニューを作る方法で解説しています。

手順4：各画面で見え方を確認する

ひと通り設定したら、それぞれの画面幅でプレビューし、見え方を確認します。1箇所直すたびに各幅を見る習慣を付けると、崩れの早期発見につながります。

崩れにくくするための設定のコツ

順番を守ったうえで、次のポイントを押さえると、さらに崩れにくくなります。

幅は固定値だけで組まない（%・autoを活用）

要素の幅をすべてピクセルの固定値で指定すると、画面幅が変わったときにはみ出したり窮屈になったりしがちです。%（親要素に対する割合）やauto（自動）を使うと、画面幅に応じて柔軟に伸縮するため崩れにくくなります。特に横並びの要素や画像は、固定値より相対的な指定が向いています。

横並びは「折り返し」を意識する

複数の要素を横並びにするとき、狭い画面で折り返す設定にしておくと、はみ出しを防げます。カード型のレイアウトなどは、画面幅に応じて自然に折り返すよう組んでおくと、スマホでも破綻しません。

文字サイズと余白は画面幅ごとに整える

PCで最適な文字サイズや余白は、スマホでは大きすぎたり詰まって見えたりします。見出し・本文のサイズ、上下の余白は、各画面幅で読みやすさを確認して調整します。特に見出しは、スマホで大きすぎると数行に折り返して間延びしがちなので注意します。

固定の高さを付けすぎない

要素に固定の高さを付けると、中身が増えたときにはみ出します。高さは中身に応じて自動で伸びるようにしておくと、文言の増減や画面幅の変化に強くなります。

つまずき・よくある失敗と対処

• スマホを直したのに他の画面が崩れた：下位の画面で直したつもりが、引き継ぎの仕組みを誤解しているケースです。「上の設定が下に引き継がれる」原則を再確認し、どの画面幅で上書きしているかを意識します。
• 要素が画面からはみ出す：固定幅で組んでいることが多い原因です。%やautoに変え、横並びは折り返す設定にします。
• スマホで文字が大きすぎる／小さすぎる：文字サイズを画面幅ごとに調整していない状態です。各幅で読みやすいサイズに整えます。
• 画像が伸びる・切れる：画像の幅指定と縦横比の設定を見直します。幅を相対指定にし、比率を保つ設定にすると安定します。
• 原因が特定できない：崩れの原因が複合している場合は、原因別に整理されたStudioのレスポンシブが崩れる原因と直し方で該当パターンを探すと、対処が見つかりやすくなります。

よくある質問（FAQ）

Q1Studioのレスポンシブはどの画面から作ればいいですか？

基本は大きい画面（PC）から作り、タブレット、スマホの順に調整します。Studioでは上位の画面で設定したスタイルが下位に引き継がれるため、大画面で土台を固めてから、小さい画面で崩れた箇所だけ直すと効率的です。この順番を守るだけで、崩れの再発がぐっと減ります。

Q2スマホの設定を変えるとPCにも反映されますか？

いいえ、下位の画面（スマホ）で上書きした設定は、その画面だけに適用され、上位（PC）には戻りません。逆に、上位（PC）の設定を変えると、下位で上書きしていない部分には引き継がれて反映されます。この「上から下への引き継ぎ」を理解すると、どの画面で直すべきかが判断しやすくなります。

Q3レスポンシブが崩れて困っています。この記事で直せますか？

本記事は「これから正しい順番で設定する」基本編です。すでに崩れている箇所を原因別に直したい場合は、Studioのレスポンシブが崩れる原因と直し方のほうが該当の対処を見つけやすくなっています。両方を合わせて読むと、正しい設定と崩れの修正の両面から理解できます。

まとめ

Studioのレスポンシブ設定は、「大きい画面（PC）で作り込み→タブレット→スマホの順に調整する」という順番が基本です。上位の画面の設定が下位に引き継がれる仕組みを理解し、下の画面では崩れた箇所だけ上書きしていきます。幅は%やautoを活用し、横並びは折り返し、文字サイズや余白は各画面幅で整えると、崩れにくいサイトになります。まずは「上から下へ」の順番を守ることから始めて、どの画面でもきれいに表示されるサイトを目指しましょう。