Website Studio ガイド

01. Website Studio とは

Website Studio はウェブサイトを ページ → セクション → 要素 の構造で扱います。画面は五つの領域に分かれています。

Website Studio 全体画面。番号は下の説明の順番と同じです。閉じる

1. 1サイト構成パネル — ページとセクションの一覧、デザインシステム、アセットがあります。
2. 2キャンバス — 実際のサイトの見え方をすぐ確認し、セクションやテキストをクリックして選択します。
3. 3プロパティパネル — 選択したページ・セクション・要素のプロパティを変更します。何も選択していないときは「編集するページ、セクション、要素を選択してください。」と表示されます。
4. 4PRIME 入力欄 — 「PRIME に依頼してください（例：Hero をもっと上質に）」のように、変更内容を言葉で依頼します。
5. 5上部の操作ボタン — 保存状態、元に戻す/やり直し、ビルド・デプロイ・公開、ZIP ダウンロードがまとまっています。

02. Website Studio をはじめる

Website Studio は PRIME の会話から始まります。作りたいサイトを会話で説明すると、PRIME がウェブサイトプロジェクトを用意し、会話内に Website Studio を開くボタンを表示します。

1. 1PRIME の会話で、どんなサイトか、主な訪問者、訪問者が最初に取る行動を伝えます。ブランド資料や参考サイトがあれば添付します。
2. 2会話に表示されるWebsite Studio を開くボタンを押します。
3. 3Website Studio が開いたら、自動で作られたページとセクションを確認して編集を始めます。

編集中に会話へ戻るには、左上のPRIME チャットを押します。位置は画面構成の最初のスクリーンショットで確認できます。

03. 画面構成

左上 — 作業モード

左上の領域。閉じる

1. 1PRIME チャット — PRIME の会話画面に戻ります。
2. 2プロジェクト名 — クリックしてその場で名前を変更できます。
3. 3デザイン · プレビュー · コード — 作業モードを切り替えます。キーボードの 1・2・3 でも切り替わります。詳しくはプレビューとコードを参照してください。
4. 4構成 · コンテンツ · レスポンシブ · インタラクション — デザインモードで集中する編集の種類を選びます。

左下 — デザインシステムとアセット

サイト構造パネルの下部。閉じる

1. 1デザインシステム — サイト全体の色とテーマを管理するパネルを開きます。デザインシステムで説明します。
2. 2すべて · 画像 · 動画 — プロジェクトのアセットを種類別に絞り込みます。
3. 3アセット一覧 — プロジェクトに紐づく画像と、使われているセクション名が表示されます。生成に失敗した項目には失敗の表示が付きます。
4. 4おすすめビジュアルの案内 — 「おすすめビジュアル 1 件 — 下の PRIME から作成できます」のように、まだ作成していないおすすめ画像があると知らせます。

04. ページとセクションの管理

サイト構成パネルの上部でページを追加し、各ページの下にセクションを積み重ねます。

サイト構造パネルの上部。閉じる

1. 1ページプリセット — 複数のセクションがあらかじめ組まれたページ構成を選びます。プリセットで説明します。
2. 2ページを追加 — 空の新しいページを追加します。
3. 3レイヤー検索 — セクションが多いときに名前で探します。
4. 4ページ行 — ページ名とパス（例：/ecommerce）が表示されます。右の+（セクションを追加）でセクションを追加し、···（その他）でページメニューを開きます。
5. 5目のアイコン（非表示）— セクションを削除せずに一時的にサイトから隠します。もう一度押すと表示されます。

セクションを追加する

ページ行の+を押すと、下にセクションの種類パネルが開きます。

セクション追加パネル。閉じる

1. 1プリセットギャラリーから選ぶ — デザイン済みのセクションプリセットから選んで追加します。
2. 2セクションタイプ — ヘッダー · ヒーロー · 機能紹介 · 信頼要素 · 料金 · FAQ · CTA · フッター · カスタム のいずれかを押して基本セクションをすぐ追加します。

05. プリセットですばやく構成する

プリセットギャラリーには、セクションプリセットと複数のセクションをまとめたページプリセットがあります。現在の画面上部にはセクション 169 · ページ 26と表示されています。

プリセットギャラリー — ページタブ。閉じる

1. 1タブ — セクション · ページ · 業種スターター · お気に入り・最近から選びます。
2. 2総数 — いま使えるセクション・ページプリセットの数です。
3. 3ページプリセットカード — カード名（例：SaaS ランディング）と含まれるセクションの順番を表示します。右上にセクション数が表示されます。
4. 4ページとして追加 — この構成を新しいページとして追加します。

画面にあるページプリセットの例

一覧を下にスクロールすると、エージェンシー、ポートフォリオ、クリエイター、ビューティーなど、さらに多くのページプリセットが続きます。上のプリセット名は韓国語画面の表記を訳したものです。

セクションプリセットと別のスタイルに変更

