TECHNOLOGY
- FRONT END

2024.07.26

ノーコードツール「STUDIO」使ってみました

はじめに

今回はずっと使ってみたかったノーコードツール「STUDIO」を使ってみた感想や便利だなと思ったことをまとめていきます。

またウェブ制作初心者の方が見ても理解しやすいように、簡単なWeb制作の基礎知識もご紹介します。（経験者の方は読み飛ばしていただいて結構です！）

STUDIOは公式のドキュメントやYoutube動画もたくさん上がっているので、手軽にWeb制作を始めたい方や写真などの趣味をまとめたポートフォリオサイトを作りたい方におすすめです。

ドメインはSTUDIOのものであれば無料で使用することができ、公開（デプロイ）もすぐにできます。テンプレートも豊富なので、１から作ることが心配な方はテンプレートを使用しながら操作感を覚えていくのもいい方法だと思います。

それでは参りましょう。

触れてみた感想

チュートリアルがとてもわかりやすい！

STUDIOの公式ページに行くと、「とにかく始めよう！」みたいなポップが目立ちます。

事前に勉強することはないのかな…?と不安になりながらもとりあえず使用してみることに。アカウントを作ることもできますが、私はGoogleアカウントの連携で初めてみました。

登録するとデザインエディタ（STUDIOでWebサイトの画面を作るための作業スペース）が開き、チュートリアルが始まります。4STEPを通し操作感を学んでいくようです。

早速使ってみます。画面左側にパネルがあり、そこから要素を選択してドラッグ&ドロップすることで、画像やテキストを追加できるようです。操作感や画面構成がFigmaに似ていると感じました。

画像ボックスはダブルクリックするとどの写真を選ぶかパネル内容が変化します。

Unsplashと提携しているらしく、エディタ内でUnsplashからおしゃれな写真を選ぶことができるので、画像挿入もスムーズな印象です。もちろん自分で画像をアップロードすることも可能です。

チュートリアルのSTEPを進むごとに褒められます。嬉しい。

あという間にチュートリアルが終わり、メインビジュアルが完成しました。とっても簡単です。

ここまでおそらく15分くらい。爆速です。

本当にすぐに始められてあっという間にチュートリアルが終わるので、気になる方はまず触ってみるのが一番だと思います。

感想タイム

セクション

セクション追加でよく使うコンポーネントが用意されているのがとても親切だなと感じました。

ブロックごとにドラッグ&ドロップするだけで簡単にそれらしいサイトの基盤が出来上がります。これは便利すぎる…ドラッグした時に上の要素としっかりくっついてくれるのがまたいい。

テンプレのこの部分だけほしい！みたいなことはよくあるので、これは嬉しい機能です。何気にコンテンツがヘッダーからフッターの順番で並んでいるのが便利ですね。コンテンツ内容に迷った場合、上から順にセクションを追加していけばそれらしいサイトを作ることができます。

レイヤー

レイヤータブでは、現状の構造を一瞬で確認することができます。簡易検証ツールみたいな感覚です。編集したいタグが一目でわかるので便利ですね。

レスポンシブ

レスポンシブについても簡単に設定できます。個人的にはここが一番嬉しいポイントかもしれません。デザインエディタの画面上位でブレイクポイントを選択することができます。

ブレイクポイントを選択した状態で行ったスタイルの設定は、そのブレイクポイントごとに保存されます。

全体的にFigmaでワイヤーフレーム作るような感覚でWebサイトを作成することができます。デザインもできる方であればワイヤーフレームの工程を大幅に削減できるかもしれません。

公開作業

デプロイも一瞬でした。ドメインも無料枠のものはすぐに変えられるようです。中の仕組みはどうなっているんでしょうか。Nuxtで動いているようですが、構造が気になるところです。

画面内のガイドもわかりやすく、公式ドキュメントも動画もまとまっているので非常に使いやすいです！！sankouなどでSTUDIOで作られたWebサイトの例を確認することもできるのでぜひ。

ただし、Web制作について全く未経験だとやや難しい部分があるかもしれません。

ですので、以下では簡単にWeb制作の基本知識をご紹介します。サクッと覚えてより便利にSTUDIOを使いこなしましょう。

覚えておくと便利なWeb制作の基礎知識

今回は以下について超簡単にまとめます！

HTML
CSS
STUDIOでよく見るHTML・CSS
CMS

HTML

Web制作の経験がない方でもHTMLという単語は聞いたことがあるかもしれません。

私も中学校の技術の時間でHTMLをメモ帳アプリに書く授業を受けたことがあるので、この業界に入る前から存在は知っていました。

HTMLはWEBサイトを構成するための基本構造でマークアップ言語と呼ばれています。

例えば、

<p>こんにちは</p>

というコードをパソコンが読むと、「ふむ、pragraph（パラグラフ、文章）として”こんにちは”を表示すればいいのでござるな（賢い）」となり、画面に「こんにちは」が表示されます。

今みなさんがみているこの画面もパソコンがHTMLを読み、読み込んだHTMLに従って文字や写真を表示しています。

STUDIOも直接コードを書かないだけで、皆さんが画面を操作している裏でSTUDIOのデザインエディタがせっせとコードを書いてくれています。

