ノーコードでWebサイト制作が可能なSTUDIOで、できないこととできることをまとめました。

STUDIOはWebサイト制作ツールでは珍しく国産なので、日本人にとってインターフェースなども理解&操作がしやすいサービスだと思います。 Webサイト制作の選択肢にSTUDIOを検討している方の参考にしていただければと思います。

STUDIOでできること

● 導入編

STUDIO導入の検討段階では何がどこまでできるのかも手探りの状態だと思います。
できなさそうで、実はSTUDIOでできることをお伝えしたいと思います。

自社での更新ができる

ノーコードのSTUDIOなら、テキスト修正や画像の差し替えなどの更新を制作会社に依頼せず、自社で完結することが可能です。
簡単なテキスト変更でも、制作会社へはスポットで費用が発生しますし、依頼のやり取りなどで自社のリソースも使います。
あらかじめ更新が入るような箇所は、STUDIOでのサイト構築時に制作会社に伝えておけば、更新しやすいようなデザインや構造で作成してくれると思います。
またこの後出てくるCMSを活用するのも良いと思います。
とは言っても、デザインの大幅な変更などは、制作会社に依頼するのが良いでしょう。
この場合のリニューアル費用も、通常のHTMLやWordPressのサイトに比べて安価に収まる可能性が高いと思います。

開発不要でフォーム作成ができる

STUDIOでは簡単にフォームを作ることができます。
入力欄はもちろん、ラジオボタン、チェックボックス、セレクター、ファイル添付も可能です。必須と任意の項目も設定できます。
送信内容の確認ページはありませんが、完了ページは表示できます。
送信されたデータはSTUDIOプロジェクト内のダッシュボードで確認でき、また担当者にメール転送も可能です。
また外部連携機能としてスプレッドシートに連携することも可能です。スプレッドシートに連携すると、Zapierというアプリを使いフォーム送信者に自動返信メールを送ることもできます。

フォームの基本的情報
・フォーム回答の表示制限ですが、プランによって異なります。
FREE:100 件まで
BASIC:1,000 件まで
PRO:10,000 件まで
ダッシュボードでの表示件数なので、対応が済んだものやスパムなど不要なものを削除していけば十分な件数ではないでしょうか。
また、表示制限を超えた分の回答もサーバーには保存されています。
表示件数が上限を超えた後の回答はダッシュボードで回答を削除すると、見れなかったデータが見れるようになります。
1つ注意があり、1つのプロジェクトで1日に5,000件を超えて受信することができません。
この制限を超えた分はサーバーにも保存されません。大量のメール配信などで回答を得る場合、注意が必要です。

・ダッシュボードで対応のステータス管理ができる
回答の対応をステータス管理できます。
デフォルトでは「未対応、対応中、完了、ゴミ箱」の4つですが、名称の変更や追加削除もできるので使いやすいようにカスタマイズ可能です。

・複数のフォームが持てる
1つのプロジェクト内で、複数のフォームを持つことができます。
たとえば「お問い合わせ」「採用応募」「アンケート」など。
フォームは複数持てますが、ダッシュボードでの回答の表示制限は回答の合計数です。

・回答のキーワード検索が可能
回答のフリーワード検索が可能です。日付の降順昇順や、ラジオやチェックボックスの場合、特定の回答をソートできます。

・Google reCAPTCHA v3の設置
不正なbotなどからフォームを守るGoogle reCAPTCHA v3が設置できます。
こちらはプロジェクトに対して設定するため、プロジェクト内のすべてのフォームに有効になります。(特定のフォームにだけ設置はできません)
※STUDIOではGoogle reCAPTCHA v2 は設置できません

・HubSpot Trackingの埋め込み
HubSpot Tracking idをダッシュボードの画面で入力するだけで連携可能
※プレビュー環境では動作しません

・外部フォームの利用
すでに外部のフォームプラットフォームを利用中の場合、「formrun」や「Googleフォーム」を埋め込みすることも可能です。
また、STUDIOのフォームではメール配信の機能やメール配信システムの連携はできません。フォームから得たメールアドレスに対してメルマガ配信などを行いたい場合は、STUDIOフォームを利用せず、「formrun」をSTUDIOに埋め込むといった方法もあると思います。

CMSの利用ができる

