記事内に広告を含みます

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

STUDIOでwebサイト制作

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

ノーコードで簡単にWebサイトを作りたいな〜
STUDIOならノーコードでWebサイトを作ることができるよ♪

学び続けるウサギ

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

そうなんだ〜♪ ノーコードで楽々サイトを作りたい♪
「ノーコードでWebサイトを作りたい」

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

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

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

今回はSTUDIOについてご紹介していきたいと思います。

STUDIOの始め方

アカウントは無料で作ることができます。

STUDIOの始め方1

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

STUDIOの始め方2

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

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

STUDIOの始め方3

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

STUDIOの始め方4

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

STUDIOの始め方5  

Continueをクリックします。

STUDIOの始め方6  

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

STUDIOの始め方7

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

STUDIOの始め方8

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

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

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

STUDIOの始め方1

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

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

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

STUDIOの始め方3 プロジェクト名を記入します。 STUDIOの始め方4 記入できたら作成をクリックします。(後からでもプロジェクト名を変更することができます)

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

1つのプロジェクトが1つの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アイテムが10個まで使用可能に
さらに大規模なWebサイト構築なら「Enterprise」プランもありSTUDIOに問い合わせることで構築できるようになります。

Freeプラン以外だとサーバーはSTUDIOのサーバーを使うので契約する必要がないのですが、ドメインが必要になってきます。

ドメインはXserverドメインなどがオススメですね。

おすすめドメイン3選

月間PV数制限

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

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

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

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

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

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

STUDIOの支払い方法

クレジットカード・デビットカードで支払うことができます。

STUDIOのメリット・デメリット

 

メリット
  • 無料で始めることができる
  • Figmaで作ったものをSTUDIOに移行できる
  • いちいちラフ案などを別で用意しなくても直接URLで確認できる

 
デメリット
  • プランによって制限がある
  • できないこともある

メリット

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

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

STUDIOのサーバーを使うのでレンタルサーバー代もかからず、Freeプラン(無料プラン)だとすぐに公開することもできます。

Figmaで作ったものをSTUDIOに移行できる

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

figmaの使い方 【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サイトを制作したい方に少しでもお役に立ちましたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です