Studioのレスポンシブのやり方を解説！崩れる時の対応方法も

レスポンシブ設定のやり方を実例に沿って解説

ここでは、レスポンシブ設定の一連の流れを、GOROが制作しているテンプレートサイトのTOPページを例に紹介します。

参考：BtoB｜マーケティング会社テンプレート

1.レスポンシブの事前準備をする

設定を始める前に、ブレイクポイント、パディング/マージン、テキストサイズの数値を決定します。

• ブレイクポイント　　：どの画面幅で表示を切り替えるかのタイミング（最大5つまで）

• パディング／マージン：余白の大きさ

• テキストサイズ　　　：文字の大きさ

事前に決定しておくことで、数値ごとの役割が明確になり、統一感あるレイアウト設計ができます。

2.デフォルトでのレスポンシブ

1440pxを中心にした、1141px以上の画面幅です。主にPCユーザーが閲覧しています。

▼チェックポイント

最大4Kを目安に、1440px以上の画面幅でも違和感がないかチェックしましょう。

一見問題がなさそうでも、「横幅を指定しておらず、過剰に大きさが広がってしまう」などの問題が発生します。必ず目視で確認しましょう。

3.スモールでのレスポンシブ

1140〜841pxの画面幅です。主に小型ノートPCや横向きタブレットで閲覧されます。

▼チェックポイント

デフォルトサイズの余白感を維持できているかチェックしましょう。

「タブレットサイズ手前の画面幅に合わせたら、左右に余裕がないレイアウトになってしまった」といった問題がよく発生します。

1140px〜841px全体で納得がいくレイアウトか、確認するようにしましょう。

4.タブレットでのレスポンシブ

840〜541pxの画面幅です。主に縦向きタブレット、PCブラウザの半分幅などで閲覧されています。

以下のような変更点が必要になる場合、表示非表示を用いてタブレットサイズ以下専用のデザインに入れ替える工程も必要になります。

• キービジュアルが一列になる

• 3列の要素が2列・1列になる

• ナビゲーションがハンバーガーメニューに変わる

• テキストの改行位置が変わる

▼チェックポイント

事前にデザインをPC寄りかモバイル寄りにするかチェックしておきましょう。

曖昧なまま進行してしまうと、細部で「モバイルに寄せたら横に広すぎてしまう」「デスクトップ寄りでは余裕がない配置になってしまう」といったトラブルに直面します。

判断基準は制作するサイトによって異なるため、慎重に検討しておきましょう。

どちらに寄せるかの判断基準は、以下のような点が挙げられます。

PC寄りのデザイン

• 情報密度があるため、一覧性が良い

• ヘッダーなどのナビゲーションが強く、迷子になりにくい

• 画面幅が狭くなった際の対応が難しい

モバイル寄りのデザイン

• タップ/スクロールがしやすい

• 一目見た時の情報量がシンプルになる

• 崩れる要素が少ないため、制作がしやすい

• 左右の余白がスカスカになってしまうことがある

5.モバイルでのレスポンシブ

540px〜321pxの画面幅です。主にスマートフォンユーザーが閲覧します。

▼チェックするポイント
モバイルサイズでは、3点の確認を行います。

1.実機を用いて、スクロールが過度でないかチェックする
手元のスマートフォンを用いると、PCの画面では感じにくい問題を発見しやすくなります。

「スクロールが大変に感じないか」「手を止めた時、画像や文章が大きすぎないか」など、いちユーザーの目線に立ち閲覧しましょう。

2.アプリ内ブラウザでチェックする

Teams、Slack、LINE、Instagramなどのアプリで、SafariやChromeとは異なる独自のブラウザを用いていることがあります。

確認すると「通常のブラウザでは問題がなかったが、アプリ内ブラウザのみで表示崩れが発生した」といったケースが稀に発生します。

サイトによってはアプリ内ブラウザの利用率が高いこともあるため、忘れず確認するようにしましょう。

3.複数のブラウザでチェックする

PC同様、スマートフォンでもChrome、Safari、FireFoxで表示が異なることがあります。どの環境で見ても崩れのないサイト設計にするため、重要なチェック段階です。

6.ミニでのレスポンシブ

320px以下の画面幅です。小さなスマートフォンユーザー（iPhone5など）や、テキストサイズを大きくしているユーザーなどが閲覧します。

ここでは「310px以下になると全く見えなくなる要素がある」などのトラブルがないようにすることがゴールです。

▼チェックするポイント

モバイルメニューの項目など、テキストが余剰に改行されていないかチェックしましょう。

テキストが1文字だけ改行されてしまっていると、印象が悪くなってしまいます。

7.レスポンシブの調整・確認

ブラウザの開発者モードを活用し、ライブプレビューで画面幅を細かく指定してチェックします。

Chromeの場合はF12キーを押し、実機ボタンから起動します。

参考：Chrome「Device Mode でモバイル デバイスをシミュレートする」 https://developer.chrome.com/docs/devtools/device-mode?hl=ja

