【スタジオ】STUDIOでWebサイト制作を始めよう【ノーコード】

ノーコードでWebサイトを作りたいカメ

ノーコードで簡単にWebサイトを作りたいな〜

STUDIO（スタジオ）ならノーコードでWebサイトを簡単に作ることができるよ♪

学び続けるウサギ

ノーコードでWebサイトを作りたいカメ

そうなんだ〜！

ノーコードで楽々サイトを作りたいから教えてよ〜♪

「ノーコードで簡単にWebサイトを作りたい」

「白紙からなるべく自由にデザインしたい」

「ホームページにブログ記事（CMS機能）も追加したい」

と思われる方はSTUDIOがオススメです。

STUDIOならノーコードで簡単にWebサイトを作ることができるので時短になりますね。

今回はSTUDIO（スタジオ）についてご紹介していきたいと思います。

STUDIO（スタジオ）の始め方

①「無料ではじめる」をクリック

アカウントは無料で作ることができます。（※ホームページのデザインが変わっていますがおおまかな流れは同じです）

まずはSTUDIOにアクセスします。 無料ではじめるボタンをクリックします。

②メールアドレス等で登録する

それぞれ「FacebookやGoogleのGmail」「新規登録用メール」などを使用して登録できます。

今回はGoogleで登録していきたいと思います。

すでにGoogleアカウントがあるのでメールアドレスもしくは、電話番号を入力します（アカウントを新しく作りたい場合は、右下あたりのアカウントを作成をクリックして作ります）。

③パスワードを設定する

次にパスワードを入力します。

Continueをクリックします。

④「回答して利用開始」をクリック

STUDIOの用途の「個人」など選択し回答して利用開始ボタンをクリックします。

チュートリアルをはじめるをクリックして１、２分くらいでできる簡単な操作方法などのチュートリアルを行います。

⑤「新しいサイトを作成」をクリック

チュートリアルが終了したら、新しいサイトを作成をクリックすることで、新しいプロジェクトを作ることができるようになります（このまま続けるでも同じくプロジェクトを作れます）。

Webサイトを新しく作る方法

①「 + 新しいプロジェクト」をクリックする

元々チュートリアルで作られたFirst projectや前述の新しいサイトを作成以外にも、プロジェクト一覧ページの新しいプロジェクトから新しくWebページを作ることができます。

新しいプロジェクトをクリックします。

②空白・テンプレート等から選ぶ

まっさらな状態から作りたい場合は、空白からはじめるの枠内をクリックします。

テンプレート（無料版 / 有料版）やワイヤーフレームを選択して作ることもできます。

③プロジェクト名をつける

プロジェクト名を記入します。記入できたら作成をクリックします。（※後からでもプロジェクト名を変更することができます）

以上で新しいプロジェクトを追加することができました。

１つのプロジェクトが１つのWebサイトになります。

これで自由にWebサイトを作ることができるようになりました。

デザインエディタ

デザインエディタの画面

あとはデザインエディタの真ん中にあるスクリーンに、左側にあるパネルからボックスレイアウトで、それぞれテキスト（テキストボックス）や画像（画像ボックス）等をドラッグ＆ドロップで直感的に配置して、セクションを作りながらWebサイトを構築する感じです。

ノーコードでWebサイトを作りたいカメ

ドラッグ＆ドロップでWebページが作れるの良いね！

良い感じのWebサイトを作りたいよ♪

ボックスレイアウト

ボックスの中にボックスを入れて親ボックス・子ボックスとを作り、簡単に並べ替えたりすることができます。

ボックスにパディング（内側）・マージン（外側）・ギャップ（間）を使い余白調整しながらレイアウトを組んできます。

CMS（コンテンツマネジメントシステム）

STUDIOはCMS（Contents Management System）を使って簡単にコンテンツの作成・管理ができます。

簡単に言うと随時追加・表示できるブログですね。

CMSダッシュボード・・・記事を設定（モデル・アイテム等を作成し編集・管理）→

デザインエディタ・・・・動的ページ（CMS）を追加・作成しCMSデータを紐付け表示させる

モデル・・・アイテムのグループ

アイテム・・一つ一つの記事など

プロパティ・・アイテムの構築情報

STUDIOの仕組みに慣れるまで少しややこしいのですが、例えばCMSダッシュボードからブログ記事を書いたら、その「ブログ記事」を反映させて表示できるように動的ページ（CMS）を別に作る必要がある感じです。

ここが最初よくわからなくなるポイントかもです。

