Studioのレスポンシブ設定｜やり方とコツ！サイズごとのレスポンシブ対応

「PCではキレイに表示されるのに、スマホで見るとレイアウトが崩れてしまう…」

ノーコードツール StudioでWebサイトを制作していると、多くの人が一度は“レスポンシブの壁”にぶつかります。
レスポンシブ設定は、Webサイト制作において非常に重要ですが、初心者にとっては少し複雑に感じるかもしれません。

でも、ご安心ください！
Studioのレスポンシブ設定は、いくつかの基本的な仕組みとコツさえ理解すれば、誰でも簡単にマスターできます。

この記事では、Studioのレスポンシブ設定の基本的なやり方から、崩れないための具体的なコツまで、初心者の方にも分かりやすく、図解を交えながら丁寧に解説します。

この記事を読み終える頃には、あなたもPC・タブレット・スマホ、どのデバイスで見ても美しいサイトを自分で作れるようになっているはずです。

ぜひ最後までご覧ください！

Studioのレスポンシブ設定とは｜3つの特徴

Studioのレスポンシブ設定を理解する前に、まずはその基本的な仕組みと特徴を押さえておきましょう。

Studioのレスポンシブ設定には、3つの重要な特徴があります。

1. PC画面サイズのデザインがデフォルト

2. ブレイクポイントの種類は5つ

3. ブレイクポイントごとに変更可・不可な項目がある

それぞれ詳しく見ていきましょう。

PC画面サイズのデザインがデフォルト

Studioでは、PC画面サイズ（デスクトップ）のデザインが基準となります。

なぜPC基準なのかというと、最も大きな画面サイズで全体のレイアウトを組み立てることで、その後、タブレットやスマホなど小さい画面サイズへの調整がスムーズに行えるからです。

まずはPCサイズで全体のデザインを完成させ、その後、各ブレイクポイント（画面サイズ）ごとに微調整を加えていく、というのがStudioのレスポンシブ設定の基本的な流れになります。

ブレイクポイントの種類は5つ

Studioでは、以下の5つのブレイクポイント（画面サイズの切り替えポイント）が用意されています。

これらのブレイクポイントごとに、レイアウトを最適化していくことで、あらゆるデバイスで美しく表示されるサイトを作ることができます。

ブレイクポイントごとに変更可・不可な項目がある

Studioのレスポンシブ設定では、すべての設定項目がブレイクポイントごとに変更できるわけではありません。

項目によって、「共通で反映される設定」と「サイズ別に変更できる設定」があります。

【共通で反映される設定】

• テキストの内容

• リンク先URL

• 画像の差し替え

• ID、タグ（h1, pなど）

【サイズ別で反映される設定】

• 文字サイズ

• 余白

• ボックスサイズ

• 並び方向

• 要素の表示・非表示

• 色

• フォント

• 透明度

この違いを理解しておくことで、「なぜこの設定が反映されないのか？」という疑問を解消できます。

ボックスの構造を統一してレイアウトを組むのが重要

Studioのレスポンシブ設定を成功させる鍵は、「ボックス構造」にあります。

Studioでは、テキストや画像などのすべての要素を「ボックス」という箱に入れ、そのボックスを積み重ねたり、入れ子にしたりしてレイアウトを組み立てていきます。

【ボックス構造のイメージ】

親ボックス（セクション全体）

├─ 子ボックス1（見出し）

├─ 子ボックス2（テキスト）

└─ 子ボックス3（画像）

レスポンシブ設定とは、この親ボックスと子ボックスの大きさや並び方を、画面サイズ（ブレイクポイント）ごとに調整していく作業を指します。

例えば、PCでは横並びだった子ボックスを、スマホでは縦積みに変更する、といった具合です。

Studioのレスポンシブ設定の大きな特徴は、親のスタイルが子に引き継がれる「継承」という仕組みです。
具体的には、基準となるPCサイズの設定が、タブレットやスマホのサイズへと自動的に引き継がれます。
そのため、まずはPCで全体のレイアウトを完成させ、その後、小さいデバイスサイズに合わせて調整していくのが基本の流れです。

ボックス構造をシンプルに保つことで、レスポンシブ設定がスムーズに進み、崩れにくいレイアウトを実現できます。

