デザインキャンバスで画面を編集

全4レッスン中 4番目10分

このレッスンで学ぶこと

各デザインが自己完結した 1 つの HTML ファイルである理由と、その利点を説明できる
ページとデッキを区別し、ドックとフィルムストリップでデッキのスライドを管理できる
AI を呼び出さずに、要素のスタイル変更、文章編集、複製、削除ができる
紫色の要素チップで、AI に 1 つの要素を正確に指定できる
PNG/PDF を書き出し、AI の編集と自分の編集が競合しても安全に復旧できる

デザインキャンバスでは、AIが作成した画面の要素を選び、テキストやスタイルを編集できます。チャットでランディングページやUIモックアップを依頼すると、結果が新しいタブで開き、チャットは左サイドバーに移ります。

UIモックアップ、ランディングページ、ポスター、ワンページ資料、スライドを同じ方法で編集できます。要素をクリックして調整するか、隣のチャットでAIに大きな変更を依頼します。

要素を選択し、スタイル設定を表示したデザインキャンバス。

デザイン全体を 1 つの HTML ファイルに収める

特別な形式を覚える必要はありません。各デザインは、ワークスペース最上位の designs/ フォルダーに置かれた完全な HTML ファイル 1 件です。スタイルは <style> ブロックにインラインで記述され、外部 CSS や JS は使いません。

このファイルが 唯一の正しい情報源 です。キャンバス、コードビュー、ブラウザー、PNG/PDF の書き出しは、すべて同じ内容を読みます。各編集は自動的にこのファイルへ保存されます。

AI に依頼：エージェントが create_design ツールでデザインを作ると、キャンバスが新しいタブとして前面に開きます。バックグラウンド実行で作成した場合は、フォーカスを奪わずバックグラウンドタブとして追加されます。
ファイルツリー：designs/ 内の .html または .htm ファイルをクリックすると、キャンバスで開きます。それ以外の場所にある HTML はコードエディターで開きます。表示方法はフォルダーで決まります。
コードから：コードとして開いた HTML のタイトルバーには 「キャンバスで表示」 ボタンがあります。キャンバスのドックには逆向きの 「コードで表示」 があります。切り替えるともう一方のタブが閉じるため、1 ファイルにつき常に 1 つのビューだけが開きます。
「デザインモード」専用のサイドバーアイコンやショートカットはありません。常にデザインファイル、または AI が作成したファイルから入ります。

スクリプトは使用しません

デザインファイルは、マークアップとインラインスタイルだけで構成されます。<script> タグ、インラインの on*= ハンドラー、<iframe>／<object>／<embed>、meta-refresh は使用できません。キャンバスは各デザインをサンドボックス化したフレームで描画するため、表示は常にファイルの内容どおりで、安全に共有できます。

Web アプリやゲームのように JavaScript が必要なものは、通常のコードとして designs/ の外へ置きます。キャンバスは静的なビジュアル専用です。

ページとデッキ

キャンバスは各デザインを次の 2 種類のいずれかとして自動判定します。

種類	内容	キャンバスの動作
ページ	ランディングページ、ポスター、1 ページ資料など、通常のレスポンシブドキュメント。	ブラウザータブのように動作する。ドキュメントをスクロールでき、`100vh` とメディアクエリが機能する。「全体表示」のズームは 100%。
デッキ	固定 1280×720 のスライドで構成されるデッキ。各スライドは `<section class="slide">`（または `<body data-design="deck">`）。	スライドを 1 枚ずつ全体表示し、下部に番号付きのライブサムネイルを並べたフィルムストリップを表示する。

デザインファイル: designs/ 内にある自己完結型 HTML ドキュメント 1 件。キャンバス、コードビュー、ブラウザー、書き出しで共有する唯一の正しい情報源。
ページ: レスポンシブなデザインドキュメント。キャンバスではブラウザータブのようにスクロールできる。
デッキ: 固定 1280×720 のスライドで構成され、1 枚ずつフィルムストリップ付きで表示されるデザイン。
セマンティック名: キャンバスが要素に付ける分かりやすい名前。スライド、見出し、テキスト、画像、アイコン、ボタン、リンク、リスト、テーブル、グループなど。生の HTML タグは表示しない。
要素チップ: 要素を選択するとコンポーザーに表示される紫色のチップ。次のチャットメッセージの対象をその要素だけに限定する。
フィルムストリップ: デッキ下部のスライドサムネイル列。クリックで移動し、右クリックで複製、並べ替え、削除ができる。