WordPress（ワードプレス）の場合だと記事を書くと、そのまま「記事一覧」が表示されてクリックすることで、ブログ記事に「遷移」しますが、STUDIOだと記事を書いて、動的ページを作り、リストを埋め込むことで表示させる感じです。

ノーコードでWebサイトを作りたいカメ

CMSダッシュボードでCMSモデルを作成・記事設定して、デザインエディタの動的ページでCMSモデルを紐づけて表示させるんだね！

ややこしい…けど、覚えておこっと〜♫

プランによって使用できる数（モデル（ひとまとまりのグループ）・アイテム数）が違うのでそれぞれ用途に合わせてプランを選ぶと良いです。

STUDIO（スタジオ）の料金プラン

新プラン（2024/12/1〜）

新プラン（2020/12/1~）	Free	Mini	Personal	Business	Business Plus
用途	無料でお試し	個人向け・１ページ構成	個人向け・サイト・ブログ	ビジネス向け（コーポレート・LP）	ビジネス向け・（大規模・高度なセキュリティ）
料金/年払い・月	0	590	1,190	3,980	9,980
料金/月払い	ー	1,290	1,720	5,460	12,900
月間PV数制限（Visitor）	2,000	2,000	20,000	400,000	1,000,000
CMSモデル数	3	3	5	10	30
CMS公開アイテム数	100	100	1,000	5,000	15,000
ページ数	50	2 + 404ページ	150	300	300
独自ドメイン	ー	○	○	○	○
パスワード保護	ー	ー	○	○	○
リダイレクト	ー	ー	ー	○	○
API	ー	ー	ー	○	○
高度な権限制限	ー	ー	ー	○（公開設定を除く）	○
カスタムヘッダー	ー	ー	ー	ー	○
アドオン	ー	ー	ー	ー	○
Apps	ー	○	○	○	○
アクティビティロック	ー	ー	ー	ー	30日
アナリティクス	15日	30日	150日	無制限	無制限
バージョン管理	1日	5日	30日	120日	360日
スタートアップ創業割引	ー	ー	ー	○	○

※以前のプランを契約してる場合は2025/4/1以降のプラン更新のタイミングで連動する新プランになります。

旧プラン（〜2024/11/30）

旧プラン	Free	Starter	CMS	Business
用途	無料でお試し	シングルページ	本格的サイト	中規模ビジネス
料金/月	0	980	2,480	4,980
月間PV数制限	10,000	50,000	100,000	1,000,000
CMSアイテム数	100	10	2,000	10,000
公開予約	○	×	○	○
お問い合わせフォーム閲覧	100	1,000	10,000	10,000
STUDIOバナー非表示	×	○	○	○
独自ドメイン	×	○	○	○
パスワード保護	×	○	○	○
外部連携	×	○	○	○
デザインロック・ライター権限	×	×	３	無制限
高速サポート対応	×	×	×	○
カスタムプロキシ（アドオン）	×	×	×	○
カスタムヘッダー（アドオン）	×	×	×	○
バージョン管理	1日	7日	30日	360日

※随時更新ことがあるので詳しくは公式サイトを見ておきましょう。
※2024/3/12からスタータープランでもCMSアイテムが１０個まで使用可能に
さらに大規模なWebサイト構築なら「Enterprise」プランもありSTUDIOに問い合わせることで構築できるようになります。
※2024/12/1からプランの改定（Starter/CMS/Busines→Mini/Personal/Business/Business Plus）や価格等が改定されます。

おすすめドメイン３選

Xserverドメイン※XServer運営
ムームードメイン ※GMOペパボ運営
お名前.com ※GMOインターネット運営国内シェアNo.1

ワークスペースの料金

ワークスペース	年払い（月額換算）	月払い
一人あたり	¥1,450/月	¥1,980/月
最低料金（三人分）	¥4,350/月	¥5,940/月

ワークスペースを使うことにより複数プロジェクトを一元管理できるようになります。

ワークスペースの全機能を使うためには有料になりますね。

Freeプランだと一部機能である

・プロジェクトの追加（３つまで）

・メンバーの招待（無制限）

・お支払いの一元管理

ができます。

月間PV数制限

月間PV数制限を超えそうな場合は、メール通知やログイン後にモーダルにてお知らせが届き、アップグレードへのポップアップが出てきます。

月間PV数制限が超えてもすぐには停止になりません。

超過状態が続いた場合、STUDIOから連絡後にWebサイトの利用が停止されます。

アップグレードの他にも、PVスケールアップオプション料金として、2,000pv超過ごとに100円（USDだと$1）です。（2024/9/30で終了）

2024/5/23〜Businessプラン以上でPVアドオン（拡張機能）が追加されました。

40万アドオン・・9,800円/月

