AI Studioでウェブページを作成する

ランディングページ、ワンページャー、商品詳細ページ、ソーシャルプレビューを作成し、実際の表示をテストして公開方法を選びます。

約 11 分

ドキュメントならランディングページを説明でき、画像なら1つの画面を見せられます。ただし、実際に開いたときの動き、スマートフォンでの情報の強弱、最初のスクロール後も主な操作が伝わるかまでは確認できません。

体験そのものを下書きにしたい場合は、ウェブページを選びます。AI Studioはキャンバス上にライブプレビューを作成します。ソースの隣で開いてテストし、レビューした後、必要に応じて単独のプレビューとして共有できます。

要約

編集可能なキャンバスを開き、ウェブページを選んでソースオブジェクトを指定します。スタイルを選び、読者、目的、必要なセクション、主な操作をプロンプトに書いて送信します。プレビューでデスクトップとモバイルの表示、主張、リンクを確認してください。ページの所有者はプレビューを共有を開き、公開リンクを有効にしてリンクをコピーできます。

開いてレビューする体験にはウェブページを選ぶ

AI Studioのウェブページは、プロトタイプ、クライアントレビュー、キャンペーン案、インタラクティブなワンページャーなど、説明ではなく実際に開く必要がある成果物に向いています。

必要なもの選ぶ種類理由
編集するコピー、リサーチ、構造化されたブリーフドキュメント文章が成果物です。
比較、トラッカー、データ表テーブル行と列が情報の構造を決めます。
1つのキービジュアルや静止画画像1画面でアイデアを確認できます。
ナレーション付きの報告やストーリーオーディオ聞くことが引き渡しの一部です。
開いて、スクロールし、クリックして試すページウェブページレイアウトと操作が成果物の一部です。

生成ページはプレビュー用の成果物であり、本番サイトのホスティングやCMSではありません。方向性とレビューを確定するために使い、承認後のコピー、メディア、計測、フォーム、法的表記、外部連携は本番サイトを管理するシステムへ移します。

作成前にアクセス権を確認する

項目詳細
利用できる環境Webアプリとデスクトップアプリの、編集可能で埋め込みではないキャンバス。
生成できる人キャンバスの編集権限を持つワークスペースメンバー。
キャンバスのプレビューを開ける人完成したキャンバスオブジェクトを閲覧できる人。
公開プレビューリンクを作れる人生成したページセッションの所有者。
処理が始まる条件送信時にワークスペースのAIクレジット確認が完了すること。
結果現在のキャンバスに置かれるライブプレビューオブジェクト。

ゲスト、外部共同編集者、閲覧のみまたはコメントのみの権限を持つ人は、新しいページを生成できません。キャンバスのアクセス権で許可されていれば、完成したオブジェクトはレビューできます。

キャンバスの素材からページを作る

  1. ブリーフ、参照素材、生成ページを置くキャンバスを開きます。
  2. ページに使うノート、画像、ファイル、テーブル、以前の結果を選択します。
  3. AI Studioでウェブページを選びます。
  4. スタイルを選びます。
  5. 読者、ページの目的、主な操作、必須セクション、ソースの制約、優先する端末をプロンプトに書きます。
  6. 必要なファイルやHTTPSリンクを追加し、アップロードの完了を待ちます。
  7. 送信を選びます。AI Studioが調査、構成、制作を進める間、オブジェクトに生成状況が表示されます。
  8. 完成後にプレビューを開きます。

次の動画では、選択したキャンバス素材からウェブページを作り、完成した結果を開いてレビュー、共有する流れを確認できます。

結果は、タイトル、説明、サムネイル、プレビューへの接続を持つカードとしてキャンバスに残ります。レビュー中はブリーフや参照素材の隣に置き、プレビューリンクだけが根拠から離れないようにしてください。

ページの目的に合わせてスタイルを選ぶ

