デザインとプレビュー
アプリの見た目を調整し、公開する前に結果をプレビューします。
アプリの見た目を調整し、公開する前に結果をプレビューします。
Design はライブプレビューの横に開き、コードを書かずにプロジェクトの見た目を変更できます。
このガイドでは、Theme でグローバルスタイルを設定する方法、ビジュアルエディターで個別の要素を編集する方法、Library から画像を置き換える方法、自然な言葉で変更内容を説明する方法、そして公開前に各デバイスで仕上がりを確認する方法を説明します。
Design の仕組み
AI エージェントがタスクを完了すると、ページ上部に App ビューアー が表示されます。Design を選択すると、画面左側にデザインパネルが開き、その横にライブプレビューが表示されます。ここには 3 つのタブがあります。
- Theme は、アプリ全体のグローバルルール（色、フォント、エフェクト）を設定します。構築前に使うのが最適です。
- ビジュアルエディター は、選択した要素を調整します。どのプロジェクトでも、いつでも使えます。
- Library は、画像を置き換えたり、新しい画像を生成したりします。
Theme がルールを設定し、ビジュアルエディターが細部を仕上げます。Exit を選択するとパネルを閉じます。
Design パネルは左側に開きます。何かを選択するまでは、ビジュアルエディターが要素を選ぶよう促します。
始める前に
Design を開く前に、次のことを確認してください。
- プロジェクトに ビルド完了済みの状態 があること。Design は App ビューアーから開きますが、これはエージェントがタスクを完了した後にのみ表示されます。
- 変更は公開するまでライブには反映されないことを理解していること。更新版を公開するまでは、公開 URL に影響はありません。
- theme が適用されるのは共有スタイルのみであることを理解していること。固定値で作られた要素は、theme を変更しても以前の見た目のままです。下の If a theme does not look right を参照してください。
Theme でグローバルスタイルを設定する
theme はプロジェクトのデザインシステムです。1 つの要素に対する設定ではなく、アプリ全体に適用されるグローバル変数（パレット、タイポグラフィ、間隔）を定義します。
Theme は、構築を始める前の準備段階で使うのが最適です。早い段階で適用しておけば、エージェントが生成するものは最初からそれに従います。
theme を選ぶ
Theme タブには Search Themes フィールドがあり、theme は次のセクションに分かれています。
- Current Theme — 現在プロジェクトで使われているものです。何も適用していない場合は No theme applied yet と表示され、その横の + ボタンで新しい theme を作成できます。
- Default Theme — デザイナーが厳選した 14 個のプリセットです。それぞれ、その theme で作られたページのプレビュー、名前、パレットを示すスウォッチの列で表示されます。これらは削除できません。
- My Theme — 自分で作成またはカスタマイズした theme です。名前の変更と削除ができます。
すべての theme は、その theme で作られたページのプレビュー、名前、パレットを示すスウォッチの列とともに表示されるため、適用前に方向性を判断できます。
Theme タブ。上部に適用中の theme、その下に保存済みの theme が表示されています。
適用するには、次の手順に従います。
- 使いたい theme を選択します。
- Atoms が "Do you want to apply theme name?" と確認します。
- 確認するには Apply、戻るには Cancel を選択します。
- プレビューを確認します。
期待される結果: プレビューが選択した theme に更新され、その theme が Current Theme の下に表示されます。
注: ビジュアルエディターに未保存の変更がある場合、Atoms は Unsaved Changes を表示し、新しい theme を適用する前に保存するか破棄するかを確認します。
適用済みの theme を更新する
Theme タブにドットが表示されている場合、適用中の theme の新しいバージョンが利用可能です。
更新するには、現在の theme で Update を選択し、Do you want to re-apply theme name? を確認します。すると、プロジェクトは新しいバージョンを使用します。
更新は必須ではありません。そのままにしておけば、プロジェクトは適用済みのバージョンを使い続けます。
注: アプリの見た目が選択した theme と異なる場合、個別の要素がビジュアルエディターで上書きされている可能性があります。これらの上書きは特定のコンテンツを対象としており、theme を変更しても残ります。
Theme Manager で theme を作成または編集する
Current Theme の横にある + を選択すると、ゼロから作成できます。既存の theme を開いて変更することもできます。どちらの場合も Theme Manager が開き、ライブプレビューを見ながら theme を細かく調整できます。
設定は 3 つのタブに分かれています。
- Color — アプリで使う色の役割です。用途ごとに Base Colors、Card、Popover、Primary、Secondary などに分かれています。各役割には独自の値があるため、Primary を変更すると、それを使うすべての要素に反映されます。
- Fonts — Serif、Sans-serif、Mono の書体です。
- Effects — 角の Radius と、色、不透明度、ぼかし、広がり、オフセットで調整できる Shadow です。
横のプレビューは実際のコンポーネント（サインインフォーム、ボタン、入力欄、本文テキスト、等幅テキスト）で構成されているため、推測ではなく変更結果をすぐに判断できます。下にあるライト / ダーク切り替えを使って両方を確認してください。ライト背景でうまく見えるパレットでも、ダーク背景ではコントラストが不足することがあります。
プレビューの下には、変更をたどるための Undo と Redo、そして theme を開始時点の状態に戻す Reset もあります。
Theme Manager。値を変更するとプレビューが更新され、その下のコントロールでは undo、redo、export、import、reset を行えます。
theme を保存する
- Save を選択します。
- Theme Name を入力するか、提案された名前をそのまま使います。
- 確認のために Save を選択します。
期待される結果: theme が Theme タブの My Theme に表示され、パレットがスウォッチで示されます。適用方法は他の theme と同じです。
注: 編集内容は保存するまで保持されません。未保存の変更がある状態で別の theme を適用しようとすると、Atoms が処理を止め、保存するか破棄するかを選べるようにします。
プロジェクト間で theme を再利用する
Theme Manager にはプレビューの下に Export と Import があります。theme をファイルにエクスポートし、別のプロジェクトにインポートすれば、同じデザインの方向性を再利用できます。チームメイトに渡して、その人のプロジェクトを自分のものと揃えることもできます。
theme の見た目が正しくない場合
theme の適用は互換性チェックではないため、通常は失敗しません。theme はアプリの基盤となる共有スタイル値を置き換えるので、通常はピッカー内のどの theme でもどのプロジェクトにも適用できます。
その代わりに起こりうるのは、theme の適用自体は成功しても、すべてには反映されないケースです。この場合エラーメッセージは表示されず、単に見た目がおかしくなります。
アプリの一部が以前の見た目のままになる。 これは最もよくある問題です。共有スタイルではなく、その要素に直接固定値、特定の色、特定のフォントが設定されている場合、theme の変更では反映されません。そのため以前の見た目のまま残り、周囲とちぐはぐになることがあります。ビジュアルエディターで修正するか、チャットでエージェントに固定値を theme のスタイルへ置き換えるよう依頼してください。
テキストが読みにくくなる。 ライト背景向けに設計されたレイアウトにダーク theme を適用すると、テキストのコントラストが不足することがあります。影響を受けている要素をビジュアルエディターで調整するか、既存デザインに近い theme を選んでください。
Atoms から theme を適用できないと表示される。 これはまれで、プロジェクトのインターフェースが Atoms の theming システム上に構築されていないことを意味します。その場合はビジュアルエディターを使ってください。要素ごとに調整すれば、引き続き実現できます。
重要: 可能であれば早い段階で theme を選んでください。theme がすでに適用された状態でエージェントが構築すると、最初からその共有スタイルを使うため、後から theme を変更しても反映されない固定値の要素が少なくなります。
ビジュアルエディターで個別の要素を編集する
プレビュー内の要素を選択して編集します。複数を同時に操作するには、Windows では Ctrl を押しながらクリック、Mac では Cmd を押しながらクリックします。
重要: 以下で説明するプロパティコントロールは、一度に 1 つの要素 に対して動作します。複数の要素を選択している場合は、代わりにチャットで希望する変更を説明してください。詳しくは Describe changes instead of clicking を参照してください。
選択範囲の上には、その要素名とサイズを示すバッジが表示されます。テキストならフォントサイズ、コンテナなら寸法が表示されるため、コンテナではなく意図した要素を選べているか確認できます。
その後、ビジュアルエディター タブに、その要素で利用可能なプロパティがセクションごとに表示されます。
- 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 を離れる、別の theme を適用する、または 選択してチャット を使おうとすると、Atoms は Unsaved Changes を表示し、続行前に保存または破棄するよう求めます。
保存すると変更はプロジェクトに保持されます。ただし、ライブサイトには反映されません。詳しくは Publish your changes を参照してください。
要素を選択すると、ビジュアルエディターにそのプロパティが表示されます。選択範囲の上にあるフローティングツールバーでは、変更内容を説明するモードと直接編集するモードを切り替えられます。
ヒント:
- ビジュアルエディターは見た目の変更に使い、新しいページ、新機能、バックエンドロジックのような構造的な変更にはチャットを使ってください。
- カードやボタンの列全体に同じ変更を加えるには、Ctrl-click または Cmd-click ですべて選択し、チャットで一度だけ変更内容を説明してください。プロパティコントロールで 1 つずつ編集すると、同じことを繰り返す必要があります。
Library で画像を置き換える
Library は選択中の要素に画像を適用するため、まず画像を入れたい場所を選択してください。
- 変更したい要素を選択 します。選択するまでは、Library に Select an element to start visual editing と表示されます。
- Library タブを開き、Image、Generate、Upload のいずれかのソースを選びます。
- 画像を適用します。 方法は画像の出どころによって異なります。組み込み画像の場合は、ホバーして Use asset を選択します。生成またはアップロードした画像の場合は、完成したサムネイルを選択します。
- プレビューを確認します。 画像はすぐに選択中の要素へ適用されます。
- プレビュー下部の Save を選択するか、取り消すには Discard を選択します。
期待される結果: 選択した要素に新しい画像が適用され、保存すると 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 が表示されるのは組み込み画像のみです。生成またはアップロードした画像は、代わりにサムネイルを選択して適用します。
クリックの代わりに変更内容を説明する
クリックして操作するより説明したほうが簡単な変更は、エージェントに依頼できます。入力場所は 2 か所あり、どちらも現在選択している対象に対して動作します。
- 選択範囲上のフローティングツールバー。 選択した要素の上に小さなツールバーが表示されます。2 つのアイコンで、変更内容を説明するモードとプロパティを直接編集するモードを切り替えられます。Ask the Atoms to change… に入力して送信してください。
- Design パネル下のチャット入力欄。 要素が選択されていると、入力欄に Design ラベルと Ask the Atoms team to modify the selected element… というプロンプトが表示されます。これにより、エージェントはプロジェクト全体ではなく、その要素に対して指示を適用します。
フローティングツールバーは選択範囲の上に表示されます。左側のチップには、指示が適用される要素が表示されます。
操作方法ではなく、結果を説明してください:
- "Make this calmer — more whitespace, smaller heading."
- "Match this button's styling to the pricing page."
"make it look better" のような曖昧な指示では、予測しにくい結果になります。
注: ビジュアルエディターでプロパティをクリックすると、すぐに変更されます。プロンプトを送信すると、作業はエージェントが行うため、時間がかかります。単純な色や余白の変更なら、プロパティを直接編集してください。
変更をプレビューする
プレビュー上部のツールバーを使います。
- Device view — 画面サイズを切り替えてレスポンシブ表示を確認します。デスクトップで問題なく見える theme やタイポグラフィの変更でも、モバイルでは崩れることがあるため、公開前に必ずモバイルを確認してください。
- Page selector — アプリ内のページを切り替えます。
- Refresh — プレビューが古く見える場合に再読み込みします。
- Open in a new tab — 別のブラウザタブでアプリを全幅表示します。
- Console — 何かおかしいときにログパネルを開きます。
期待される結果: 変更内容が、サポートしたいすべてのページとすべてのデバイス幅で確認できます。
プレビューの問題から復旧する
プレビューが古く見える、読み込みが終わらない、または赤いエラーが表示される場合、問題は Design ではなくプレビュー側にあります。対処手順については、Build and preview troubleshooting を参照してください。Refresh、Console パネル、Resolve、そして解消しないエラーの報告方法が説明されています。
Design に固有の点が 1 つあります。編集内容が消えたように見える場合は、保存したかどうかを確認してください。未保存の変更は Design を離れると破棄されます。詳しくは Save your changes を参照してください。
変更を公開する
Design での変更は、公開するまで作業中のプロジェクト内に留まります。右上の Publish を選択するか、すでに公開中のプロジェクトなら Update を選択してください。
注: プロジェクトで Always Latest ではなく Specify Version を使っている場合、ライブサイトは選択したバージョンに固定されたままとなり、新しいバージョンを公開するまでデザイン変更は公開されません。
ビルド中にエージェントが報告するエラーについては、問題の報告 を参照してください。