100万アドオン・・21,800円/月

月間100万PVを超える場合はBusinesspプランにしてPVアドオンを申し込んだ方が良いです。

ノーコードでWebサイトを作りたいカメ

さすがにpv上限超えたらすぐ停止にはならなくて良かったよ♪

STUDIOの支払い方法

お支払い方法としてクレジットカード・デビットカード等で支払うことができます。

STUDIO（スタジオ）のサーバーとドメイン

STUDIOのサーバー

サーバーはSTUDIOのサーバーを使うのでレンタルサーバーを契約する必要がないです。

STUDIOのドメイン

ドメインは無料で使えるサブドメインもありますが、Freeプラン以外もしくは、本格的に運用していきたい場合は、独自ドメインが必要になってきます。

おすすめドメイン３選

Xserverドメイン※XServer運営
ムームードメイン ※GMOペパボ運営
お名前.com ※GMOインターネット運営国内シェアNo.1

STUDIOのサブドメイン

サブドメインは「studio.site」を無料で利用することができます。

「〜.studio.site」の「〜」部分がデフォルトでランダムの文字列になっているので、自分で変更・保存し公開することができます。

オススメの独自ドメインサービス

独自ドメイン取得サービスは、Xserverドメインなどがオススメですね。

おすすめドメイン３選

Xserverドメイン※XServer運営
ムームードメイン ※GMOペパボ運営
お名前.com ※GMOインターネット運営国内シェアNo.1

【domain】ドメインって何？・オススメ取得サービス【Webサイト運営】

ちなみにドメイン１つに対し１つのプロジェクト（Webサイト）に適用されます。

なので２つWebサイトを運用したい場合は２つドメインが必要になります。

ノーコードでWebサイトを作りたいカメ

OK〜！

とりあえず１つだけ有料プランのサイトを作りたいから、ドメイン１個用意しま〜す♪

STUDIO（スタジオ）のメリット・デメリット

メリット

無料で始めることができる
Figmaで作ったものをSTUDIOへインポートできる
いちいちラフ案などを別で用意しなくても直接URLで確認できる

デメリット

プランによって制限がある
できないこともある

メリット

無料で始めることができる

Googleアカウントなどを使い無料でSTUDIOアカウントを作り、気軽にWebサイトを作ることができるのが良いですね。

STUDIOのサーバーを使うのでレンタルサーバー代もかからず、Freeプラン（無料プラン）だとサブドメインを使用しすぐに公開することもできます。

Figmaで作ったものをSTUDIOにインポートできる

figmaからデザインのデータをインポートする

デザインツールのFigmaで作ったものをSTUDIOに移行できるのが便利ですね。

Figma（フィグマ）で作ったWebサイト・パーツなどは、FigmaのFigma to Studioというプラグインを使用してSTUDIOにインポートすることもできます。

STUDIOからURLをクリックし直接Figmaのファイルを開いたり、Figmaにログインしてプラグインからインポートする方法があります。

Figmaのデザインが自動的にSTUDIOのボックスレイアウトへと変換されます。

全てのデザインページやパーツごとに分けてインポートできる所が良い感じです。

【Webデザイン】FigmaからSTUDIOへデザインをインポートする方法

もちろんSTUDIO上でもデザインできますが、FigmaでデザインしたWebサイトやパーツなどもSTUDIOへと移行することができ、さらにSTUDIO上で修正したい部分を改めて編集することができるのが互換性が高くて良いですね。

いちいちラフ案などを別で用意しなくても直接URLで確認できる

ラフ案など別のアプリなどで作成し用意しなくても、直接作り途中でもライブプレビューにてもURLをすぐに発行できるのでスマホやタブレットからでもどんな感じか確認できるところが良いですね。

さらにデザインエディタ上で、コメント機能をつかってボックス別でコメントを残せるのでやり取りがしやすいです。

デメリット

プランによって制限がある

プランによって制限があり、無料プランだとWebページの左下に小さなバナーが入ってしまいます。

バナー自体は小さく英語でそんなに目立ちませんが笑

できないこともある

STUDIOには機能など「できること」と「できないこと」があるので都度覚えておきましょう。

※随時更新されるのでできることが増えている可能性もあります。

下記の表にまとめておきます。

STUDIO（スタジオ）でできること・できないこと

STUIDOでできること	STUDIOでできないこと
アコーディオンを作る	ページネーションを作る
スライダーを作る	カート機能・決済機能
ブログを作る	予約機能
レスポンシブデザインを作る	タブレット・スマホで編集
ポップアップを表示させる	階層の深さに制限がある
デザインエディタ上でのコメント機能