NoCodeツール（STUDIO）を触ってみた

はじめに

本記事はSTUDIOの詳細な使い方は記載していません。
STUDIOというツールを触ってみて、自分が気になったところを調べた内容を記載してます。

NoCodeツールとは

NoCodeツールとは、ソースコードの記述をせずにWebサービスやアプリなどのソフトウェアを開発できるサービスを指します。
基本的にはすでに完成したパーツやテンプレートをドラッグ＆ドロップで組み合わせて開発を行うらしい。

NoCodeツールのメリット

• プログラミングの知識が必要ない
• Webサービス開発の費用・時間削減
• 開発スピードが早い

NoCodeツールのデメリット

• 定型的なことしかできない
• プラットフォームへの依存リスクの高さ
• 提供企業のほとんどが国外企業

NoCodeツールはどんなのがある？

ノーコードのカオスマップ

こちらからダウンロードできます。（2022年8月版）
Webサイト作成で有名なWORD PRESSもNoCodeツールに入るのですね。

「STUDIO」を触ってみる

公式サイト

STUDIOとは

STUDIOはHTMLやCSSの知識がなくてもWebサイトが作成できるサービス。

やったこと

• アカウント登録 + チュートリアル

  • FacebookかGoolgeで登録する。
  • いくつか質問に答える
  • 軽いチュートリアルクリアすると本作業に移れる。

• 基本を学習する
  チュートリアルの後、こちらの動画を見ながらペラ1ページを作成した。（動画見ながらなので1時間弱くらいで以下を作った感じです）
  作成して「ライブプレビュー」ボタンを押下するとURL発行されて見れるようになります。

  ▼サンプル
  https://preview.studio.site/live/M3aAJr5YWe/1

気になったこと

CMS機能について

こちらに解説動画がある。
アイテム（記事、ユーザー、タグなど、コンテンツ一つひとつのこと）を予め作成しておき、記事に埋め込む事で管理画面から変更が可能。
コンテンツ運用していくならこちらの機能を使うことになりそう。

料金プランについて

以下４つのプランがある。
上のプランだから使える機能が増えるという訳ではないみたい。

Freeプランだと独自ドメインが使えないので会社で使うとなると、最低でもStarterにする必要はある。
CMS、Businessにするかは、PV数や必要なアイテム数で決めることになる。

• Freeプラン

  • ０円
  • 基本的な機能は使える
  • CMS（１０００アイテムまで）
  • 独自ドメインの設定ができない
  • STUDIOバナーが付いてしまうみたい
  • フォームの回答数１００件
  • 月間PV１００００PV

• Starterプラン

  • 月９８０円
  • STUDIOバナーなしでOK
  • 独自ドメイン可能
  • 外部Apps連携 *1
  • フォームの回答数１０００件
  • 月間PV５００００PVまで

• CMSプラン

  • Starterの全機能
  • CMS（１０００アイテムまで）
  • フォームの回答数１００００件
  • 月間PV１０００００PVまで

• Businessプラン

  • CMSプランの全機能
  • CMS（１００００アイテムまで）
  • 月間PV数１００００００PV
  • ライター権限

  詳細はこちら

補足

• 外部Apps連携について

  • 以下のサービス連携が可能というだけで、どのサービスでも連携が可能なわけではないみたい。

    • Googleタグマネージャー
    • Googleアナリティクス
    • Googleサーチコンソール
    • Channel
    • Intercom
    • Facebookピクセル (Facebook広告用)
    • Google reCAPTCHA v3
    • HubSpot Tracking(Beta)

    詳細はこちら

• 月間PV数について

  • プランごとに月間PV数に上限がある。
    ただ上限を超えても即座にWebサイトが閲覧できなくなることはないが、１ヶ月以上月間PV数を大幅に超過し続けた場合は、運営から連絡が来るみたい。
    多分無視すると停止になる。

    • Freeプラン
      • 10,000 PV
    • Starterプラン
      • 50,000 PV
    • CMSプラン
      • 100,000 PV
    • Businessプラン
      • 1,000,000 PV

    詳細はこちら

STUDIOで「やれること / やれないこと」について

こちらが参考になった。
結構できないこと多い...がバージョンアップにより、どんどん出来ることも増えている。

アニメーションもできるらしいので触ってみる

以下サンプル

• https://oyogetaiyaki.com/
• https://moro-design.studio.site/
• https://preview.studio.site/templates/EjOQdR3mWJ
• STUDIOで作成された事例集

STUDIOアニメーションという機能で再現できるみたい
（2020年6月4日にリリースされたSTUDIO 3.0での追加機能らしい。それまでは動きのないページしか作れなかった。ちなみにCMS機能も3.0から使えるようになった機能らしい）

すごくざっくりですが作り方は以下（一例）

• 画像 or テキストをデザインエディタに配置
• モーションタブからイージング、時間、遅延等の設定値を変更する。
• 右上「公開」ボタンの下にある「条件付きスタイル」部分にカーソルを当てると「ホバー」か「出現時」から選択する
• ボバー：ホバーした時にアニメーションが発動
• 出現時：画面読み込み時にアニメーションが発動

詳細は以下動画で解説されている。

• アニメーションの紹介 | STUDIOアニメーションで遊ぼう！
• 機能解説＆初心者編 | STUDIOアニメーションで遊ぼう！
• 上級者編 | STUDIOアニメーションで遊ぼう！

上記動画のサンプル

所感

良いところとしては「複数人で同時に触れる」「デザインがGUIで作れる」などがある。
気になったところとしては「デザイン面でできないところ、やりにくいところ」が結構ある。
例えば「クリックで開閉するアコーディオンが作れなかったり出来ない」「改行位置のレスポンシブ調整ができない」などがある。
また「外部連携は指定された範囲でしかできない」ため自社APIなどにアクセスする事もできない。
（2022年8月現在）

補足としては、上記の「気になったところ」にあげたものは本記事を書いている時点のものでバージョンアップにより解消されるケースも多い。

「シンプルなデザインのLP作成」や「プロトタイプでなんとなくイメージを形にする時」は使えそう。
何か処理が必要なものは基本できず、やろうとするとGTMからjsを埋め込む方法になりそう。（ちょっと無理矢理感がある方法しか無いみたい）
個人的にはメインのコンテンツ運用や少し処理が入るものは今のところWordPressかなという印象だった。