どのプランでも利用可能ですが公開できる記事の上限は以下の通りです。
FREE、BASIC:5記事まで
PRO:1,000記事まで
FREE、BASICの5記事では、使用法がかなり限定的なので本格的に使うならPROプランの一択です。
STUDIOのCMSでは、例えば、「お知らせ」「ブログ」「事例紹介」など複数の記事タイプを持つことができます。
記事タイプはいくつでも持てますが、公開している記事の合計がそれぞれのSTUDIOで契約しているプランの上限数です。
また、ライターやタグ、カテゴリなどのまとまりを作ることができ、対象のものだけをWeb上でソートして表示することができます。

デザインについては自由度がすごく高いというわけではありませんが、工夫次第で幅は広がります。極端なこだわりがない限り十分見映えの良いものは作れると思います。

1つ注意が必要なのが、STUDIOのCMSでは記事のインポート・エクスポートはできません。Wordpressなどの他のツールはもちろん、STUDIOのプロジェクト間でもできません。

Google Analytics

BASIC以上のプランで使えます。
Google Analytics v3、v4が使えますが、v4の利用にはGoogle Tag Manager の設定が必要です。Google Tag Managerの設定には多少知識が必要です。v4を利用する場合は設定まで制作会社に依頼するのが良いのではと思います。

noteとの連携やYoutube動画を掲載

デフォルトでYoutubeやGoogle Maps,Vimeo,Facebook,Twitter,Sportify,Codepen
SlideShare,Formrun,FIrework,HubSpotなど様々なコンテンツの埋め込みが可能です。

月毎の契約

料金は月払と年払いがあります。
月払いの方が割高ではありますが、最低利用期間などはありません。数か月しか使わないスポットのLP(ランディングページ)にもSTUDIOなら導入しやすいですね。

アフィリエイト

通常の商品アフィリンクなどはできますし、Amazonの商品リンクも埋め込み(Embed)を使用して掲載できます。
また、BASIC以上であればGTMを使うことでGoogle Adsenseも利用可能です。
GTMが使えるようになったので、おおよそ何でもできるかと思いますが、すべて検証したわけではないのでできないものもあるかもしれません。

プレビュー環境

STUDIOの魅力のひとつにプレビュー環境の利用があります。すべてのプランで利用可能です。STUDIOで作成中のページを簡単にブラウザで閲覧可能です。もちろんプレビュー環境の削除も簡単。また、編集中の内容がすぐにプレビューに反映されます。
ただBASIC認証がかけられないので、URLを知っていれば誰でも見れてしまうのと、Google Analyticsの動作検証ができなかったり、RSSの最新データを取ってこれなかったりと一部本番環境との違いがあります。

● 技術編

制作者向けに技術的にSTUDIOでできることをまとめました。

ヘッダー、フッターなどの共通パーツ

ページごとのアクティブの状態は持てませんが、共通パーツを使用することは可能です。
1つ修正すればすべてに反映されるので便利ですね!

モーダル

モーダル機能が使えます。けっこう簡単に(笑)
スマホのメニューなどもモーダルを使う形がおすすめですね。
以前、モーダルはレスポンシブ対応していませんでしたが、今はできるようになったのでとても便利です。

フォーム

導入編でもお伝えしましたが、STUDIOではプログラム開発不要でフォーム作成ができます。
以前はラジオボタン、チェックボックスが使えなかったのですが、2020年10月に機能が追加されました。
デザインはinputやセレクタは色や大きさなど、自由にカスタマイズ可能ですし、ホバーやフォーカスの状態も設定できます。
チェックボックスやラジオボタンは大きさくらいしか変更できません。線の色くらいは指定できたらよいのにな~と思います。

埋め込みができる

デフォルトでYoutubeやGoogle Maps,Vimeo,Facebook,Twitter,Sportify,Codepen
SlideShare,Formrun,FIrework,HubSpotなど様々なコンテンツの埋め込みが可能です。
多少コードの知識が必要になりますが、iframeの機能を使ってSpeaker DeckをSTUDIOに埋め込むこともできました。iframeもこの埋め込み機能を使って利用できます。

RSSの読み込みができる

noteの記事などをRSS埋め込み機能を使いSTUDIOプロジェクト内のページに表示することが可能です。表示数の変更やデザインのカスタムなど自由度も高いです。
ノーコードでここまでできるなんてすごいですね。
ちなみに読み込み可能なRSSは3つまでですが…
当社のお客さまでどうしても3つ以上使いたい!とのご要望があり、STUDIOさんに個別で対応していただいたことがあります。動作は保証しませんとの事でしたが、問題なく動いているようでした。この時はSTUDIOって、けっこう柔軟な対応をしてくれるんだな~と感心しました。

