ノーコードツール「Studio」をおすすめできる/できないパターンやメリット・デメリットをまとめた資料を無料配布します

この度、お役立ち資料「Studio導入時に知りたい！Studioをおすすめできる/できないパターン」を制作しました！

本記事では、そのお役立ち資料の内容を少しご紹介します。

特に以下のような方におすすめの資料ですので、ぜひご覧ください。

• Studioを使おうか悩んでいる方

• ノーコードツールって正直どうなのか不安に感じている方

• Studioがいいかコーディングがいいか迷っている方

• Studioのメリット、デメリットを知りたい方

本資料を作った理由

カロアでは、ノーコードWeb制作ツール「Studio」のミッション、プロダクト自体の使いやすさに魅力を感じ、Studio Expoerts（旧：Studio Partners）の発足当初から認定いただき、3年間STUDIOでのWeb制作の活動してきました。この記事を書いている私（葉栗）としては2018年ごろから使用しています。

そのなかで「Studioって実際どうなの？」「導入してみて本当にいいの？」という意見を多くいただくことがあり、Studioのちゃんとした情報をより多くの方に知っていただき、判断材料としていただくべく、カロア独自にまとめて本記事を作成しました。

記事内ではStudioではできないことを中心に紹介していくので、その仕様を許容できるかどうかをご判断ください。

この記事の完全版としてまとまった情報で読みたい場合は、PDF資料もあるのでダウンロードしてご覧ください。

PDF資料ではより図解でまとめているため、視覚的に分かりやすくなっています。社内での回覧用としてもご活用いただけます🙌

カロアではノーコードツール「Studio」を使ってWeb制作を学ぶオンラインのパーソナルトレーニング「カロアキャンプ」を運営しています。

Studioをもっと知りたい、ノーコードでのWeb制作を学びたい方はおすすめです。

カロアキャンプについて詳しく見る

前提：Studio導入の判断材料に

カロアでは目的が合えばWeb、ホームページ制作ではStudioを推奨しています。ただ、目的によってはStudioじゃなく、コーディング（スクラッチ）で作った方が良いこともあります。

良し悪しを判断するためには、まずStudioって何ができないのかを事前知識として知っておくことが大切です。

Webサイトは顧客、社員、ユーザーなどとの大切な接点であり、定期的に運用していく必要があります。そのため、Webサイトを何で制作するかは大切な決断となります。

なるべく分かりやすく、網羅的にまとめていますが、もしこの資料を読んだ上でも判断に困れば、ぜひカロアに相談ください。状況に合わせてアドバイスさせていただきます。

Studioがおすすめの場合、向いていない場合

判断軸としてよくお伝えしているところをいくつか挙げていますが、これに当てはまるから絶対に良い、絶対にダメということではありません。あくまで判断材料の1つとして参考にしてみてください。

おすすめの場合

• エンジニアのリソースを減らしたい

• 営業や広報・人事などデザイナー、エンジニアではない人が更新したい

• コンテンツやマーケなどにもしっかりと力を入れたい

• まずはミニマムに作って仮説検証を通して、拡張したい

• 1 - 30ページほどの小中規模のサイトをつくりたい

• ディレクター+デザイナーのミニマム体制で制作・運用していきたい

• デザイナーが直接サイト制作したい

• 企業のオウンドメディアを作りたい

向いていない場合

• 企業のオウンドメディアを作りたい

• ユーザーにクリックやマウス操作によって、インタラクティブな体験にしたい

• ページ速度を高速にしたい

• 本格的なWebメディアを作りたい

• 外部のプロダクトやサービスとの密な連携が必要

• 100ページ規模の大規模なWebサイトを作りたい

• 本格的なECサイトを作りたい

• 検索機能が豊富なポータルサイトを作りたい

Studioを導入される理由のとして「エンジニアのリソースを減らしたい」「社内でホームページ運用を内製化したい」があります。

もともとWebサイト/ホームページ制作は、専門のエンジニアや制作会社しかできませんでした。それがノーコードツールの発展によって誰もが作れるようになりました。

そのため、エンジニアのリソースを減らしたり、開発費を減らしたりしてその分、デザイン、マーケティング、ブランディングといった領域にまわす場合にはStudioは非常に有効です。