スタイル適している場合ページの方向性
自動結果は分かるが形式を細かく指定しない。プロンプトとソースからページ形式を選びます。
ランディングページ初めて訪れた人に提案を伝え、1つの主な操作へ導く。ヒーロー、価値提案、根拠や信頼要素、セクションの流れ、明確な行動喚起。
ワンページャーブリーフ、提案、ローンチ概要、経営報告を1ページにまとめる。読み飛ばしやすいセクション、明確な階層、重要な事実、短い説明。
商品詳細ページ購入を前提に商品コンセプトをレビューする。商品画像、名称と価格、バリエーション、配送と返品、根拠、購入操作。
ソーシャルプレビューキャンペーン投稿を実際のソーシャル画面に近い形で確認する。アカウント、メディア、操作、キャプション、時刻を備えたモバイル中心のモックアップ。

1つのプラットフォームを指定した場合、ソーシャルプレビューはそのプラットフォームに絞ります。複数の表示を比較したい場合だけ、クロスプラットフォームの比較を依頼してください。

整ったページをすべてランディングページにしないでください。5つのセクションからなる社内報告なら通常はワンページャーです。画像ギャラリー、選択肢、配送、購入根拠が必要な商品ローンチなら商品詳細ページです。この区別だけで、不要なセクションを削る作業を1回減らせます。

実際のブリーフを渡す

ページ作成では、選択した画像、添付画像、ファイル、PDF、音声や動画、テーブル、テキストオブジェクト、アクセス可能なURLを利用できます。

入力用途
選択したキャンバスオブジェクトレビュー中のブリーフ、承認済みコピー、テーブル、参照画像とページを結び付けます。
添付画像商品写真、キャンペーン素材、ロゴ、レイアウト参照を追加します。
添付文書とメディア事実、仕様、インタビュー、文字起こし、既存ブリーフを追加します。
HTTPSリンクサービスからアクセスできる公開ページと参照素材を追加します。
プロンプト読者、ページの役割、メッセージの順序、行動喚起、必須の事実、境界を指定します。

よいプロンプトは小さなクリエイティブブリーフのように書きます。

選択したスキンケア商品コンセプトの商品詳細ページを作成してください。選択した商品画像を主なビジュアルに使います。読者は敏感肌で初めて購入する人です。メリット、成分、使い方、配送と返品、レビュー用プレースホルダー3件、「カートに追加」操作を含めてください。提供した価格と主張は変更せず、認証を推測しないでください。

このプロンプトは、レイアウト上の判断と事実として使える範囲を分けています。根拠の範囲を守りながら、ページ側では明確なビジュアル判断ができます。

ライブプレビューオブジェクトを理解する

生成結果は一般的なウェブリンクではありません。プレビューを選ぶと専用ビューアーでページが開き、生成したバージョンとのつながりを保ったまま、デスクトップ、モバイル、コード表示を確認できます。

プレビューで次の4点を確認します。

  1. 隣のブリーフを見なくても最初の画面だけでページの目的が分かるか。
  2. 最初にスクロールした後も主な操作が明確か。
  3. モバイル表示で単に縮小されるのではなく、情報の階層が保たれているか。
  4. リンク、コントロール、メディア、操作できるセクションが説明どおりに動くか。

ページは外部の画像、フォント、スクリプト、動画、その他のHTTPSリソースを読み込めます。それらは所有者によってブロック、削除、変更されることがあります。外部リソースに依存するプレビューはクライアントレビュー前に再度テストし、本番実装では不安定な外部リソースを置き換えてください。

リンクを渡す前にページを確認する

確認項目見ること
メッセージ価値提案、読者、主な操作がブリーフと一致している。
事実名前、価格、日付、仕様、主張、参照がソースと一致している。
デスクトップとモバイル両方の幅でセクションが読みやすく、順序と操作性が保たれている。
リンクと操作すべての操作が正しい場所へ進むか、プロトタイプだと明確に分かる。
メディア画像が読み込まれ、切り抜きが適切で、非公開または無許可の素材が入っていない。
ページ情報タイトル、説明、キャンバスのサムネイルが正しいバージョンを示している。
機密情報社内メモ、顧客データ、法務確認前の文言、根拠のない約束が削除されている。

