Studioでは、Embed（埋め込み）ボックスを使って、ページ上にHTML・CSS・JavaScriptを含むコードの埋め込みが可能です。Googleマップなどの外部ツールやコンテンツをページ内で表示できます。
注意：独自に記述したコードや、外部サービスが提供するコードの内容および動作については、チャット窓口でのサポート対象外となる可能性があります。
Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
Embed（埋め込み）ボックスを追加する
ナビゲーションで追加アイコン
をクリックします。追加パネルで、[基本]タブをクリックします。
[埋め込み]セクションから、埋め込みたい外部ツール専用ボックス、または[Blank]を選択します。
埋め込みたい内容に合わせて編集を行います。
各種外部ツールの詳細な編集方法は、次のヘルプページを確認してください。
埋め込みコードを編集する
埋め込みコード編集ウィンドウの操作方法
埋め込みコード編集ウィンドウは、左ペインにコードエディタ、右ペインにプレビューを表示します。
左ペイン: コードエディタ
機能 | 操作 |
元に戻す |
|
やり直し |
|
行の折り返し | [折り返し]トグルをON |
変数の挿入 | エディタにフォーカス中、カーソル位置に表示される＋ボタンをクリックしてから、CMSプロパティを選択 |
右ペイン: プレビュー
右ペインでは、コードの実行結果をプレビューできます。
自動更新の設定により、編集内容の反映タイミングが変わります。自動更新トグルで切り替えが可能です。
自動更新ON：編集後に自動反映
自動更新OFF：[更新]ボタンで手動反映
CMSの変数は実際の値に置換されて表示されます。
動的な値（CMSプロパティ、URL変数）の利用
コード入力欄の左ペインに表示される[+]ボタンをクリックします。
表示された候補から、利用したい値を選択します。
Embed Code AI
Embed Code AIは、埋め込みコードエディタ内のAI機能です。入力済みコードの編集と、空の状態からのコード生成のどちらにも対応しています。
AIの出力結果はリアルタイムでプレビューに反映されるため、スクリーン上の挙動を確認しながら調整できます。
既存コードの編集
埋め込みコードエディタに入力済みのコードに対して、プロンプトで指示を入力するとAIがコードを書き換えます。
ゼロベース生成
空のエディタから、プロンプトのみを入力してHTML/CSS/JavaScriptコードを生成できます。
Embed Code AIを使用する
埋め込みコードエディタで、左上のAIボタン（Studioロゴアイコン）をクリックします。
表示されたモーダルに、「どのようなコードを作成・変更したいか」を自然文で入力します。
入力内容を確認し、[編集する]をクリックします。AI処理中は、エディタ周囲がピンク色にハイライトされます。
ストリーミングでコードが書き換わり、右側のプレビューに結果が表示されます。
生成結果を確認し、問題がなければ[保存]をクリックします。
公開済みサイトに変更を反映したい場合は、公開パネルでサイトを更新します。
注意：
AIで編集した内容は、[保存]をクリックするまでは埋め込みコードに保存されません。
生成結果に問題がある場合は、エディタのショートカット（Cmd+Z / Ctrl+Z）で元に戻せます。
AI処理中は、自動更新がONの場合でもAIの処理が完了するまでプレビューは更新されません。
Embed Code AIによる編集・生成をキャンセルする
AI処理中に、以下の操作でAI編集をキャンセルできます。
キーボードのEscキーを押す
画面のオーバーレイに表示される[キャンセル]ボタンをクリックする
キャンセルすると、その時点までに書き換えられたコードがエディタに残ります。
プロンプト例
背景アニメーション
用途 | プロンプト例 |
パーティクル背景 | ふわふわ浮かぶパーティクルの背景アニメーションを作って。色は青系のグラデーション |
グラデーション背景 | ゆっくり色が変化するグラデーション背景を作って |
波のアニメーション | 画面下部に波打つようなアニメーションを追加して |
幾何学模様 | 動く幾何学模様の背景を作って。ミニマルなデザインで |
インタラクティブ要素
用途 | プロンプト例 |
カウントダウン | 2025年4月1日までのカウントダウンタイマーを作って |
数字カウントアップ | スクロールで表示されたら0から100までカウントアップするアニメーションを作って |
タイピング風テキスト | "ようこそ"という文字がタイピングされるように表示されるアニメーションを作って |
マウス追従 | マウスに追従する光のエフェクトを追加して |
外部コンテンツ風UI
用途 | プロンプト例 |
SNSフィード風 | Twitterの埋め込みっぽいカード型のUIを作って |
営業日カレンダー | 今月のカレンダーを表示して、土日は赤色にして |
既存コードの編集
用途 | プロンプト例 |
色の変更 | 背景色を紺色に、テキストを白に変更して |
アニメーション追加 | ボタンにホバーしたときふわっと浮き上がるアニメーションを追加して |
レスポンシブ対応 | スマホで見たときに文字サイズを小さくして |
速度調整 | アニメーションの速度をもっとゆっくりにして |
コードタイプ：iframeとsandbox
Embedボックスは、追加したコードの内容に応じて、iframeタイプかsandboxタイプのいずれかのコードタイプに自動的に変化します。
iframeタイプ
次のようなコードを追加した場合はiframeタイプになります。
<iframe> タグのみで構成されているコード
formrunで作成したフォームの埋め込みコード
HubSpot Formの埋め込みコード
注意：HubSpotフォームIDをCMSプロパティで埋め込んでいる場合は、自動的に「sandbox」タイプとして扱われます。
sandboxタイプではセキュリティ制限により、一部機能に制約が発生する場合があります。
sandboxタイプ
次のようなコードを追加した場合はsandboxタイプになります。
iframeタイプに該当しないすべてのコード
iframeとして認識されるコード内でCMSプロパティを利用した場合
注意点とサンプルコード
応用的な利用時には、以下の注意点をあらかじめご覧ください。
スタイル（style）などの扱い
コードタイプがsandboxタイプの場合、styleなどで設定したスタイルはEmbedボックス内のみに適用されます。ページ全体には影響しません。
DOMContentLoaded イベントの扱い
DOMContentLoadedを前提とした処理は動作しないため、別のイベントや処理方法を検討してください。
<script> document.addEventListener('DOMContentLoaded', function() { console.log('発火しません'); }) </script>埋め込みコード内でのリンク設定
埋め込みコード内でリンクを設定する場合は、遷移先を明確にするため、次のいずれかのtarget属性を設定してください。
target=”_blank”target="_parent"target="_top"
target属性を設定しない場合、Embedボックス内での遷移となり、ページ全体の遷移にはなりません。
<a href="<https://studio.design/ja>">studio LP</a> <a href="<https://studio.design/ja>" target="_blank">studio LP _blank</a> <a href="<https://studio.design/ja>" target="_top">studio LP _top</a> <a href="<https://studio.design/ja>" target="_parent">studio LP _parent</a>
Tips: 以下の外部ツールを埋め込む場合には、それぞれのヘルプ記事内の手順を参照してください。
埋め込みボックスのデザインを設定をする
Embedボックスも、他のボックスと同様に外観やレイアウト、レスポンシブ設定などのデザインが可能です。
操作方法の詳細は、次のヘルプ記事を参照してください。
Tips: 動画など、画角を維持したい要素を埋め込んだ際のレスポンシブ対応の方法は、以下の記事を参照してください。
embed script speakerdeck