逆にしっかりとした体験や演出をつけたいようなキャンペーン、イベントサイトの場合は、STUDIOでは制約が多すぎてお勧めできません。カスタムコードで無理やりやることもできるが、そこまでしてやる必要があるかは要検討です。

ノーコードは魅力が多くて素敵ですが、ノーコードツールの仕様で必要十分の場合に最も効果を発揮します。

それを超える場合は余計に工数がかかってしまって、コーディング（スクラッチ）で作ってしまった方が実は良いケースも多くあります。

Studioの基本知識

Studioは考え方や使い方次第ではできることはいっぱいあるので、「できないことを知る」のが大切です。これから列挙するできないことを代替案もしくは、許容することができるのであれば、Studioを導入するのがおすすめです。

ただ、絶対に外せない要件があり、許容できない場合は、StudioでのWebサイト制作は断念して他のツールかコーディング（スクラッチ）をお勧めします。

前提として標準機能（ノーコード）を使用してできないことをまとめています。コードを書いてローコードにしたら解消できることも中にはあります。

基本機能で許容すること

サイトの表現や機能で一般的なサイトだとよく使用されているけど、Studioの標準機能では実現できないので許容しないといけないことを紹介します。

1. タブ切り替えができない

代替案として、タブをクリックしたときにページ内で切り替えを行う必要があるのか、もしくはページ遷移しても大丈夫なのかによって以下の方法があります。

【ページ内でタブ切り替えを行う場合】

以前カロアの別記事でも紹介したIDを使った実装をすることで代用可能です。

【ページ遷移が可能な場合】

タブごとに別ページを生成してリンクで接続します。一件タブ切り替えができているように見えますが、単純にページ遷移しているだけです。

上記どちらかの方法を使用すれば代替が可能ですが、ユーザー体験に違和感は多少あります。

2. 会員登録・ログイン機能がない

代替案として、標準機能で「サイト全体をパスワードで保護する」機能を使用します。ただ、完全な代替ではなく単一パスワードによるサイトの保護が目的なため、会員登録・ログインという機能が厳密に必要な場合はStudioの利用はお勧めしません。

フロントエンド上（画面上）は、再現できるようなツールも存在していますが、データ自体は取得されるなど、正直意味がないので、素直に別ツールで作るのがいいかと考えています。

3. 動画のアップロードができない

代替案として、VimeoやYouTubeなどの動画プラットフォーム、もしくはAWS S3などのクラウドストレージサービスを別途契約し、アップロードした動画をiframeで埋め込むことで代用が可能です。

公式ヘルプ：YouTube動画を埋め込む、Vimeo動画を埋め込む

4. パンくずの自動生成ができない

代替案として、頑張って手動で全ページ作ることで代用が可能です。しかし、ページタイトル等が自動で変更されないので、運用には注意が必要です。

フォーム機能で許容すること

1. 送信完了メールの自動送信ができない

代替案として、ZapierやMakeといった外部ツールと、スプレッドシートを連携させることで、自動でメールを送信することができます。一部知識が必要ですが、慣れると簡単にできます。もし不安であれば、カロアにご相談いただければ、設定まで代わりにサポートいたします。

公式ヘルプ：フォーム送信時の自動返信メール

2. フリーメール禁止などの条件をつけられない

Studio内で完結させるのは難しいため、HubSpotやAccount Engagement (旧Pardot)といった外部のフォームツールを使用してサイト上に埋め込むことで代用が可能です。

3. エラーメッセージのカスタマイズはできない

カスタムコードを使用してスタイルを上書きすることでカスタマイズは可能ですが、もはやノーコードではなくなってしまうので注意が必要です。

4. フォーム回答数に上限がある

プランによってフォームの回答数の閲覧に上限が設けられています。ただし、フォームの結果をスプレッドシートに書き出すことができ、かつStudio上で保存しないようにすることで、上限は回避できます。

デザイン制作｜許容すること

1. フォントの相対値設定ができない

remやemといった相対値での設定はできずに、ブレイクポイントごとにpxでの指定をすることになるので、少し厄介です。

2. 独自フォント追加ができない

Google FontsとTypeSquareに対応しているので、フォントの選択肢としては多くて安心です。ただ、それ以上欲しければ追加することは難しいです。

3. 色の一括変更ができない

テキストや線などの色は全て手動で設定しているため、全部の色を一括で変更することができません。そのため、実装前にしっかりとカラールールを設定することをお勧めします。

