サービス
サービスを探す
プロ人材を探す
仕事を探す
ブログを探す
STUDIOはコードも書けるのか
記事IT・テクノロジー
最近、ノーコードWeb制作ツールの「STUDIO」を触る機会がありました。
STUDIOは基本的に画面上でボックスやテキスト、画像などを配置してWebサイトを作っていくツールです。
そこで使っていて気になったのが、
「STUDIOってHTMLやCSSを書けるの？」
ということでした。
普段WordPressなどでHTML・CSS・JavaScriptを書いていると、
「ここ、CSSを1行書けばすぐ直せるのに」
と思う場面が結構あります。
特にレスポンシブ対応で、
スマホだけ縦並びにしたい
特定の要素だけ位置を調整したい
独自のアニメーションを入れたい
JavaScriptで動きを追加したい
といったことをしたくなると、コードを書きたくなります。
調べてみると、STUDIOでもコードを使うこと自体は可能でした。
ただし、普通のWeb制作とは少し考え方が違います。
結論：STUDIOでもコードは書ける
結論からいうと、STUDIOでは
HTML・CSS・JavaScriptを使用できます。
主に使う方法は2つあります。
1. Embed（埋め込み）ボックス
STUDIOには「Embed」という埋め込み用のボックスがあります。
ここには、
HTML
CSS
JavaScript
などを書くことができます。
例えば、
Googleマップを埋め込んだり、外部サービスのウィジェットを表示したり、独自のHTMLやJavaScriptを動かしたりできます。
STUDIOの標準機能だけでは難しい表現を追加したいときに便利です。
さらに現在は「Embed Code AI」という機能もあり、コードエディタ内でAIに指示してHTML・CSS・JavaScriptを生成・修正することもできます。
ノーコードツールなのに、その中でAIにコードを書いてもらえるというのは面白いところです。
2. カスタムコード
もう一つが「カスタムコード」です。
こちらは有料プランで利用できる機能で、サイト全体または特定ページの
<head>
や
<body>
にコードを追加できます。
例えば、
Google Analyticsなどの計測タグ
外部JavaScript
独自CSS
外部ライブラリ
各種サービスの埋め込みコード
などを追加できます。
つまり、
STUDIOの標準機能＋自分で追加したコード
という構成にすることもできます。
STUDIOだけでは実現できない少し特殊な処理を追加したい場合には、この機能を使うことになります。
ただし、STUDIOのHTMLを直接編集できるわけではない
ここが一番勘違いしやすいところです。
僕も最初は、
「じゃあSTUDIOで作った要素のHTMLを開いて、classを付けてCSSを書けばいいのでは？」
と思っていました。
しかし、これはできません。
STUDIOでは、STUDIOが生成したページのHTMLそのものを直接編集することはできません。
例えばWordPressのオリジナルテーマなら、
HTMLを変更したり、
CSSを書き換えたり、
PHPを変更したり、
JavaScriptを追加したり、
かなり自由に編集できます。
STUDIOの場合はそうではありません。
基本的なレイアウトはあくまでSTUDIOのエディタ上で作ります。
そして必要な部分だけ、
Embedやカスタムコードを使って機能を追加する
という考え方になります。
「CSSを書けば全部解決」という使い方はできない
これは普段コーディングしている人ほど注意した方がいいと思いました。
例えばスマホ表示で、
「画像と文章が横並びになっているから、スマホだけ縦並びにしたい」
という場合。
普通のコーディングなら、
メディアクエリを書いて
flex-direction: column;
に変更すれば終わりです。
ですが、STUDIOでは基本的にSTUDIO側のレスポンシブ設定やボックスレイアウトを調整して対応します。
「STUDIOの画面で作ったこの要素に自分でclassを付けて、CSSから直接操作しよう」
という普通のコーディングと同じ感覚では使えません。
ここはかなり重要な違いです。
STUDIOは「ノーコード＋必要なところだけコード」
実際に触ってみて、一番しっくりきた考え方がこれです。
STUDIOはコードを書くWeb制作ツールではなく、必要な部分だけコードで拡張できるノーコードツール。
ということ。
基本的なものは、
レイアウト
余白
フォント
レスポンシブ
ホバー
アニメーション
CMS
などSTUDIO側の機能を使って作ります。
そしてSTUDIOだけでは難しいところに、
HTML・CSS・JavaScriptや外部サービスを追加する。
この使い分けが良さそうです。
コーディングできる人ほど最初は戸惑うかもしれない
僕自身、普段はHTML・CSSやWordPressを触ることが多いので、
STUDIOを使っていると、
「コードを書いた方が早いのに」
と思う場面が何度かありました。
ただ、STUDIOではSTUDIOのルールに合わせて作った方がいい場合も多いです。
無理にコードで解決しようとすると、STUDIOを使っているメリット自体が薄くなってしまいます。
逆に、
「この部分だけ特殊な動きを入れたい」
「外部サービスを埋め込みたい」
という場合にコードを使う。
このくらいの距離感がちょうど良いのだと思います。
コードを書いた方が向いているサイトもある
もちろん、何でもSTUDIOで作ればいいわけではありません。
例えば、
独自の機能が大量に必要
JavaScriptを使った複雑なUIが多い
HTML構造を細かく制御したい
独自システムと深く連携したい
コードを完全に管理したい
というサイトなら、最初からコーディングした方がやりやすい可能性があります。
一方で、
コーポレートサイト
採用サイト
LP
ポートフォリオ
更新しやすいサイト
などであれば、STUDIOはかなり便利だと感じました。
STUDIOからHTMLを書き出すこともできない
もう一つ知っておいた方がいいのが、コードの書き出しについてです。
STUDIOでサイトを作って、
「最後にHTML・CSSをダウンロードして自分のサーバーに置こう」
という使い方はできません。
STUDIOが生成したHTMLを外部にエクスポートする機能は提供されていないためです。
そのため、
「最初だけSTUDIOで作って、あとから普通のHTMLサイトとして管理する」
という使い方を考えている場合には注意が必要です。
まとめ
STUDIOはノーコードツールですが、まったくコードを書けないわけではありません。
Embedボックスを使えばHTML・CSS・JavaScriptを埋め込めますし、有料プランではカスタムコードを使って<head>や<body>へ独自コードを追加することもできます。
ただし、
STUDIOが生成したサイトのHTMLを直接編集できるわけではありません。
ここが普通のコーディングとの大きな違いです。
なので、
基本はSTUDIOで作る。
STUDIOだけでは難しい部分だけコードで拡張する。
という使い方が一番良さそうです。
普段コードを書いていると、ついつい「CSSを書けばすぐなのに」と考えてしまいます。
でも、STUDIOにはSTUDIOの作り方があります。
今回実際に触ってみて、
ノーコードとコーディングはどちらか一方を選ぶものではなく、うまく組み合わせて使う時代になってきているのかもしれない
と感じました。
このブログを見た人にオススメ
.png)
