STUDIOで「できないこと」を知っておこう

ノーコード系 ウェブ制作ツール STUDIO で「できないこと」を書き出してみました。サイトの制作運用で困り度が高そうな順(独断)に書き出しています。
STUDIOの機能として対応していない場合と、無料版では対応していない場合がありますが、この記事では有料版で対応していない機能を中心にとりあげます。
できないことがわかっていれば、あらかじめ覚悟を決めたり、対策を打てるというものです。
STUDIO 単体ではできないことも、Google Tag Manager(GTM) や Zapier などの外部サービスと連携すれば実現できる可能性があります。ノーコードではなくなってしまいますが、だいたいのことはGTMでできます。JavaScriptはいいぞ。

すべて執筆時点(2022年1月6日)の情報です。 もし「できないと書いてあるけど、それはできるよ」といった情報がありましたら Twitter @Pentaprogram チャットまでご連絡ください。

目次

プロジェクトのインポート・エクスポートができない

STUDIO ではプロジェクトのインポート/エクスポートができません。このため、サイトをバックアップのためにローカルに保存したり、あるいはテンプレートのように配布したり、といったことができません。
2022/08/15:プロジェクトの複製機能がリリースされたため、記述を変更しました。


CMSデータのインポート・エクスポートができない→インポートできるようになりました

STUDIOのCMS機能にはデータのインポートやエクスポートの機能がありません。また、モデル/コレクションのスキーマも同様にインポート・エクスポートができません。
2022/07/27追記:WordPressエクスポートファイル(.xml)をSTUDIOにインポートできるようになりました。

PDFファイルやZIPファイルをアップロードできない

STUDIOには画像ファイル以外のデータをアップロードできません。
このため、STUDIOにPDFファイルやZIPファイルをサイトに掲載したい場合は、Google Drive や Dropbox にアップロードしておき、共有リンクを取得して利用します。

任意JavaScriptやCSSを挿入できない

STUDIOは現状では、任意のJavaScriptやCSSを自由にページに挿入できません。もちろんHTMLを直接編集することもできませんし、CSSで複数のボックスの値を一括して変更するといったことはできません。
いくつかのあらかじめ許可されたサービスはページやCMS記事上でembedできることもあります。
エディタ上でembedできるサービスの例:GoogleMaps、Youtubeなど
対策としては、Google Tag Manager と連携すれば、だいたいのことはできますが、Tag Manager自体の使い方を覚える必要があります。
Googleタグマネージャーの連携方法

任意のボックスにIDを与えることはできます。ただ任意classは付与できないので、GTMでうまいことするには、加工したい要素を囲むボックスにIDを振って、そのなかのHTMLタグになんやかやする形になります。

2022年1月7日追記

iframeのCustomを使うと、HTMLタグに対してインラインのスタイルは当てられるとの情報をいただきました🙏

「CSSを挿入できない」という箇所ですが、かなり強引な方法ですが、iframeのCustomで埋め込みコードにインラインスタイル方式で記述すると、CSSが当てられますよ。以前フォームメーラーを入れ込んだ時にこの手法を使いました。参考までに。

引用元:@coume82268656さんのツイート

ページを予約公開・予約更新できない

地味に困るのが、特にデザインエディタ上で作成したページを公開・更新予約できないことです。私の知る限り、手動で指定時に更新するほかないので、対策があれば教えてください🙇‍♀️
2022年5月、CMSに「公開予約」機能が加わり、CMS記事であれば公開予約できるようになりました🎉

ページにパスワードをかけられない

STUDIOにはFTPの概念がないので、いわゆるBASIC認証なども使えません。
どこからもリンクしない状態でページを作成して、URLを複雑なものにし、さらにnoindex設定を行う程度のことはできますが、URLを知っていれば誰でもみられる状態になります。

デザインエディタでは1ページごとに更新できない

既に公開中のサイトで、複数ページに変更がある場合、ある1ページの変更のみを公開する、といったことができません。更新ボタンを押すと、全てのページの変更が公開サイトに反映されます。
このため、ページを変更したい場合は、ページを複製して、別の非公開のページとして作業→OKの段階で差し替えて公開する、という手法をとることになります。
CMSでは各々の記事ごとに変更/公開できますので、エディタ上の一部分をCMSで構成すれば部分的な変更も可能になります。

バージョン管理機能がない

STUDIOには更新履歴などのバージョン管理機能がありません。また、デザインエディタの「戻る」の挙動も期待した通りには動かないことがあります。このため、大きめの変更がある場合は特にページを複製してバックアップしておくとよいです。

サイト内検索機能がない

STUDIOにはキーワード検索機能がありませんので、サイト内検索をつけられません。CMSのタグ機能を使えば、指定のタグがついた記事を一覧で表示するということはできます。

コメント欄や会員登録機能がない