人による意思決定はキャンバスオブジェクトのコメントに残します。対象を絞った修正や批評には、ページのAI入口を使います。完成品に見えるプレビューでも、主張を承認する責任者が必要です。

対象に合わせてプレビューを共有する

公開プレビューリンクを管理できるのはページの所有者だけです。

  1. 生成ページのプレビューを開きます。
  2. プレビューを共有を選びます。
  3. リンクを知っている人が開けるようにする場合は、公開リンクを有効にします。
  4. レビューが終わってからリンクをコピーして送ります。

公開リンクが無効な場合は、キャンバスへのアクセス権を持つ人だけがプレビューを開けます。有効にすると、リンクを知っている人が最新の公開プレビューを開けます。公開を無効にしても、その後のアクセスは止められますが、すでに受け取ったコピー、スクリーンショット、情報までは消せません。

ソースコンテキストも必要なレビュー担当者には、プレビューだけでなくキャンバスを共有してください。公開プレビューは成果物を、キャンバスはその背景を示します。

再試行する前に生成の完了を待つ

ウェブページ生成では、ソースの整理、体験の設計、ビジュアル素材の作成または選択、ページ制作、プレビュー保存を行うため、短いドキュメントより時間がかかります。処理中のオブジェクトが現在の状態を示します。

依頼が受け付けられた後はキャンバスを離れても構いません。同じ依頼を再送信せず、元のオブジェクトへ戻ります。処理中のオブジェクトを削除するとキャンバス上のタスクをキャンセルしますが、すでに行われた処理の費用が取り消される保証はありません。完成したページを削除してもクレジットは戻りません。

スタイルごとの固定費用は表示されません。クレジット消費にはソース素材と実際の生成処理が反映されます。実行後はAIクレジット履歴を確認し、小さなコピー修正だけでページ全体を作り直さないでください。

プレビューが期待どおりに動かない場合

カードが処理中のまま。 元のオブジェクトを残して後で戻ります。止まったと判断する前に、キャンバスを一度更新します。

プレビューがない。 生成が保留中、失敗、削除済み、またはプレビュー可能な結果まで完了していません。元のオブジェクトとクレジット状態を確認するまで重複して生成しないでください。

プレビューは動くが、カードのタイトルやサムネイルが不自然。 キャンバスを更新します。それでも直らなければ、キャンバスのリンク、出力タイプ、おおよその完了時刻を添えてサポートに問い合わせてください。

リンク、画像、フォント、操作できるセクションが動かない。 外部ソースを直接開けるか、サインインが必要かを確認します。非公開または不安定なリソースを置き換え、新しいバージョンを保存するか、アクセス可能なソースから再生成します。

ページ形式が違う。 正確なスタイルを選び、必要な構成をプロンプトに書きます。商品詳細ページなら、ギャラリー、バリエーション、価格、配送、根拠、購入操作を指定します。

キャンバス外の人が公開リンクを開けない。 ページの所有者が公開リンクを有効にする必要があります。URLをコピーしただけではアクセス設定は変わりません。

根拠のない主張がある。 ソースとプロンプトを修正し、一度だけ編集または再生成します。自然な文章のプレビューを証拠として送らないでください。AIの結果が期待どおりでない場合も参照してください。

更新後も処理が止まっている。 ワークスペース名、キャンバスのリンク、出力タイプ、おおよその送信時刻、プロンプトの要約、添付ファイルの種類、クレジットがブロックまたは消費されたかを添えてサポートに問い合わせてください。パスワード、非公開の認証情報、不要な顧客データは送らないでください。

フィードバック

この記事は役に立ちましたか？