ちなみにSTUDIOを使っているといろんなタグ（<>でかこまれたものをタグという）を見かけますのでここでは一例を紹介します

<div> (ディビジョン、区分のこと)

これはなんでも入る箱のようなイメージです。

<div> ← 文章が入ってる箱
	<p>こんにちは</p>
	<p>ぼくは遠藤</p>
</div>
<div> ← 写真が入っている箱
	<img>←imageタグは写真のことです
</div>

パソコンはとっても賢いので、箱が分かれた要素をうまい具合に区切って表示してくれます。

この構造のおかげで素敵なデザインのWebサイトが綺麗に表示されているんですね。

とはいえ、HTMLは箱だったり文章だったり、その要素自体の特徴しかパソコンに伝えられません。「どんな形の箱か」や「どんな色の文字か」などの詳細な情報を伝えるには別の方法が必要なのです。

CSS

そこで出てくるのがCSS。HTMLの友達です。本名はCascading Style Sheets、頭を取ってCSSです。CSSはHTMLを装飾することができます。色を変えたり、形を変えたり順番を変えたりするイメージです、

この言語をHTMLと一緒にパソコンに渡すとこんな感じ。

<p>こんにちは</p>

p {
 color : "#f00";(赤)
}

これを読んだパソコンは、「ふむ、文章で”こんにちは”と表示すればいいのでござるな。むむ！色は赤色指定でござるか！御意！」

と言った具合で、赤色で「こんにちは」を表示してくれます。

主に上記の二つとJavaScriptという何でも屋さんが協力してWebサイトがコードで作られていくわけですが、そうしたコードをビジュアル操作で書くことができるのがSTUDIOともいえます。

要するに画面でいい感じに操作しただけで勝手にコードを書いてくれる（内部処理してる）のがSTUDIOなどのノーコードツールというわけですね。

STUDIOでよく見るHTML・CSS

ここからはSTUDIOでよく見るタグやstyleについて簡単にまとめます

HTML

div（<div></div>）

まずは上記の例でも出てきたdivです。これはSTUDIOで一番よく見るかもしれません。上記でもお伝えした通り、簡単に言うとなんでも入る箱です。この箱を重ねたり、箱の中に別の箱を作ったり、みたいなイメージができるとWeb制作がしやすいかなと個人的に思います。

おさらいですが、箱の中の並び順や箱の形を決めるのはCSSです。

ul (<ul></ul>)

これはリスト（UnoderList）を表します。写真などを何枚も並べたい時や、メニューバーなど絵よく使われる箱、のようなイメージです。<ul>はリスト専用の箱で、中には<li>というタグが入るよ、という約束があります。

div よりも役割がはっきりした箱なんだな、という理解でいいと思います。

li (<li></li>)

これはリストアイテムです。上記の<ul>の中身に使われます。<li>の中には文字を入れたり、写真を入れたりすることができます。

img (<img>)

写真を表します。divやliなどの箱に入れて使うのが一般的です。

CSS(style)

margin

箱の外側の余白です。

padding

箱の内側の余白です。

それぞれのイメージはこんな感じです。

STUDIOは基本的に画面を視覚的に操作することができますので、上記の理解がなくても簡単に制作はできると思います。ですが、知っていればより楽になるかなと思いまとめてみました。

CMS

最後にCMSについてです。

CMSはコンテンツマネジメントサービスの略です。Web制作している方には馴染み深いですが、初めてWeb制作する方にとっては少しイメージが掴みづらいかもしれません。

CMSはWebサイト上で管理したいコンテンツ（ブログ記事や写真など）をいい感じにまとめて、Webサイト内で使いやすくしてくれる機能です。

たとえば、最近撮った写真を表示する画面があるとします。CMSを使わない場合、この画面は写真を撮るたびに手動で写真を際変える修正しなければなりません。

ですが、CMSを使用し、「写真を表示する画面」と「CMS内のコンテンツ」を結びつけることで、自動的に最新の写真を画面に表示できるようになります。

手動でやっていた写真の差し替え作業をCMSが代わりにやってくれるイメージです。この機能は非常に優秀でWeb制作とは切っても切り離せないものとなっています。

STUDIOで作れるもの・難しそうなもの

STUDIOは便利なセクション追加機能などがありますが、基本的に用意されたものの組み合わせで制作していくため、普通のコードで書くより表現方法には限界があるように感じます。

ですのでダイナミックなアニメーションを前提としたレイアウトやデザインは作り込むのが難しいかもしれません。（それでもsankouを見る限り結構凝ったアニメーションを導入してるサイトもありました）

また、STUDIOのプラットフォームで作る以上、機能拡張にはそれなりの制限があるため、Webアプリなどユーザーアクションが必要な場面の多い画面開発は難しいように思えます。ユーザーアクションに依存する画面は、さまざまなライブラリで機能を盛り込んでいく必要があったり、細かい条件分岐などでアクションの制御が必要なため、現段階でSTUDIOで制作するのは難しそうです。

しかし、閲覧を目的とするコーポレートサイトやLP、ポートフォリオやブログであればSTUDIOで十二分に、しかもスピーディーに開発することができると感じました。しかも簡単で使いやすい！

アクションについてもフォーム等は実装することができるので、これからのWeb制作はノーコード爆速開発がさらに盛り上がっていくのかもしれませんね。