入門編 02 / 10 入門 約6分

Studioとは何か|ツールの中での立ち位置

Studioがどんなツールなのかを、他の制作手段との位置関係で整理します。デザインと公開環境がひと続きになっている構造が、なぜ制作を速くするのかを図解で解説します。

この教材で学べること

  • Studioが制作手段の中でどこに位置するのか
  • デザインと公開環境が一体になっている構造の意味
  • その構造がもたらす強みと、裏返しの制約

Studioは、コードを書かずにWebサイトをデザインし、そのまま公開まで完結できる日本製のノーコードツールです。日本語の情報が多く、国内の制作現場で使われている実績も積み上がっています。このレッスンでは、ツールとしての性格を先に押さえます。

制作手段の中での立ち位置

Web制作の手段は、大きく「コードを書いて作る」と「テンプレートに当てはめる」の2極に分かれます。前者は自由度が高い代わりに習得コストが高く、後者は早い代わりにデザインが型にはまります。Studioはその中間で、デザインの自由度を保ちながらコードなしで公開に到達できる位置を取っています。

制作手段の中でのStudioの立ち位置を示した図 かんたん・早い 自由度が高い テンプレート型 Studio 自由に作れて、公開まで完結 コード実装 デザインは型に収まる 学習コストと自由度の折り合い 習得に時間がかかる
図1:Studioは「テンプレート型」と「コード実装」の中間に位置する

デザインと公開環境がひと続きになっている

もうひとつの特徴が構造です。一般的な制作では、デザインを作る場所と、それをWebサイトとして動かす場所が別々で、その間に「実装」という工程が挟まります。Studioはこの3つが同じ画面の中にあり、デザインを直せばそのまま公開に反映されます。

従来の制作フローとStudioの制作フローの違いを比較した図 従来 デザイン コード実装 サーバーに設置 → 公開 直したいときは、この3つを行き来する Studio デザイン=実装=公開環境(すべて同じ画面) → 公開 直したい場所を直接さわって、そのまま反映できる
図2:工程が分かれないため、修正の反映が速い

この構造の効き目が最も出るのは、クライアントと画面を見ながら直すときです。「ここをもう少し大きく」と言われて、その場で変えて見せられます。実装工程を挟む作り方では、この往復に日単位の時間がかかります。

強みの裏返しにある制約

同じ構造が、そのまま制約にもなります。用意された仕組みの上で作るため、仕組みの外にあることは基本的にできません。ここを理解しておくと、無理な要望を早い段階で切り分けられます。

構造上の性質強みとして出る場面制約として出る場面
サーバー管理が要らない納品後の保守負担が小さいサーバー側の細かい制御はできない
デザインと公開が一体修正の反映が速い他のツールへの引っ越しはしにくい
用意された機能で作る覚える範囲が限られる特殊な仕組みは実現できない
月額で使い続ける形初期費用が小さい止めるとサイトも止まる

とくに最後の行は、クライアントへの説明で必ず触れるべき点です。詳しくは料金プランの考え方で扱います。次は他ツールとの比較に進みます。

まずは1ヶ月間参加してみるplay_arrow