デザインとプレビュー
アプリの見た目を調整し、公開する前に結果をプレビューします。
Design はライブプレビューの横に開き、 コードを書かずに プロジェクトの見た目を変更できます。
このガイドでは、Theme でグローバルスタイルを設定する方法、ビジュアルエディターで個別の要素を編集する方法、Library から画像を置き換える方法、自然な言葉で変更内容を説明する方法、そして公開前にデバイスごとに確認する方法を説明します。
Design の仕組み
AI エージェントがタスクを完了すると、ページ上部に App ビューアー が表示されます。 Design を選択すると、画面左側にデザインパネルが開き、その横にライブプレビューが表示されます。ここには 3 つのタブがあります。
- Theme は、アプリ全体に適用されるグローバルルール（色、フォント、効果）を設定します。構築前に使うのが最適です。
- ビジュアルエディター は、選択した要素を調整します。どのプロジェクトでも、いつでも使えます。
- Library は、画像を置き換えたり、新しい画像を生成したりします。
Theme がルールを設定し、ビジュアルエディターが細部を仕上げます。 Exit を選択するとパネルを閉じます。
Design パネルは左側に開きます。何かを選択するまでは、ビジュアルエディターは要素を選ぶよう促します。
始める前に
Design を開く前に、次のことを確認してください。
- プロジェクトに ビルド完了済み の状態があること。Design は App ビューアーから開きますが、これはエージェントがタスクを完了した後にのみ表示されます。
- 変更は 公開するまでライブにならない ことを理解していること。更新版を公開するまでは、公開 URL に影響はありません。
- テーマが適用されるのは共有スタイルだけ であることを理解していること。固定値で作られた要素は、テーマ変更後も以前の見た目を保ちます。下の テーマの見た目が正しくない場合 を参照してください。
Theme でグローバルスタイルを設定する
テーマは、プロジェクトのデザインシステムです。これは、1 つの要素の設定ではなく、アプリ全体に適用されるグローバル変数（パレット、タイポグラフィ、間隔）を定義します。
Theme は、構築を始める前の準備段階で使うのが最適です。早い段階で 1 つ適用しておけば、エージェントが生成するものは最初からそれに従います。
テーマを選ぶ
Theme タブには Search Themes フィールドがあり、テーマはセクションごとに分かれています。
- Current Theme — 現在プロジェクトで使われているテーマです。何も適用していない場合は No theme applied yet と表示され、その横の + ボタンで新しいテーマを作成できます。
- Default Theme — デザイナーが厳選した 14 個のプリセットです。それぞれ、適用されたページのプレビュー、名前、パレットを示すスウォッチの列で表示されます。これらは削除できません。
- My Theme — 自分で作成またはカスタマイズしたテーマです。名前の変更と削除ができます。
すべてのテーマは、適用されたページのプレビュー、名前、パレットを示すスウォッチの列とともに表示されるため、適用前に方向性を判断できます。
Theme タブ。上部に適用中のテーマ、その下に保存済みのテーマが表示されています。
適用するには、次の手順に従います。
- 使いたいテーマを選択します。
- Atoms が "Do you want to apply theme name?" と確認します。
- 確認するには Apply を、戻るには Cancel を選択します。
- プレビューを確認します。
期待される結果: プレビューが選択したテーマに更新され、そのテーマが Current Theme の下に表示されます。
注: ビジュアルエディターに未保存の変更がある場合、Atoms は Unsaved Changes を表示し、新しいテーマを適用する前に保存または破棄するよう求めます。
適用済みテーマを更新する
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 のテーマシステム上に構築されていないことを意味します。この場合はビジュアルエディターを使ってください。要素ごとにすべて実現できます。
重要: 可能であれば早い段階でテーマを選んでください。テーマがすでに適用された状態でエージェントが構築すると、最初からその共有スタイルを使うため、後からテーマ変更しても届かない固定値の要素が少なくなります。
ビジュアルエディターで個別の要素を編集する
プレビュー内の要素を選択して編集します。複数を同時に操作するには、Windows では Ctrl を押しながらクリックし、Mac では Cmd を押しながらクリックします。
重要: 以下で説明するプロパティコントロールは、 一度に 1 つの要素 に対して動作します。複数の要素を選択している場合は、代わりにチャットで希望する変更を説明してください。詳しくは クリックせずに変更内容を説明する を参照してください。
選択範囲の上には、要素名とサイズを示すバッジが表示されます。テキストならフォントサイズ、コンテナなら寸法が表示されるため、コンテナではなく意図した要素を選べているか確認できます。
その後、 ビジュアルエディター タブに、その要素で利用可能なプロパティがセクションごとに表示されます。
- Layout — margin と padding。
- Appearance — 背景色、不透明度、角の半径。Radius は None、Small、Medium、Large、XL、2XL、3XL、Full から選べます。
- Content — 要素のテキスト。
- Style — フォントファミリー、太さ、サイズ、テキスト揃え、装飾。
- Class — 要素に適用されているスタイルクラス。デフォルトでは折りたたまれています。
表示されるセクションは、選択したものによって異なります。テキスト要素では Content と Style が表示され、コンテナでは Layout、Appearance、Class のみが表示されることがあります。
また、選択範囲の上にはフローティングツールバーも表示され、よく使うコントロール（テキスト用のフォント、太さ、配置、色）に加え、削除コントロールと、後述するプロンプト欄が使えます。
変更は行うたびにプレビューに反映されます。取り消したい場合は、プレビュー下部の Discard を使ってください。
変更を保存する
編集内容は保存するまで保持されません。変更を加えると、プレビュー下部に Discard と Save が表示されます。
- Save は変更を保存します。
- Discard は変更を破棄し、要素を元の状態に戻します。
期待される結果: 保存するとボタンが消え、変更がプロジェクトの一部になります。
注: 未保存の作業がある状態で Design を離れる、別のテーマを適用する、または 選択してチャット を使おうとすると、Atoms は Unsaved Changes を表示し、続行前に保存または破棄を求めます。
保存すると変更はプロジェクトに保持されます。ただし、ライブサイトには反映されません。詳しくは 変更を公開する を参照してください。
要素を選択すると、ビジュアルエディターにそのプロパティが表示されます。選択範囲の上にあるフローティングツールバーでは、変更内容を説明するモードと直接編集するモードを切り替えられます。
ヒント:
- ビジュアルエディターは見た目の変更に使い、新しいページ、新機能、バックエンドロジックのような構造的な変更にはチャットを使ってください。
- カードやボタンの列全体に同じ変更を加える場合は、Ctrl-クリック または Cmd-クリック ですべて選択し、チャットで一度だけ変更内容を説明してください。各要素をプロパティコントロールで個別に編集すると、同じことを繰り返すことになります。
Library で画像を置き換える
Library は、選択した要素に画像を適用します。まず、画像を入れたい場所を選んでください。
- プレビューで変更したい 要素を選択 します。選択するまでは、Library に Select an element to start visual editing と表示されます。
- Library タブを開き、ソースとして Image、Generate、または Upload を選びます。
- 画像を適用 します。方法は画像の出所によって異なります。組み込み画像の場合は、その上にカーソルを合わせて Use asset を選択します。生成またはアップロードした画像の場合は、完成したサムネイルを選択します。
- プレビューを確認 します。画像はすぐに選択中の要素へ適用されます。
- プレビュー下部で Save を選択するか、元に戻すには Discard を選択します。
期待される結果: 選択した要素に新しい画像が適用され、保存すると Save と Discard のボタンが消えます。
Library タブ。画像カテゴリと Popular Images が表示されています。
画像の取得元
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 が表示されるのは組み込み画像のみです。生成またはアップロードした画像は、代わりにサムネイルを選択して適用します。
クリックせずに変更内容を説明する
クリック操作より説明したほうが簡単な変更は、代わりにエージェントへ依頼できます。方法は 2 つあり、どちらも現在選択している対象に対して動作します。
- 選択範囲上のフローティングツールバー。 選択した要素の上に小さなツールバーが表示されます。2 つのアイコンで、変更内容を説明するモードとプロパティを直接編集するモードを切り替えられます。 Ask the Atoms to change… に入力して送信してください。
- Design パネル下のチャット入力欄。 要素が選択されていると、入力欄には Design ラベルと Ask the Atoms team to modify the selected element… というプロンプトが表示されます。これにより、エージェントはプロジェクト全体ではなく、その要素に対して指示を適用します。
フローティングツールバーは選択範囲の上に表示されます。左側のチップには、指示がどの要素に適用されるかが示されます。
手順ではなく、結果を説明してください:
- "これをもっと落ち着いた感じにして。余白を増やして、見出しを小さくして。"
- "このボタンのスタイルを料金ページに合わせて。"
"もっと良く見せて" のような曖昧な指示は、予測しにくい結果になります。
注: ビジュアルエディターでプロパティをクリックすると、すぐに変更されます。一方、プロンプトを送信すると、エージェントが作業を行うため時間がかかります。単純な色や間隔の変更なら、プロパティを直接編集してください。
変更をプレビューする
プレビュー上部のツールバーを使います。
- Device view — 画面サイズを切り替えてレスポンシブ表示を確認します。デスクトップでは問題ないテーマやタイポグラフィの変更でも、モバイルでは崩れることがあるため、公開前に必ずモバイルを確認してください。
- Page selector — アプリ内のページを切り替えます。
- Refresh — プレビューが古く見える場合に再読み込みします。
- Open in a new tab — 別のブラウザタブでアプリを全幅表示します。
- Console — 何かおかしいときにログパネルを開きます。
期待される結果: 変更内容が、対応予定のすべてのページとすべてのデバイス幅で確認できます。
プレビューの問題から復旧する
プレビューが古く見える、読み込みが終わらない、または赤いエラーが表示される場合、問題は Design ではなくプレビュー側にあります。対処手順については Build and preview troubleshooting を参照してください。 Refresh、Console パネル、Resolve、そして継続するエラーの報告方法が説明されています。
Design に特有の点が 1 つあります。編集内容が消えたように見える場合は、保存したかどうかを確認してください。未保存の変更は Design を離れると破棄されます。詳しくは 変更を保存する を参照してください。
変更を公開する
Design での変更は、公開するまで作業中のプロジェクト内に留まります。右上の Publish を選択するか、すでにプロジェクトが公開済みの場合は Update を選択してください。
注: プロジェクトが Always Latest ではなく Specify Version を使用している場合、ライブサイトは選択したバージョンに固定されたままとなり、新しいバージョンを公開するまでデザイン変更は公開サイトに反映されません。
ビルド中にエージェントが報告するエラーについては、問題の報告 を参照してください。