対象プラン：全プラン
ℹ️ この機能は、2025年11月25日に公開された新しいエディタバージョン「Editor 5.0」でのみ利用できます。
また、記事内のリンク先の中では旧エディタの操作手順をご案内している場合があります。
この記事では、Studioに搭載されたAI機能の概要と使い方をまとめています。
Image AI
自然言語による指示で、Editor内で画像を編集できます。ご自身でアップロードした画像、[ストック]パネルからダウンロードしたフリー画像、どちらでも利用が可能です。
編集内容の指示はテキストだけでなく、参考画像を添付して指定することもできます。
Studio内でデザインに合った画像の作成や編集が完結します。
AIで画像を編集する手順
スクリーン上に画像を配置します。
画像上部のStudioアイコンをクリックして、画像の編集内容を指示します。
参考画像がある場合には、画像アイコンをクリックして、画像をアップロードしてください。
Text AI
プロンプトの入力によって、AIによるテキストの自動生成や編集が可能です。キャッチコピーのブラッシュアップや他言語翻訳を効率的に行うことができます。
AIによるテキスト編集を行う手順
スクリーン上にテキストボックスを配置します。
テキストボックス上部のStudioアイコンをクリックして、プロンプトを入力します。
Auto Responsive
作成済みのデザインに、AIが自動でレスポンシブ設定を適用します。従来は手動で対応していたデバイスごとのレイアウト調整や要素のバランス、余白の最適化を自動で行い、作業工程を短縮できます。
自動レスポンシブを適用する手順
デフォルト（PC）サイズのデザインが完了したら、以下の手順で操作をします。
ツールバーで、レスポンシブデザインを設定するブレイクポイントを選択します。
レイヤーパネルを開き、レスポンシブを設定したい要素を選択します。
ページ全体を対象としたい場合には、レイヤーの最上部「<div> Base」を選択します。
ツールバー左のボタン（マジックボタン）をクリックして、自動レスポンシブ設定をしてください。
Layer Rename
デザインをもとにAIがレイヤー名を一括変換します。
初期状態の「group」や「box」などの名称をよりわかりやすい表現で自動変換し、共同作業や納品作業をスムーズに進められます。
レイヤー名を自動変換する手順
レイヤーパネルを開き、レイヤー名を変更したい要素にカーソルを合わせます。
ホバー時に右側に表示されるボタン（マジックボタン）をクリックすると、レイヤー名が自動変換されます。
グループ化されている場合には、下層の子ボックスも同時に変換されます。
ページ全体を対象とする場合には、レイヤーの最上部「<div> Base」を選択します。
SEO Writing Assist
AIがサイトやページのテキスト情報を読み取り、タイトルやメタディスクリプション（説明文）を自動で生成します。
詳細は、タイトルと説明文（ディスクリプション）をAIで自動生成するをご覧ください。
トラブルシューティング
AIによる編集や設定をもとに戻したいです。
AIによる編集や設定をもとに戻したいです。
以下のいずれかの方法をお試しください。
操作を元に戻す（元に戻すメニューをクリック、またはキーボードショートカット（Mac：⌘ + Z、Windows：Ctrl + Z）で操作）
バージョン履歴を活用する
「利用上限に達したため、機能を利用できません。」というメッセージが表示され、利用できません。
「利用上限に達したため、機能を利用できません。」というメッセージが表示され、利用できません。
AI機能操作には実行上限があります。
上限を超過すると、一定期間機能の利用ができなくなります。