レスポンシブ設定とは

レスポンシブ設定とは、デバイスの画面サイズや解像度に応じてWebサイトのデザインやレイアウトを最適化することです。

設定することで、どのデバイスからでも快適に閲覧できます。この記事ではStudioのレスポンシブ設定方法と設定時のコツをご紹介します。

Studioのレスポンシブ設定の基本

Studioでは、PC用にデザインした内容が自動的にタブレットやスマートフォンの画面サイズにも適応されます。

そのため、StudioではまずPC用の広い画面でデザインを作成し、その後スマートフォンやタブレットなどの小さい画面用に順番にデザインを調整します。

レスポンシブ設定の順番：

ボックスのサイズは「px」で指定すると固定されますが、「%」で指定すると親ボックスや画面幅に応じて自動的に調整されます。

横幅を「％」で指定すると、画面幅に応じて自動でサイズが調整されるため、「px」指定するよりも効率良くレスポンシブ設定できます。

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

ボックスの並ぶ方向は上下左右、折り返しから選択できます。

横並びのボックスをモバイルサイズで縦並びに変化させるには、並ぶボックスの１階層上の親ボックスを選択し、矢印を上下のどちらかに変更します。

ブレイクポイントごとに画像やテキストを非表示にすることができます。

標準で表示するナビゲーションメニューをモバイルでは非表示にし、ハンバーガーメニューを表示する場合などにご活用いただけます。詳しくは、ハンバーガーメニューはどのように作成できますか？をご覧ください。

下記手順で、PCサイズのデザインを基準にタブレット・モバイルなどのより小さい画面用のデザインを調整します。

注意：「画像」「テキスト文言」「グルーピング構造」は、サイズや色のようにブレイクポイントごとに変更することはできません。

画像などを出し分けたい場合は、ボックスの表示設定をご利用ください。詳しい手順は、PCとモバイルで表示する画像を変える方法をご覧ください。

エディタ上部のブレイクポイントを切り替えます。
デフォルトでは、タブレットやモバイルに変更できます。ブレイクポイントの編集方法は、ブレイクポイントの設定方法をご覧ください。
切り替えた状態で、ボックスを選択します。
サイズ・色・方向・配置などを変更します。
動作確認を行います。
設定した内容が意図したものになっているかサイト公開前に確認しておきましょう。

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

ライブプレビューで確認する方法
ブラウザ上でサイトの表示確認ができる「ライブプレビュー」機能を使い、手元にあるタブレットやスマホでチェックすることも可能です。

手元でサイトをチェックしながら調整すると、編集とチェックが同時に行えるため効率よく設定いただけます。