StudioによるWebサイト制作のコツ9選｜お客さんや社内の人が喜ぶ作り方・注意点
最近ではStudioというノーコードツールでWebサイト制作をする方がぐっと増えてきました。
株式会社caroaでは、Studioを使用してWebサイト制作を行うサービスを運営しています。主にビジネス向けのLP（ランディングページ）やコーポレートサイトなどのクライアントワークを行っております。
そこで今回は、日頃から注意しているチェックポイントをまとめて紹介します。
クライアントワークをしている方も、社内でStudioを使ったWebサイト制作をしている方もぜひ参考にしてみてください。
Studioでのサイト制作を学びたい方
Studioゴールドエキスパートのcaroaが運営する「caroa camp ノーコードWeb制作コース」で、体系的に学べます。
Studioは知識の有無にかかわらず誰でも簡単に触ることができます。それはメリットでありながら、同時にデメリットでもあります。Studio独特のクセのようなものがあり、注意しないと、後々運用していくうえで大変なことになります。
なので、サイト制作する前に今回紹介するポイントをぜひ、頭の片隅においておいてください！
今回はデザイン面のチェックポイントというより、Studioでの作り方や設定のチェックポイントとなっています。
01｜不要なdivで囲んでいないか
Studioの仕様上、一番起こりやすくて注意すべき点です。
Webサイトは通常、文字や画像などをdivと呼ばれるボックスで囲んでいきます。Studioでも同様で、divを複数囲んでいくことで、デザインを作り上げていきます。
そして、Studioにはグループ化の機能があり、FigmaやXD、パワーポイントなどと同じように要素をまとめるためのものです。
これはデザインを作っていくうえでとても大事な機能なのですが、注意する点としては、グループ化されたものはdivになるということです。
このグループ化を多用することで、作っているうちに、無駄なdivがいくつもできてしまう可能性ができてしまいます。その結果、以下の2つの大きな問題が起きてしまいます。
①変更箇所までたどり着きづらい
②階層化の上限に達して、エラーが起こる
特に②の階層化の上限に関しては知らない方も多いのですが、Studioの階層化の上限は12階層までと決まっています。
※一番上位のdivはページそのものです
意味のわからないエラーがでて焦ることもあるので、どこかで定期的に不要なdivで囲んでいることがないのか、チェックてみましょう。
02｜不要なサイズ指定をしていないか
Studioではマウス操作で簡単にボックス（div）の編集ができます。これはとても楽で便利ですが、同時にデメリットもあります。
ボックスのサイズが勝手に指定されていまうこと
です。
あまりStudioの操作をなれていない方で、こんな経験ありませんか？
「何故かボックスからはみ出して他のエリアに重なってしまう...」
この問題の原因は、だいたいdivに高さを指定していることにあります。
Webサイト制作においては、基本的に高さを指定することはめったにありません。
理由としては、Webサイトは印刷物と違って、デバイス（PC、タブレット、スマホ）によって横幅、縦幅が変わってくるためです。
デバイスが変わると、文章の改行位置などが変化して、縦の長さが伸びることがあります。そのときに、divに高さ指定をしていると中の要素がはみ出してしまいます。
基本的には、高さを指定せずに、autoにしてあげるのをおすすめします。
divの青い線が点線になっているのが、autoの印です。
作りながら今一度、不要な高さを指定をしていないかチェックしてみましょう！
03｜使用していないフォントを読み込んでいないか
StudioではGoogle FontsとTypeSquareのフォントを自由に使うことができます。
デザインに合うフォントを画面上で試しながら選べるのはとても魅力的です。しかし同時に、一度選択したフォントはそのまま残り続けることに注意が必要です。
このフォントのリスト内にあると、Webサイト表示時に対象フォントを取得しに行く処理が発生します。
フォントはとても容量が大きいです。（特に日本語は漢字があるので大容量）そのため、Webサイトの表示速度に影響がでてしまい、ユーザー体験を損なう可能性が高くなります。
また、後々運用していくうえで、自分以外の人がStudioを触るケースも多いかと思います。
そのときに、どのフォントを使えばいいのか分からなくなってしまいます。
作りながら今一度、使っていないフォントはないかをチェックしてみましょう！
04｜使用していない色は残っていないか
フォントと近い内容ですが、色も注意が必要です。
Studioでは使用頻度が高い色をカラーパレットに保存しておくことができます。
Studio上で試行錯誤をしていくうちに、カレーパレットに多くの色が登録されすぎてしまうことがあります。
Studioでは色の並び替えや、色ごとに名前をつけることが現時点ではできないので、自分以外の人が触るときにどの色を使えばいいのか分からなくなってしまいます。
特にグレー系の色は、線や背景、文字などで違うグレーを使うことも多いかと思います。そのたびに登録すると、このグレーはどのグレーなのか分からなくなってしまいます。
作りながら今一度、使っていない色はないのか、そもそもそこまで色を多用する必要はあるのかをチェックしてみましょう！
05｜どのデバイスで非表示になるのかメモしてあるか
あまり知られていないのですが、Studioでは各要素に名前をつけられる機能があります。
これはタグの種類というよりは、メモ代わりに使える機能です。この機能を使って、他の人に向けたメッセージを書いてあげると、運用がしやすくなります。
例えば、次の画像のようにタブレットサイズ以下になったら右上のメニューがアイコンに切り替わるようなUIを作ったとします。
このときのレイヤーの名前は次のように設定します。
PCだけで表示される箇所は（PC）として、タブレットとスマホで表示され箇所は（Tab/SP）としています。
Tab：Tablet
SP：Smartphone
※Web業界の慣習的にそれぞれをTabとSPと略すことが多いです
各デバイスで表示・非表示の設定がされていると、デザインエリアで見つけることは困難になります。
ただ、レイヤーパネルにどのデバイスで表示・非表示なのかが記されていることで、見つけるのがかんたんになります。
表示設定をした場合は、すぐにレイヤーの名前を変更してみましょう！
06｜適切なタグが設定されているか
Webサイトはdiv、p、img、a、h1、h2...といったタグの積み重ねでできています。
それぞれのタグには意味があります。例えばaタグはリンクを表すもの、h1はページ内の一番伝えたいタイトルのことといったように。
Webサイトを作るうえでこのタグが適切に設定されているかが重要になります。SEOと呼ばれる、検索エンジン（Googleなど）に最適化するためには、このタグを適切な形で使い、適切な階層化構造をしてあげることが大切です。
Studioでは、各要素の詳細パネルでタグの設定ができます。デフォルトで文字はpタグになっているので、適切なタグになっているかをチェックしてみましょう！
07｜改行された時を考慮しているか
前述したとおり、Webサイトはいろいろなデバイスでアクセスする可能性が高いです。そのため、デバイスサイズに合わせた改行の考慮がされているか事前に考慮する必要があります。
「02の高さの設定」も考慮の１つで、もう1つ必ず確認しなくてはいけない点があります。
文字の配置です。
Studioでは、文字はデフォルトで中央寄せが設定されています。
中央寄せのまま使用する場合は問題ないのですが、左寄せで使用する場合は注意が必要です。
文字の横幅をautoで使用していると、テキストが何寄せで設定されているのかパット見ではわかりません。
上の画像はパット見左寄せになっているように錯覚しますが、デバイスを縮めてみると、中央寄せだったことがわかります。
これではせっかくのデザインが台無しです。
なので、テキストが何寄せになっているのかはしっかりとチェックして、適切な配置にしてみましょう！
08｜meta情報は全て設定されているか
いよいよサイト公開となったときに、最後に大切なのはmeta情報と呼ばれる部分の設定です。
Studioでは、タイトル、説明文、ファビコン、noindex、カバー画像の設定が可能です。これらをしっかりと設定しましょう。
それぞれ、SEO対策やSNSなどでシェアされた時にどんな表示にするのかを設定するためのものです。
09｜Studioのカバー画像は設定されているか
Studioでは、プロジェクト一覧画面に表示するためのカバー画像を設定することができます。
600px × 900pxの画像を設定できるので、ロゴやメッセージなどを入れて作ってみると雰囲気がでるのでおすすめです。
