【STUDIO】実際にSTUDIOで数サイト作ってみた感想とメリット・デメリット

ノーコードWeb制作ツール「STUDIO」

ノーコードツール流行っていますね。
プログラミング知識が無くても、気軽にアプリやサイトが作れるようになるのはとても良いことで、今後もますます良いノーコードツールが増えていくでしょう。

Web担当者にとっては、今までデザイナーやコーダーに修正指示してきたことを、自分で出来るようになるのです。
少なくともどのようなことが出来るのか、自分で触ってみるようにしてください。

現在（2023/11月）まで実際に3サイトほど、STUDIOでサイトを作成してみましたので、
Webデザイナーから見た、STUDIOのメリットやデメリット、テクニック、感想を一旦まとめます。

最初1、2サイト作った時は、STUDIOの使い方に慣れないこともあり、HTML/CSSでコーディングするのとどちらが早いか判断できませんでしたが、3サイトも作るとSTUDIOで作る方が早いと実感しました。

エディタと画面を切り替えながら確認しなくて良い
GUIで画面を見ながらサイズ調整できるのは便利。
レスポンシブが作りやすい
こちらも画面で確認しながら、このサイズでスタイルを変更したい、というのが目で見ながら出来るのが早いです。ブレイクポイントの設定も簡単。

CSSが使えない
CSS使えないため、凝ったデザインを適用するのは難しいです。
個人的には、トップのメインビジュアルをレスポンシブで、positionを細かく調整するようなケースで感じました。（あきらめて画像にした時もあります）
あとは、後述しますが、文字の装飾を組み合わせや、改行の調整も不向きです。
Javascriptが限定的
hubspotのフォームや、測定用のjsを入れたい、という要望もありましたが出来ませんでした。カルーセルやトグルは用意されていますが、こちらも細かい調整は難易度が高いです。
用意されたデザインをベースに、デザイナーに検討してもらう必要があります。

STUDIOは専門のサーバー会社ではないので、一般のレンタルサーバーより不安定に感じます。以前、リリース時刻の直前に修正が反映されなかったことがあり、とても焦りました。

プレスリリースなどで、リリース時刻が決まっている場合、公開ボタンを押すタイミングや、パスワード解除のタイミングは、それより早めに対応するよう社内調整する必要があります。

ドメインの設定操作はとても簡単です。
ですが、「TLS証明書の発行」にかかる時間がまちまちで、大体1時間（長くて3時間）くらいかかります。

新規サイトなら問題ありませんが、既存サイトをSTUDIOへ移管する際は、ダウンタイムが長時間発生することを前提にしなければならないです。

まだ運用時間が短いので、何とも言えませんが、やはりページ数が多いサイトだと不向きなのでは？と感じることがあります。

共通パーツ（コンポーネント）を上手く作ることがポイントになってきます。
コンポーネントを入れ子にしたり。

現在のところ、10ページ前後くらいのサイトまでが適切かなと感じます。
LPやペライチサイトではとても有効でしょう。

ここまで制作した上で、頻繁に使用したいくつかのテクニックを挙げます。

サイト全体のレイアウトは、まずはsectionで区切っていきます。
そして、sectionは全幅（横幅100%）にします。
これは横幅全体に背景色/背景画像を入れることがよくあるためです。
MaxWidthのsectionやdivから始めない方が良いです。

レスポンシブ用のラッパーです。レスポンシブはここを操作します。

テキストや画像もとりあえず<div>に入れちゃいます。
レイアウト変更時に、後から<div>に入れることがありますが、設定を掛け直すのにやや手間がかかります。

作成中や運用で、後からデザインに変更を加えたい時がよくあります。
Figmaのコンポーネント化と同様、STUDIOのコンポーネント化もよく出来ています。

ボタンの文字だけ変える、一覧のタイトルと画像を変える、etc…

を、効果的に使用しましょう。

総じて良い！（ただし、ページ数の多いものは未知）
ノーコードでこれほど綺麗にサイト作成できたのは初めてです。

ノーコードとはいえ、コーダーが全く不要になるとも思いませんでした。
CSSの知識がある方が、汎用性の高い実装が出来ると思いました。

コーダーも武器を活かせるツールと思います。