Studioのレスポンシブ設定のやり方｜基本4ステップ

実際にStudioでレスポンシブ設定を行う手順を、下記の4つのステップで見ていきましょう。

1. ブレイクポイントの切り替え

2. ボックスの方向を調整する

3. 余白（マージン・パディング）を調整する

4. 文字サイズ・画像サイズを調整する

※ここでは、PCで作成したレイアウトを、スマホ表示に最適化していく流れを解説します

ステップ1：ブレイクポイントの切り替え

まずは、編集画面をスマホ表示に切り替えます。エディタの画面中央下部のツールバーに、デバイスのアイコンが並んでいます。ここで調整したいブレイクポイント（「タブレット」や「モバイル」など）を選択します。

クリックすると、キャンバスがスマホサイズに切り替わり、そのデバイスでの表示を確認しながら編集を進めることができます。

ステップ2：ボックスの方向を調整する

PCでは横並び（Horizontal）にしていた要素が、スマホでは窮屈に見えることがよくあります。
その場合は、親ボックスの「方向（Direction）」を「縦（Vertical）」に変更しましょう。

1.レイアウトを調整したい要素の親ボックスを選択します。

2.画面右側の設定パネルから、「レイアウト」セクションを見つけます。

3.「方向」を「→（横）」から「↓（縦）」に変更します。

これだけで、ボックス内の要素が縦に積み重なり、スマホ画面でも見やすいレイアウトになります。
（デバイス上部にある矢印からも変更可能です。）

ステップ3：余白（マージン・パディング）を調整する

PCでは適切だった余白も、スマホでは間延びして見えたり、逆に窮屈に見えたりすることがあります。
要素を選択し、右側の設定パネルで「余白（Margin / Padding）」の数値を調整しましょう。

特に、左右の余白は「%」などの相対的な単位を使うと、画面幅に応じて柔軟に変化するため、レイアウトが崩れにくくなります。

ステップ4：文字サイズ・画像サイズを調整する

最後に、文字や画像のサイズを調整します。

PCと同じ文字サイズでは、スマホでは大きすぎることがほとんどです。
見出しや本文の文字サイズを、スマホ画面で読みやすい大きさに変更しましょう。

画像も同様に、スマホ画面に合わせてサイズを調整します。
大きすぎる画像は、表示崩れや読み込み速度の低下に繋がるため注意が必要です。

PCでは、画像ボックスサイズ 1080px

スマホ画面では、画像ボックスサイズ 340pxに。

以上が、Studioのレスポンシブ対応の基本的なやり方です。
この4ステップを繰り返すことで、あらゆるデバイスに対応したサイトを構築できます。

レスポンシブが崩れないための4つのコツ

基本的な設定方法をマスターしたら、次は「崩れない」ためのコツを学びましょう。

以下の4つのポイントを意識するだけで、レスポンシブ設定の精度が格段に向上します。

1. ボックス構造はシンプルに保つ

2. サイズ単位を使い分ける（px, %, auto, flex）

3. コンテンツの最大幅（max-width）を設定する

4. ブレイクポイントごとの表示／非表示を活用する

それぞれ詳しく見ていきましょう。

コツ1：ボックス構造はシンプルに保つ

レスポンシブ設定を成功させる鍵は、シンプルなボックス構造にあります。
要素を何重にも入れ子にすると、構造が複雑になり、どのボックスがどう影響しているのか把握しづらくなります。
特に初心者のうちは、できるだけシンプルな構造を心がけましょう。

【NG例】

• ボックスの中に、さらにボックス、その中にまたボックス…と、不必要に入れ子構造が深くなっている。

【OK例】

• 関連する要素を1つの親ボックスでまとめ、階層は浅く保たれている。

コツ2：サイズ単位を使い分ける（px, %, auto, flex）

Studioでは、要素のサイズを指定するために様々な単位が用意されています。
これらの単位の特性を理解し、適切に使い分けることが、崩れないレイアウトの秘訣です。

特に、ボックスの縦幅は「auto」に設定しておくのが基本です。

これにより、中のテキスト量が増減しても、ボックスの高さが自動で追従してくれるため、要素がはみ出すのを防げます。

