【Studio初心者ガイド】Embed Code AIの使い方｜コード編集を効率化する方法

StudioのEmbed Code AIを使うと、自然文で指示するだけで埋め込みコードを生成・編集できます。

コードを一から書かなくても、アニメーションやインタラクティブな表現をStudio上で作成しやすくなり、HTML・CSS・JavaScriptに詳しくない場合でも扱いやすい点が特徴です。

本記事では、Embed Code AIの使い方や、Embed（埋め込み）ボックスの設定方法、注意点まで詳しく解説します。

Embed Code AIとは

Embed Code AIとは、Studioの埋め込みコードエディタ内で使えるAI機能です。

自然文で指示するだけで、コードの生成や編集ができます。

コードを一から書かなくても、AIに指示するだけで埋め込みコードを作成・調整できる点が特徴です。

また、Embed Code AIでは、コード生成・コード編集・プレビュー確認など、さまざまな操作ができます。

それぞれの機能について詳しく解説します。

ゼロベースからコードを生成できる

空のエディタにプロンプトを入力するだけで、HTML・CSS・JavaScriptコードを自動生成できます。

たとえば、「パーティクルの背景アニメーションを作って」と入力すると、AIがコードを生成し、プレビューに反映します。

生成されたコードは、「保存」をクリックすると埋め込みBoxへ適用されます。

既存コードを自然文で編集できる

すでに入力されているコードに対しても、自然文で修正を依頼できます。

たとえば、以下のような編集が可能です。

• 背景色を変更して

• アニメーションをもっとゆっくりにして

• ボタンにホバーアニメーションを追加して

• スマホ表示では文字サイズを小さくして

埋め込みコード部分のレスポンシブ対応にも活用できます。

コード編集とプレビューを同じ画面で確認できる

Embedコード編集UIもアップデートされ、より広い画面でコード編集がしやすくなりました。

また、埋め込みコードのプレビューも、StudioのEmbedコード編集画面でリアルタイムに確認できます。

AIの出力結果を見ながら、そのまま調整・保存できる点も特徴です。

Embed（埋め込み）ボックスとの関係

Embed Code AIは、Embed（埋め込み）ボックスの中で使う機能です。

StudioのEmbedボックスでは、HTML・CSS・JavaScriptコードや、Googleマップ、YouTube、Vimeoなどの外部サービスをページ内に埋め込めます。

つまり、Embedボックスは「コードや外部サービスを表示する場所」で、Embed Code AIは「そのコードをAIで生成・編集する機能」です。

Embed（埋め込み）ボックスを追加する方法

Embed Code AIは、Embed（埋め込み）ボックス内で使用します。

そのため、最初にページへEmbed（埋め込み）ボックスを追加する必要があります。

Embed（埋め込み）ボックスを追加すると、HTML・CSS・JavaScriptコードを入力したり、Embed Code AIでコードを生成・編集したりできるようになります。

手順

1.ナビゲーションで追加アイコン（赤四角）をクリックします。

2.追加パネルで「基本」タブ（赤四角）をクリックします。

3.「埋め込み」セクションの中から、「Blank」（赤四角）を選択します。

自由なコード生成・編集を試したい場合は「Blank」を選択するのがおすすめです（外部ツール専用ボックスでも埋め込みコードエディタからAIを呼び出せます）。

Embed Code AIを使用する方法

Embed（埋め込み）ボックスを追加したら、埋め込みコードエディタを開いてEmbed Code AIを使用します。

手順

1.スクリーン上に追加したEmbed（埋め込み）ボックスを選択します。

2.右パネルの「埋め込み」タブ（赤四角）を開きます。
※右パネルが閉じている場合は、先に右パネルを開いてください。

3.「埋め込みコード」の入力フィールド内にある「エディタを開く」（赤四角）をクリックします。

4.埋め込みコード編集ウィンドウの左上にあるAIボタン（赤四角）をクリックします。

5.表示されたモーダル（赤四角）に、「どのようなコードを作成・変更したいか」を自然文で入力します。

6.入力内容を確認し、「編集する」（赤四角）をクリックします。

7.AI処理中は、エディタ周囲がピンク色にハイライトされます。

8.ストリーミングでコードが書き換わり、右側のプレビューへ反映されます。

自動更新をONにしている場合は、編集内容が自動反映されます。OFFの場合は、「更新」ボタンをクリックすると反映されます。

編集内容を元に戻したい場合は、Cmd+Z / Ctrl+Zで取り消しできます。

9.生成結果を確認し、問題がなければ「保存」（赤四角）をクリックします。

保存することで、編集内容がEmbed（埋め込み）ボックスへ反映されます。

10.公開済みサイトに変更を反映したい場合は、公開パネルでサイトを更新します。

Embed Code AIのキャンセル方法

AIによる編集・生成中に処理を止めたい場合は、以下の方法でキャンセルできます。

• キーボードのEscキーを押す

• 画面のオーバーレイに表示される「キャンセル」ボタンをクリックする

キャンセルした場合、その時点までに書き換えられたコードがエディタに残ります。

必要に応じて、元に戻す操作を行いましょう。

Embed Code AIの注意点

Embed Code AIを使用する際は、以下の点に注意してください。