CMS

こちらも導入編でお伝えしましたが、FREE、BASICプランで5記事まで、PROプランであれば1,000記事まで利用可能です。
記事は「お知らせ」「ブログ」「事例紹介」など複数の記事タイプを持つことができます。
エディターで入力する記事のデザインはカスタマイズできますが、同じタイプの記事にはすべて同じスタイルが適用されます。
使えるタグは画像、Embed Block、リスト、ナンバーリスト、H2、H3、Quote、hrです。
同じタグにはすべて同じスタイルが適用されるので、自由度はあまり高くありません。
ただ、プロパティに登録した内容であればSTUDIO通常ページ内で可能な表現を使えるので、記事ごとの共通項目はうまくプロパティを活用するといいですね。共通項目がない記事は特定の項目を非表示にもできるので、うまく設計すれば凝ったデザインも可能です。

アコーディオン

こちらはFREEプランではできません。
BASICとPROプランでGoogleタグマネージャーと連携することで使用が可能です。
GTMとJavascriptの知識が必要なので、ノーコードではなくなりますが…。
GTMを使うことで、STUDIOでデフォルトではできないことが表現可能になります。

STUDIOでできないこと

● 導入編

次にSTUDIOでできないことをまとめました。まずは導入編です。

プロジェクトの細かいユーザー権限(役割)設定ができない

STUDIOプロジェクトの権限は「オーナー」と「編集者」しかありません。
オーナーはすべてのメンバーの削除が可能です。編集者は、メンバーの追加は可能ですが、削除をできるのは自分だけです。また、STUDIOプロジェクトの料金支払いが可能なのはオーナーのみです。
「編集者」の役割の幅が広すぎるのに少し困る方もいらっしゃると思います。プロジェクトのユーザーなら誰でも、「フォーム回答の閲覧」「サイトの公開」「ページの削除」など誤った操作で重大な事態が想定される事も操作できてしまいます。

スマートフォンで管理画面が使えない

通常ページの更新やデザイン修正などをスマホで作業しようと思う人は少ないと思いますが、CMSの記事作成などはスマホで進めたいとの要望もあると思いますができません。
WordPressはアプリがあり、記事の作成などはスマホからも操作できますが、STUDIOではできません。

プロジェクトのバックアップやコピー

STUDIOプロジェクトのバックアップやコピーはできません。サイトリニューアルの時や、念のためバックアップを取っておきたいときには不便を感じるかもしれません。

アカウントを削除を自分だけではできない

アカウントを削除する場合はSTUDIOのサポートに問い合わせをする必要があります。
少し面倒に感じますが、有料プランの方が誤って削除したりしないようにするためなのかもしれないですね。

ECでの利用(ショッピングカートなど)

STUDIOにはカート機能や、支払いの機能はありません。
ECで利用したい場合は他のサービスを利用した方がいいと思います。

会員制サイト

こちらもSTUDIOではできません。

予約管理サービス機能

STUDIOには予約管理機能はありません。
他の予約管理サービスを利用することになります。一部のカレンダー予約サービスではiframeによる外部埋め込みのコードが準備されていると思うので、そちらを利用してSTUDIOで作成したWebサイトに埋め込むことができます。しかし、「Google Chrome」においてサードパーティCookieの利用廃止が予定されているため、大手の予約管理サービスにおいてiframeでの埋め込み機能の廃止が進んでいます。単純に予約管理サービスへの外部リンク等を検討するのが良いのではないでしょうか。

● 技術編

STUDIOにはノーコードツールという特性上できないことがあります。
多くは代替可能ですが、こちらを踏まえてデザインをするとSTUDIO実装時に無駄がありません。

マージン、パディングの指定にAutoや%が使えない

マージンとパディングはpxのみ。px指定であれば、ネガティブマージン(- マイナスの指定)は使用できます。
画像の幅やdivの幅指定には%は使えます。
左右余白などでどうしても%で指定したいときは、透明のDivに%指定して調整します。

フォントサイズの指定にemが使えない

