STUDIOのレスポンシブと設定のコツ
この記事ではSTUDIOのレスポンシブ設定の仕組みと、設定のコツをご紹介します。
Webサイトのレスポンシブ対応とは
レスポンシブ対応とは、Webサイトのデザインやレイアウトがサイト閲覧者が使用するデバイス(例: デスクトップPC、タブレット、スマートフォンなど)の画面サイズに応じて自動的に調整・最適化されることを指します。
以下の画像は、画面サイズに合わせて要素のサイズやレイアウトが調整されているWebサイト例です。
STUDIOレスポンシブ設定の仕組み
STUDIOエディタでは「ブレイクポイント」と呼ばれるWebサイトのデザインやレイアウトが切り替わる特定の画面幅が設定できます。このブレイクポイントごとに調整してレスポンシブを対応します。
ブレイクポイントは、エディタ上部で設定・調整できます。詳しくは以下の記事をご覧ください。
※「画像」「テキスト文言」「グルーピング構造」はブレイクポイントごとに変化させることはできません。必要に応じて、ボックスの表示設定をご活用ください。
レスポンシブ設定の流れ
ブレイクポイントの「基準」を選び、基本となるレイアウトやデザインを作成します。
PCサイズ(基準)で作成したレイアウトやスタイルはより小さな画面幅へ自動的に引き継がれます。そのため以下の画像で示すように、まずは「基準でデザインして、そのデザインを元により小さな画面サイズ用のデザインやレイアウトを調整する」という流れで設定を行います。
ブレイクポイントごとに別途指定したスタイルは、ハイライト表示されます。例えば、タブレットでは緑、モバイルではオレンジで表示されます。
レスポンシブ設定の解除方法
指定したブレイクポイントごとのスタイル指定は、個別に解除ができます。ハイライトされたスタイルにカーソルを当てると表示される「×」をクリックして解除します。
レスポンシブ設定のコツ
ブレイクポイントごとにレイアウトやデザインを調整する際に、役立つ機能などをご紹介します。
サイズ単位を意識して指定する
STUDIOではボックスのサイズ単位が指定できます。
例えば以下画像内の横に並ぶボックスの横幅を「%」で指定すると、画面幅に応じて自動でサイズが調整されるため、ブレイクポイント毎に「px」で数値を上書きするよりも効率よく設定できます。
他にも便利なサイズ単位が指定できます。サイズ単位の詳細については、以下の記事をご覧ください。
方向でボックスの並びを調整する
ボックスの並ぶ方向は上下左右、折り返しから選択できます。例えば、横並びのボックスをモバイルサイズで縦並びに変化させるには、並ぶボックスの1階層上の親ボックスを選択し、表示される矢印を上下のどちらかに変更します。
方向の他にもボックスをどのように配置するか指定することも可能です。詳しくは以下の記事をご覧ください。
表示設定を利用する
ブレイクポイントごとにボックスを非表示にすることができます。例えば、標準では表示するナビゲーションメニューをモバイルでは非表示にし、ハンバーガーメニューを表示する場合などでご活用いただけます。
詳しくは以下の記事をご覧ください。
レスポンシブ設定をチェックする方法
デザインエディタ上でスクリーンの幅を伸縮させると、ブレイクポイント間の画面幅での表示が簡単に確認できます。レイアウト崩れや考慮もれを探すことができます。
また、ブラウザでサイトがプレビューできる「ライブプレビュー」機能を使い、手元にあるタブレットやスマホでサイト表示がチェックできます。手元でサイトをチェックしながらエディタで調整を行うと、編集とチェックが同時に進められるので作業効率がアップします。
iPad
アイパッド