4. classが付けられない

要素に対してIDしか付与することができません。そのためclassによって再利用可能なスタイルを定義することができないので、スタイルの管理が少し煩雑になります。

5. スクロール連動のアニメーション指定不可

スクロールをトリガーにしたスタイルの変化はできないので、パララックスのような表現はできません。カスタムコードでコードを書けば実現できますが、ローコードになってしまいます。また、23年にリリースされたLottie連携で実現も可能ですが、リリース直後ということもあり動作が不安定なこともあります。

6. ページ遷移のアニメーション指定不可

Studioにはデフォルトでふわっとしたアニメーションが入っています。それ以外を指定することができないので、ページ遷移のアニメーションにこだわりがある場合はStudioではおすすめできない可能性もあります。

7. max/minの値が指定できない

縦幅、横幅を指定するときに最大値（max-widthなど）と最小値（max-widthなど）を指定することができません。

8. 偶数、奇数番目のスタイル指定ができない

リストやCMSを使用して交互にスタイルをつけるみたいなことが標準機能ではできません。

そのため、手動でリストを作成するか、リスト全体にIDを付与してカスタムコードでCSSを書くといった代案が必要になります。

CMS機能｜許容すること

1. ページネーションができない

代替案として、noteのように「もっとみる」ボタンで読み込むことはできます。しかし、読み込んだ内容をサイト上に記録されないので、「一覧」→「詳細」→「一覧」と戻ってきた場合は、もっとみるで読み込んだ状態はリセットされます。

2. コメント投稿機能はない

ブログの記事ページにあるようなユーザーがコメントを書き込めるような機能はありません。代表的な代替案はありません。

補足として、ライターの記事入力画面で、校正のためにWordやGoogle Docsのようなコメント、フィードバックを書く機能はありますので、ライティングとしては活用いただけます。

3. 自動で人気順が表示できない

代替案として、自動でソートはできないので、コレクション機能を使用してアナリティクスツールで確認した人気順に、手動で並び替えて実現することはできます。

4. 自動で関連記事をだせない

代替案として、標準機能ではできないため、プロパティを追加して手動で一つずつの記事に紐づけることで代用できます。
もしくはタグを紐づけて、同じタグを含んでいる記事を表示させることはできるので、その方法で代用できます。

5. 記事作成エディタで使える要素が少ない

例えば、左右に表示させる、吹き出し、ボタン、記事埋め込んで自動で表示されるといったカスタマイスは実装できません。そのため、画像で代用する場合が多いですが、装飾を多くしたい場合は機能不足に感じます。

【使える要素】

<h1>, <h2>, <h3>, <p>, <b>, <s>, <u>, <i>, <a>, <li>, <ol>, <blockquote>, <hr>, <code>, <img>, <iframe>, <table>, <th>, <td>

6. 高度な複数条件でのフィルターはできない

Studioの仕様上、1つだけのフィルター機能は実装可能です。

ただし「2020年 x お知らせ」といった2つ以上の条件式を同時にかけることができません。代用方法は現時点ではないので、複数条件を使用しない見せ方を検討する必要があります。

参考：https://corporate.coincheck.com/press

カロアで制作した上記サイトでは、「時期」「カテゴリー」の複数絞り込みではなく、実はどちらかを指定したら、もう片方はすべてになるようになっています。

7. 読み込みに時間がかかる

CMSを利用した場合、サイトにアクセスして描画されてからデータ取得するため、数秒の遅延が発生します。このページもStudioで作っているため、最初のアクセス時に少しラグがあったかと思います。

データ容量によって変わりますが、この遅延が許容できない場合は、改善する方法がなくStudioのアップデートを待つしかありません。

8. CMSデータのエクスポートはできない

CMSデータはエクスポートを現時点ではすることができないため、記事データなどを今後移管する可能性がある場合は、社内で事前の検討が必要です。

インポートは、局所的ですがWordPressのXMLデータのみインポートができるようになっています。

サイト公開｜許容すること

1. 無料で独自ドメインでの公開はできない

無料だと「xxxx.studio.site」というStudioのサブドメインでの公開となります。独自ドメインの場合はStarterプラン以上の有料契約が必要です。

2. 既存サイトから切り替え時にダウンタイム発生

