Studioのレスポンシブが崩れる原因とは？縦並びのコツや正しいやり方を紹介

「スマホ画面でレスポンシブが崩れてしまう」「デバイスごとに見た目を綺麗に揃える方法が知りたい」

そんな悩みを持つ方も多いのではないでしょうか。

この記事では、初心者が躓きがちなレスポンシブの正しいやり方と縦並びのコツを解説していきます。

レスポンシブが崩れてしまう原因についても3つのパターンに分けて詳しく解説しているので、ぜひ最後までご覧ください。

Studioのレスポンシブが崩れる3つの理由

Studioのレスポンシブが崩れてしまう原因として以下の3つが考えられます。

1. 小さいデバイスから順にレスポンシブを設定している
2. 基準を意識せずにサイトを制作している
3. デザインが複雑すぎる

それぞれ解説していきます。

参考：Studioの制作代行を利用する際の流れや費用とは？

1.小さいデバイスから順にレスポンシブを設定している

Studioでレスポンシブが崩れてしまう原因としてデバイスのサイズが小さいものから順にレスポンシブの設定を行っていることが挙げられます。

Studioでは基準をスタート地点として、スモール→タブレット→モバイル→ミニの順にレスポンシブを設定していきます。

しかし、レスポンシブが崩れてしまう方の多くはミニからタブレットの順にレスポンシブを設定していることが多いです。

これまで100名以上の方に対してStudioを教えてきた経験も踏まえると、レスポンシブが上手く設定できない方の半数近くがこの失敗をしています。

2.基準を意識せずにサイトを制作している

Studioのレスポンシブが崩れてしまう原因として、基準を考慮せずにサイトを制作しているというのが挙げられます。

Studioの一般的な制作手順として、基準を実装してからレスポンシブを設定します。

しかし、レスポンシブが崩れてしまう方の多くは、タブレットサイズやモバイルサイズなど基準以外をメインとして実装を進めてしまうことが多いです。

上級者の場合は問題ないケースも多いですが、初心者の場合はなるべく基準からサイト制作を行うようにしましょう。

3.デザインが複雑すぎる

Studioのレスポンシブが崩れてしまう原因としてデザインが複雑すぎるというのが挙げられます。

Studioではカスタムコードを使って部分的なコーディングを行わない場合、ブレイクポイントは最大で4つしか設定できません。

しかし、レスポンシブが崩れてしまう方の多くは、ブレイクポイントごとに設定するレスポンシブでは収まらないような複雑なデザインを作成してしまい、実装段階でミスに気付くことが多いです。

コーディングを行わない場合、デザイン完成前には必ず4つのブレイクポイントで対応できるデザインかどうかを確認するようにしましょう。

Studioのレスポンシブにおける正しいやり方

Studioでは最大4つのブレイクポイントに対してレスポンシブを設定することができます。

Studioでレスポンシブ対応をする際は2つのルールがあります。

1. 基準からサイト制作を行う
2. ブレイクポイントの大きい順にレスポンシブ設定を行う

それぞれ詳しく解説します。

1.基準からサイト制作を行う

1つ目のルールとしては、基準からサイト制作を行うことです。

基準画面で制作したサイトに対してタブレットやモバイル等の画面幅ごとにレスポンシブ設定を行うためです。

2.ブレイクポイントの大きい順にレスポンシブ設定を行う

基準の画面幅でデザインを作成した後は、ブレイクポイントの大きい順にレスポンシブ設定を行う必要があります。

Studioの場合は、スモール→タブレット→モバイル→ミニとレスポンシブ対応を行うと良いでしょう。

注意点としては、特定のブレイクポイントで設定した値は、その下のブレイクポイントに引き継がれることです。

今回の場合、スモールで設定した条件はその下のブレイクポイントに引き継がれます(タブレットやモバイルにも引き継がれます)

縦並びのレスポンシブ設定の3ステップ

横並びのリストをスマホサイズで縦並びに表示したいものの、上手く縦並びにできないことがあるかと思います。

その原因として、autoを誤って使っていることが多いので、ここでは縦並びのレスポンシブ設定のコツを3ステップに分けて解説します。

1.並び方を横並びから折り返し付きの横並びに変更する

1つ目のステップは、リストの並び順を折り返し付きのものに変更することです。

横並びと折り返し付きの横並びの違いとしては、リストが画面幅よりも大きくなった場合に、リスト内のアイテムを折り返すかどうかになります。

以下の画像のように横並びから折り返し付きの横並びに変更しましょう。

2.縦幅をautoに変更する

2つ目のステップは、縦幅をautoに変更することです。

縦幅のレスポンシブ設定が上手くいかない原因として、縦幅をpxで指定しているがあります。

そのため、縦幅をautoに変更しましょう。

3.auto内の画像などをpxに変更する

3つ目のステップは、auto内の画像などをpxに変更することです。

ステップ2で縦幅をautoに変更しましたが、その際にリスト内にある画像Boxの縦幅が消えてしまうことがあります。

これは、autoの中にBoxが存在する際に、そのBoxは絶対的な値(px)を持つ必要があるためです。

ちなみに画像にはimgとBoxが存在しており、imgを使う場合は、画像の高さが％であっても、縦幅が消えることなくauto内に存在するアイテムを表示することが可能です。

レスポンシブが反映されないときの対処法

レスポンシブが反映されない場合は、以下の3つを試してみると良いでしょう。

1. 1つのブレイクポイント内で複数のレスポンシブ設定を行っている
2. autoを誤って使っている
3. 基準ではないものからレスポンシブ設定を行っている

それぞれ詳しく解説します。

1.1つのブレイクポイント内で複数のレスポンシブ設定を行っている

レスポンシブが正しく反映されない原因として、1つのブレイクポイント内で複数のレスポンシブ設定を行っていることが考えられます。

Studioでは、コーディングを行う場合を除いて、iPhone11、iPhone12などの端末ごとのレスポンシブを設定することはできません。

あくまでも、モバイルやタブレットなどの各ブレイクポイント内で一括でしかレスポンシブを設定することはできないということを覚えておくと良いでしょう。

2.autoを誤って使っている

レスポンシブが正しく反映されない原因として、autoを誤って使っていることが考えられます。

autoは、autoを指定するアイテムの下層にあるアイテムのサイズに対してピッタリと縦幅や横幅を合わせることができるものです。

しかし、auto内のアイテムの縦幅・横幅の指定やアイテムをBoxで指定している場合には、理想とするレスポンシブを設定することができません。

そのような場合には、レイヤーを見ながら、autoを指定したいアイテムの下層にあるアイテムの縦幅・横幅の設定を見直すと良いでしょう。

3.基準ではないものからレスポンシブ設定を行っている

レスポンシブが正しく反映されない原因として、基準ではないものからレスポンシブ設定を行っていることが考えられます。

Studioでは、はじめに基準でサイト制作を行い、基準がある程度完成してから、それぞれのブレイクポイントに対してレスポンシブを設定します。

そのため、モバイルファーストのサイトを制作する場合でも、必ず基準からサイト制作を行う必要があります。

参考動画：レスポンシブ設定のコツを動画で解説

まとめ：基準を活用してStudioのレスポンシブ崩れを解消しよう

ここまでStudioのレスポンシブが崩れる原因と正しいやり方について解説しました。

Studio初心者のうちは以下を意識してサイト制作を行うことで効率が上がるでしょう。

また、ノクステックでは100名以上のStudio指導経験をもとに「【初心者向け】Studioの学習方法を徹底解説してみた！」という記事を書いているので、興味がある方はぜひチェックしてください。