チェックするとき、特に2種類の画面幅に注意が必要です。

• 各ブレイクポイントでのチェック（例：スモールの1140px）

• 各ブレイクポイントの手前でのチェック（例：スモールの841px）

すべてのサイズで問題がないよう、チェックリストなどを用意し漏れなく進めましょう。

レスポンシブは何が難しい？よく悩むトラブル3つと対応方法

レスポンシブ設定は、実装の中でも特につまづきやすい工程です。なかにはStudioの仕様上できないこともあり、想定以上に時間がかかってしまうこともあります。

ここでは、レスポンシブ実装でよく悩む3つのトラブルを、対応方法とともに紹介します。

トラブル1. 画像をレスポンシブ設定したとき、高さが0pxになり表示されない

画像のレイアウトを変更していると、時折高さが0pxになり表示されなくなるトラブルが発生します。

このトラブルは、以下の条件下で発生する仕様です。

• 親要素の高さがauto

• 子要素(Box)の高さがauto

対応方法：

画像の高さをpx (固定値)やvh(画面幅基準)で指定するか、BoxからImgへの差し替えを行いましょう。

Imgでは高さがautoでも0pxになることがないため、縦横比を維持したパーツに有効です。

トラブル2. エディタとプレビューで、画面のサイズが異なる

エディタとプレビューで、要素の横幅や余白にズレが生じることがあります。

例えば、以下のような状態です。

• テキストサイズが小さくなっている or 大きくなっている

• 左右の余白が少し小さい

• タブレットサイズを確認するはずが、モバイルサイズのデザインになっている

対処方法：

ブラウザがエディタと同じ画面幅で表示されているかを必ず確認しましょう。

開発者モードを使っていない場合や、Webページの表示倍率が120％などに変更されている場合にズレが発生するため注意が必要です。

トラブル3. プレビューで、画像やテキストなどの要素が小さくなる

デザインエディタでは問題なく配置できている要素が、プレビューを用いると過剰に小さくなってしまうことがあります。

例えば、以下のような状態です。

• 画像の横幅が縮んでしまい、背景のあしらいが崩れる

• テキストボックスが縮んでしまい、折り返してしまう

原因：

これはプレビュー時に「Max-width:100％」という設定が付与され、px指定では親要素以上の幅にできなくなる制限がかかるためです。

例えば、以下のような設計を行った場面で発生します。

• 画面幅：タブレットサイズの840〜541px

• 画像：絶対配置、1200px、アニメーションで左からスライドして登場する

対処方法：

横幅をpx指定ではなく、vw、%で指定することでサイズを大きくすることが可能です。

先程の場面を例に挙げると、以下のような設計をすることで対処が可能です。

• 画面幅：タブレットサイズの840〜541px

• 画像：絶対配置の200vw、アニメーションで左から登場

ただし、はみ出す要素にはリスクもあります。必ず以下のような点を考慮しましょう。

• レイアウトの計算が複雑になってしまう

• 見切れた画像への差し替えなど、余剰に大きくする必要がない方法もある

• テキストは見切れてしまい、一部読めなくなってしまう

• 画像は、大きすぎる場合サイトが重くなってしまう可能性がある

レスポンシブのコツを紹介！Studioでスムーズに実装するには？

時間のかかるレスポンシブ設定について、GOROメンバーは以下のような取り組みでスムーズな実装を行なっています。

コツ1. レスポンシブをまとめて反映できるようにする

レスポンシブ実装の確認コストを抑えるため、共通部分は最小限に実装できるよう進めていきます。

取り組み例としては、以下のようなものがあります。

• デザインが近い要素は、1個がレスポンシブが完成した後に作る

• 表示/非表示設定はなるべく必要最低限にする

• デザインが共通のページは、1ページ完成後にそのまま転用する

• テキストスタイルを活用する

これにより、「3個中1個だけ数値が異なる」などの実装漏れも抑えることができます。

なお、同じデザインの要素が複数並ぶ場合は、Studioのリスト機能も便利です。詳しくはこちらの記事でも紹介しています。

関連記事：横並びの方法や解除時の注意点も！Studioでのリスト化について解説

コツ2. 実装で行き詰まった時はStudioコミュニティを活用する

意図しない挙動で長時間悩んでしまった時は、最初に公式フォーラム「Studio Community」を活用しています。

Studio Community Japanはこちら

同じ悩みを持つ人が質問していることがあり、「Studioの仕様上できないことだった」「他の実装方法が見つかった」と、解決方法がすぐに見つかることがあるためです。

直接質問をすることも可能なので、行き詰まった時は気軽に活用しましょう。

コツ3. 最後に確認する時間を多めに見積もる

レスポンシブ実装では、確認を取る時間を多めに用意しています。

Studioはレスポンシブが設定されている部分を一括で確認・編集する機能が無く「修正前の数値が残っていた」といった実装漏れが発生しやすいためです。

アニメーションやホバーの部分も含まれるので、1個1個慎重に確認をとりましょう。