【STUDIO】レスポンシブ設定をしてみよう
前回の担当ブログでご紹介したノーコードツールSTUDIOですが、今回はさらに詳しくSTUDIOでのレスポンシブ対応についてご紹介したいと思います。
その前にSTUDIOの概要を知りたいという方は以下の記事をご覧ください。
レスポンシブとは何か
PCかスマホか、Webサイトを利用する機器によってディスプレイの大きさは変わります。そのため、どんな画面サイズでもわかりやすい画面表示が必要となってきます。
このように、「端末のスクリーンサイズに合わせて効率的にデザインを切り替えること」をレスポンシブといいます。
基準（PC画面サイズ）を作り終えた後に行う
STUDIOにおいてスタイルは、より大きな画面サイズから参照されます。そのため、最初に基準サイズとなるPCサイズを、先にSTUDIO上で完成させておく必要があります。
またスタイルに変更を加えた際も同様に、大きいサイズから参照されるようになっています。
なるべくレスポンシブを使わない設定にする
また最初にレスポンシブを考慮した設定にすることで、画面サイズが小さくなった際に切替の工数を減らすことができます。その結果、作業量を減らしたり後からの修正も楽になります。
試しに青と赤の2つのボタンを作成しました。
青いボタンには縦と横の幅をpxで設定しています。
一方で、赤いボタンには縦と横の幅をautoに、パディングで余白を設定しております。
この2つのボタンは、画面が小さくなった際の切り替わる工数が異なります。青いボタンは縦と横の幅や文字サイズの調整が必要なのに対して、赤いボタンはパディングと文字サイズの調整のみになります。
このように最初にレスポンシブに考慮した設定をしておくことで、設定する工数を減らすことができ、より簡潔で分かりやすい設計を作ることができます。
まとめ
今回はSTUDIOにおいてのレスポンシブ設定の基本をご紹介しました。次回はさらに詳細に、要素ごとのレスポンシブ設定のコツをご紹介したいと思います。
STUDIOでサイトの制作をしてほしいという方へ。弊社では、STUDIOにてサイトの制作依頼も承っておりますので、お気軽にご相談いただけますと幸いです。