既存で使用しているサイトから同じドメインでStudioへの切り替えを行う場合に、最大2〜48時間サイトが閲覧できなくなる可能性（ダウンタイム）があります。事前に社内での告知や調整が必要になります。

公式ヘルプページ：WebサイトをSTUDIOに移行する時、公開サイトのダウンタイムをゼロにできませんか？

3. ページの予約公開・更新ができない

CMSを用いた動的ページ（記事ページのようなもの）であれば、予約投稿可能ですが、通常の静的ページだとできないです。そのため、予約公開したい場合はCMSを使用します。

4. ページ単位の更新ができない

Studioではサイトが一括公開になってしまうので、下層ページの1ページだけ公開とかができません。

例えば営業の方が編集して途中のままにして、他の部署の人が違うページを編集して本番公開した場合は、途中だった変更内容も一括で公開されてしまうので、社内で運用フローを作りましょう。

5. 小文字英語のドメインしか使えない

Studioでドメイン接続する場合は、小文字の英語ドメインにする必要があります。たまに日本語や大文字英語のドメインを使用したいと思って取得後に使えないという声を聞くので、事前に確認しておきましょう。

公式ヘルプ：独自ドメイン接続に使用できるドメイン

6. ドメインの購入、管理はできない

Studioはあくまでサイトを公開するだけの機能しかないため、ドメインを購入したり、管理する機能はありません。そのため、お名前.comだったり、Xdomainsなどといった外部サービスを使う必要があります。

7. 既存サイトの下層の一部のみ移行は難しい

例えば example.com/recruit 配下のみを、URLそのままでStudioに移行したいというユースケースの場合、プロキシという技術を使うのですが、 Enterpriseプラン以上での対応サポートとなっているため、検討が必要です。やるのであれば、recruit.example.com といったようにサブドメインを切って実装するのが現実的です。

8. 自分で用意したサーバーを使えない

そもそもStudioが提供するサーバー上にサイトを載せて公開するため、自前のサーバーは使用できません。裏返すとサーバーを独自に用意する必要はありません。

9. メールサーバーは提供していない

Studioではメールサーバーは提供していません。そのため別のメールサーバーを契約する必要があります。

10. プレビューと本番に差異がある

Studioにはリアルタイムでサイトを確認できるリアルタイムプレビュー機能があります。ほぼ再現できてはいますが、読み込みのずれ、アンカーリンクが動作しないといった不具合があるので、過信しすぎずに公開後のチェックも必須です。

11. 表示速度が高速ではない

Studioの利用ユーザーの中でよく問題に上がりますが、Studioを使用したサイトのページ表示速度は決して高速ではありません。

特にモバイル表示時にはPageSpeed Insightsの点数が低く算出される可能性が高いです。Studio公式が出している対策を実施してみてください。

公式ヘルプ：STUDIO公開サイトの表示速度を向上させるヒント

その他｜許容すること

1. パソコンでしか操作できません

Studioはパソコン（Google Chrome推奨）でしか、操作できません。記事の公開やサイトの修正には必ずパソコンが必要になりますので、注意してください。

2. 夜間、休日はサポートにつながらない

Studio公式のチャットサポートか、コミュニティで日本語で質問できます。公式サポートの方が正確ですが、ユーザー急増中のため遅い可能性もあります。しかも夜や休日はつながらないので、注意してください。

3. サービス終了時の対応が必要になる

現時点ではもちろん終了予定はありませんが、クラウドサービスのため終了時は利用者による一定の対応が必要になります。

万が一サービス終了する場合は、1ヶ月前に連絡があるようです。詳しくは、STUDIOのセキュリティ対策｜STUDIO U のセキュリティ記事チェックシート内、『アプリケーション運用』項目の『可用性＞計画停止予定通知』をご覧ください。

公式ヘルプ：万が一STUDIOのサービスが終了してしまった場合そのサイトはどうなりますか？

資料の更新履歴

Studioは日々アップデートがされているため資料は日々アップデートいたします。

24/04/08：v.1.2

• SEO対策に関するページに「内部施策」「外部施策」のコンテンツを追加

24/03/28：v.1.1

• 料金プランにWebhook機能を追加

• 「 サイト公開」する前に知っておくべきことに、「既存サイトの下層一部のみ移行方法は、主に2パターン」ページを追加（p32）

24/03/25：v.1.0

• 資料を公開しました