レスポンシブデザインとは?

レスポンシブデザインは、タブレットやモバイルなど異なるさまざまな画面サイズに合わせて、デザインを調整し、最適な表示にします。

インターネットトラフィックの半分以上がモバイルからのアクセスの現代では、レスポンシブデザインは基本です。

レスポンシブに対応していないサイトでは、どの画面サイズでも同じデザインのページが表示されるため、モバイルの場合、ユーザーは画面を拡大してテキストを読んだり、コンテンツを見なくてはなりません。レスポンシブ対応の場合は、それぞれのビューポートに合わせてレイアウトやテキストを最適化し表示されます。

STUDIOでのレスポンシブデザイン

異なる画面サイズでページを表示する

ページを複数の画面サイズで表示する方法は2つあります。

  1. レスポンシブバーを使用します。レスポンシブバーはトップバーの下にあります。デスクトップからモバイルまで、さまざまなサイズのブレイクポイントでページを確認することができます。
  2. ページの両端をドラッグして、画面サイズを変更します

レスポンシブ対応にするには

Webサイトをレスポンシブ対応にするときに、考慮すべき点がいくつかあります。

  1. テキストや画像サイズ、マージン、パディングを調整する

各ブレイクポイントに合わせて、テキストやコンテンツサイズの調整を行う必要があります。

最大のブレイクポイント(デスクトップLサイズ)から中心に向かって進みます。

ポイント:

  • レスポンシブモードでテキストのサイズ、方向、配置を編集した場合、デフォルトモード(デスクトップ)で編集した内容は影響しません。
  • 常に、デフォルトのデスクトップモードから制作を始めてください。モバイルの状態からコンテンツを追加しても、それより大きな画面のサイズには適応しません。

  2. レイアウトを調整する

以下の例のように、小さい画面サイズに合わせてレイアウトを調整する必要がある場合があるかもしれません。レイアウト調整については、こちらをご確認ください。

   3. 特定のデバイスでは要素、またはコンテンツを非表示にする

小さい画面サイズではスペースが限られているので、ページを混雑させないためにいくつかの要素を非表示にすることができます。多くの場合、スペースに余裕がないためヘッダーメニューを非表示にする必要があります。

ボックスタブのトップバーの左に「表示」設定があります。

要素を非表示にするには:

  1. 要素を選択する
  2. トップバーからボックスタブを開きます
  3. トップバーの左にある「表示」をクリックし、要素を非表示にしたいデバイスのチェックを外します

4. ハンバーガーメニューを作成する

ヘッダーメニューをモバイルやタブレットでは簡単に表示できないため、レスポンシブデザインではハンバーガーメニューの使用が一般的です。

ハンバーガーメニューの作成については、こちらをご確認ください。

Did this answer your question?