おはこんばんちわ、hirokiです。
ノーコードツール「STUDIO」をご存知でしょうか？そもそもノーコードツールって何？という方もまだまだ多いと思います。
☑STUDIOを使いたいと思っている
本記事では、ノーコードとは何なのかに軽く触れてから、「STUDIO」について登録からサイト制作完了までを解説いたします。こちらの記事を最後まで見ていただけたら、ご自身でも使えるようになっています。
それでは、どおぞ！
【登録〜制作までを解説】ノーコードツール「STUDIO」
まずはじめに、ノーコードについて簡単に触れます。
ノーコードとは？
ノーコード（Nocode）とは、文字の通りソースコードの記述をせずにWebサービスやアプリなどのソフトウェアを開発できるサービスのこととなります。
基本的に何かを作る場合、プログラミング言語を理解しソースコードを記述しなければいけませんが、そういった専門スキルがなくても（非エンジニア）、作成することができるのです。プログラミング習得が億劫な方には神のような技術ではないでしょうか。
詳しい特徴などは↓の記事をご参考に
おはこんばんちわ、hirokiです。最近、プログラミングの勉強をし始めたところ、調べていると「NoCode（ノーコード）」という言葉を目にするようになりました。言葉の通り、コードなしでWebサイトやアプリが作れるという手法です。[…]
STUDIO
STUDIOはWebサイト構築に使うノーコードツールとなります。
コードやテンプレートに縛られず、リアルタイムで共同作業ができるため、誰でも自由にカスタマイズや作成をすることができます。
HPには事例も多数掲載されています。「スタートアップ」や「フリーランス」、「学生」や「制作会社」など幅広く利用されています。
恵比寿にある日本の会社になります。
STUDIOの特徴
STUDIOの特徴について記載していきます。大きく3つの特徴があります。
- デザイン
- 公開
- 運用
デザイン
実際に表示されるWebを見ながら、ドラック＆ドロップで作成をすることができます。
もちろん、ただデザインをするだけではなく、「アニメーション」をつけたり、GoogleFontと連携しているため「900種類のフォント」があり、Youtubeなどの「外部サービス」との連携まですることができるのです。
当然、今の多様なデバイスにも対応できるよう「レスポンシブ機能」もあります。
テンプレートとは言いながら、様々な機能や配置、フォントを変えることで個性を出したサイトを作ることができます！
公開
1クリックで作成したデザインを実際のWebサイトとして公開することが可能です。面倒なコーディングやサーバーの設定が必要ありません。
独自ドメインの設定に関しても、ステップに合わせてすすめるだけで完了することができます。
さらに、SSLも自動で設定され、サポートもしっかりしているので安心して使うことができます。
運用
Webサイトで重要な「コンテンツ」ですが、ドキュメントを作る際に他のツールは必要なく、このSTUDIO内で作成することができます。また、こちらも共同作業可能ですので、複数人でWebサイトのコンテンツを作成しアップロードすることができます。
CMSで重要になってくるSEO対策やサイトの分析もすることができますので、公開後も分析をしながら運用を楽にしていくことができます。
料金プラン
3つのプランがあります。
| FREE | BASIC | PRO |
| ￥0 | ￥980/月（月払いは1,280円/月） | ￥2,480/月（月払いは3,280円/月） |
✓デザインツールの全機能 ✓アニメーション ✓STUDIOバナー付公開 ✓サブドメイン公開機能 ✓CMS （計 5 記事まで） ✓Form （計100 件まで） | ✓FREE プランの全機能 ✓STUDIOバナーの非表示 ✓独自ドメインの接続 ✓外部Apps連携 ✓CMS （計 5 記事まで） ✓Form （計1,000 件まで） | ✓BASIC プランの全機能 ✓優先サポート ✓CMS（ 計1000 記事まで） ✓Form （計10,000 件まで） |
下位のプランを上位プランが踏襲しているといったわかりやすい内容かなと思います。特に太文字となっている機能が特におすすめです！
以下が機能一覧
| 機能一覧 | FREE | BASIC | PRO |
| デザインエディタ | 全機能 | 全機能 | 全機能 |
| アニメーション | ○ | ○ | ○ |
| シンボル | 全機能 | 全機能 | 全機能 |
| メンバー招待 | 無制限 | 無制限 | 無制限 |
| 公開 | ○ | ○ | ○ |
| 独自ドメインとの接続 | × | ○ | ○ |
| STUDIOバナーの非表示 | × | ○ | ○ |
| 外部Apps（拡張機能） | × | ○ | ○ |
| CMS | ○ | ○ | ○ |
| 公開できる合計記事数 | 5 | 5 | 1,000 |
STUDIOの使い方
STUDIOの登録から使い方を解説していきます。
登録方法
GoogleかFacebookアカウントで登録をします。
チュートリアルが4ステップありますので、こちらでおおよその操作方法を確認します。チュートリアル自体をスキップすることもできます。
チュートリアルが完了すると、いよいよ使えるようになります。
作成方法
左上のSTUDIOのアイコンをクリックするとTOP（ダッシュボード）に画面が遷移します。
テンプレートを選ぶ
赤枠の「+新しいプロジェクト」をクリックします。
白紙から作成とテンプレートから作成の2パターンがあります。画像ではテンプレートは4つですが、下にスクロールすると全部で38種類があります。有料のワードプレステーマより数は多いですね。
エディター
選んだテンプレートをエディターで編集していくことになります。
完了したら、右上の「プレビュー」をおすと見ることができます。「公開」はドメインの登録をしないといけません。
使ってみての感想
メリット
・日本の会社だけあって、画面の表記などは見やすい
・洗練されたエディターで見やすい
・テンプレートが豊富に用意されているので、独自のサイトが作りやすい
デメリット
・直感的に操作できないので、初心者は覚えるのが大変そう
・HTMLの表記もでてくるので、ある程度知らないと体裁が崩れやすい
まとめ
今回、ノーコードツール「STUDIO」について解説をしてきました。
使う、使い始めるという点においては簡単ですが、エディターで作り込んでいくとなると、使いこなすのに時間はかかりそうです。
以上、最後までお読みいただきありがとうございました。
では。