レスポンシブとは？

レスポンシブ設定とは、PCやスマホなどデバイスの画面サイズや解像度に応じて

デザインやレイアウトを最適化することです。閲覧者の満足度向上に繋がるため、非常に重要な要素です。

Studioのエディタで作成したデザイン（色やサイズなど）は、大きい画面から小さい画面に自動的に引き継がれます。

つまり、PCサイズ用にデザインを作れば、タブレットやモバイルサイズごとにゼロからデザインする必要はありません。自動的にタブレットやモバイルサイズにデザインが引き継がれます。

引き継がれたデザインは微調整（サイズや並ぶ方向などの調整）が必要ですが、それだけで最適化することができます。

ブレイクポイント*が基準になっているか確認して、ボックスやパーツを組み合わせてレイアウトを組みます。その後、色やサイズなどを調整してデザインしていきます。

PCサイズのデザインを作る時に、ポイントを押さえておくとその後の調整が楽になります。

*ブレイクポイントとは、レスポンシブデザインでレイアウトが変更される画面幅のことです。ブレイクポイントは追加・削除したり、サイズの調整が可能です。

PCサイズのデザインが整ったら、ページ外をクリックして画面上部のブレイクポイントを切り替え、タブレット・モバイルの必要なデザイン調整を行います。

調整したデザインをライブプレビューやエディタ上で確認します。再調整が必要な箇所がないか公開前にあらかじめ確認しておくことをオススメします。

ライブプレビューで確認

ライブプレビューとは、Google Chromeなどのブラウザ上でWebサイトのプレビューができる機能です。画面右上のライブプレビューボタンをクリックし、表示されるURLにアクセスしてください。

手元のスマホでQRコードを読み込めば、スマホでの表示確認ができます。ライブプレビューは編集内容がすぐに反映されるため、ライブプレビューを確認しつつエディタで編集すると効率よく調整ができます。

エディタ上で確認

ページの端をドラッグすると画面の伸縮が可能です。ブレイクポイント間のデザインを確認する際にご活用ください。

他にも、ChromeデベロッパーツールやResponsive Viewerのような拡張機能を使うと、複数デバイスでの表示が一括で確認可能です。

PCサイズでデザインする時に、ボックスの組み方やサイズ単位に気をつけてなるべくレスポンシブ設定が必要ないようにしておくと作業が短縮できます。

px以外の単位（%, auto, flexなど）を意識して使うことでより柔軟なレイアウトが可能になります。

例１

ボックスの横幅を%で指定すると、親ボックスに応じてサイズが調整されるため、画面サイズが変わっても適切に調整されます。

例２

ボックスが中に入っているボックスの縦幅は基本的にautoに設定します。autoを設定すると、中のボックスの高さに応じて外側のボックスの高さが自動調整されます。

ボックスの並ぶ方向は上下左右、折り返しから選択できます。横並びのボックスをモバイルサイズで縦並びにするには、次のどちらかの方法で設定を行います。

1. PCサイズで折り返しを設定する

折り返しを設定すると、画面が狭くなった際に自動で入りきらなくなったボックスが折り返します。

2. モバイルサイズで上下どちらかに設定する

横に並ぶボックスの親ボックスを選択し、矢印を上下のどちらかに変更します。

ブレイクポイントごとに画像やテキストを非表示にすることができます。ハンバーガーメニューを表示する場合などにご活用いただけます。

レスポンシブ設定に関するよくある質問をまとめてご紹介します。設定中に困った際にはこちらをご確認ください。

以上がレスポンシブ設定の基本です。次の記事では、ブログなどのコンテンツを簡単に管理できるCMSという機能について解説します。

次の記事：CMSの使い方

コレクション目次