Skip to main content
Base44 でのデザインの中心は AI です。自然言語で望むものを説明すると、AI がコード、スタイル、コンポーネントを更新します。Edit モードでは画面上に見えるものを調整でき、AI Controls では境界を設定できます。このページでは、そのまま使えるプロンプトと例を交えて、それぞれのワークフローを紹介します。
The app editor chat making a design change to an app

AI でアプリをデザインする

Theme パネル、フォント、アプリ内のグローバルスタイリングについては、アプリのデザインをカスタマイズするを参照してください。

​
デザインの仕組み

デザインツールもデザイン経験も必要ありません。アプリのデザインはコードの一部であり、AI がそのコードを変更します。「ボタンをもっと丸くして」から「このページ全体を再デザインして」まで、あらゆるデザイン変更は自然な言葉によるリクエストです。 デザイン変更には 3 つの方法があり、適切な方法を選ぶことで時間を節約できます: フル再デザインに適した順序:
  1. まず全体の外観を決めます。Theme パネルで色とフォントを設定します。
  2. AI にページ単位の変更を、1 ページずつ依頼します。
  3. Edit モードで個々の要素を仕上げます。
永続的な変更はありません。任意のプロンプトで Revert をクリックしてその変更を取り消したり、バージョン履歴からアプリの以前のバージョンを復元したりできるため、いつでも安全に実験できます。

​
チャットでデザインする

AI チャットは、グローバルな変更や、アプリの多くの部分に影響するデザイン上の意思決定に最適です。ペルソナとブリーフを一度定義し、それを土台に進められます:
デザイン用語も必要ありません。望む雰囲気を説明したり、スタイルが好きなプロダクトの名前を挙げたり、気に入ったデザインのスクリーンショットをアップロードして AI にそのスタイルに合わせるよう依頼したりできます:
役立つパターン:
  • 変更を依頼する前に、批評を依頼します。
  • Discuss モードで計画を依頼して承認し、その後 AI に実装を依頼します。
  • デザインの範囲を常に明確にします。アプリ全体か、1 ページか、1 要素かを伝えます。
例:
確認した後:

​
デザインオプションを選ぶ

セクションや要素のデザインまたはレイアウトの変更を AI に依頼すると、すぐに変更を適用する代わりに、選択できるビジュアルオプションが提示されることがあります。各オプションにはプレビューが表示されるため、確定する前に仕上がりを確認できます。 オプションの Expand アイコンをクリックすると、フルモードで表示して、選択する前に磨き上げることもできます。
Design options in the chat, with the Expand icon shown on a mockup

AI デザインオプションから選ぶ

背景を明るくするなど、絞り込んだ変更を指定してその部分だけを調整することも、まったく別の方向性を依頼してそのオプションを置き換えることもできます。仕上がりに満足したら、Apply をクリックします。
Expanded design option showing a mockup preview with a change request typed below it

展開ビューでデザインオプションを磨き上げる

​
デザインの方向性を探る

確定する前に、AI チャットでさまざまな方向性を探れます。現在のデザインを説明する必要はありません。AI がページのスクリーンショットを撮り、実際にあるものを確認します。 批評ループ:
別の方向性:
オプションを選んだら、同様のページにその方向性を適用するよう AI に依頼できます。

​
Edit モードを使う

Edit モードは、すべてを書き直さずに、見えているものを調整したいときに最適です。
Visualedittoolbar

Edit モードのツールバー

チャットで Edit をクリックし、変更したい要素を選択します。次のことができます:
  • セクションを選択し、色、余白、レイアウトを視覚的に調整する。
  • 1 つのコンポーネントインスタンスだけの再スタイルを AI に依頼する。
  • Delete アイコン を使用して、不要になった要素を削除する。
  • パターンをアプリの他の部分へ展開する前の、安全なサンドボックスとして使う。
Edit ツールバーの Edit Element をクリックして、AI に変更を依頼します。例:

​
AI Controls を使う

チャットの AI Controls を使用して、デザインを導き、保護します。 次のことができます:
  • すべてのプロンプトに適用されるデザインガイドラインを設定する。
  • 特定のファイルやページを凍結して、AI が変更しないようにする。
  • ミニマル、大胆、遊び心などのトーンを確立する。
ガイドラインの例:
プロンプトでは常に範囲を明示してください。同じ変更でも、アプリ全体、1 ページ、単一の要素のいずれにも適用でき、AI は指示に従います:
他の場所で実験しながら、満足している領域を保護するには:
  • AI Controls を使用して特定のファイルやページを凍結し、AI が変更しないようにします。
  • 個々のプロンプトの Revert オプションを使用して、単一の変更を取り消します。
  • バージョン履歴を使用して、以前の状態にロールバックします。

​
よくある質問

AI でのデザインについて詳しくは、以下の質問をクリックしてください。
はい。デザインプロンプトは AI チャットメッセージであるため、チャットでの他のリクエストと同じようにメッセージクレジットを消費します。
Edit モードは、一度に 1 つの要素またはセクションをスタイリングします。Theme パネルは、アプリ全体の色とフォントを一度に変更します。Theme パネルの詳細については、アプリのデザインをカスタマイズするを参照してください。
このページは AI によって翻訳されました。最も正確で最新の情報については、英語版 を参照してください。