Studio.Assistantでサイトを生成する

Studio.Assistantは、入力した情報をもとにWebサイトを生成するAI機能です。サイトの情報設計からデザインまで、自動で作成します。生成したサイトはデザインエディタにエクスポートし、そのまま編集・公開へ進められます。

この記事では、利用を開始する手順から、サイトの生成・調整・エクスポートまでの流れを解説します。

Studio.Assistantの利用には、専用プランの契約が必要です。

プランを選択して決済情報を登録すると、14日間の無料体験が始まります。プランの契約が開始されるのは、登録から14日経過後です。

新規のプロジェクトでStudio.Assistantを使う手順です。

作成済みのプロジェクトでStudio.Assistantを使う手順です。

画面左のフォームにサイトの情報を入力し、生成を実行します。入力内容が生成されるサイトの構成とデザインに反映されます。

[Webサイトの概要]に、サイトの基本情報を入力します。

[コンテンツタイプ]では、生成されるサイトの方向性をスライダーで調整します。

スライダーを動かすと、設定値の内容が画面上で確認できます。

[ロゴ素材]と[画像素材]に、サイト内で使用するイメージ素材をアップロードします。png・jpg・svg形式に対応しています。

[ロゴ素材]をアップロードすると、ロゴから抽出したカラーコードをもとにサイトデザインに使用するキーカラーを指定することができます。

入力が終わったら、[デザインを生成]を選択します。トップページだけでなく、サイト全体を1つのサイトとして生成できます（例：Home / About / Contact）。

生成後は、各ページを個別に編集・調整できます。

サイト全体のページ構成を[サイトマップ]で俯瞰し、その場でページを追加したり、不要なページを削除したり、順番を入れ替えたりできます。

Proプランでは、ページ構成をサイトマップシートで書き出し、表計算ソフトで編集してから読み込むこともできます。

生成後のサイトは、セクション単位での編集や、画像・フォントの変更ができます。

セクションはコピー・カット・ペースト・複製ができます。セクションを選択し、右クリックメニューから操作します。同じ操作はキーボードでも実行できます。

複数のセクションをまとめて操作する場合は、Shift + クリックで範囲を選択します。⌘ + クリックでは、セクションを個別に追加して選択できます。まとめて操作した場合、取り消しとやり直しもまとめて反映されます。

扱えるセクションは用途別に37種類あります。ヘッダー・ヒーロー・特徴・料金・よくある質問・お問い合わせなどです。すべての種類は、サイトマップシートの解説記事で確認できます。

セクションの編集時には、[ロゴ画像]または[画像素材]でアップロード済みの画像か、[写真検索キーワード]をもとに提案されるStudio.StockによるAI生成画像を利用できます。

デザインパネルでフォントを追加することで、セクション上のテキストに個別で指定できます。

生成したサイトはデザインエディタへ書き出せます。サイトの内容は、シートやファイルでもやり取りできます。

生成したサイトをデザインエディタへ書き出すと、Studio.Designでそのまま編集・実装・公開へ移行できます。

また、デザインエディタ側の内容をStudio.Assistantに取り込むこともできます。[インポート]では[デザインデータ]を選択します。

Starterプランではページごとの書き出しとなりますが、Proプランでは全ページを一括で書き出せます。

Proプランでは、サイトの内容を3種類のシートで書き出して読み込めます。いずれもExcel（.xlsx）形式です。

生成の設定は、設定ファイルとして保存して別のサイトで再利用できます。シートや画像は、画面にドラッグ&ドロップして取り込めます。

利用前に確認しておく仕様と制限です。