ノーコードツール【 STUDIO 】を使ってきました

こんにちは、いまいです。
今回は、プログラミング知識無しでウェブサイトが作れるサービス『STUDIO』を使ってみて感じたことを僕なりにまとめてみました。
ぜひ導入の参考になれば幸いです。
今回は試験的な話なので、無料枠での使用になります。

それでは初めて行くんですが、その前に

ノーコードとは一体？

というところから始めたいと思います。

ノーコード（NoCode）とは、自分でプログラムを組むことなくウェブサービスやアプリの開発ができるサービスのことを指します。
ウェブサービスやアプリの開発の際、プログラミング言語を使用し自分でプログラムを記述していくのが一般的です。
ですが、ノーコードツールを使用すれば自分でソースコードを記述する必要がないため、プログラミング言語をはじめとしたIT関連の知識がない、所謂『非エンジニア』でも開発をすることができます。

『NoCode』という言葉を初めに使った『Product Hunt』の創業者であるライアン・フーバー氏が書いたブログ記事では、ノーコードの定義を『GUI（画面操作）のみで、機能が充実したWebアプリを作ることができるサービスの総称』として紹介されています。

ノーコードツールにより、マウスひとつで自分のアイデアを形にできるようになった、というわけですね。

それでは本題です。

STUIOとは

STUDIOも、ノーコードツールのひとつです。
前述した通り、コードを書く必要がなく制作の知識がなくてもウェブサイトが作れるサービスで、デザイン制作からCMS導入・公開までをブラウザ内で完結できます。

https://studio.design/ja

続いて、使用してみて感じたメリット・デメリットを

STUIDOのメリット

複雑な作業がない

ノーコードツールなので、もちろんコーディングはありません。
他のホームページ作成ツールにありがちな、テンプレート依存もなく自由度の高い制作が可能です。
複雑なデザインだったとしても、マウス操作で実現できるのは特筆すべき点かなと思います。

提供素材が豊富

ヘッダーやフッター、カードブロックなどのレイアウトテンプレートをはじめ、写真素材やアイコン、フォントなども豊富に提供されています。
制作に欠かせない素材は一通り用意されているため、素材に困ると言ったことは少ないと思います。

ノンストレスなライブプレビュー

これは驚きました。
基本的に『保存ボタン』といった概念がないようで、操作するたびに自動保存＆反映されているイメージです。

ちょっとした操作でも都度即時反映されますので、『保存して、ブラウザリロード...っと』みたいな工程が省略され、ストレスなく作業が可能です。

直観的な操作感

管理画面を見てもわかる通り、とても『わかりやすい』です。

アニメーションでは専用の『モーションパネル』というものが用意されており、全て数値化表示されているため目視で調整しながらの作業が可能です。

レスポンシブに対応

基本機能として、『基準（PC表示） / タブレット / モバイル』の三段階でブレイクポイントが区切られています。
それぞれのサイズフォーマット毎にデザイン変更を行うことで、自動的にレスポンシブ対応してくれます。

拡張機能が豊富

有料プラン限定の機能にはなりますが、

構造的なマークアップも可能

基本的にテキストはpタグ、b追加したボックスはdivタグで設置されますが、それぞれ後から別のタグに変更することが可能です。
そのため、意図した構造にすることが可能です。
※class指定はできませんが、id指定はできます。（idはおそらくアンカーリンク使用時のため）

また、aria-hidden / aria-label のアクセシビリティにも対応が可能になっています。

制作コストが抑えられる

コーディングが必要ないので、コーダーさん無しでもサイト構築が可能です。
というのも、スキルが求められるサービスではないので、コードスキルのないデザイナーさんでもある程度の慣れで制作作業が進められるということです。

そのため、マネジメントやデザイナー・コーダー間のコミュニケーションが不要となり、その分のコストカットも期待できます。

WordPressのようにモジュールのインストールから始めるわけではなくデータベース云々という学習・理解も必要ないので、学習コストもかなり低いと思います。

デメリット

コーディングした方が自由度は高い

当然ながら自身でコーディングした方がデザインや処理の自由度は高くなります。
基本的には、ノーコードでサイト構築ができることを目的としたツールなので、シンプルな設計になります。

　アニメーションやプロパティなど実際にコーディングするのとSTUDIO内で完結させるのでは
プロパティの単位も制限があったり、むず痒く感じる場面も少なからずありました。

バックアップ機能はありません

先述した通り、操作毎に保存・反映されるのですが、それらは全て上書きの扱いになります。
作業中の【 ⌘ + Z 】はある程度有効ですが、一旦管理画面から離れたりリロードした場合は戻すことができません。
『公開』ボタンを押さなければ一般公開はされませんが、もし誤った操作でデザインが崩れてしまった場合は『戻せない』と思っていた方がいいでしょう。

機能の制限が大きい

STUDIOには有料枠・無料枠が用意されていますが、無料枠だとかなり制限がつきます。
導入にあたって、ここの確認は本当に必要です。

無料枠で可能なのは以下の通り。

STUDIOバナー付きでの公開
STUDIOのサブドメインでの公開（〇〇〇〇.studio.com）
CMSの投稿が5つまで（公開状態のもの）
フォーム送信が100件まで

無料枠でも制作自体はほとんど不自由なく進めることができますが、

独自ドメインが使えない
STUDIOバナーが外れない

という2点はかなり大きな障壁となると思います。
趣味サイトやプロトタイプ代りではなく、コーポレートサイトのような正式な形態で運用するのであれば、BASICプラン以上は必須かと思います。

そもそもサーバー費用が不要になるので、その分がSTUDIOになるだけという考え方もあります。

しかし、それでもCMS投稿が5件まで...
これについては、構成上CMS機能が不要であれば問題ないと思いますが、とはいえ「有料ならもっと投稿させてくれてもなぁ...」というのが個人的な感想です。

移管の際は注意が必要

制作したデザインデータは形式問わずダウンロードできるわけではなく、また検証からソースをコピーしてもJSフレームワーク（Nuxt.js）のコンパイルコードが表示されるだけになります。
それらを全てコピペしてHTML化するのは現実的ではありません。

何らかの事情でサーバーを変更したいという際は、一からコーディングしなおす必要があるかもしれません。
（かなり参入企業も多いのでおそらく可能性は0に近いと思いますが、サービスの終了時も同様に）

さいごに

初めてノーコードツールというものを使用してみましたが、最大の感想は『楽しい』でした。
コードを書いてサイト制作しているときとはまた違った『作ってる感』を感じることができます。

使用感のセクションで、
ブラウザ上での管理になるのでサーバー契約などの必要がありません。
ですので、ドメインさえ取得してしまえばブラウザで完結できてしまう手軽さは、非常に素晴らしいと思います。

複雑なデザイン構造で無い場合や、特殊な処理・挙動の必要がない場合は『アリ』だと思います。

メリット・デメリットともに、僕が今回感じたもの以外にもたくさんあると思います。
ウェブサイトを作るにあたっての仕様設計など、様々な視点で検討する必要があると思います。

ノーコードでウェブサイトを作るのであればSTUDIOはかなりお勧めです。
制作コストが削減できた分、他の部分に回すことも可能です