STUDIOには、いわゆるブログ記事コメント機能や、会員サイトの作成機能がありません。
ただし、裏技的に、GoogleスプレッドシートとGoogleアクションスクリプトとRSSを組み合わせて掲示板を作った方もいらっしゃいます(詳細はSTUDIOコミュニティに会話があります

リダイレクト機能がない→一部できるようになりました

ページ移転の際に利用するような、リダイレクト機能がありません。また、wwwのありなし統一のリダイレクト機能もありません。
STUDIO サブドメインから独自ドメインに切り替えた際のドメインリダイレクトのみ効きます。
wwwのありなし統一に関しては、Googleドメインなどのドメイン提供サービス側の設定で実現可能なこともあります。
2022/07/27追記:デザインエディタ上で制作したページに対して、1対1のリダイレクトができるようになりました。

ドメインやメール契約がない

STUDIO純正の(?)直結型のドメイン取得サービスはありません。Googleドメインや Value Domainなど外部のドメイン取得サービスを利用することになります。
また、メール機能もありませんので、独自ドメインでメールを送受信したい場合には外部サービスを利用する必要があります。私のおすすめはGoogle Workspaceです。
いずれにしても直結型のサービスがないことで、ドメイン設定を自分で行う必要があり、人によってはハードルが高いかもしれません。

ページ遷移アニメーションを無効にできない

STUDIOで制作したサイトは、サイト内のページへのリンクをクリックすると、ふわっとしたアニメーションのちにリンク先のページが現れます。このアニメーションは無効にできないため、常にフワフワっと遷移します。
人によっては、表示が遅く感じたり、煩わしく感じて、気になるようです。

デスクトップChrome以外で編集できない

デスクトップChrome以外ではデザインエディタもCMSも使えません。スマホやタブレットで更新できないほか、Chromium系のChrome以外のブラウザでもダメです。

EC関連機能がない

STUDIOにはネットショップなどの機能はありません。もしSTUDIOサイトでショッピングサイトを作りたければ、CMSと、なんらかの「リンクURLから購入を促せるサービス」を組み合わせて使う形になります(JavaScript埋め込みではなくあくまで「リンクURLのみ」で完結するサービス、最近ありますか?汗)
ECを作りたいならSTUDIOを使わずに素直にECプラットフォームを使う方が良いだろうなと思います。

2022年1月7日追記

リンクURLから購入を促せるサービスの情報をいただきました🙏

SQUARE オンラインチェックアウト」はどうでしょう?
STORES 請求書決済」も選択肢としてあります!

引用元:@ryamakuchiさんのツイート

2022年2月1日追記


権限を追加できない

STUDIOのユーザー権限は「オーナー」「編集者」の2種類です。例えば、CMSのみ使える権限や、デザインエディタのみ使える権限などといった権限は追加できません。
2022年2月1日追記:Buisinessプランでは「CMSライター権限」が使えるようになりました。

休業日はサポートに繋がらないから気をつけろ

これは「できないこと」に入れるのも妙かもしれません。しかしながら、土日祝や長期の休みなどはサポートにつながりません。
サイトのオープン日は、平日の日中にすることをおすすめします。万一、SSL設定でコケた場合に、STUDIOの中の人にしか事態を解決できないためです。
※休業日や長期休暇のお知らせが事前にSTUDIO公式サイトに載っていると良いなあと思います…!

以下は、困り度はそれほどでもないけれども細かな点を列挙していきます。

CMS

ページネーションがない

STUDIOでは、一般的な「1, 2, 3, 4, 5...」のようなページネーションが利用できません。「もっと見る」ボタンで追加読み込みする形になります。また、「前へ」「次へ」などのナビゲーションも自動では作成できません。

複数タグを組み合わせの絞り込みができない

タグの絞り込みは1つのみです。キーワード検索ができないこともありますので、高度な検索が必要なサイトには向いていないです。

動的なモーダルページを生成できない

ギャラリーっぽいページで、一覧のサムネイルをクリックしたらモーダルで大きな画像が開く…といった事がCMSではできません。デザインエディタ上で手動でモーダルページを一つずつ作成してそこにリンクすることは可能です。

目次を作れない

ブログ記事の中で、記事の見出しを並べた目次を自動で生成したい事がありますが、それはSTUDIO純正機能ではできません。
ただし、Google Tag Managerを活用することにより実現可能です。

RSSフィードを生成できない

STUDIOのCMSではRSSを配信できません。

関連コンテンツやランキングを自動生成できない

ブログでよく見る「関連記事」や「ランキング」には対応していません。
関連記事に関しては、「指定したタグを持つ記事を表示する」機能を使えば作成できますが、関連記事の中から現在表示している記事を取り除けません。

デザインエディタ

Google Fonts/一部TypeSquare以外のフォントに対応していない(2022年1月7日追記)

STUDIOはGoogle FontsとTypeSquareのウェブフォントに対応しています。ただし、TypeSquareはライセンス契約の都合からか、一部のフォントのみ収録されています
LETSなどその他のウェブフォントサービスには対応していません。また、フォント名称を自由入力できないので、システムフォント等も指定できません。
身近な例を出すと、私がコーダーとして請ける仕事では「游ゴシック」を指定されることがありますが、STUDIO版のTypeSquareには游ゴシックが収録されておらず、さらにシステムフォントとしても指定できないため、STUDIOで制作したサイトには游ゴシックは使えない、ということになります。游ゴシックはシステムフォントの場合は色々やっかいなのでそれはそれで実はできれば避けたい…
蛇足ですが、Latoなど日本語文字が収録されていないフォントを選べばフォールバックが働きますので、日本語部分は font-family: sans-serif 相当のシステムフォントで表示できます。

シンボルの内容は個別編集できない

STUDIOではヘッダーフッターなど、複数のページで共通して使うものをシンボルとして共通化できます。これらのシンボルは全てのページで同じ内容が表示されることになります。特定のページだけで文言を書き換える、ということはできません。WordPressでいう再利用ブロックのようなものです。Figmaでいうコンポーネント機能とは異なります。
ページ上でシンボルを解除すればその箇所は個別に編集できますが、当然のことながら、シンボルを解除することでシンボルの機能を失ってしまいます。
→STUDIO 4.0のアップデートにより、「コンポーネント」機能としてテキストなどを個別編集できるようになる予定があります。

一括置換ができない

あのフォントを使っている場所をこのフォントに一括で置き換えたいとか、特定の色を使っている部分を全部違う色に一括で差し替える、という事ができません。

角丸を個別に選択・編集できない→ 2022年1月21日できるようになりました!

ボックスのうちの一つの角を選択して丸みをつける事ができず、全ての角が同じ数値になります。状況に応じて、複数のボックスをくっつけて(ずらして?)対応したり、背景画像でどうにかします。


テキストサイズの相対値指定ができない

テキストサイズとしてemやvwなどが指定できません。ボックスの数値としてはvhやvwも使えます。

無限ループアニメーションができない

アニメーションGIFなどで対応します。

1月13日(木)追記:できるかも

iframeのCustom埋め込みを使うと、HTMLタグに対してインラインのスタイルが当てられるため、色々制約がありますがSVGに対してアニメーションが効くかもしれません。

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

STUDIOでは「スクロールすると出てくる上に戻るボタン」やパララックス効果などは実装できません
パララックスではないものの、背景は固定できます
また、要素が画面内に出現したら、のアニメーションはできます。

表(table)が作れない

リストを活用したり、ボックスを何個も重ねることでTableっぽいものは作れます。

odd even配色ができない

:first-childはあります

クリックで開閉するアコーディオンが作れない

よく見るアレが作れません。助けてGTM。
「web制作あるあるな機能をSTUDIOで実装してみたシリーズ」アコーディオン機能

改行位置のレスポンシブ調整ができない

スマホとPCで改行位置を変えられません。たくさんボックスを作ってCSSでいうところのinline-box的な振る舞いを与えることは可能です。

画像を見出しタグで囲めない

画像のボックスは見出しタグで囲めません。テキストのみを見出しにできます。

画像圧縮の有無を選べない

STUDIOでは自動的に画像を最適化してくれます。それはとても助かるのですが、どの画像をどれぐらい圧縮するか等の設定はできません。また、外部サイトへの画像直リンクもできないため、サイトでは常に最適化された画像が表示されることになります。

営業日カレンダーを作れない

いわゆる営業日カレンダーは自動では作れないので、iframeでGoogle Calendarを埋め込むか、テキストで休業日などを書いて対応します。だいたいの場合はテキストで間に合うはずです。

フォーム

STUDIOでは機能的にシンプルなメールフォームを作成できます。
何か動的な処理が必要になるようなフォーム、例えば見積もり自動計算フォームなどは作れません。
また、フォームの確認ページも作れませんので、凝ったことがしたい場合は別のフォームを利用すると良いです。設備の予約カレンダーなども作れません。
フォームの自動返信メールも純正では対応していませんが、スプレッドシートとZapierの組み合わせでできます

できなさそうで、できること

  • XMLサイトマップの自動生成→できるようになりました
  • プロジェクトに含まれるページ単位の「公開/非公開」設定→できるようになりました
  • カレント表示→できるようになりました
  • テキストの一部に蛍光マーカー風の背景色をつけたり、赤字にする→リッチテキストボックスならできます
  • CMSでh4以上の見出し入力→セレクトボックスからは選べませんが、行頭で「#### 」(半角シャープ4つに続けてスペース)と入力することでマークダウンが有効になり、入力できます
  • Instagramフィードの表示→色々条件がありますが、ZapierのRSS配信を使う方法(記事が消えてしまってるので紹介できず…)、Snapwidgetを使う方法もあるようです。私は有料のRSS.appと自作画像プロキシを組み合わせてフィードを表示しています。汗
  1. 雑記
  2. STUDIOで「できないこと」を知っておこう