どんなデバイスでも美しく表示。崩れにくいレスポンシブを設定するコツ

こんにちは、STUDIOのSaikaです！
この記事ではすぐに試せるSTUDIOのレスポンシブ設定時のコツをご紹介します。

STUDIOではWebサイトを自由度高くデザインし、手軽に公開することができます。自分で作り込んだWebサイトは、多くの人に見てもらいたいものです。

しかし、Webサイトを閲覧する環境はスマートフォンからPCまで幅広く、見るデバイスによってテキストが小さすぎたり、画像が見切れていたりして表示が崩れてしまうことも。有益な情報や魅力的なデザインのWebサイトでも、適切に表示されないとWebサイトとしての役割を果たせません。

そこで本記事では、「エディタでは完璧に見えるのに、実際のデバイスでは崩れてしまう」といったお悩みに対応する、レスポンシブ設定のコツと設定後のチェック方法をご紹介します！

STUDIOレスポンシブの仕組み

そもそもレスポンシブデザインとは、何を指すのでしょうか？
簡潔に言うと、デバイスの画面サイズや解像度に合わせてWebサイトのデザインやレイアウトを最適化することです。レスポンシブ対応されたWebサイトはどのデバイスからアクセスしても見やすく、ユーザー体験向上に繋がります。

そのようなWebサイトをSTUDIOで作る際に鍵となるのが「ブレイクポイント」です。ブレイクポイントはWebサイトのデザインやレイアウトが変わる特定の画面幅。STUDIOではエディタ上部で設定し、この画面幅ごとにデザインやレイアウトを調整します。

ブレイクポイントは一般的なPCサイズである「基準」を含み、最大５つ設定できます。STUDIOでは基準からより小さな画面へ自動的にスタイルが引き継がれる特徴があるため、「基準でレイアウトを制作し、それを基にタブレットやモバイルのサイズへ調整する」といった流れでレスポンシブを設定します。これはレスポンシブ設定の基本となるので、覚えておくとスムーズに設定できます。

レスポンシブ設定4つのコツ

1. ボックス構造を意識してレイアウトを組もう

STUDIOの特徴の一つはボックスレイアウト。ボックスを積み上げたり、入れ子にしてサイトをデザインします。実は、レスポンシブを設定する上でもこのボックス構造を意識することはとても重要です！

具体的には、すべてのブレイクポイントでボックスの構造を統一してレイアウトを組むことです。

ブレイクポイントごとに異なるボックス構造は設定できないため、例えば画像のようにPCとモバイルサイズでタイトルの配置を変えるとボックス構造が変わってしまいます。このような場合には、PCで表示するタイトルとモバイルで表示するタイトルをそれぞれ用意し管理することになります。

もちろん、デザインによってはボックス構造が変わる箇所があるかもしれません。ですが、このような箇所がサイト全体で多く存在すると管理が煩雑になってしまいます。

慣れるまでは時間がかかるかもしれませんが、レスポンシブを考慮したボックス構造やデザイン組みを取り入れてみてください。

2. コンテンツの最大幅を設定しよう

「レスポンシブ」と聞くと、多くの方がスマートフォンやタブレットなどのモバイルデバイスへの対応を思い浮かべるかもしれません。しかし、大型ディスプレイなどの大画面での見え方にも注意が必要です。

横幅の設定によっては、意図せず大画面でコンテンツが横に広がってしまうなんてことも。

そんな状況を避けるために「コンテンツの最大幅（max-width）」を設定しましょう。これは、Webサイト上の要素やセクションが持つことのできる最大の横幅のことで、STUDIOでの設定はとても簡単です！

「セクション」ボックスを利用すると、Webサイトでよく目にする横幅100%のボックス内に横幅1200pxのボックスを配置するような構造が１つのボックスで設定できます。

背景色を横幅いっぱいに設定したい場合は、セクションボックスではなく通常のボックスを入れ子にして横幅を指定。最大幅が設定できれば、そのボックス内に通常通りデザインを組み込んでいくだけです。

3. サイズ単位を効果的に利用しよう

STUDIOのレスポンシブでつまずく原因の多くはボックスのサイズによるもの。「エディタでは問題ないのに、手元のスマートフォンでは崩れている」といった状況もサイズ単位の見直しで解消するケースがほとんどです。

