ビジュアル編集とプレビュー
要素を選択し、テキストを編集し、画像を置き換え、テーマを適用し、公開前に変更内容をプレビューできます。
ビジュアル編集は App ビューアー内で直接動作します。プレビューの下にあるツールバーを使って、要素の選択、テキストの編集、画像の置き換え、テーマの適用、公開前の変更内容のプレビューを行います。
AI 支援による変更には Select element を、テキストを直接変更するには Edit Text を、色、フォント、効果などのグローバルスタイルには Theme を使用します。
ビジュアル編集の仕組み
AI エージェントがタスクを完了すると、プロジェクトの上部に App ビューアー が表示されます。ビジュアル編集ツールバーはプレビューの下にあります。
- Select element では、1 つ以上の要素を選択して、エージェントに変更を依頼できます。
- Edit Text では、プレビュー内のテキストを直接編集できます。
- Theme では、グローバルスタイル用のテーマ設定を開きます。
ツールバーは不要なときに折りたたむことができます。
始める前に
編集を始める前に、次のことを確認してください。
- プロジェクトのビルドが完了していること。ビジュアル編集ツールは、エージェントがタスクを完了した後に App ビューアーから利用できます。
- 変更は 公開するまでライブになりません。 更新したバージョンを公開するまで、公開 URL には影響しないことを理解していること。
- テーマが適用されるのは共有スタイルのみである ことを理解していること。固定値で作られた要素は、テーマ変更後も以前の見た目を維持します。以下の テーマの見た目が正しくない場合 を参照してください。
Theme でグローバルスタイルを設定する
テーマは、プロジェクトのデザインシステムです。これは、1 つの要素に対する設定ではなく、アプリ全体に適用されるグローバル変数 — パレット、タイポグラフィ、間隔 — を定義します。
Theme は、構築を始める前の準備段階で使うのが最適です。早い段階で適用しておけば、エージェントが生成するものは最初からそれに従います。
テーマを選ぶ
App ビューアーの下にあるツールバーから Theme を選択します。Theme パネルには Search Themes フィールドがあり、テーマは次のセクションに分かれています。
- Current Theme — 現在プロジェクトで使用しているテーマです。何も適用していない場合は No theme applied yet と表示され、その横の + ボタンで新しいテーマを作成できます。
- Featured Theme — デザイナーが厳選した 15 個のプリセットです。それぞれ、そのテーマで作成されたページのプレビュー、名前、パレットを示すスウォッチの列とともに表示されます。これらは削除できません。
- Your Theme — 作成またはカスタマイズしたテーマです。これらは名前の変更と削除ができます。
各テーマは、そのテーマで作成されたページのプレビュー、名前、パレットを示すスウォッチの列とともに表示されるため、適用前に方向性を判断できます。
Theme タブ。上部に適用済みテーマ、その下に保存済みテーマが表示されています。
適用するには:
- 使用したいテーマを選択します。
- Atoms が "Do you want to apply theme name?" と確認します。
- 確認するには Apply を、戻るには Cancel を選択します。
- プレビューを確認します。
期待される結果: プレビューが選択したテーマに更新され、そのテーマが Current Theme の下に表示されます。
注: 未保存のテキストまたは画像の変更がある場合、新しいテーマを適用する前に、Atoms はそれらを保存するか破棄するかを確認します。
適用済みテーマを更新する
Theme タブ上のドットは、適用済みテーマの新しいバージョンが利用可能であることを示します。
更新するには、現在のテーマで Update を選択し、Do you want to re-apply theme name? を確認します。すると、プロジェクトは新しいバージョンを使用します。
更新は必須ではありません。そのままにしておけば、プロジェクトは適用済みのバージョンを使い続けます。
注: 注: アプリの見た目が選択したテーマと異なる場合、個々の要素にテーマを上書きするスタイルが設定されている可能性があります。これらの上書きは特定のコンテンツを対象としており、テーマ変更後も残ります。
Theme Manager でテーマを作成または編集する
Current Theme の横にある + を選択してゼロから作成するか、既存のテーマを開いて変更します。どちらの場合も Theme Manager が開き、ライブプレビューを見ながらテーマを細かく調整できます。
設定は 3 つのタブに分かれています。
- Color — アプリで使用する色の役割です。用途ごとに Base Colors、Card、Popover、Primary、Secondary などに分かれています。各役割には個別の値があるため、Primary を変更すると、それを使用するすべての要素に反映されます。
- Fonts — Serif、Sans-serif、Mono の書体です。
- Effects — 角の Radius と、色、不透明度、ぼかし、広がり、オフセットで制御できる Shadow です。
横にあるプレビューは、サインインフォーム、ボタン、入力欄、本文テキスト、等幅テキストなどの実際のコンポーネントで構成されているため、推測ではなく変更結果をすぐに確認できます。その下のライト / ダーク切り替えを使って両方を確認してください。明るい背景で機能するパレットでも、暗い背景ではコントラストが不足することがあります。
プレビューの下には、変更をたどるための Undo と Redo、テーマを開始時の状態に戻す Reset もあります。
Theme Manager。値を変更するとプレビューが更新され、その下のコントロールでは元に戻す、やり直し、エクスポート、インポート、リセットを行えます。
テーマを保存する
- Save を選択します。
- Theme Name を入力するか、提案された名前をそのまま使います。
- 確認のため Save を選択します。
期待される結果: テーマが Theme タブの My Theme の下に、パレットがスウォッチで表示された状態で追加されます。他のテーマと同じ方法で適用できます。
注: 編集内容は保存するまで保持されません。未保存の変更がある状態で別のテーマを適用しようとすると、Atoms は保存または破棄を促します。
プロジェクト間でテーマを再利用する
Theme Manager にはプレビューの下に Export と Import があります。テーマをファイルにエクスポートし、別のプロジェクトにインポートすれば、同じデザインの方向性を再利用したり、チームメイトに渡して相手のプロジェクトを自分のものに合わせたりできます。
テーマの見た目が正しくない場合
テーマの適用は互換性チェックではないため、通常は失敗しません。テーマはアプリの基盤となる共有スタイル値を置き換えるため、通常はピッカー内のどのテーマでもどのプロジェクトにも適用できます。
その代わりに起こり得るのは、テーマの適用自体は成功しても、すべてには反映されないことです。この場合、エラーメッセージは表示されず、単に見た目が不自然になります。
アプリの一部が以前の見た目のままになる。 これは最も一般的な問題です。共有スタイルではなく、固定値や、その要素に直接設定された特定の色やフォントが使われている要素は、テーマ変更の影響を受けないため、以前の見た目のまま残り、周囲とちぐはぐになることがあります。影響を受けている要素を選択し、プロジェクトチャットで変更内容を説明してください。
テキストが読みにくくなる。 明るい背景向けに設計されたレイアウトにダークテーマを適用すると、テキストのコントラストが不足することがあります。ビジュアルエディターで該当要素を調整するか、既存のデザインに近いテーマを選んでください。
Atoms にテーマを適用できないと表示される。 まれなケースで、プロジェクトのインターフェースが Atoms のテーマシステム上に構築されていないことを意味します。その場合はビジュアルエディターを使用してください。要素ごとにすべて実現できます。
重要: 可能であれば早い段階でテーマを選んでください。エージェントは、すでにテーマが適用された状態で構築すると、最初からその共有スタイルを使用するため、後からテーマ変更しても反映されない固定値の要素が少なくなります。
ビジュアルエディターで要素を編集する
- ビジュアル編集ツールバーにカーソルを合わせ、Select element を選択します。
- ツールバーに Click to select, Ctrl/Cmd + Click for multiple と表示されます。
- プレビュー内の要素を選択します。複数の要素を選択するには、Windows では Ctrl、Mac では Cmd を押しながら選択します。
- 選択内容がプロジェクトチャットに添付されます。ツールバーには Edit 1 selection in chat window のように選択数が表示されます。
- プロジェクトチャットで希望する変更内容を説明し、メッセージを送信します。
- 選択モードを終了するには、もう一度 Select element を選択します。
レイアウト、色、間隔、スタイル、または複数の選択要素に影響する変更には、プロジェクトチャットを使用してください。
テキストを直接編集する
- App ビューアーの下にあるツールバーから Edit Text を選択します。
- Click text content to edit と表示されたら、変更したいテキストを選択します。
- プレビュー内でテキストを直接編集します。
- 保存前に複数のテキスト要素を編集できます。ツールバーには 1 text change や 2 text changes のように保留中の編集数が表示されます。
- 保留中のテキスト変更をすべて保持するには Save を、削除するには Discard を選択します。
Select element の使用中にテキストをダブルクリックして、直接編集を開始することもできます。
変更を保存または破棄する
テキストや画像への直接変更は、保存するまで適用されません。変更が保留中の場合、ツールバーには変更数とともに Discard と Save が表示されます。
- Save は、保留中の直接編集をすべて適用します。
- Discard は、保留中の編集を削除し、影響を受けた要素を以前の状態に戻します。
保留中の変更がある状態で編集モードを終了しようとすると、Atoms は次を表示します。
未保存の変更
未保存の変更があります。編集モードを終了する前に、変更を保存するか破棄してください。
編集を続けるには Cancel を、変更を保持せずに終了するには Discard を選択します。
保存すると作業中のプロジェクトが更新されます。公開するまではライブサイトは更新されません。
画像を置き換える
- Select element モードに入ります。
- 置き換えたい画像を選択します。
- 画像ライブラリから画像を選ぶか、選択した画像のアップロードコントロールを使用します。
- プレビューで置き換え結果を確認します。
- 画像変更を適用するには Save を、取り消すには Discard を選択します。
プロジェクトチャットにも指示を入力した場合、画像の置き換えとチャットの指示をまとめて送信できます。
画像カテゴリと Popular Images を表示した Library タブ。
画像の取得元
Image は組み込みコレクションです。特定のものを探すには Search assets を使うか、カテゴリを閲覧します。Backgrounds、Nature、Education、Health、Fashion、Science、Feelings、People があり、残りは More tags から確認できます。カテゴリを選択すると開き、戻るには戻る矢印を使います。下部の Popular Images には一般的な画像が表示されます。任意の画像にカーソルを合わせて Use asset を選択すると適用されます。
Generate は説明文から新しい画像を作成し、Pro または Max プランが必要です。Describe the image you want to generate の下に希望内容を入力し、Generate を選択します。結果はその下に表示されます。完成したサムネイルを選択すると、要素に適用されます。
Upload では、ドラッグ＆ドロップ、貼り付け、またはクリックで自分のファイルを追加できます。画像形式は JPEG、PNG、GIF、BMP、TIFF、WEBP に対応し、最大 4MB です。アップロードした画像はドロップエリアの下に表示され、選択すると適用されます。
注: Use asset は組み込み画像にのみ表示されます。生成またはアップロードした画像は、代わりにサムネイルを選択して適用します。
チャットで変更内容を説明する
Select element で 1 つ以上の要素を選択した後、プロジェクトチャットで希望する結果を説明します。
例:
- "このセクションを、余白を増やして見出しを小さくし、より落ち着いた印象にしてください。"
- "これらのボタンを料金ページのスタイルに合わせてください。"
意図する結果を具体的に説明してください。"もっと良く見えるようにして" のような指示は、予測しにくい結果になることがあります
変更内容をプレビューする
プレビューの上にあるツールバーを使用します。
- Device view — 画面サイズを切り替えてレスポンシブ対応を確認します。デスクトップで問題ないテーマやタイポグラフィの変更でも、モバイルでは崩れることがあるため、公開前に必ずモバイルを確認してください。
- Page selector — アプリ内のページを切り替えます。
- Refresh — プレビューが古いように見える場合に再読み込みします。
- Open in a new tab — 別のブラウザタブでアプリを全幅表示します。
- Console — 問題があるように見えるときにログパネルを開きます。
期待される結果: 変更内容が、サポート対象とするすべてのページとすべてのデバイス幅で確認できます。
プレビューの問題から復旧する
プレビューが古いままに見える、読み込みが終わらない、または赤いエラーが表示される場合、問題はビジュアル編集ではなく App ビューアーにある可能性があります。対処手順については Build and preview troubleshooting を参照してください。Refresh、Console パネル、Resolve、および解消しないエラーの報告方法が説明されています。
テキストや画像への直接編集が消えたように見える場合は、保存したかどうかを確認してください。未保存の変更は、編集モードを終了すると破棄されることがあります — 「変更を保存または破棄する」を参照してください。
変更を公開する
ビジュアル編集は、公開するまで作業中のプロジェクトに保持されます。右上の Publish を選択するか、プロジェクトがすでに公開されている場合は Update を選択します。
注: プロジェクトで Always Latest ではなく Specify Version を使用している場合、ライブサイトは選択したバージョンに固定されたままとなり、新しいバージョンを公開するまでデザイン変更は公開されません。
ビルド中にエージェントが報告するエラーについては、問題の報告 を参照してください。