今回は、ノーコードツールSTUDIOでレスポンシブ対応を楽にする3つのコツを紹介します。
「STUDIOのレスポンシブ対応が苦手、、、」
「STUDIOのレスポンシブ対応のコツとかないのかな?」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する3つのコツを実践していただくと、初心者の方でもレスポンシブ対応がかなり楽になりますので、ぜひ一緒に作成していきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を50個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでレスポンシブ対応を楽にする3つのコツ
![](https://design-yandy.com/wp-content/uploads/2021/02/ddd5355177914edee8baa6810852067f.jpg)
それでは、ノーコードツールSTUDIOでレスポンシブ対応を楽にする3つのコツをを紹介します。
まず、レスポンシブ対応を楽にする上で重要なポイントは、PC画面のサイズで作成する際に、レスポンシブ対応を意識して作成することです。
具体的には、3つのことを意識して作成して下さい。
① 文字ボックスの縦幅はautoにする
② ボックスの横幅の単位を%にする
③ ボックスの左右にパディングを設定する
それでは3つのコツについて解説していきます。
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
⓪ 事前準備
まずは、事前準備として、今回説明で利用するテンプレートのサイトにアクセスします。
まずは、STUDIOのサイトにアクセスし、右上の「新しいプロジェクト」をクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_01_11_14.静止画002-1280x720.jpg)
そして、今回はSTUDIOのテンプレートを利用して、「レスポンシブ対応のコツ」を解説します。
STUDIOのテンプレートは、レスポンシブ対応のテクニックが多く利用されているため、レスポンシブ対応を学ぶ上で、とても勉強になるかと思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_01_16_27.静止画003-1280x720.jpg)
今回は、こちらの「Mary Jones」のテンプレートを利用して、解説していきたいと思います。
「Mary Jones」のテンプレートの上にマウスオーバーし、「このテンプレートを選択」をクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_01_33_26.静止画004-1280x720.jpg)
そして、「プロジェクト名」を入力します。
今回は、「プロジェクト名」に「レスポンシブ対応」と入力し、「作成」をクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_01_55_10.静止画005-1280x720.jpg)
これでテンプレートのサイトの管理画面にアクセスできました。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_07_24.静止画006-1280x720.jpg)
それでは早速、3つのコツをご説明します。
① 文字ボックスの縦幅はautoにする
まず、1つ目の「文字ボックスの縦幅はautoにすること」について解説します。
たとえば、こちらの「SERVICE」の箇所で説明すると、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_17_24.静止画007-1280x720.jpg)
ここに、2つのの文字ボックスがあるかと思いますので、左側の文字ボックスを選択し、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_25_21.静止画008-1280x720.jpg)
上部のパネルから「ボックス」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_29_19.静止画009-1280x720.jpg)
すると、「ボックス」の「縦幅」が「auto」になっていることがわかると思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_36_29.静止画010-1280x720.jpg)
これが1つ目の重要なポイントの「文字ボックスの縦幅はautoにすること」です。
この文字ボックスの縦幅を「auto」にしておくことで、スマートフォンのサイズに変更した場合に、2つの文字ボックスの縦幅が維持された状態で表示されるので、スマートフォンのサイズで編集をする必要がなくなります。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_02_56_12.静止画011-1280x720.jpg)
一旦、「1,280px」のPC画面のサイズに戻しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_03_08_02.静止画012-1280x720.jpg)
一方、左側の文字ボックスの「縦幅」を「auto」から「px」の単位に変更しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_03_15_12.静止画013-1280x720.jpg)
すると、スマートフォンのサイズに変更した場合、このように文字ボックスに文字が入りきれずに、デザインが崩れてしまいます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_03_23_25.静止画014-1280x720.jpg)
このようになった場合は、スマートフォンサイズの編集画面で、「縦幅」を長くして調整する必要があり、手間がかかってしまいます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_03_35_16.静止画015-1280x720.jpg)
そのため、PC画面で作成する際に、「文字ボックスの縦幅はautoにすること」を必ず意識するようにして下さい。
② ボックスの横幅の単位を%にすること
次に、2つ目の「ボックスの横幅の単位を%にすること」について解説します。
たとえば、こちらの「BLOG」の箇所で説明すると、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_03_54_17.静止画016-1280x720.jpg)
ここに、写真と文字の要素が入ったボックスが3つあるかと思いますので、左側のボックスを選択して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_08_10.静止画017-1280x720.jpg)
そして、上部のパネルの「ボックス」の「横幅」を見てみると、単位が「%」になっていることがわかると思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_15_23.静止画018-1280x720.jpg)
これが2つ目の重要なポイントの「要素が入ったボックスの横幅の単位を%にすること」です。
このように、ボックスの横幅の単位を「%」にしておくことで、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_26_22.静止画019-1280x720.jpg)
画面のサイズを変更した場合に、それぞれのボックスの横幅が均等な長さに調整されるので、レスポンシブ対応の手間が省けます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_35_17.静止画020-1280x720.jpg)
一旦、「1,280px」のPC画面のサイズに戻しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_46_15.静止画021-1280x720.jpg)
一方、3つのボックスの「横幅」の単位を「%」から「px」に変更してみましょう。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_04_56_10.静止画022-1280x720.jpg)
そして、画面のサイズを「iPad」に変更して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_05_03_16.静止画023-1280x720.jpg)
すると、このように3つのボックスが画面に入りきれない状態となります。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_05_09_25.静止画024-1280x720.jpg)
このようになった場合は、「iPad」のサイズの編集画面で、それぞれのボックスの「横幅」を「31%」くらいに変更しなければなりません。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_05_23_06.静止画025-1280x720.jpg)
そのため、PC画面で作成する際に、「ボックスの横幅の単位を%にすること」を必ず意識するようにして下さい。
③ ボックスの左右にパディングを設定すること
最後に、3つ目の「ボックスの左右にパディングを設定すること」について解説します。
たとえば、こちらの「ABOUT」の箇所で説明すると、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_05_38_28.静止画026-1280x720.jpg)
ここに、文字や写真の要素が入ったボックスがあるかと思います。
このボックスを選択すると、左右の「パディング」が「24」になっており、ボックスの左右に余白が設定されていることがわかると思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_05_54_11.静止画027-1280x720.jpg)
これが3つ目の重要なポイントの「ボックスの左右にパディングを設定すること」です。
このように、ボックスの左右にパディングを設定することおくことで、余白をうまく使うことができ、サイトのデザインも良くなりますし、画面のサイズを変更した場合に、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_16_24.静止画030-1280x720.jpg)
ボックスの左右に余裕がありますので、サイトを見た時の窮屈なイメージがなくなります。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_18_14.静止画029-1280x720.jpg)
一旦、「1,280px」のPC画面のサイズに戻しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_26_05.静止画031-1280x720.jpg)
一方、ボックスの左右の「パディング」を「0」に変更してみましょう。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_37_20.静止画032-1280x720.jpg)
そして、画面のサイズを「1024px-Laptop」に変更してみると、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_41_22.静止画034-1280x720.jpg)
左右の余白がないので、かなり窮屈なイメージになるかと思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_44_10.静止画033-1280x720.jpg)
このテンプレートは、スマートフォンサイズでも
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_53_21.静止画035-1280x720.jpg)
パディングが設定されているので、
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_06_56_12.静止画036-1280x720.jpg)
先ほど、PC画面で「パディング」を「0」に変更しても、左右の余白がしっかりありますが、自身で1からこのようなものを作る際は、PC画面で作成する際に、ボックスの左右にパディングを設定していないと、このようにスマートフォンのサイズでも窮屈なイメージになります。
![](https://design-yandy.com/wp-content/uploads/2022/09/23.00_07_15_11.静止画037-1280x720.jpg)
そのため、PC画面で作成する際に、「ボックスの左右にパディングを設定すること」を必ず意識するようにして下さい。
これで、「レスポンシブ対応を楽にする3つのコツ」の紹介は終了です。
まとめ
![](https://design-yandy.com/wp-content/uploads/2021/02/shutterstock_547321147-e1554528134787-1200x720.jpg)
今回は、ノーコードツールSTUDIOでレスポンシブ対応を楽にする3つのコツをを紹介しました。
改めになりますが、レスポンシブ対応を楽にする上で重要なポイントは、PC画面のサイズで作成する際に、レスポンシブ対応を意識して作成することです。
具体的には、3つのことを意識して作成して下さい。
① 文字ボックスの縦幅はautoにする
② ボックスの横幅の単位を%にする
③ ボックスの左右にパディングを設定する
もちろん、作成されるサイトのデザインなどによって、この3つのコツを意識しても 、うまくレスポンシブ対応ができない場合もありますが、基本的にはこの3つのことを意識して作成することで、レスポンシブ対応を行う上で、かなり楽になるかと思います。
初めは、なかなかわからないと思いますが、この3つのことを意識しながらサイトを作成していくことで、だんだんレスポンシブ対応のコツがわかってくると思いますので、ぜひ積極的にこちらの3つのコツを意識して作成してみて下さい。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)