チャットと並べてデザインする

デザインタブがアクティブな間、チャットペインは左サイドバーへ移動します。スレッド、コンポーザー、添付を含む、通常と同じ完全なチャットです。セッション切り替えから 「チャット」 ダイアログを開けば、キャンバスを離れず会話を移動できます。デザインファイルは削除可能な @ メンションチップとしてコンポーザーへ自動添付されるため、再添付せずに「青にしてください」と依頼できます。

要素を選択すると、ファイルチップは「見出し・第 3 四半期の結果…」のような紫色の 要素チップ に変わります。次のメッセージには、デザインファイル名、スライド、要素の DOM パス、正確なソースマークアップが含まれます。

DOM パスは、ドキュメント内にある要素の正確なアドレスです。エージェントは周囲へ影響を与えず、そのノードだけを編集します。編集が反映されるとキャンバスがホットリロードし、変更箇所を約 1.6 秒間、インディゴ色の枠で強調します。

AI ツール	動作
`create_design`	`designs/` に新しいファイルを作成する。既存ファイルを上書きしない。
`edit_element`	DOM パスで 1 つの要素を編集する。テキスト、スタイル、属性の設定、置換、挿入、削除に対応する。
`edit_design`	ファイル内で完全一致するテキスト範囲を置き換える。
`write_design`	ファイル全体を書き直す。権限を緩和していない限り、承認カードで待機する。
`generate_image`	AI でラスター画像を作り、`designs/assets/` に保存してデザインへ挿入する。
`search_icons`	約 295,000 件のアイコンライブラリを検索し、結果を SVG としてインライン挿入する。

「AI に依頼…」ショートカット

要素を選び、きらめきアイコン付きの 「AI に依頼…」 ボタンをクリックします。ミニツールバー、プロパティポップオーバー、右クリックメニューから利用できます。要素チップが入った状態で、チャットのコンポーザーへフォーカスが移ります。

「この見出しをもっと印象的に」と入力すると、そのノードだけが変わります。インディゴ色の強調表示で反映を確認できます。

AI を介さず、自分で要素を編集する

要素へポインターを合わせると、見出し、ボタン、画像、グループ などの名前がチップに表示されます。「グループ」はコンテナ全般を意味するため、「div」とは表示されません。

クリックして選択すると、隣に プロパティポップオーバー が開きます。パンくずには祖先要素が最大 4 階層表示され、親グループへ直接移動できます。

スタイル変更、テキスト編集、複製と削除、新しいテキストブロック、スライド管理は、いずれも同じ手順で実行されるローカル DOM 編集です。即時に反映され、追加費用はなく、モデルも呼び出しません。

タイポグラフィ：「サイズ」「太さ」（400～800）、「色」「行の高さ」「文字間隔」「不透明度 %」「配置」（左／中央／右）。
ボックス：「パディング」「マージン」「角丸」「背景」「幅」「高さ」。すべて px 単位。
テキスト：要素のテキストを反映するテキストエリア（テキスト編集可能な要素のみ）。
数値フィールドは Enter、別の場所のクリック、または短い入力停止で確定します。キー入力ごとには反応せず、入力途中で Escape を押すと元の値へ戻ります。ボックスの 4 辺が異なる場合は 「混在」 と表示され、数値を入力すると 4 辺すべてに適用されます。

ポップオーバーを閉じると、選択範囲の右上に ミニツールバー が表示されます。「プロパティ」「テキストを編集」「AI に依頼…」「複製」「削除」を使えます。右クリックすると、同じ操作に加えて 「重なっている要素を選択…」 があります。

1 分以内でスタイルと文章を変更する

選択する
ポインターを合わせて名前チップを確認し、クリックします。選択範囲の隣にプロパティポップオーバーが開きます。
スタイルを変える
タイポグラフィの「サイズ」「太さ」「色」、またはボックスの「パディング」「背景」を変更します。即時反映され、入力を止めて約 0.4 秒後に自動保存されます。
文章を変更する
テキストをダブルクリックします。選択後に Enter を押すか、鉛筆アイコンをクリックしても編集できます。実際のキャレットで入力し、Enter で改行します。外側をクリックするか Escape を押すと確定します。
複製または削除する
アクション行を使います。削除時の確認はありませんが、「削除しました」という通知と 元に戻す ボタンが約 5 秒間表示されます。

ドック：スライド、ズーム、書き出し

