> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# AI でデザインする
> AI を使ったアプリのデザイン方法を学びます。デザイナーに指示するように AI にブリーフを渡し、Edit モードで要素を調整し、AI Controls で境界を設定し、提示されるオプションを磨き上げます。
Base44 でのデザインの中心は AI です。自然言語で望むものを説明すると、AI がコード、スタイル、コンポーネントを更新します。**Edit** モードでは画面上に見えるものを調整でき、AI Controls では境界を設定できます。このページでは、そのまま使えるプロンプトと例を交えて、それぞれのワークフローを紹介します。
Theme パネル、フォント、アプリ内のグローバルスタイリングについては、[アプリのデザインをカスタマイズする](/Building-your-app/Design)を参照してください。
***
## デザインの仕組み
デザインツールもデザイン経験も必要ありません。アプリのデザインはコードの一部であり、AI がそのコードを変更します。「ボタンをもっと丸くして」から「このページ全体を再デザインして」まで、あらゆるデザイン変更は自然な言葉によるリクエストです。
デザイン変更には 3 つの方法があり、適切な方法を選ぶことで時間を節約できます:
| 変更したい内容 | 使うもの |
| ------------------------------- | ------------- |
| アプリ全体の色やフォント | **Theme** パネル |
| 指し示せる 1 つの要素やセクション | **Edit** モード |
| 新しいレイアウト、再デザイン、雰囲気の変更など、より大きなもの | AI チャット |
**フル再デザインに適した順序:**
1. まず全体の外観を決めます。[Theme パネル](/Building-your-app/Design#global-changes)で色とフォントを設定します。
2. AI にページ単位の変更を、1 ページずつ依頼します。
3. **Edit** モードで個々の要素を仕上げます。
永続的な変更はありません。任意のプロンプトで **Revert** をクリックしてその変更を取り消したり、バージョン履歴からアプリの以前のバージョンを復元したりできるため、いつでも安全に実験できます。
***
## チャットでデザインする
AI チャットは、グローバルな変更や、アプリの多くの部分に影響するデザイン上の意思決定に最適です。ペルソナとブリーフを一度定義し、それを土台に進められます:
```text theme={null}
あなたはこのアプリのプロダクトデザイナーです。
デザインブリーフ:
- 目的: コンテンツチームが記事の企画、執筆、公開をより速く行えるようにする。
- 対象者: 日中にラップトップで作業する多忙なコンテンツリードとライター。
- 雰囲気: 落ち着いた、集中できる、モダンで信頼感のあるもの。
このブリーフを、すべてのデザイン提案と意思決定の基礎として使用してください。
```
デザイン用語も必要ありません。望む雰囲気を説明したり、スタイルが好きなプロダクトの名前を挙げたり、気に入ったデザインのスクリーンショットをアップロードして AI にそのスタイルに合わせるよう依頼したりできます:
```text theme={null}
このページをもっと落ち着いた、プレミアムな印象にしてください。全体のスタイルの参考として、添付のスクリーンショットを使用してください。
```
役立つパターン:
* 変更を依頼する前に、批評を依頼します。
* Discuss モードで計画を依頼して承認し、その後 AI に実装を依頼します。
* デザインの範囲を常に明確にします。アプリ全体か、1 ページか、1 要素かを伝えます。
例:
```text theme={null}
このダッシュボードのみのデザインを批評してください。
レイアウト、階層、色、タイポグラフィ、余白に焦点を当ててください。
その後、小さな変更の短い計画を提案してください。
何かを適用する前に、私の承認を待ってください。
```
確認した後:
```text theme={null}
このダッシュボードについて提案した計画を適用してください。
変更は小さなグループに分けて行い、進めながら各グループを簡潔に説明してください。
```
***
## デザインオプションを選ぶ
セクションや要素のデザインまたはレイアウトの変更を AI に依頼すると、すぐに変更を適用する代わりに、選択できるビジュアルオプションが提示されることがあります。各オプションにはプレビューが表示されるため、確定する前に仕上がりを確認できます。
オプションの **Expand** アイコンをクリックすると、フルモードで表示して、選択する前に磨き上げることもできます。
背景を明るくするなど、絞り込んだ変更を指定してその部分だけを調整することも、まったく別の方向性を依頼してそのオプションを置き換えることもできます。仕上がりに満足したら、**Apply** をクリックします。
***
## デザインの方向性を探る
確定する前に、AI チャットでさまざまな方向性を探れます。現在のデザインを説明する必要はありません。AI がページのスクリーンショットを撮り、実際にあるものを確認します。
批評ループ:
```text theme={null}
シニアプロダクトデザイナーとして振る舞ってください。
このページをレビューし、具体的なビジュアル上の問題を 3 つ挙げてください。
各問題について、それを修正する Base44 プロンプトを書いてください。
まだ変更は加えないでください。
```
別の方向性:
```text theme={null}
このダッシュボードのビジュアルオプションを 2 つ作成してください:
- オプション A: 非常にミニマルで、ほぼニュートラルな色に単一のアクセントカラー
- オプション B: より表現豊かで、色彩を豊かにし、タイポグラフィをやや大きく
コンテンツとレイアウトは同じままにしてください。
各オプションを短い要約で説明し、私が選ぶまで待ってください。
```
オプションを選んだら、同様のページにその方向性を適用するよう AI に依頼できます。
***
## Edit モードを使う
**Edit** モードは、すべてを書き直さずに、見えているものを調整したいときに最適です。
チャットで **Edit** をクリックし、変更したい要素を選択します。次のことができます:
* セクションを選択し、色、余白、レイアウトを視覚的に調整する。
* 1 つのコンポーネントインスタンスだけの再スタイルを AI に依頼する。
* **Delete** アイコン を使用して、不要になった要素を削除する。
* パターンをアプリの他の部分へ展開する前の、安全なサンドボックスとして使う。
Edit ツールバーの **Edit Element** をクリックして、AI に変更を依頼します。例:
```text theme={null}
選択したこのセクションで:
- 背景をわずかに明るくする
- 見出しとコンテンツの間の縦の余白を広げる
- メインのアクションにはプライマリボタンのスタイルを、その他にはセカンダリのスタイルを使う
```
```text theme={null}
このカードのみ:
- パディングを広げる
- アイコンをタイトルの左に移動する
- アプリ内の他のカードに合う、より柔らかいシャドウを使う
```
***
## AI Controls を使う
チャットの [AI Controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) を使用して、デザインを導き、保護します。
次のことができます:
* すべてのプロンプトに適用されるデザインガイドラインを設定する。
* 特定のファイルやページを凍結して、AI が変更しないようにする。
* ミニマル、大胆、遊び心などのトーンを確立する。
ガイドラインの例:
```text theme={null}
グローバルデザインガイドライン:
- 余白をたっぷり取った、落ち着いたミニマルなビジュアルを優先する
- カードとボタンには半径 12 の角丸を使う
- 濃いグラデーションとガラスエフェクトは避ける
- アニメーションは控えめにし、モーション削減の設定を尊重する
```
プロンプトでは常に範囲を明示してください。同じ変更でも、アプリ全体、1 ページ、単一の要素のいずれにも適用でき、AI は指示に従います:
```text theme={null}
プライマリボタンのスタイルを更新し、プライマリボタンコンポーネントが使われているすべての場所に反映してください。
セカンダリボタンは変更しないでください。
```
```text theme={null}
ホームページのヒーローセクションのみを更新してください:
- 背景を柔らかいグラデーションに変更する
- 見出しのサイズを大きくする
- メインのコールトゥアクションにプライマリボタンのスタイルを使う
他のセクションやページは変更しないでください。
```
他の場所で実験しながら、満足している領域を保護するには:
* AI Controls を使用して特定のファイルやページを凍結し、AI が変更しないようにします。
* 個々のプロンプトの **Revert** オプションを使用して、単一の変更を取り消します。
* バージョン履歴を使用して、以前の状態にロールバックします。
***
## よくある質問
AI でのデザインについて詳しくは、以下の質問をクリックしてください。
はい。デザインプロンプトは AI チャットメッセージであるため、チャットでの他のリクエストと同じようにメッセージクレジットを消費します。
**Edit** モードは、一度に 1 つの要素またはセクションをスタイリングします。**Theme** パネルは、アプリ全体の色とフォントを一度に変更します。Theme パネルの詳細については、[アプリのデザインをカスタマイズする](/Building-your-app/Design)を参照してください。
このページは AI によって翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。