StudioのAI機能 | Studio Help

対象プラン：全プラン

ℹ️ この機能の一部は、2025年11月25日に公開された新しいエディタバージョン「Editor 5.0」でのみ利用できます。

また、記事内のリンク先の中では旧エディタの操作手順をご案内している場合があります。

この記事では、Studioに搭載されたAI機能の概要と使い方をまとめています。

Image AI

自然言語による指示で、Editor内で画像を編集できます。

ご自身でアップロードした画像、ストックパネルからダウンロードしたフリー画像、どちらでも利用が可能です。

編集内容の指示はテキストだけでなく、参考画像を添付して指定することもできます。

Studio内でデザインに合った画像の作成や編集が完結します。

プロンプトの入力によって、AIによるテキストの自動生成や編集が可能です。キャッチコピーのブラッシュアップや他言語翻訳を効率的に行うことができます。

作成済みのデザインに、AIが自動でレスポンシブ設定を適用します。従来は手動で対応していたデバイスごとのレイアウト調整や要素のバランス、余白の最適化を自動で行い、作業工程を短縮できます。

デフォルト（PC）サイズのデザインが完了したら、以下の手順で操作をします。

ツールバーで、レスポンシブデザインを設定するブレイクポイントを選択します。
レイヤーパネルを開き、レスポンシブを設定したいボックスを選択します。
※自動レスポンシブを適用したい範囲が、特定のボックスではなくページ全体である場合は、レイヤーパネルを開き、最上部の「<div> Base」を選択します。
ツールバー左端のマジックボタン（星型のアイコン）をクリックします。マジックボタンは、ボックスなどの要素を選択している状態にのみ表示されます。

デザインをもとにAIがレイヤー名を一括変換します。

初期状態の「group」や「box」などの名称をよりわかりやすい表現で自動変換し、共同作業や納品作業をスムーズに進められます。

レイヤーパネルを開き、名前を変更したいレイヤーにカーソルを合わせます。
ホバー時に右側に表示されるマジックボタン（星型のアイコン）をクリックすると、レイヤー名が自動変換されます。
- グループ化されている場合には、下層の子ボックスも同時に変換されます。
- ページ全体を対象とする場合には、レイヤーの最上部「<div> Base」を選択します。

AIがサイトやページのテキスト情報を読み取り、タイトルやメタディスクリプション（説明文）を自動で生成します。

以下のいずれかの方法をお試しください。

AI機能操作には実行上限があります。

上限を超過すると、一定期間機能の利用ができなくなります。