> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# アプリをデザインする

> Design モードを使って、画面ごとにアプリの見た目を作り上げましょう。

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const designPrompt = "Create five different designs for the game menu, where players choose between Blocks, Snake, Racer, and Pinball, and see the top scores for each.";

アプリの見た目は、機能と同じくらい重要な要素です。PixelGames はスマートフォン上の Game Boy であり、
クリーム色の筐体、オリーブグリーンの画面、ゴツゴツしたボタンこそが本質です。一般的なアプリレイアウトでは
その魅力が失われてしまいます。

<Steps>
  <Step title="Design モードに切り替える">
    ワークスペース左上のトグルで Design モードに切り替えます。

    <Frame caption="PixelGames のワークスペースで Design が選択された Design と Build のトグル。">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-1.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=8cbcacf95a04c466f273586b54c4acbb" alt="左上のトグルで Design が選択され、5つの PixelGames メニューのバリエーションが表示された Replit の Design キャンバス" data-path="images/pixelgames/mobile/design-step-1.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-1.png" />
    </Frame>
  </Step>

  <Step title="Agent に望むものを伝える">
    欲しい結果を説明すれば、あとは Agent が処理します。方向性を見つけるために、一度に複数のバージョンを依頼しましょう。

    <AiPrompt>
      {designPrompt}
    </AiPrompt>
  </Step>

  <Step title="バージョンを比較する">
    Agent はキャンバス上にそれらを並べて表示するため、1つずつではなく画面全体として判断できます。
  </Step>

  <Step title="1つを選んで次の方向性を確認する">
    デザインを選択すると、その横に表示される提案を使って他のバリエーションを試せます。

    <Frame caption="選択されたデザインと、その横に表示された次のステップの提案。">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-2.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dba067f0c15dde736af003a7fd768185" alt="統合、比較、リミックス、再構築という次のステップの提案とともに選択された PixelGames メニューデザイン" data-path="images/pixelgames/mobile/design-step-2.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-2.png" />
    </Frame>
  </Step>

  <Step title="望むバージョンをビルドする">
    バージョンが決まったら、その上のツールバーにある送信アイコンをクリックします。Agent はそのデザインを
    キャンバスから取り出し、アプリ内の実際の画面としてビルドします。

    <Frame caption="送信アイコンをクリックすると、選択したデザインが実際の画面になります。">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-3.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=9006dbe90f73b24de3db94d75cadcd84" alt="キャンバス上で選択された PixelGames メニューデザインと、ツールバーでハイライトされた送信アイコン" data-path="images/pixelgames/mobile/design-step-3.png" width="1284" height="846" data-path="images/pixelgames/mobile/design-step-3.png" />
    </Frame>
  </Step>
</Steps>

## トラブルシューティング

* **変更が想定より大きく及んでしまった:** Agent に元に戻すよう依頼し、1つの画面や1つの要素ずつ、より
  小さな変更を説明してください。
* **プレビューでは正しく見えるが、実機では違って見える:** デバイス名と実際に見えたものを伝えてください。
  多くの場合、セーフエリアや画面サイズの扱いが原因です。
* **変更が何度も元に戻ってしまう:** 同じ値が複数の場所で設定されている可能性があります。その画面の
  スタイリングが実際にどこにあるか Agent に尋ねてください。

## 次のステップ

<CardGroup cols={2}>
  <Card title="アプリアイコンを生成する" icon="image" href="/ja/build/mobile-app-icon">
    プレイヤーがホーム画面でタップするアイコンをデザインしましょう。
  </Card>

  <Card title="iOS ネイティブコンポーネントを使う" icon="apple" href="/ja/build/mobile-native-components">
    カスタムの見た目とネイティブのアラートやメニューを組み合わせましょう。
  </Card>
</CardGroup>

## 関連

* [App Store のスクリーンショットを生成する](/ja/build/mobile-store-screenshots)
* [スマートフォンでプレビューとテストを行う](/build/mobile-preview-testing)