キャンバス下部中央には、ガラス調のピル型ドックが表示されます（アクセシブルネームは「デザインツール」）。左から順に、次の操作があります。

ドックの操作	動作
保存状態	自動保存中はスピナーと「保存中…」を表示する。編集内容は常にメモリ内で安全に保持される。
「テキストを追加」（T）	挿入モードを有効にする。カーソルが ⊕ になり、ポインターチップは「+ 見出し」などと表示される。次のクリックで「新しいテキスト」段落を編集状態で配置する。右クリックまたは Escape でキャンセルする。
スライド矢印とカウンター	デッキのみ。「前のスライド」、「2 / 8」形式の位置、「次のスライド」。
ズーム	「縮小」／倍率／「拡大」で 25→50→75→100→150→200→300% を切り替える。倍率をクリックすると「全体表示」、50%、100%、200% を選べる。⌘+／⌘− で段階変更し、⌘0 で全体表示。
「書き出し」	メニューを開く。デッキでは PNG 項目に現在のスライド番号が付き、そのスライドを書き出す。ページでは単に「PNG」。どちらにも「PDF」がある。
「コードで表示」	同じファイルをキャンバスからコードエディターへ切り替える。

PDF はデザイン全体を取り込みます。デッキは 1280×720 の 1 スライドにつき 1 ページ、ページは全高を収めた縦長の 1 ページです。PNG は常に 1 フレームで、現在のスライドまたはページを書き出します。

保存ダイアログでは、<design>.pdf、<design>.png、<design>-slide-N.png のような名前が提案されます。完了したファイルは Finder または Explorer で表示されます。タイトルバーには実際の HTML ファイル用の 「ブラウザーで開く」 があり、⋯ メニューには 「PDF として書き出し」 もあります。

自動保存、競合、取り消し

編集は、入力を止めて約 0.4 秒後 に自動保存されます。⌘S またはタイトルバーの保存バッジで直ちに保存でき、タブを閉じるときも同じ検証付き保存が実行されます。

保存の前には毎回、背後でファイルが変更されていないか確認します。ほかの処理が先に書き込んでいた場合はディスク上の版が優先され、自分の編集内容はバナーの操作待ちになります。

バナーには「このファイルの新しい版によって、未保存の編集が置き換えられました」と表示され、「自分の編集を復元」 ボタンがあります。復元すると自分の版が優先され、閉じるとディスク上の版を維持します。内容が通知なしに失われることはありません。

取り消し履歴は最大 100 ステップ です。同じフィールドへの 1.2 秒以内の連続調整は、1 ステップにまとめられます。
エージェントの編集、競合、外部からの書き込みなど、ファイルがディスクから再読み込みされるたびに履歴は リセット されます。ディスク上の内容が新しい基準になります。
選択状態は再読み込み後も維持されます。エージェントの編集後も、同じ要素が残っていれば DOM パスを使って再選択します。
アプリウィンドウが再び前面になるたびにファイルを確認するため、開いたデザインが気付かないうちに古くなることはありません。

プロンプトから PNG まで

任意のチャットで「週末ワークショップ用の 1 ページポスターをデザインしてください」と依頼します。エージェントが create_design を呼び、チャットを左サイドバーに置いたキャンバスが開きます。
メイン見出しをクリックします。プロパティポップオーバーで「色」を変え、「サイズ」を大きくします。
見出しをダブルクリックして文章を書き換え、外側をクリックして確定します。
段落を選び、「AI に依頼…」をクリックし、「1 文に短くしてください」と入力します。編集が反映されたときのインディゴ色の強調表示を確認します。
ドックの「書き出し」メニューを開き、「PNG」を選びます。

PNG が保存され、Finder または Explorer で表示されます。デザイン自体は designs/ 内の通常の HTML ファイルなので、キャンバス、コード、ブラウザーのいずれからも再度開けます。

オーバーレイの背後にある要素を選ぶ

Alt+クリック、または右クリック ▸「重なっている要素を選択…」で「要素を選択」一覧が開きます。カーソル位置で重なるすべての要素名が表示され、目的のものを正確に選べます。

デザインキャンバスは、自己完結した 1 つの HTML ファイルを、キャンバス、コード、ブラウザーの 3 通りで開く仕組みです。大きな作業は AI に任せ、自分で微調整したい部分はプロパティポップオーバーで扱えます。次は、ほかのアプリやデータソースをエージェントから利用できるように接続します。

← 前のレッスン