エディタでブレイクポイント毎にデザイン調整していることを考えると不思議に思うかもしれません。しかしこれは、サイトを閲覧するデバイスの画面幅（解像度）が異なるために起こります。

例えばブレイクポイントのモバイルを540px。ミニを320pxに設定したサイトを画面幅（解像度）が390pxのスマートフォンで閲覧した場合、指定したいずれのブレイクポイントのデザインもそのままは適用はされません。この場合、モバイルで指定したデザインが390pxの画面に収まるように表示されます。

崩れることなくブレイクポイント間の表示を保つためには、ボックスの縦幅や横幅にサイズ単位「%」「auto」「flex」を意識して使うことが大切です！次のサイズ単位の特徴と実装例を参考に、まずは使ってみましょう！

サイズ単位と特徴

実装例１： auto

よくある実装ミス：

「px」で縦幅を指定しているボックスの場合。高さが固定値であるため画面幅が狭くなった際に、画像のように要素が意図せずはみ出てしまいます。

解決策：

ボックスの縦幅は特別な意図がない限り「auto」の設定がオススメです。
「auto」を設定したボックスは内包する要素のサイズに応じて幅が自動で調整されるため、意図せずはみ出てしまうといった状況が回避できます。横幅も同様で基本的に「auto」を使うと崩れにくくなります。

実装例２： flex

よくある実装ミス：

同一階層に横幅を「px」で指定した画像ボックスと「auto」で指定したテキストボックスを配置したケース。この場合だと画面幅が狭くなった際に内包されたボックスがはみ出てしまうことがあります。

解決策：

このような配置では画像ボックスの横幅を「px」で。テキストボックスを「1flex」で指定すると、画面幅が狭くなった時もテキストが親ボックスからはみ出ずに自動で折り返すようになります。

実装例３：%

横幅を「%」で指定すると、画面幅に応じて自動でサイズが調整されるため、ブレイクポイント毎に「px」で数値を上書きするよりも効率よく設定できます。

4. ボックスの方向を活用しよう

以下画像のようにテキストを左側、画像を右側に配置したボックスを左右反転させていくつか並べる場合、あなたはどのようにテキストと画像を入れ替えますか？

ボックスの方向を変更する方法や、ボックスの階層構造を直接変更する方法があります。動画では紫塗りのボックスが階層構造を変更したもの。青塗りが方向を変更したものです。

階層構造を変更したボックスでは他の要素とは違い、モバイルサイズ時に上から「画像→テキスト」の並び順になっています。他のボックスと構造が異なることで管理が煩雑になり、レスポンシブ設定時に混乱を招くことがあります。

構造ではなくボックスの方向で並べ替えると、構造はそのままにレイアウトが変更できるのでオススメです。

些細なテクニックかもしれませんが、似たようなレイアウトを多用するサイトでは影響範囲が大きいです。ぜひ取り入れてみてください！

レスポンシブの見え方をチェックしよう

レスポンシブの設定が済んだら公開前にチェックしましょう！公開した後に崩れに気づいてしまうといった状況を避けることができます。

デザインエディタでチェック

デザインエディタでスクリーンの幅を広げたり狭めたりすると、画面幅がシームレスに変更でき、レイアウト崩れや考慮もれを簡単に探すことができます。

実機やツールでのチェック

ブラウザでサイトがプレビューできる「ライブプレビュー」機能を使うと、手元にあるタブレットやスマートフォンで手軽にサイト表示が確認できます。PCではチェックできないタップ操作なども同時に確認できるためオススメです。

さらに効率的に作業したい場合は、手元のデバイスにライブプレビューでサイトを表示させながらエディタで編集してみてください。編集とチェックが同時に進められるので作業スピードがアップします。

その他にも、Chrome デベロッパー ツール や Responsive Viewer のような拡張機能を使うと、複数のデバイス表示が一括でチェック可能。サクッと確認したい場面で役立ちます。

最後に

今回は、レスポンシブ設定のコツと設定後の確認方法をご紹介しました。すぐに取り入れられる内容ばかりなので、制作中のサイトやこれから作るサイトのレスポンシブ設定時に参考にしてみてください。

あなたがレスポンシブ対応時に普段実践していることやコツを STUDIO Community や X でシェアしてみませんか？STUDIOメンバーもあなたの投稿を楽しみにしています！