• セクションタブでは、セクションを一つ選んで現在のページに追加します。検索（例：hero, fashion, gallery, pricing …）とカテゴリーフィルターを併用できます。
• 既存セクションの見た目だけを変えるには、セクションの···メニューまたはプロパティパネルのスタイルを切り替えを使います。
• 業種スターターは業種別のおすすめの色・フォント・ページ構成を一度に適用します。

06. セクションメニューとレイヤーの整理

セクション行の右にある···（その他）を押すと、セクションを整理するメニューが開きます。

セクションのその他メニュー。閉じる

1. 1···（その他）— セクションメニューを開きます。
2. 2名前を変更 · 複製 · スタイルを切り替え · ロック · 上へ移動 · 下へ移動 · 削除 — 名前の変更、複製、見た目の変更、誤操作防止のロック、順番の移動、削除を行います。
3. 3別のページへ移動 — セクションを別のページへ移動します。

• セクション名の横の灰色の文字（ヘッダー、ヒーロー、機能紹介など）はセクションタイプです。
• 行の左の>を押すと、セクション内の要素一覧を展開できます。
• ロックしたセクションにはロック、非表示のセクションには非表示が表示されます。

07. セクションの選択とプロパティパネル

サイト構造パネルのセクション行、またはキャンバスのセクションをクリックすると選択されます。選択すると、プロパティパネルと PRIME 入力欄がそのセクションを基準に切り替わります。

セクションを選択した状態。閉じる

1. 1選択されたセクション行 — サイト構造パネルで強調表示されます。
2. 2キャンバスの選択表示 — キャンバス上のセクション左上に、選択中のセクション名が表示されます。
3. 3プロパティタブ — レイアウト · コンテンツ · スタイル · アセット · レスポンシブ · インタラクション · データ。
4. 4スタイルを切り替え · ロック — 選択したセクションの見た目を別のプリセットに変更するか、ロックします。
5. 5PRIME の選択対象 — 入力欄の上に「フルスクリーンヒーロー を選択中」のように選択中のセクションが表示されます。この状態で依頼すると、PRIME はこのセクションを基準に修正します。

08. テキストを修正する

キャンバスの下には「クリックで選択、テキストをダブルクリックで編集、画像の領域をクリックで変更できます。」という案内が表示されます。テキストの修正はこの案内どおりに行います。

1. 1キャンバスで変更したいテキスト（メニュー名、見出しなど）をダブルクリックします。
2. 2その場でテキストを書き換えます。
3. 3テキストの外をクリックすると反映され、上部の保存状態が変わります。

同じ作業を PRIME に依頼することもできます。テキストのあるセクションを選択し、PRIME 入力欄に変更後の文言を正確に書いて依頼します。例：「上部メニューの LOOKBOOK をコレクションに変えて」。

09. レイアウトと配置の編集

セクションを選択すると、プロパティパネルの上部に配置、下部にレイアウトツールが表示されます。

配置

配置領域。閉じる

1. 1配置方式 — 背景 · 全幅 · 分割 · 通常から、画像と文字の基本の並びを選びます。
2. 2文字の位置 — 9 マスのいずれかを押して文字の位置を決めます。
3. 3オーバーレイ · 暗さ — 背景画像の上の文字が読みやすいよう、オーバーレイの種類と暗さを調整します。
4. 4高さ — セクションの高さを選びます。
5. 5モバイル — モバイルでは画像を非表示、標準 · 画像を先に · 文字を先にでモバイルの順番を決めます。

レイアウトツール

レイアウトツール。閉じる

1. 1間隔(gap) — セクション内の要素間の間隔を選びます。
2. 2揃え — 横（左・中央・右）と縦（上・中央・下）の整列を決めます。
3. 3分布 — 要素を横・縦に均等に分けるか、同じ幅にそろえます。
4. 4コンテナ · 最大幅(px) — コンテンツの幅を決めます。
5. 5配置 · 最小高さ — 配置方式とセクションの最小の高さを決めます。

10. スタイルを編集する

セクションの色や表面の雰囲気は、プロパティパネルのセクション設定で変更します。現在の画面には次の項目があります。

11. デザインシステムを使う

デザインシステムは、サイト全体で使うテーマと色を一か所で管理します。左下、またはプロパティパネルのデザインシステムボタンから開きます。

デザインシステムパネル。閉じる

1. 1テーマ — サイトの基本テーマをライト · ダークから選びます。
2. 2デザインの方向性 — サイトの種類、構成、避ける要素など、このサイトのデザインの方向性がまとめられています。
3. 3カラー — 背景、表面、カード表面、本文の文字、補助の文字、枠線、メインボタンなどの色を、カラーチップまたは HEX 値で変更します。

個別スタイルとデザインシステムの違い

12. レスポンシブを確認する

右上のデスクトップ · タブレット · モバイルボタンで、キャンバスを画面サイズ別に確認します。位置は保存・元に戻すのスクリーンショットの 5 番です。

• 上部のレスポンシブモードと、プロパティパネルのレスポンシブタブで画面サイズ別の設定を確認します。
• 画像のあるセクションは、配置のモバイル項目でモバイルでは画像を非表示とモバイルの順番を直接設定できます。