フォントサイズの指定はpxのみです。
h1などの大きいフォントサイズを指定する場合はちょっと困りますよね。
STUDIOではブレイクポイントごと(スタジオではスモール、タブレット、モバイル、ミニ*320pxのスマホなどと4つ設定可能)にフォントサイズの指定はできるので、そこで調整する方法になります。

ベースフォントの指定ができない

STUDIOでテキストを入力する場合デフォルトは「文字サイズ20px、フォントLato、行間1.4、ウェイトは400、文字色#333、中央寄せ」になります。
いちいち設定するのが面倒なので、いったん設定したテキストをコピペで使うのがおすすめです。
特に文字色#333と中央寄せ(デフォルトで幅auto)が見た目で気づきにくいので、注意が必要です。

ブレイクポイントで改行位置が変更できない

PCでは改行指定したいけど、スマホではなりゆきで出したいというテキストがよくあると思いますが、できません。やりたい場合は、PC用とスマホ用でそれぞれ作り表示/非表示で対応します。更新の際は変更漏れがないように注意が必要ですね。

STUDIOで使用しているドメイン内にSTUDIO以外のページは置けない

こちらはサブドメインを作って別ページを置くなどの対応になりますね。

ベーシック認証がかけられない

これ、地味に困りますよね。プレビューもURLを知っていれば誰でも見れてしまいます。
本番環境ではnoindexと最近非公開ページ(Basic以上)ができました。

マウスでの横スクロールに対応していない

STUDIOではマウスでの横スクロールができません。
キーボードの←→ボタンを押せばスライドできますが…
ちなみにスマホやタブレットでは横スクロール(スワイプ)できるので、スマホ限定の表現であれば使えると思います。
スクロールバーは表示されないので、デザインに工夫が必要になります。

通常ページでカルーセルできない

通常ページで…と書いたようにCMSの一部では使える機能です。
よく見かけるいくつかの画像やバナーをスライドで見せたいといった使い方は通常ページではできません。

プロジェクトのバージョン管理とバックアップができない

STUDIOのプロジェクトはバージョン管理ができないのでリニューアルの際などは別のURLで作って入れ替えるという形になります。
以前は推測されにくいページURLを設定してnoindex設定をして準備していましたが、最近「非公開ページ」ができたのでやりやすくなりましたね。
バックアップについては、プロジェクトを跨いでコピペできるので、バックアップ用の別のプロジェクトを用意してそちらに置くなどしています。ヘッダーなどの共通パーツはリンクが切れてしまったり、CMSの記事は移動できないのであくまでデザインのバックアップという形になりますが…

vw(viewport width)が使えない

なぜかvhは使えますが、vwは使えません。
%は使えるのでそちらで近い表現をする形になります。
CSSではできるのに!といったコーダー目線で見てしまうとSTUDIOではできないことは多いかもしれないですね。

スクロール量に応じてのアニメーションができない

たとえば、途中から固定メニューを出したいなんてことはSTUDIOではできません。
近い表現をするなら、ファーストビューの後ろに隠しておいて(重ね順を-3などに設定)途中から見えるようになるという表現になります。
グラデーションや透過の表現などデザインによって隠しておけないようなものには使えないので注意が必要です。あとふわっと出すのはできませんね。ふわっと出すのは最初から表示されているオブジェクトには使えます。
同じように途中から消すというのも、何かの後ろに隠すといった方法になります。

タブ切り替え

STUDIOのデフォルトの機能ではできませんが、アンカーリンクの切り替えで近い形の表現は可能です。

ドロップダウンリスト

こちらもデフォルトの機能ではできませんが、ホバーと表示・非表示のアニメーションを組み合わせて表現可能です。
このようにデフォルトの機能になくてもSTUDIOにある複数の機能を組み合わせて表現が可能になる事もあります。

いかがでしたか?
いくつかできない表現もありましたが、別の見せ方やデザインでカバーすればSTUDIOで質の高いWebサイトを制作することは十分可能です。
またコードやサーバーの知識がなくても、更新が簡単にできるのでアーリーステージのサービスや、まめに情報を発信したい企業さまにはとても使いやすいと思います。 ヒカリナではSTUDIOでのWebサイト制作もお受けしております。

<当社実績ご紹介>
当社が担当した47グループコーポレートサイトがSTUDIO DESIGN AWARD 2020コーポレート・サービスサイト賞を受賞しました。
47グループサイトリニューアルプロジェクト