STUDIOでできること・できないことまとめ【2024.4月更新✍️】
この記事は、爆速アップデートのSTUDIOに対応した「できること・ちょっと難しいことまとめ」です。あれってSTUDIOでできたっけ？と思った時にサクッとチェックできるような内容にしています。
そして、この記事を読む前にまず伝えたいのが「STUDIOは、必須なことはだいたいできる」ということです。Webサイトを制作・運用する上で必要な機能はしっかり揃っており、よりリッチに実装する場合に必要な機能の一部は未対応。例えば、パララックスのようなリッチな表現やECサイトのような専門的な機能などは未対応であるというニュアンスで捉えています。
また「機能はないけど再現できること」も補足していますので、STUDIOの学習やSTUDIOを用いたプロジェクトにご活用ください📝
⚠️プランごとの機能や制限についてはSTUDIO公式ページの「プラン別機能比較」を参照してください
🔍使い方
「cmd + f」や「Ctrl + f」でページ内検索をするとすばやくチェックできるのでおすすめです。
目次からもすばやくチェックできます👇
できること
CMSの記事を複製する
対象の記事の左側、3点のアイコン(ケバブメニュー)を押すと、複製が選べます。
サイトにパスワードをかける
デザインエディターで、ページの新規作成から「パスワードページ」を選んで作成が可能です。
Googleアナリティクス・タグマネージャーなどの外部サービスとの連携
公式で連携しているものを以下にまとめました。
ダッシュボードからの連携
Google Analytics / Google Tag Manager / Google Search Console / Google reCAPTCHA v3 / Meta Pixel (Facebook Pixel) / HubSpot Tracking (Beta) / Intercom / チャネルトーク
ダッシュボードからのAPI連携
Notion (Beta) / micro CMS (Beta) / Airtable (Beta)
デザインエディターのiframeタブからの埋め込み
Google Map / YouTube / Vimeo / Facebook / X (Twitter) / Spotify / Codepen / SlideShare / formrun / Firework(Beta)
サポート外にはなりますが、Embedボックスを用いることで他のサービスを埋め込むことも可能です。
CMS本文中に外部サービスを埋め込む
埋め込みコードを取得してEmbed blockに入力すると埋め込みが可能です。現在対応しているサービスは以下のサービスです。
Facebook / Instagram / Twitter / note / YouTube / Vimeo / Firework / Speaker Deck / SlideShare / Figma / Canva / Google Drive / Calendly / Typeform / formrun / iframely
アコーディオンメニューをつくる
デザインエディターで、追加 → ボックス → Compornent Parts → Toggleで作成が可能です。
ドロップダウンメニューをつくる
STUDIOで用意されたコンポーネントパーツのToggleを活用して制作が可能です。Toggleパーツは、デザインエディターの右パネルから、追加 → ボックス → Compornent Parts → Toggleで追加が可能です。
編集者の権限を分ける
ダッシュボードのメンバーページで対象のメンバーを選び、設定が可能です。各権限で許可・制限される操作の詳細はSTUDIO公式ページメンバーの権限管理・削除 をご覧ください。
お支払いオーナー
オーナー
編集者
フォームの回答の閲覧可能 or フォームの回答の閲覧を制限
ライター
リダイレクトを設定する
デザインエディターでページを新規追加 → 「リダイレクト」を選択 → 表示に沿って入力をすれば簡単に設定可能です
フォームを作成する
デザインエディターの、追加 → ボックス → Basic Forms または Form Partsを選んで作成が可能です。
CMSのエディタで画像サイズを変更する
記事タイプモデルの本文内に挿入した画像の横幅は自由に変更が可能です。画像を挿入したのち、ハンドルを左右に操作して変更します。
CMSのエディタでtableを実装する
記事タイプモデルのCMSアイテムではリッチテキスト部分に<table>を挿入することが可能です。
画面の左側に表示される「＋」ボタンをクリックして「Table」を選択し、追加します。追加した後、デザインエディターからスタイルを指定することが可能です。
レスポンシブの設定
デザインエディターで画面幅を操作することで、ブレイクポイントに沿ってスタイルを設定することが可能です。
ブレイクポイントの編集
ブレイクポイントの数値の指定が可能で、最大５つ設定ができます。
Figmaで作成したデザインをインポートする
Figmaで作成したデザインを、一瞬でSTUDIO WEBサイトに変換することが可能です。Figmaの「Figma to STUDIO」プラグインを使用することでPCをベースに作成したデザインであれば自動でレスポンシブ化したレイアウトに変換されます。
PDFをアップロードする
PDFファイルをSTUDIOにアップロードして、リンク先として選択することができます。例えば、pdf形式の資料をダウンロードするページの制作等に利用が可能です。
👇STUDIOでアップロード可能なファイル形式
png / jpg / svg / gif / pdf / webp
Webフォントを使う
デザインエディタから選択が可能です。Google Fontsの利用に加えモリサワのWebフォントサービス「TypeSquare」が導入されており、定番のフォントはもちろんさまざまな表現が可能です。
ただし、フォントのアップロードには対応していないため注意が必要です。
<body> <head>内にコードを記述する
カスタムコード機能を使用して、サイト全体やページにコードを記述できます。例えば、ヒートマップツールやMAツールなどの連携が可能です。
カスタムコード機能は「Starter」プラン以上で使用ができます。Freeプランでは使用できません。
embedでコード埋め込む
embed機能を使用して、HTMLやJavaScriptなどを使用したビジュアルの表現が可能です。
また、STUDIOコミュニティ内にある「カスタムコード」スペースではメンバーが作成したさまざまなコードがシェアされています。こちらの活用もおすすめです。
独自ドメインを使う
取得した独自ドメインを簡単に接続することが可能です。ドメインまたはサブドメインの接続ができます。
ただし、STUDIOにはドメインを購入するサービスがないため、ドメイン取得サービスにて購入する必要があります。
独自ドメインでの公開は「Starter」プラン以上で使用ができます。Freeプランでは使用できません。
カルーセルを自動再生する
デザインエディターの、追加 → Compornent Parts → Caroucelを選んで作成が可能です。追加したカルーセルパーツを選択し、右パネルで自動再生をオンにします。
CMSでテーブルを使う
CMSの記事モデルを使用している場合に、リッチテキスト内で使用が可能です。エディタ内の+ボタンからテーブルを選ぶと本文中に挿入されます。
更新情報をRSSで配信する
CMSの記事モデルで管理しているアイテムはRSSで配信することが可能です。CMSダッシュボードから [モデル設定] を押し、RSSフィード設定を有効にすると利用できます。
また、公開アイテムが0件の場合エラーとなってしまうため注意が必要です。
利用前にRSSフィードの書式等の確認をおすすめします👇
検索機能のついたページをつくる
CMSのアイテムを対象とした以下の検索・が可能です。
検索フォームを用いたキーワード検索
タグやカテゴリを利用した絞り込み
動的でない通常のページは検索の対象にならないため注意が必要です。
また、キーワード検索で対象になるデータは以下のとおりです。
記事モデルの場合：本文とタイトル
ユーザータイプ・カテゴリタイプ・カスタムタイプ：タイトルのみ
バージョン管理でページを復元する
デザインエディターの履歴タブから復元したいバージョンを選び [復元] ボタンを押すことで、復元が可能です。
バージョン管理の範囲はデザインエディタ内の情報のみであり、CMSの内容は対象範囲外となります。
また、復元可能な期間はプランによって異なるため注意が必要です。
Freeプラン：1日
Starterプラン：7日
CMSプラン：30日
Businessプラン：360日
こちらの解説もご活用ください👇
バージョン管理機能の使い方と活用のヒント
サイトのバージョンを管理する
1ページごとに表示・非公開を設定する
デザインエディターのパネルより設定が可能です。右のパネルのページタブから任意のページをホバーすると、ページ名の横に設定アイコンが表示されます。設定アイコンを押し、公開範囲の [非公開] を選んでください。
最後にページ上部の[公開]ボタンを押し、更新することで非公開の状態がサイトに反映されます。
記事などのCMSアイテムの予約公開
CMSダッシュボードから新規のアイテムを作成するか、任意のアイテムを選びアイテムの編集画面を開きます。新規作成の場合は内容を入力します。
画面上部の公開日時を押し[日時指定]のタブを選択します。予約公開したい日付と時間を選び[決定]を押して予約日時を設定します。その後、記事を[下書き]から[公開を予約する]へ設定することで予約が完了します。
最後の[下書き]から[公開を予約する]のフローを見落とす方が多いので、注意が必要です。
動的なモーダルの作成
CMSデータと紐付けが可能なモーダルを作成できます。アイテムの詳細をモーダルに表示したり、画像を拡大表示する表現などに利用が可能です。
エディター上にコメントをする
エディタ上で直接コメントを追加できます。制作中のデザインに、フィードバックを入れる等に活用でき、作業効率がアップします。
できないこと
CMSアイテムの高度な検索ができない
複数タグでの絞り込み検索など、複雑な検索ができません。
ページの予約公開ができない
CMSアイテムは日時を指定した予約公開が可能です。
ログイン機能・会員登録機能がない
会員限定のサイトを作成する機能がありません。
ですが、サイト全体にパスワードを設定する近しい機能があります。
1ページごとに更新する機能がない
公開・非公開の機能を利用した公開範囲の管理は可能です。
コメント欄をつくる機能がない
ブログサイトによくあるコメント欄を実装する機能がありません。
CMSアイテムのページネーション機能がない
1, 2, 3, 4… のようなページネーションを実現する機能がありません。「前へ｜次へ」のようなページ分割を自動で生成する機能もありません。
CMSアイテムを一覧表示する場合、指定した表示数を超えると「もっとみる」ボタンで追加読み込み・表示されます。
CMSアイテムのリッチテキスト内のカスタマイズにかなり制限がある
CMSの記事モデル・本文にあたるリッチテキスト内のカスタマイズにかなり制限があります。以下のタグにそれぞれシンプルなスタイルを設定することは可能です。
<h1>, <h2>, <h3>
<p>, <b>, <s>, <u>, <i>, <a>
<li>, <ol>
<blockquote>, <hr>, <code>, <img>, <iframe>, <table>, <th>, <td>
しかし、上記のタグ以外に表現を追加することができません。例えば、ブログによく使用されている「吹き出しの表現」や「ボタン表現」などのスタイルを追加することができません。
フォントサイズの相対値指定ができない
emやrem、vwなどの相対値の単位が指定できません。フォントサイズはpx指定のみです。
PC(デスクトップ)版Chrome以外で更新・編集ができない
タブレットやモバイルからの更新・編集も対応していません。
プロジェクトのエクスポートができない
STUDIOで制作したサイト(プロジェクト)はエクスポートすることができませんが、プロジェクトの複製は可能です。
CMSデータのエクスポートができない
STUDIOで作成・入力したCMSアイテムのエクスポートはできませんが、WordPressのXMLファイルのインポートは可能です。
しかし一部のデータは対応していないため、詳細はSTUDIOヘルプページでの確認をおすすめします。
htmlを直接編集する機能がない
htmlを直接編集する機能やclassを付与する機能がないため、カスタムコードで実装場合も限度があります。
機能はないけど再現できること
ECに関する機能がない
外部サービスの決済リンク利用で簡易実装は可能です。
CMSアイテムに自動で関連記事を出す機能がない
自動で生成する機能はありませんが、手動で関連記事を設定し近しい表現をすることは可能です。
CMSアイテムに自動で人気記事を出す機能がない
アクセス等に基づいて自動で人気記事を生成する機能はありませんが、アクセスの多い記事等を手動で設定し近しい表現をすることは可能です。
タブを表現する機能がない
カスタムコード機能を用いて、コードを追加することで実装が可能です。
しかし、文字通りコードを使用するため、デザインエディタでの編集・運用管理が煩雑になる場合があります。
お問い合わせに自動返信の機能がない
STUDIOで作成できるフォームには自動返信の機能がありませんが、Zapierなどの外部ツールを用いて設定することで実装が可能です。
実装方法 (STUDIO公式チュートリアル)：https://youtu.be/xgGLXJI9jZQ
偶数番目、奇数番目のスタイルを指定する機能がない(odd even)
STUDIOのリスト機能には偶数番目や奇数番目のスタイルを指定することができません。ですが、一番目のスタイルを指定することは可能です。(first-child)
・・・
補足「機能はないけど再現できること」とは？
ここに挙げた以外にも実装が可能なものはありますが、エラーが起こりやすいものや動作が不安定なもの・STUDIOのデザインエディタでの管理が煩雑になりすぎるものは除いて掲載しています。
・・・
STUDIOテンプレートに使えるクーポンはこちら
STUDIOのテンプレートに使える10%OFFクーポン👇ぜひご利用ください
クーポンコード：U9DTIBE
関連記事
実案件で使える資料と進め方のTipsをまとめた記事です👇
読んでいただき、ありがとうございます！ 美味しいコーヒーと美味しいお菓子で今日も生き延びます🙏🏻