ノーコードでWebサイトを作りたいカメ
学び続けるウサギ
ノーコードでWebサイトを作りたいカメ
「白紙からなるべく自由にデザインしたい」
と思われる方はSTUDIOがオススメです。
STUDIOならノーコードで簡単にWebサイトを作ることができるので時短になりますね。
今回はSTUDIOについてご紹介していきたいと思います。
目次
STUDIOの始め方
アカウントは無料で作ることができます。
まずはSTUDIOにアクセスします。 無料ではじめるボタンをクリックします。
それぞれ「FacebookやGoogleのGmail」「新規登録用メール」などを使用して登録できます。
今回はGoogleで登録していきたいと思います。
すでにGoogleアカウントがあるのでメールアドレスもしくは、電話番号を入力します（アカウントを新しく作りたい場合は、右下あたりのアカウントを作成をクリックして作ります）。
次にパスワードを入力します。
Continueをクリックします。
STUDIOの用途の「個人」など選択し回答して利用開始ボタンをクリックします。
チュートリアルをはじめるをクリックして１、２分くらいでできる簡単な操作方法などのチュートリアルを行います。
チュートリアルが終了したら新しいサイトを作成をクリックすることで新しいプロジェクトを作ることができるようになります（このまま続けるでもサイトは作れます）。
Webサイトを新しく作る方法
元々チュートリアルで作られたFirst projectや前述の新しいサイトを作成以外にも、プロジェクト一覧ページの新しいプロジェクトから新しくWebページを作ることができます。
新しいプロジェクトをクリックします。
まっさらな状態から作りたい場合は、空白からはじめるの枠内をクリックします。
テンプレート（無料版 / 有料版）やワイヤーフレームを選択して作ることもできます。
プロジェクト名を記入します。 
記入できたら作成をクリックします。（後からでもプロジェクト名を変更することができます）
以上で新しいプロジェクトを追加することができました。
１つのプロジェクトが１つのWebサイトになります。
これで自由にWebサイトを作ることができるようになりました。
STUDIOの料金プラン
| プラン | 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に問い合わせることで構築できるようになります。
Freeプラン以外だとサーバーはSTUDIOのサーバーを使うので契約する必要がないのですが、ドメインが必要になってきます。
ドメインはXserverドメインなどがオススメですね。
- Xserverドメイン
※Xserver運営 - ムームードメイン ※GMOペパボ運営
- お名前.com ※GMOインターネット運営 国内シェアNo.1
ちなみにドメイン１つに対し１つのプロジェクト（Webサイト）に適用されます。
なので２つWebサイトを運用したい場合は２つドメインが必要になります。
ノーコードでWebサイトを作りたいカメ
とりあえず１つだけ有料プランのサイトを作りたいから、ドメイン１つ用意しま〜す♪
月間PV数制限
月間PV数制限を超えそうな場合は、メール通知やログイン後にモーダルにてお知らせが届き、アップグレードへのポップアップが出てきます。
月間PV数制限が超えてもすぐには停止になりません。
超過状態が続いた場合、STUDIOから連絡後にWebサイトの利用が停止されます。
アップグレードの他にも、PVスケールアップオプション料金として、2,000pv超過ごとに100円（USDだと$1）です。
ノーコードでWebサイトを作りたいカメ
STUDIOの支払い方法
クレジットカード・デビットカードで支払うことができます。
STUDIOのメリット・デメリット
- 無料で始めることができる
- Figmaで作ったものをSTUDIOに移行できる
- いちいちラフ案などを別で用意しなくても直接URLで確認できる
- プランによって制限がある
- できないこともある
メリット
無料で始めることができる
Googleアカウントなどを使い無料でSTUDIOアカウントを作り、気軽にWebサイトを作ることができるのが良いですね。
STUDIOのサーバーを使うのでレンタルサーバー代もかからず、Freeプラン（無料プラン）だとすぐに公開することもできます。
Figmaで作ったものをSTUDIOに移行できる
デザインツールのFigmaで作ったものをSTUDIOに移行できるのが便利です。
【Webデザイン】Web上で楽々デザイン・Figmaの簡単な使い方【デザインツール】
もちろんSTUDIO上でもデザインできますが、FigmaでデザインしたWebサイトやパーツなどもSTUDIOへ移行でき、さらにSTUDIO上で編集して作ることができるのが良いですね。
Figmaで作ったWebサイトをSTUDIOにインポートする方法
Figma（フィグマ）で作ったWebサイト・パーツなどはFigmaのプラグインで使用してSTUDIOにインポートすることもできます。
いちいちラフ案などを別で用意しなくても直接URLで確認できる
ラフ案など別のアプリなどで用意しなくても、直接作り途中でもURLをすぐに発行できるのでスマホやタブレットからでもどんな感じか確認できるところが良いですね。
さらにデザインエディタ上でコメント機能をつかってボックス別でコメントを残せるのでやり取りがしやすいです。
デメリット
プランによって制限がある
プランによって制限があり、無料プランだとWebページの左下に小さなバナーが入ってしまいます。
バナー自体は小さく英語でそんなに目立ちませんが笑
できないこともある
STUDIOには機能など「できること」と「できないこと」があるので都度覚えておきましょう。
※随時更新されるのでできることが増えている可能性もあります。
下記の表にまとめておきます。
STUDIOでできること・できないこと
| できること | できないこと |
|---|---|
| アコーディオンを作る | ページネーションを作る |
| スライダーを作る | カート機能・決済機能 |
| ブログを作る | 予約機能 |
| レスポンシブデザインを作る | タブレット・スマホで編集 |
| ポップアップを表示させる | 階層の深さに制限がある |
| デザインエディタ上でのコメント機能 |
※随時できることなどは更新されるのでできることが増えている可能性もあります。
STUDIOでは、できることとできないことがあるので事前に知っておいた方が良いですね。
大抵のことは意外とできるのですが、Webサイトを作ってて思ったのが、階層を深くしようとするとエラー表示で保存できなかったので無駄にグループ化せずにコンテナ数（div）などを増やさない方が良いですね。
まとめ：ノーコードのSTUDIOでラクラクWebサイト制作
今回はSTUDIOについてご紹介してきました。
STUDIOを使うことで比較的ノーコードで簡単にWebサイトを作ることができるのが便利ですよね。
ボックスレイアウトを使うことで直感的にレイアウトを組むことができ、あっという間にサイトが出来上がるので便利なノーコードツールです。
ノーコードでWebサイトを制作したい方に少しでもお役に立ちましたら幸いです。
