レスポンシブデザインを設定する
レスポンシブ設定とは、デバイスの画面サイズや解像度に応じてWebサイトのデザインやレイアウトを最適化することです。
設定をすることで、どのデバイスからでも快適に閲覧できます。この記事では、Studioのレスポンシブ設定方法と設定時のコツを紹介します。
Studioにおけるレスポンシブ設定の考え方
Studioでは、PC画面サイズのデザインをデフォルトとしています。レスポンシブ設定をしていなければ、その内容や構成が自動的にタブレットやスマートフォンの画面サイズにも適用されます。
そのため、まずPC画面サイズのデザインを完成させてから、タブレット、そしてスマートフォンの順番で、画面サイズが大きいものから小さいものへとレイアウトを調整しましょう。
この手順で進めると、全体のレイアウトが整いやすく、失敗が少なくなります。
レスポンシブ設定の順番は以下の通りです。
PCサイズのデザインを作成
タブレットサイズのデザイン調整
モバイルサイズのデザイン調整
Studioのレスポンシブ設定でできること
Studioのレスポンシブ設定では、ブレイクポイントごとに変更できる項目と、できない項目があります。
ブレイクポイントごとに変更できる項目（例） | サイズ、色、方向、配置、表示/非表示 |
ブレイクポイントごとに変更できない項目（例） | 画像、テキスト文言、グルーピング構造 |
Tips：ブレイクポイントごとに画像やテキストの内容を出し分けたい場合は、該当ボックスの表示設定を利用してください。詳しい手順は、PCとモバイルで表示する画像を変える方法をご覧ください。
レスポンシブ設定の手順
以下の手順でレスポンシブ設定を行います。 まずデフォルト（PCサイズ）のデザインを完成させてから、画面サイズごとに順を追って調整します。 大きいサイズから小さいサイズへと順番に設定することで、全体のレイアウトが安定しやすくなります。
Point：ブレイクポイントの値や、閲覧デバイスの選択肢を編集する方法は、ブレイクポイントの設定方法をご覧ください。
レスポンシブ設定項目のハイライト
レスポンシブ設定によって、ブレイクポイントごとに値が上書きされた項目は、右パネルの枠の色が変化します。
タブレットおよびそれ以下のサイズに適用：黄緑色
モバイルおよびそれ以下のサイズに適用：オレンジ色
レスポンシブ設定のコツ
次のポイントを意識するとよりスムーズに設定できます。
1. 画面幅に応じて変動するサイズ単位を使う
ボックスのサイズ単位を指定する際には、サイズが固定される「px」よりも、「%」など画面幅に応じて変動する単位の使用がおすすめです。
「px」を使う場合
どのデバイスでも同じ幅で表示されるため、画面が小さい端末ではレイアウトが崩れたり、はみ出たりすることがあります。
サイト閲覧者がブラウザの表示サイズを変更しても、デザインが柔軟に切り替わりません。
「%」などの相対単位を指定する場合
親ボックスや画面幅に合わせてサイズが自動調整されるため、様々なデバイスで見やすいレイアウトになります。
「%」のほか、[vw] や [em] なども用途に応じて活用できます。
Tips：詳しくはサイズ単位のヘルプ記事をご覧ください。
2. 閲覧デバイスに合わせて、ボックスの並び方向を変更する
閲覧するデバイスにより、見やすいレイアウトは異なります。 画面幅が広いPCでは、複数のボックスを横並びにすることで、ページ内の情報を一覧性高く表示できます。一方、画面幅が限られるスマートフォンでは、同じボックスを縦並びに変更すると、読みやすく整理された表示になります。
ボックスの並びは、ブレイクポイントごとに[方向]を[下][右][折り返し][左][上]から選択します。
例：複数のボックスを、PC画面では横並びにし、モバイルサイズでは縦並びにする方法
並ぶボックスの1階層上の親ボックスを選択します。
画面幅が[デフォルト]の状態で、[方向]の矢印を[→]にします。
同じボックスを選択した状態で、ブレイクポイントを[モバイル]に切り替えます。
[方向]の矢印を[下]にします。
詳しい手順は、ボックスを横並び / 縦並びにしたいですをご覧ください。
3. 閲覧デバイスに合わせて、要素の表示/非表示を切り替える
閲覧デバイスごとに必要な要素だけを表示すると、使いやすいデザインになります。例えばPCではナビゲーションメニュー、モバイルではハンバーガーメニューだけを表示することも可能です。
表示/非表示の切り替えは、レイヤーパネル右側の目のアイコンでブレイクポイントごとに設定できます。詳しい手順は画面幅・ブレイクポイントごとにボックスの表示設定をするをご覧ください。
レスポンシブ表示を確認する
設定内容は、エディタやライブプレビューで確認できます。公開前の確認でレイアウト崩れやミスを防ぎましょう。
エディタ上で確認する方法
エディタ画面下部のツールバーでデバイスを切り替えて確認します。
エディタ上でスクリーンの幅をドラッグして伸縮させながら確認します。
ライブプレビューで確認する方法
ブラウザ上でサイトの表示確認ができるライブプレビュー機能を使います。
ライブプレビューを開いたPCブラウザで、ウィンドウの幅を伸縮させて確認します。
タブレットやスマホでライブプレビューURLを開き、実際のデバイスでの表示を確認します。
注意：ライブプレビューでのレスポンシブ確認
ライブプレビューでの表示は、実際に閲覧しているデバイスの画面幅に応じて切り替わります。ツールバーで選択中のブレイクポイントは、プレビューでの表示に影響しません。
例えば、デザインエディタ上ではツールバーで[デフォルト]を選択中でも、ライブプレビューをモバイル端末で閲覧する場合、モバイル用のデザインが表示されます。
レスポンシブ設定を解除する手順
設定したブレイクポイントごとのスタイルは、個別に解除できます。
ツールバーでブレイクポイントを切り替えます。
レスポンシブ設定が適用された項目の左にある[上書きを解除]の矢印をクリックします。
関連記事