• AIで編集した内容は、「保存」をクリックするまで埋め込みコードへ保存されません。

• AI処理中は、自動更新をONにしている場合でも、AI処理が完了するまでプレビューは更新されません。

Embed Code AIで既存コードを編集する方法

既存コードの編集では、埋め込みコードエディタに入力済みのコードに対してプロンプトで指示を入力します。

AIが指示内容に合わせてコードを書き換えます。

たとえば、次のような修正に使えます。

• 背景色を変更する

• テキスト色を変更する

• アニメーションを追加する

• レスポンシブ対応をする

• アニメーション速度を調整する

コードを直接編集するのが難しい場合でも、自然文で修正できる点が特徴です。

Embed Code AIのプロンプト例

Embed Code AIでは、背景アニメーションの作成、インタラクティブな動きの追加、UI作成、既存コードの調整など、さまざまな用途に活用できます。

ここでは、用途別のプロンプト例を紹介します。

背景アニメーション

インタラクティブ要素

外部コンテンツ風UI

既存コードの編集

コードタイプ：iframeとsandboxの違い

Embedボックスは、追加したコードの内容に応じて、iframeタイプまたはsandboxタイプのいずれかに自動で変化します。

iframeタイプ

iframeタイプは、外部サービスのページをそのまま表示する形式です。

次のようなコードを追加した場合は、iframeタイプになります。

• iframeタグのみで構成されているコード

• formrunで作成したフォームの埋め込みコード

• HubSpot Formの埋め込みコード

ただし、HubSpotフォームIDをCMSプロパティで埋め込んでいる場合は、自動的にsandboxタイプとして扱われます。

sandboxタイプでは、セキュリティ制限により一部機能に制約が発生する場合があります。

sandboxタイプ

sandboxタイプは、HTML・CSS・JavaScriptコードをEmbedボックス内で実行する形式です。

次のようなコードを追加した場合は、sandboxタイプになります。

• iframeタイプに該当しないすべてのコード

• iframeとして認識されるコード内でCMSプロパティを利用した場合

HTML・CSS・JavaScriptを含む独自コードを埋め込む場合は、sandboxタイプとして扱われることがあります。

sandboxタイプでのスタイルの扱い

sandboxタイプの場合、コード内で設定した色や文字サイズなどのデザイン設定は、Embedボックス内だけに適用されます。ページ全体のデザインには反映されません。

そのため、ページ全体のデザインを変更する目的ではなく、Embedボックス内の表現を調整するものとして使いましょう。

DOMContentLoadedイベントの注意点

Embedボックス内では、ページの読み込み完了を待ってから動かすタイプのJavaScriptが、想定通りに動かない場合があります。

そのため、コードを書く場合は、Embedボックス内でも動く方法で処理を指定する必要があります。

たとえば、以下のように「ページが読み込まれたら実行する」前提のコードは、正しく動作しない可能性があります。

<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('発火しません');
})
</script>

Embedボックス内でJavaScriptを使う場合は、DOMContentLoaded以外の方法を検討しましょう。

埋め込みコード内でリンクを設定する場合

Embedボックス内でリンクを設定する場合は、リンクの開き方を指定する「target属性」を設定します。

target属性を設定しない場合、Embedボックス内だけでページが切り替わってしまい、サイト全体のページ遷移にならない場合があります。

使用できる主なtarget属性は、以下の通りです。

• target="_blank"
  　新しいタブでページを開く

• target="_parent"
  　親ページ側でページを開く

• target="_top"
  　サイト全体を切り替えてページを開く

リンク設定の例

<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>

ページ全体を遷移させたい場合は、target属性を忘れずに設定しましょう。

外部ツールを埋め込む場合

以下の外部ツールを埋め込む場合は、それぞれのヘルプ記事内の手順を確認してください。

• HubSpot Formを埋め込む

• formrunを埋め込む

• Fireworkを埋め込む

• Googleカレンダーを埋め込む

• Googleフォームを埋め込む

外部サービスによって必要なコードや設定が異なるため、専用の手順を確認しながら進めると安心です。

【注意】AI機能や、独自に記述したコードや、外部サービスが提供するコードの内容および動作については、チャット窓口でのサポート対象外となる可能性があります。 Studioコミュニティでの事例検索や、質問の投稿もご検討ください。

Embedボックスのデザインを設定する方法

Embedボックスも、他のボックスと同様にデザイン設定ができます。

設定できる主な項目は以下の通りです。

• 外観

• レイアウト

• レスポンシブ設定

操作方法は、以下のヘルプ記事を参考に設定してください。

• ボックスの外観設定

• ボックスのレイアウト設定

• レスポンシブ設定

また、動画など画角を維持したい要素を埋め込んだ場合は、Embedボックスのレスポンシブ対応についても確認しておきましょう。

まとめ

StudioのEmbed Code AIを使うと、自然文を入力するだけで埋め込みコードを生成・編集できます。

これまでコード知識が必要だったアニメーション背景やカウントダウンタイマー、カード型UIなども、Studioエディタ内で作成しやすくなりました。

まずはEmbedボックスを追加し、作りたい内容をAIへ入力して、Embed Code AIを試してみてください。