コツ3：ボックスの幅を「px」で指定して広がりを抑える

大画面のモニターでサイトを見たときに、画像やテキストが横に広がりすぎて間延びするのを防ぐために、コンテンツを囲むボックスの横幅を「px（ピクセル）」で指定しましょう。

Studioの仕様では、横幅に「px」を指定すると、それが自動的に「最大幅」として機能します。（画面幅が指定したpxより大きくなれば中央に留まり、画面幅がpxより小さくなれば自動で縮小されます。）

1. サイト全体を囲む親ボックス（またはセクション内のグループ）を選択します。

2. 右側の設定パネルで、横幅（Width）を「100%」ではなく、「1280px」などの固定値に変更します。

3. 配置（Alignment）を「中央揃え」に設定します。

これにより、どんなに大きなディスプレイで見ても、コンテンツが意図した幅（例：1280px）以上に広がることはありません。

コツ4：ブレイクポイントごとの表示／非表示を活用する

どうしてもPCとスマホでデザインを大きく変えたい場合、ブレイクポイントごとに要素を表示させたり、非表示にさせたりする機能が便利です。

例えば、PCでは詳細な情報を表示し、スマホではそれを非表示にして、代わりにシンプルなアイコンを表示する、といった使い方が可能です。

1.非表示にしたい要素を選択します。

2.右側の設定パネルで、非表示にしたいブレイクポイントの目のアイコンをクリックしてオフにします。

この機能を活用すれば、デバイスごとに最適化された、より高度なレスポンシブデザインが実現できます。

Studioのレスポンシブに関するQ&A

ここでは、Studioのレスポンシブ設定でよくある質問にお答えします。

Q. Studioのレスポンシブ設定は難しいですか？

A. 初心者の方にとっては、最初は少し難しく感じるかもしれません。
しかし、この記事で紹介した「ボックス構造」と「サイズ単位」の基本さえ理解すれば、決して難しくはありません。
まずは簡単なレイアウトから試してみて、徐々に慣れていくのがおすすめです。

Q. レスポンシブが反映されない原因は何ですか？

A. いくつか原因が考えられますが、最も多いのは「キャッシュ」の問題です。
ブラウザに古いデータが残っていると、変更が反映されないことがあります。
スーパーリロード（Windows: Ctrl+F5, Mac: Cmd+Shift+R）を試すか、ブラウザのキャッシュをクリアしてみてください。
また、ボックスのサイズ指定が「px」などの固定値になっている場合も、意図した通りに反映されない原因になります。

Q. スマホ表示のみ改行する設定は可能？

A. はい、可能です。改行したいテキストボックスを選択し、右側の設定パネルで「その他」＞「改行」を「あり」に設定します。
これにより、スマホ表示の時だけテキストが自動で改行されるようになります。

Q. レスポンシブを解除・リセットする方法はある？

A. 一度設定したレスポンシブスタイルを個別にリセットする直接的な機能はありません。
ただし、親のブレイクポイント（例えば、モバイル設定の場合はタブレット）のスタイルは引き継がれるため、親のスタイルと同じ設定値に戻すことで、実質的にリセットすることが可能です。

まとめ

今回は、Studioのレスポンシブ設定のやり方と、崩れないためのコツについて解説しました。

Studioは、ノーコードツールでありながら、非常に自由度の高いレスポンシブ対応が可能です。
最初は少し戸惑うかもしれませんが、この記事で紹介したポイントを一つずつ実践していけば、必ず美しいレスポンシブサイトを作れるようになります。

もし、どうしても自分での設定が難しいと感じた場合は、Studioに詳しい制作会社に相談するのも一つの手です。

Studioでのホームページ制作ならラシン株式会社へ

ラシン株式会社は、デザインとマーケティングの力で事業成長を支援するホームページ制作会社です。

Studio社公式のStudio Gold Experts認定企業であり、700サイト以上の制作実績No.1を誇ります。

ホームページ制作をきっかけに企業のDX推進全体を加速させること。それが私たちラシンの使命です。

不確実な時代でも前進を続けられるよう、信頼できるパートナーとして伴走します。
まずは、お気軽にお問い合わせください！