Studioのブレークポイント入門——PC・タブレット・スマホで崩れにくいサイトの考え方

Studioで作ったサイトをスマートフォンで開いたら、文字がはみ出していたり、横並びが窮屈につぶれていたり——レスポンシブ対応は、ノーコード制作でいちばん質問の多いテーマのひとつです。

この記事では、Studioのブレークポイント（画面幅の区切り）の基本的な考え方と、崩れにくいサイトを作るための順番を整理します。

ブレークポイントとは何か

ブレークポイントとは「この画面幅を境に、見た目の設定を切り替える」という区切りのことです。同じページでも、PCの広い画面とスマートフォンの狭い画面では、ちょうどよい文字の大きさも、横に並べられる数も違います。

Studioでは、デザイン画面の上部で編集する画面幅を切り替えながら、ベースのデザインに対して「タブレットではこう」「スマートフォンではこう」という差分を重ねていく作り方をします。大きい画面の設定が土台になり、小さい画面ではそこから変えたところだけが上書きされる、という関係です。

大きい画面から作って、小さい画面へ降りる

作る順番は「PC → タブレット → スマートフォン」と、大きい画面から小さい画面へ降りていくのが基本です。上書きの向きと作業の向きを揃えることで、「スマホ用に直したのにPCまで変わってしまった」という事故を減らせます。

逆に、各画面幅を行ったり来たりしながら思いつきで直していくと、どの幅のどの設定が効いているのか追えなくなりがちです。まずPCの見た目を固め切ってから下の幅に降りる、を徹底するだけで、レスポンシブ調整はかなり楽になります。

よくある崩れと直し方

スマートフォン表示で起きる崩れの多くは、次のどれかに当てはまります。

• 横並びのまま窮屈につぶれている → スマートフォンの幅では縦並びに切り替える
• 文字がはみ出す・大きすぎる → 見出しの文字サイズを画面幅ごとに一段ずつ下げる
• 要素が画面外へはみ出る → 親ボックスの幅・高さがpx指定（固定値）になっていないか確認し、autoや%に変える。はみ出しの多くは、内容量に関わらずボックスの大きさを固定してしまっていることが原因です
• 余白が広すぎて間延びする → PCで気持ちよかった余白は、スマホでは半分程度が目安

公開前の確認は「実物の幅」で

仕上げの確認は、デザイン画面の中だけで済ませず、公開プレビューを実際のスマートフォンで開いて行うのが確実です。編集中の見え方と公開後の見え方は完全に同じとは限らないため、最後は必ず実物で確かめる習慣をつけておくと安心です。

幅の違う端末を何台も用意できない場合は、ブラウザの開発者ツールで画面幅を変えながら確認するだけでも、大きな崩れはほぼ拾えます。確認する幅は、Studioが切り替えに使う区切りに合わせるのが確実です。Studioの初期設定では、モバイルが540pxまで・タブレットが840pxまで・それより広ければPCの設定が使われます。つまり「375px（スマホ）」「540px（モバイル設定の上限）」「840px（タブレット設定の上限）」「1280px（PC）」の4つを見ると、切り替わりの境目をひととおり踏めます。

注意したいのは、一般的なCSSの解説でよく出てくる「768px」が、Studioの初期設定の区切りとは一致しない点です。768pxはStudioの初期設定では「タブレット設定が効く範囲（840pxまで）」の内側にあるため、768pxだけを見てもタブレットとPCの切り替わりは確認できません。逆に541px〜840pxの範囲を見落とすと、この帯だけ崩れていることに気づけません。

まとめ

レスポンシブ対応のコツは、テクニックの数を増やすことよりも「大きい画面から小さい画面へ、順番に降りる」という一方通行を守ることにあります。ブレークポイントの仕組みを味方につけて、どの画面幅でも読みやすいサイトに仕上げていきましょう。「パソコンでは平気なのに、少し狭い画面だけ崩れる」という具体的な症状はStudioで公開したサイトが「PCより少し狭い画面」だけ崩れるときに疑うことで詳しく扱っています。