レスポンシブ設定

STUDIOサイトのレスポンシブ設定方法と設定のコツをご紹介します。様々なデバイスサイズに合わせてデザインを整え、レスポンシブなサイトにしましょう。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

STUDIOのレスポンシブと設定のコツ

この記事ではSTUDIOのレスポンシブ設定の仕組みと、設定のコツをご紹介します。

Webサイトのレスポンシブ対応とは

レスポンシブ対応とは、Webサイトのデザインやレイアウトがサイト閲覧者が使用するデバイス(例: デスクトップPC、タブレット、スマートフォンなど)の画面サイズに応じて自動的に調整・最適化されることを指します。

以下の画像は、画面サイズに合わせて要素のサイズやレイアウトが調整されているWebサイト例です。

異なるデバイスサイズで調整されたWebサイトの例

STUDIOレスポンシブ設定の仕組み

STUDIOエディタでは「ブレイクポイント」と呼ばれるWebサイトのデザインやレイアウトが切り替わる特定の画面幅が設定できます。このブレイクポイントごとに調整してレスポンシブを対応します。

ブレイクポイントは、エディタ上部で設定・調整できます。詳しくは以下の記事をご覧ください。

STUDIOエディタ内のブレイクポイント設定画面。エディタ上部にブレイクポイントのオプションが表示されている

「画像」「テキスト文言」「グルーピング構造」はブレイクポイントごとに変化させることはできません。必要に応じて、ボックスの表示設定をご活用ください。

レスポンシブ設定の流れ

ブレイクポイントの「基準」を選び、基本となるレイアウトやデザインを作成します。

PCサイズ(基準)で作成したレイアウトやスタイルはより小さな画面幅へ自動的に引き継がれます。そのため以下の画像で示すように、まずは「基準でデザインして、そのデザインを元により小さな画面サイズ用のデザインやレイアウトを調整する」という流れで設定を行います。

ブレイクポイントごとに別途指定したスタイルは、ハイライト表示されます。例えば、タブレットでは緑モバイルではオレンジで表示されます。

ブレイクポイントごとのスタイルハイライト例

レスポンシブ設定の解除方法

指定したブレイクポイントごとのスタイル指定は、個別に解除ができます。ハイライトされたスタイルにカーソルを当てると表示される「×」をクリックして解除します。

レスポンシブ設定の解除方法を示す画面

レスポンシブ設定のコツ

ブレイクポイントごとにレイアウトやデザインを調整する際に、役立つ機能などをご紹介します。

サイズ単位を意識して指定する

STUDIOではボックスのサイズ単位が指定できます。

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

STUDIOでのサイズ単位の指定例。画面幅に応じて自動で調整される%単位で指定されたボックスの例

他にも便利なサイズ単位が指定できます。サイズ単位の詳細については、以下の記事をご覧ください。

方向でボックスの並びを調整する

ボックスの並ぶ方向は上下左右、折り返しから選択できます。例えば、横並びのボックスをモバイルサイズで縦並びに変化させるには、並ぶボックスの1階層上の親ボックスを選択し、表示される矢印を上下のどちらかに変更します。

ボックスの並び方の方向調整方法を示す画面。親ボックスの矢印を下に変更している様子

方向の他にもボックスをどのように配置するか指定することも可能です。詳しくは以下の記事をご覧ください。

表示設定を利用する

ブレイクポイントごとにボックスを非表示にすることができます。例えば、標準では表示するナビゲーションメニューをモバイルでは非表示にし、ハンバーガーメニューを表示する場合などでご活用いただけます。

ブレイクポイントでのボックス非表示設定例。ナビゲーションメニューがモバイルでは非表示に設定されている様子

詳しくは以下の記事をご覧ください。

レスポンシブ設定をチェックする方法

デザインエディタ上でスクリーンの幅を伸縮させると、ブレイクポイント間の画面幅での表示が簡単に確認できます。レイアウト崩れや考慮もれを探すことができます。

エディタ上でレスポンシブ時の状態を確認操作する画面

また、ブラウザでサイトがプレビューできる「ライブプレビュー」機能を使い、手元にあるタブレットやスマホでサイト表示がチェックできます。手元でサイトをチェックしながらエディタで調整を行うと、編集とチェックが同時に進められるので作業効率がアップします。

iPad アイパッド

こちらの回答で解決しましたか?