ノーコードツール「Studio」について

話題のノーコードプラットフォーム「Studio」
近年はStudioを使って製作されたWEBサイトもかなり増えている印象を受けます。

デザイン紹介サイトにもStudioを使って作成されたサイトがよく掲載されており、初めて知ったとき、こんなに綺麗にノーコードでサイトが作れてしまうのかと感動したことを覚えています。

2020年から年に１度開催される「Studio Awards」も毎年盛況で、見たことのあるあのサイトが「Studio」なのかと驚きます。
Studio Awards2024新しいウィンドウで開きます

今回は、そんなノーコードプラットフォーム「Studio」についてまとめました。

Studioとは

Studioは、コードを書かずにWebサイトの構築・公開・運用が完結するノーコードWeb制作プラットフォームです。7,600種類以上のフォントと、ドラッグ&ドロップで自由自在にデザインできる直感的なデザインエディタで、簡単に美しいWebサイトを作成できます。

2024年9月時点で公開サイト数は10万サイト、ユーザー数は50万人を突破しました。官公庁や上場企業、スタートアップなど、あらゆる企業・組織で活用されています。

※Studio公式HPから引用

Studioは、記載の通り豊富なフォントや直感的に操作できるエディタ機能であらゆる企業・組織のWEBサイトで使われています。

また、Studioにはデザイン制作とサイト構成を外部の会社に依頼できる「Studio Experts」というサービスもあります。Studioにて認定したクリエイターが、担当となり依頼者の希望に合わせたデザインから公開作業を担当するというサービスです。
Studioに一貫して依頼できるのはかなり便利です。

料金プラン

料金プランは無料のfreeを含めて8プラン。
個人でお試しに使ってみる場合は「free」、一枚LPなどの少数構成のWEBサイトは独自ドメインでの接続・公開ができる「Mini」以降のプランがおすすめです。

	Free	Mini	Personal	Business	Business Plus	Enterprise
月額	-	￥590/月	¥1,190/月	¥3,980/月	¥9,980/月	カスタム
ページ数	50	2 + 404ページ	150	300	300	カスタム
独自ドメインでの接続・公開	○	○	○	○	○	○

Studio公式HP：料金プラン新しいウィンドウで開きます

機能特徴

基本的には、figmaやXDのようなデザイン作成ツールと同じ操作感です。

figmaに存在する長方形やフレームの代わりに、ボックスとセクションが存在します。これはhtmlタグのdiv とsectionタグに当たります。

テキスト(p)や画像(img)についてもhtmlのタグがそのまま当てはまるようになっているため、デザインをしながらマークアップをしていく印象です。

また、マージンやパディングを設定する項目や、横幅や縦幅をpx/vw/flex/auto/など、コーディング時によく使う値で調整できるので、ある程度htmlの知識があれば、スムーズに実装することができます。

一般的なフェードインやフェードアウト、ホバーアニメーションはStudioの機能として用意されています。

それ以上に複雑な動作を実装したい場合も、カスタムコードを使ってのコーディング（有料プラン以上から）や、lottie（GIFやMP4より容量を小さくすることのできるアニメーション）を使っての導入も可能でかなり自由度を高く設定することができます。
公式HP：lottie新しいウィンドウで開きます

特に感動したのが、公開作業です。
面倒な画像圧縮やsassのコンパイルなどのbuild作業、ツールを使ってのサーバーアップ作業が不要で、ボタン一つで公開が完了します。

独自ドメインの設定もできるため、外部サービスでドメインを取得しそれを入力するだけで完了するというのはかなり魅力的です。

デメリット

Studioのデメリットとして、以下の3点が上げられます。

・ページネーション機能がない
blog記事一覧などでよく見るページネーション機能ですが、現在2025年時点ではStudioでは実装されていません。代用機能として、もっと見るボタンなどで対応が可能です。

・人気記事の抽出やランキングの表示はできない
記事一覧にある、ランキングや人気記事の回遊リンクなどは非対応です。ただし、代用機能としてコレクション機能を利用したランキングの表示ができるため、実装そのものは可能です。

・画面幅に応じて改行位置を変更できない
Studioでは、最大5つのブレイクポイントを設定して、細かいレスポンシブ設定が可能です。
しかしながら、画面幅に応じた改行位置の変更やテキストの変更はできないため、通常のコーディング時のような細かな調整は難しい現状です。

Studioは機能リリースも頻繁で、毎月新しい機能が更新されています。
そのため、上記のデメリットとして挙げられた点も、変更される可能性はかなり高いと思われます。今後の対応が楽しみですね。

2025年06月機能リリースまとめ新しいウィンドウで開きます

まとめ

ここ最近、生成AIの広まりとともに「デザイナーの仕事はどのように変わっていくのか？」という話題をよく耳にします。そんな中で注目されているのが、デザイナー一人でもWEB制作を完結できるようなツールの存在です。

デザインと実装の分業は当たり前でしたが、今はデザインから公開までを自分の手でスムーズに進められる時代になってきました。

これによってデザイナーの仕事は「見た目を整える」だけではなく、ユーザー体験全体を設計するところまで広がっています。ツールが進化するほどに、デザイナーはもっと自由にアイデアを形にできるようになる。そう考えると、むしろ今がいちばん面白い時期なのかもしれません。

参考リンク

• Studio design新しいウィンドウで開きます