13. コンポーネントでセクションを再利用する

同じセクション（共通ヘッダー、共通フッターなど）を複数のページで使うには、コンポーネントとして保存します。セクションを選択し、プロパティパネルの下部までスクロールすると表示されます。

プロパティパネルの下部。閉じる

1. 1レイヤー — Z-INDEX と最前面 · 前面へ · 背面へ · 最背面で重なり順を決めます。
2. 2コンポーネント・共通セクション — コンポーネントとして保存を押すと、このセクションが再利用コンポーネントになります。画面の案内どおり、他のページに同じコンポーネントを入れ、元（master）を変えてすべての使用箇所に反映できます。

14. 画像を差し替える

画像のあるセクションを選択すると、プロパティパネルの一番上にビジュアル領域が表示されます。キャンバスで画像領域をクリックしても同じ場所に移動します。

ビジュアル領域。閉じる

1. 1プレビュー — 現在の画像と状態が表示されます。生成に失敗した場合は、案内文とともに作り直すボタンが表示されます。
2. 2AIで差し替え — AI で新しい画像を作ってこの位置に入れます。クレジットを使用します。
3. 3自分の画像に差し替え — 手持ちの画像ファイルをアップロードして差し替えます。
4. 4既存の画像を選択 — このプロジェクトにすでにある画像から選びます。
5. 5配置 — 画像と文字の配置を変更します。レイアウトと配置を参照してください。

15. PRIME に自然言語で修正を依頼する

プロパティを直接変更する代わりに、画面下の PRIME 入力欄から言葉で依頼できます。

1. 1修正するセクションをサイト構造パネルまたはキャンバスで選択します。選択しない場合はサイト全体を基準に依頼します。
2. 2入力欄の上に「（セクション名） を選択中」が表示されているか確認します（セクションの選択のスクリーンショット 5 番）。
3. 3変更内容を文章で書き、送信を押します。
4. 4キャンバスで結果を確認します。気に入らなければ元に戻すか、もう一度依頼します。

依頼の例

• 入力欄の基本の例：「PRIME に依頼してください（例：Hero をもっと上質に）」
• セクションを選択したときの例：「フルスクリーンヒーロー をどう変えますか？例：女性モデルの画像を入れて」
• 「このセクションを 3 列のカードにして」「モバイルでは 1 列にして」「このボタンを黒にして」のように、対象と結果を一緒に書きます。

16. 保存 · 元に戻す · やり直す

編集内容は自動で保存されます。右上で保存状態と元に戻すボタンを確認します。

右上の領域。閉じる

1. 1保存状態 — 保存済み、保存中、保存失敗、競合のいずれかが表示されます。
2. 2元に戻す · やり直し — 直前の変更を取り消す、または再適用します。ショートカットは Ctrl/Cmd+Z、Ctrl/Cmd+Shift+Z です。ボタンにマウスを合わせると対象の操作名が表示されます。
3. 3ビルド · デプロイ · 公開 — 現在 準備中 のボタンです。ビルド · デプロイ · 公開を参照してください。
4. 4ZIP ダウンロード — サイトのコードを ZIP ファイルでダウンロードします。ZIP ダウンロードで説明します。
5. 5デスクトップ · タブレット · モバイル · 編集表示 — キャンバスの画面サイズを変え、編集可能な領域の表示をオン・オフします。

17. プレビューとコード

モード切り替えボタンの位置は画面構成の最初のスクリーンショットの 3 番です。

18. ビルド · デプロイ · 公開

上部のビルド · デプロイ · 公開ボタンは現在無効で、マウスを合わせると 準備中 と表示されます。現時点ではこれらのボタンでサイトを公開することはできません。

完成したサイトを自分でホスティングするには、ZIP ダウンロードでコードを取得してください。

19. ZIP ダウンロード

右上の青いボタンでサイトを ZIP ファイルとしてダウンロードします。ボタンには選択中の出力形式も表示されます。

ZIP ダウンロードと出力形式。閉じる

1. 1ZIP ダウンロード — 表示されている形式（例：HTML ウェブサイト）ですぐにダウンロードします。
2. 2⌄（別の形式でダウンロード）— 出力形式の一覧を開きます。
3. 3出力形式 — Next.js（SEO・複数ページ向け · Next.js App Router（静的エクスポート））、React（インタラクティブなアプリ型画面 · React + Vite）、HTML ウェブサイト（インストール不要ですぐ開ける HTML/CSS/JavaScript）から選びます。
4. 4準備状態の案内 — 例：「まだ用意できていない画像が 4 件あります。」まだ作成されていない画像があると、ダウンロード前に知らせます。

• Reactには「静的ホスティングではすべてのパスを index.html に向ける必要があります。」「サーバーレンダリングがないため、ページごとの検索情報は限られます。」という注意が表示されます。
• HTML ウェブサイトはインストール不要ですぐに開ける形式です。

20. トラブルシューティング