> ## 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.
# アプリのデザイン
> スタイリング、色、フォント、ビジュアルアセット、高度なカスタマイズコントロール用のツールを使用して、Base44 でアプリの見た目と雰囲気を整えます。
Base44 では、アプリをデザインするためのいくつかの方法が提供されています。グローバルな色とフォントのための **Theme** パネル、要素ごとのスタイリングのための **Edit** モード、より広範な変更のための AI チャットです。このページでは、直接使用できるプロンプトと例を交えて、各アプローチを説明します。
***
## デザインでの AI との連携
AI は Base44 でのデザインの中心にあります。必要なものを自然言語で説明するだけで、AI がコード、スタイル、コンポーネントを更新します。**Edit** モードでは、画面に表示されているものを微調整でき、AI コントロールでは境界を設定できます。
AI チャットは、アプリの多くの部分に影響するグローバルな変更やデザインの決定に最適です。一度ペルソナと概要を定義し、それを基に構築できます:
```text theme={null}
あなたはこのアプリのプロダクトデザイナーです。
デザイン概要:
- 目的: コンテンツチームが記事をより早く計画、執筆、出荷できるようにする。
- 対象: 平日に PC を使う多忙なコンテンツリードとライター。
- 雰囲気: 落ち着いた、集中した、モダンで信頼できる。
この概要をすべてのデザインの提案と決定の基礎として使用してください。
```
役立つパターン:
* 変更を求める前にクリティークを求めます。
* Discuss モードで計画を求め、承認してから AI に実装を依頼します。
* デザインの範囲(アプリ全体、1 ページ、または 1 要素)を常に明確にします。
例:
```text theme={null}
このダッシュボードのデザインのみをクリティークしてください。
レイアウト、階層、色、タイポグラフィ、間隔に焦点を当てます。
その後、小さな変更の短い計画を提案してください。
何かを適用する前に私の承認を待ってください。
```
レビュー後:
```text theme={null}
このダッシュボードについて提案した計画を適用してください。
小さなグループで変更を加え、進めながら各グループを簡潔に説明してください。
```
**Edit** モードは、すべてを書き直さずに表示されているものを調整したいときに最適です。
チャットの **Edit** をクリックして、変更したい要素を選択します。次のことができます:
* セクションを選択して、色、間隔、レイアウトを視覚的に調整します。
* AI に 1 つのコンポーネントインスタンスのみのリスタイルを依頼します。
* **Delete** アイコン を使用して、不要な要素を削除します。
* パターンをアプリの残りに展開する前の安全なサンドボックスとして使用します。
Edit ツールバーの **Edit Element** をクリックして、AI に変更を依頼します。例:
```text theme={null}
この選択されたセクションで:
- 背景を少し明るくする
- 見出しとコンテンツの間の垂直方向の間隔を増やす
- メインアクションにはプライマリボタンスタイル、その他にはセカンダリスタイルを使用する
```
```text theme={null}
このカードのみ:
- パディングを増やす
- アイコンをタイトルの左側に移動する
- アプリ内の他のカードと一致するように、より柔らかいシャドウを使用する
```
チャットの [AI コントロール](/Building-your-app/AI-chat-modes#setting-ai-controls) を使用して、デザインをガイドして保護します。
次のことができます:
* すべてのプロンプトに適用されるデザインガイドラインを設定します。
* 特定のファイルやページを凍結して、AI が変更しないようにします。
* ミニマル、ボールド、プレイフルなどのトーンを確立します。
ガイドラインの例:
```text theme={null}
グローバルデザインガイドライン:
- 余白を多く取った、落ち着いたミニマルなビジュアルを好む
- カードとボタンには半径 12 の角丸を使用する
- 重いグラデーションとガラス効果は避ける
- アニメーションは控えめに保ち、reduced motion の設定を尊重する
```
プロンプトでは常に範囲を明示してください。同じ変更がアプリ全体、1 ページ、または 1 つの要素に適用される可能性があり、AI はあなたのリードに従います:
```text theme={null}
プライマリボタンスタイルを更新し、プライマリボタンコンポーネントが使用されているすべての場所に伝播します。
セカンダリボタンは変更しないでください。
```
```text theme={null}
ホームページのヒーローセクションのみを更新:
- 背景をソフトなグラデーションに変更する
- 見出しのサイズを大きくする
- メインのコールトゥアクションにプライマリボタンスタイルを使用する
他のセクションやページは変更しないでください。
```
満足している領域を保護しながら、他の場所で実験するには:
* AI コントロールを使用して特定のファイルやページを凍結し、AI が変更しないようにします。
* 個々のプロンプトの **Revert** オプションを使用して、1 つの変更を元に戻します。
* バージョン履歴を使用して、以前の状態にロールバックします。
AI チャットを使用して、コミットする前にさまざまな方向性を探索できます。
クリティークループ:
```text theme={null}
シニアプロダクトデザイナーとして行動してください。
このページをレビューし、3 つの具体的なビジュアルの問題を説明してください。
各問題について、それを修正する Base44 プロンプトを書いてください。
まだ変更は加えないでください。
```
代替方向:
```text theme={null}
このダッシュボードの 2 つのビジュアルオプションを作成:
- オプション A: 非常にミニマル、主にニュートラルで 1 つのアクセントカラー
- オプション B: より表現豊か、よりリッチな色と少し大きめのタイポグラフィ
コンテンツとレイアウトは同じにしてください。
短いサマリーで各オプションを説明し、私が選ぶのを待ってください。
```
オプションを選んだら、AI にその方向性を同様のページに適用するように依頼できます。
セクションや要素のデザインやレイアウトを変更するように AI に依頼すると、すぐに変更を適用するのではなく、選択するためのビジュアルオプションが表示されることがあります。各オプションにはプレビューが表示されるので、コミットする前にどのように見えるかを確認できます。
希望するオプションを選択して **Submit** をクリックするか、**Skip** をクリックして AI に決定させます。
***
## グローバルな変更
**Theme** パネルでは、1 つの場所からアプリ全体の色とフォントを設定できます。あなたが行った変更はすぐにすべての場所に適用されるので、要素を 1 つずつ更新する必要はありません。
パネルの上部には現在のパレットのプレビューが表示され、その後にカスタマイズできる背景、前景、プライマリ、セカンダリ、カード、ポップオーバーなどの色の役割のリストが続きます。パネルの上部にある **Fonts** をクリックして、アプリのフォントを代わりに設定します。
### テーマカラー
任意のカラーの役割をクリックして、アプリ全体で更新します。
**テーマの色を変更するには:**
1. アプリエディタの上部にある **Theme** アイコン をクリックします。
2. リスト内の任意のカラーの役割をクリックしてカラーピッカーを開きます。パネルの上部のバーは現在のパレットのプレビューであり、クリックできません。
3. ピッカーをドラッグするか、16 進値を入力するか、スポイトを使用して画面上の任意の色をサンプリングするか、ピッカー下部のドロップダウンを使用してパレットから選択することで色を選びます。
4. **Apply** をクリックしてアプリで変更をプレビューします。
5. **Theme** パネルの **Save & Apply** をクリックしてすべての場所に適用します。
プライマリカラーと背景から始めて、他の選択肢をそれらにガイドさせます。前景と背景の色のコントラストを高く保つと、すべてのコンポーネントでテキストが読みやすくなります。
テーマカラーがアプリの現在の色と一致しない場合は、AI チャットに同期するように依頼できます。例: `アプリで使用されている色に一致するようにテーマを更新して`。
### フォント
**Theme** パネルの **Fonts** タブからアプリのフォントを設定します。アプリで使用されている各フォントにドロップダウンが表示されます。
**アプリのフォントを変更するには:**
1. アプリエディタの上部にある **Theme** アイコン をクリックします。
2. **Fonts** タブをクリックします。
3. ドロップダウンをクリックしてフォントを選択します。名前で検索するか、**Brand Fonts** および **All Fonts** を参照できます。
4. **Save & Apply** をクリックしてアプリ全体に変更を適用します。
**Fonts** タブが表示されない場合、アプリにテーマフォント変数がまだ設定されていない可能性があります。AI チャットに追加するように依頼してください: `Theme パネルからフォントを変更できるようにアプリにテーマフォント変数を追加して`。
***
## 要素の変更
**Edit** モードでは、任意の個々の要素を直接スタイル設定できます。要素を選択し、Edit ツールバーのアイコンを使用して、色、タイポグラフィ、間隔、コーナー半径、不透明度を変更したり、カスタム Tailwind クラスを追加したりできます。ツールバーで使用できるオプションは、選択する要素のタイプによって変わります。
### 色
テーマで定義された色またはカスタムカラーを使用して、任意の要素の背景色とテキストの色を設定できます。
**要素の色を変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの **Colors** アイコン をクリックします。
4. 変更したい部分(背景またはテキストなど)を選択します。
5. 色を選びます:
* **Theme:** テーマで定義されたカラーロール(背景、前景、カード、プライマリなど)から選択します。
* **Custom:** ピッカーをドラッグするか、16 進値を入力するか、スポイトを使用して画面上の任意の色をサンプリングするか、ピッカー下部のドロップダウンを使用してパレットから選択します。
6. **Apply** をクリックして変更を確認します。
画像要素の場合、ツールバーには Colors オプションの代わりに **Replace** ボタンが表示されます。**Replace** をクリックして画像を交換します。
### タイポグラフィ
テキスト要素を選択すると、Edit ツールバーにフォントファミリーとサイズのコントロールが表示されます。別の **Text Style** パネルでは、ウェイト、配置、装飾、変形にアクセスできます。
**テキストの内容を編集するには:**
1. エディタの上部にある **Edit** をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーの **T** アイコンをクリックします。
4. **Text Content** フィールドに変更を入力します。
テキストの内容が動的に生成されている場合、Text Content パネルには直接編集できない旨のメッセージが表示されます。動的テキストを変更するには AI チャットを使用してください。
**フォントを変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーのフォントファミリーのドロップダウンをクリックします。
4. **Brand Fonts** または **All Fonts** で検索または参照し、フォントをクリックして適用します。
フォントファミリーのドロップダウンはまだすべてのユーザーで利用できるわけではありません。
**フォントサイズを変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーのサイズのドロップダウンをクリックします。
4. サイズを選択します。使用可能なサイズは 12 から 128 まであります。
フォントサイズのドロップダウンはまだすべてのユーザーで利用できるわけではありません。
**テキストスタイルを変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーの **Text Style** アイコンをクリックします。
4. 変更したい設定を調整します:
* **Size:** XS、S、Base、L、XL、2XL、3XL、4XL からサイズを選択します。
* **Weight:** ウェイトを thin から bold まで設定します。
* **Decoration:** 下線または取り消し線。
* **Alignment:** 左、中央、右、または両端揃え。
* **Transform:** none、uppercase、lowercase、または capitalize。
### 間隔
任意の要素のマージンとパディングを px で設定し、各辺を個別に制御できます。
**要素の間隔を変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの **Spacing** アイコン をクリックします。
4. マージンとパディングの値を px で入力します。水平方向と垂直方向のショートハンドコントロールを使用して、両側を一度に設定します。
### コーナー半径
px で値を入力することで、任意の要素のコーナーを丸めることができます。
**要素のコーナー半径を変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの **Corners** アイコンをクリックします。
4. 値を px で入力するか、矢印を使用して調整します。
### 不透明度
任意の要素を完全に不透明にしたり、半透明にしたり、その間の任意の値にできます。
**要素の不透明度を変更するには:**
1. エディタの上部にある **Edit** をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの **Opacity** アイコンをクリックします。
4. スライダーをドラッグするか、0 (完全透明) から 100 (完全不透明) までの値を入力します。
### Tailwind クラス
他のオプションでカバーされていないスタイリングについては、任意の Tailwind CSS クラスを直接入力できます。
**要素に Tailwind クラスを追加するには:**
1. エディタの上部にある **Edit** をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの **Tailwind Classes** アイコンをクリックします。
4. 任意の Tailwind CSS クラスを入力します。例えば、`shadow-lg` は大きなシャドウを追加し、`border border-gray-200` は控えめなボーダーを追加します。
***
## デザインシステム
これらのセクションでは、AI チャットを使用して一貫したアプリ全体のデザインパターンを確立する方法を説明します。グローバルテーマと個々の要素の変更を一貫性のあるものにするためのルールレイヤーと考えてください。
### カラーシステム
色は、雰囲気を設定し、注意を導くための最も強力なツールの 1 つです。ランダムな 16 進コードではなく、役割を定義することから始めます。以下を目指します:
* 1 つのプライマリブランドカラー
* 1 つのセカンダリカラー
* ハイライトのための 1 つのアクセントカラー
* 背景、サーフェス、ボーダー用の 3 〜 5 つのニュートラルグレー
* 成功、警告、エラー状態のための明確な色
AI に最初から完全なシステムを提案して適用するように依頼できます:
```text theme={null}
このアプリのカラーシステムを作成:
- 1 つのプライマリブランドカラー
- 1 つのセカンダリカラー
- ハイライトのための 1 つのアクセントカラー
- 背景、サーフェス、ボーダー用の 4 つのニュートラルグレー
色をプライマリ、サーフェス、ボーダー、成功、警告、エラーなどの役割にマッピングしてください。
背景上のテキストがアクセシビリティのコントラストレベルを満たすようにしてください。
このシステムをアプリ全体に適用し、1 回限りの色を置き換えてください。
```
色の意味を一貫させてください。例えば、成功の色はポジティブな状態にのみ使用し、エラーの色は問題にのみ使用し、装飾には使用しません。
ブランドガイドや外部ツールからすでに 16 進コードがある場合は、それらを貼り付けて AI に役割にマッピングさせます:
```text theme={null}
このパレットを使い、各 16 進コードを役割に割り当ててください:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
どれがプライマリ、セカンダリ、アクセント、ニュートラルの役割かを定義してください。
ハードコードされた色を、これらの役割に従うトークンまたは Tailwind クラスに置き換えてください。
```
カラーパレットのスクリーンショットや画像を AI チャットに直接アップロードして、その色をアプリに適用するように依頼できます:
```text theme={null}
この画像の色を私のアプリに適用してください。
各色をプライマリ、背景、前景、アクセントなどの役割にマッピングしてください。
アプリ全体で既存の色を置き換えて一致させてください。
```
***
### タイポグラフィシステム
タイポグラフィは、アプリの読みやすさとスキャンしやすさを制御します。多くの似たようなスタイルよりも、いくつかの明確なテキストスタイルを持つ方が良いです。
次のような役割を定義します:
* ページタイトル
* セクション見出し
* 本文テキスト
* ラベルやタイムスタンプなどの小さなメタデータ
AI にこれを設定してすべてに適用するように依頼できます:
```text theme={null}
タイポグラフィシステムを設定:
- ページタイトル: 最大サイズ、太字、モダンなサンセリフ
- セクション見出し: 中サイズ、セミボールド
- 本文テキスト: 標準サイズ、レギュラーウェイト
- メタデータ: 余分な文字間隔のある小さな大文字
これらの役割をすべてのページに一貫して適用し、アドホックなフォントサイズを削除してください。
```
サイズをより直接的にターゲットにすることもできます:
```text theme={null}
タイポグラフィをより読みやすくする:
- 基本の本文テキストサイズを少し大きくする
- 段落の行の高さを増やす
- 見出しが本文テキストの少なくとも 1.4 倍のサイズになるようにする
フォントファミリーは同じに保ってください。
```
カスタムフォントを使用してレイアウト経由で適用できます。
1. 埋め込みスニペットを取得します (例: [https://fonts.google.com](https://fonts.google.com) の Google Fonts から)。
2. `Layout.js` に追加し、タイプシステムに組み込むように AI に依頼します。
プロンプト例:
```text theme={null}
Google Fonts から "Raleway" フォントをインポートしてください。
ページタイトルとセクション見出しにそれを使用してください。
段落には現在の本文フォントを保ってください。
このルールに従ってアプリ全体のスタイルを更新してください。
```
フォントファミリーは 1 つか 2 つに制限してみてください。フォントが多すぎると、インターフェースが整理されていない感じになり、メンテナンスが難しくなります。
***
### 間隔と密度
間隔と密度は、アプリが快適に使用できるかどうかを制御します。シンプルな間隔スケールにより、ランダムなギャップや窮屈なセクションを防止できます。
4、8、12、16、24 などのスケールを定義し、AI に適用するように依頼できます:
```text theme={null}
このスケールを使用して間隔を正規化: 4、8、12、16、24。
- 主要なセクション間にはより大きな値を使用する
- カードとパネル内には中程度の値を使用する
- ラベルと入力の間には小さな値を使用する
窮屈に感じる領域を減らし、ランダムな間隔値を避けてください。
```
ページが混雑していたり空すぎたりする場合は、AI チャットに診断して修正させることができます:
```text theme={null}
このページを見て間隔を調整:
- 各セクションの上下のパディングを増やす
- カードの行間のギャップを増やす
- 長い段落に快適な行長があるようにする
既存の色とコンテンツは保ってください。
```
***
### コア要素と状態
色、タイプ、間隔が整ったら、どこでも使用するビルディングブロックを標準化します。
以下に焦点を当てます:
* ボタン (プライマリ、セカンダリ、テキストのみ)
* カードとパネル
* ナビゲーションバーとサイドバー
* フォームフィールド (デフォルト、フォーカス、エラー、無効)
* 使用する場合はチップ、タグ、バッジ
AI にパターンを検出して統一するように依頼できます:
```text theme={null}
コア要素を標準化:
- ボタン: プライマリ、セカンダリ、テキストのみのスタイルを定義する
- カード: コーナー半径、パディング、シャドウ、ヘッダー/ボディレイアウトを定義する
- ナビゲーション: アクティブ、ホバー、無効状態を定義する
- フォームフィールド: デフォルト、フォーカス、エラー、無効状態を定義する
これらのパターンをアプリ全体に適用し、不一致のスタイルを置き換えてください。
```
これにより、新しいページが同じ製品に属するように見える再利用可能な言語が得られます。
***
## 画像とビジュアルアセット
画像、アイコン、動画などのビジュアルアセットは、アプリの感じ方を形作ります。AI は、それらを作成、配置、スタイリングし、データやコードに接続するのに役立ちます。
画像や動画を AI チャットにアップロードして、アプリのスタイル、レイアウト、コンテンツのためのビジュアルコンテキストを与えます。
AI チャットに、ページに直接ヒーロー画像を追加するように依頼できます:
```text theme={null}
現在のカラーパレットに合うフル幅のヒーロー画像をホームページに追加してください。
モダンなアナリティクスダッシュボードを示唆するプレースホルダー画像を使用してください。
```
プレースホルダー画像を置き換えるには:
1. 該当するページファイル (例: `Store.js`) をコードビューで開きます。
2. `![]()
` タグを見つけます。
3. `src` 属性を独自の画像 URL で更新します。
**Data** セクションでエンティティの画像をアップロードし、コンポーネントにバインドすることもできます。これにより、カードとリストが適切な画像を自動的に表示します。
AI チャットに、ヒーロー、製品プレビュー、チュートリアル、オンボーディング画面などのビジュアルセクションのための短い動画を生成するように依頼します。
プロンプト例:
```text theme={null}
フィットネスアプリの簡単な朝のワークアウトルーチンを示す短いオンボーディング動画を作成してください。それを Get Started ボタンの上のウェルカム画面に追加してください。
```
AI チャットからの動画の生成には [Starter プラン](/Account-and-billing/Billing-and-plans) 以上が必要です。生成された各動画は、プロンプトのメッセージクレジットと 1 つの追加メッセージクレジットを使用します。
ライブアプリで人々に動画を生成させることもできます。[動画の生成](/Integrations/built-in-integrations#generating-videos) について詳しく学びましょう。
参照画像を使用すると、使いたいスタイル、レイアウト、カラーパレット、ビジュアルディレクションを AI チャットに示すことで、デザインをビジュアルに導けます。
1. AI チャットで **Upload icon (+)** をクリックします。
2. インスピレーション画像またはスクリーンショットをアップロードします。
3. AI に、借りたいものと無視するものを正確に伝えます。
プロンプトのアイデア:
```text theme={null}
この参照をインスピレーションとして使用してください。
私のレイアウトとコンテンツを保ちつつ:
- ボタンの形とシャドウを一致させる
- カードのコーナー半径とボーダースタイルを一致させる
- トップヘッダーのみに同様のソフトなグラデーションを適用する
正確な色をコピーするのではなく、構造と感じだけにしてください。
```
```text theme={null}
このスクリーンショットから、以下のためのデザインルールを抽出してください:
- カラーロール
- フォントサイズとウェイト
- コーナー半径とシャドウ
- セクションとカード間の間隔
ルールを説明し、私の現在のブランドカラーを使用して同様のスタイルを適用してください。
```
Figma のようなデザインツールから直接ビジュアルスタイルをコピーし、すべての詳細を言葉で説明しようとする代わりに、Base44 にそれを適用するように依頼できます。
**Figma からコピーするには:**
1. Figma で、スタイルをコピーしたい要素を選択します。
2. **Dev mode** に切り替えて、**Code** パネルを表示します。
3. 関連する CSS 行をコピーします。例えば、グラデーション背景: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. Base44 で **Visual Edit** を開き、一致する要素を選択します。
5. スタイルを AI プロンプトに貼り付けて、Base44 に正確に何を変更するか伝えます。例えば:
```text theme={null}
この要素の背景スタイルを次のように変更してください:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
他のスタイルはすべて同じに保ってください。
```
これにより、デザインファイルからグラデーション、シャドウ、ボーダー、その他のスタイルを非常に正確に一致させることができます。
アイコンは装飾だけでなく、意味をサポートする必要があります。一貫性が鍵です。
一般的なタスク:
* 一般的なアイコンをより意味のあるものに置き換えます。
* アイコンのサイズとストロークの太さを揃えます。
* 明瞭さが重要な場合はアイコンをテキストラベルとペアにします。
Lucide などのアイコンライブラリを使用して、AI チャットに組み込むように依頼できます:
```text theme={null}
一般的なアイコンをより意味のあるものに置き換える:
- 各ナビゲーション項目とメインアクションに明確に一致するアイコンを使用する
- アイコンのサイズとストロークの太さを一貫させる
- ナビゲーション、リスト、ボタンのラベルにアイコンをきれいに揃える
```
```text theme={null}
すべてのプライマリコールトゥアクションボタンを更新:
- ラベルの左側に "sparkles" アイコンを使用する
- アイコンサイズを小さく、パディングを均等に保つ
- セカンダリまたは破壊的ボタンにはアイコンを追加しない
```
***
## レイアウトとレスポンシブ
レイアウトは、情報がどのようにグループ化され、スキャンされるかを制御します。レスポンシブにより、レイアウトはあらゆるデバイスで機能します。
1 回限りの画面ではなく、ページタイプで考えます:
* ランディングとマーケティングページ
* ダッシュボード
* リストとテーブル
* 詳細ページ
* フォームとウィザード
* 設定とプロフィールページ
AI チャットにパターンを検出して標準化するように依頼できます:
```text theme={null}
このアプリの主要なページタイプ (ランディング、ダッシュボード、リスト、詳細、フォーム、設定) を特定してください。
各タイプについて:
- 一貫したレイアウト構造を提案する
- 再利用する既存のコンポーネントを提案する
コンテンツを変更せずに、同じタイプのすべてのページにそれらのレイアウトを適用してください。
```
階層と余白は、人々が何が重要かを一目で理解するのに役立ちます。
AI に適用するように依頼できるアイデア:
```text theme={null}
このページのビジュアル階層と余白を改善:
- ページタイトルを他のテキストの上で明確に目立たせる
- コンテンツをグループ化するために一貫したセクション見出しを使用する
- 各セクションの上下のパディングを増やす
- カードの行間のギャップを増やす
新しい色やフォントの追加は避けてください。
```
余白は、ダッシュボードやテーブルなどの密なコンテンツに特に重要なので、キー要素に呼吸する余裕を与えます。
アプリはスマートフォン、タブレット、デスクトップで自然に感じる必要があります。
1 つのプロンプトでレスポンシブルールをエンコードできます:
```text theme={null}
このレイアウトをレスポンシブにする:
- スマートフォンでは、シングル垂直カラムを使用し、セクションを積み重ねる
- タブレットでは、スペースが許す場所でカードに 2 カラムを使用する
- デスクトップでは、カードに 3 または 4 カラムを使用する
画像を 4:3 のアスペクト比に保ってください。
小さい画面ではサイドバーをトップメニューに折りたたんでください。
すべてのブレークポイントで水平スクロールを避けてください。
```
Base44 エディタのデバイスプレビューを使用してこれらのルールがさまざまな画面サイズでどのように動作するかを確認し、その後フォローアッププロンプトで洗練させます。
### モバイル向けのアプリのカスタマイズ
Base44 アプリは任意のデバイスに自動的にレイアウトを調整しますが、エディタのモバイルプレビューとカスタマイズツールを使用して、アプリがモバイル上でどのように見えて動作するかを微調整できます。これにより、モバイルユーザーのために快適でシームレスな体験を作成できます。
**モバイル向けにアプリをカスタマイズするには:**
1. アプリエディタに移動します。
2. 上部の **Screen** アイコンをクリックして **Mobile** を選択します。
3. レイアウト、ナビゲーション、コンテンツを確認します。
4. 必要に応じて以下のいずれかの方法で変更を加えます:
* AI チャットに、モバイルへの変更を依頼します。
* AI チャットの **Edit** モードを使用して、特定の要素のデザインやレイアウトを変更します。
**モバイルでアプリを良く見せるためのヒント:**
* テキストが読みやすいことを確認します
* 要素をモバイル画面に合わせてリサイズします
* 必要に応じて要素を非表示または表示します
* ボタンとアイコンボタンが簡単にタップできることを確認します
* 画像が良く見えるか確認します
***
## ページタイプ
異なるページタイプには異なるデザインの選択が必要です。これらのパターンを出発点として使用し、AI で適応させることができます。
明確な約束、1 つのメインのコールトゥアクション、強力なビジュアル階層に焦点を当てます。
デザインのヒント:
* 最小限のナビゲーションを持つシンプルなヘッダーを使用します。
* ヒーローセクションを明確で集中させ、短い見出しと 1 つのプライマリボタンを持つようにします。
* 利点、機能、社会的証明にはサポートセクションを使用します。
* 可能な場合はフォームを短く、スクロール上部に保ちます。
プロンプト例:
```text theme={null}
ホームページを集中したランディングページとしてデザイン:
- 短い見出し、1 つのサポート文、1 つのプライマリコールトゥアクションを持つクリーンなヒーローセクション
- 続いてカードに 3 つの主要な利点
- ロゴ付きのシンプルなソーシャルプルーフセクションを追加する
- ナビゲーションを最小限に保つ
既存のカラーとタイポグラフィシステムを使用してください。
```
ダッシュボードは "私の調子はどう?" に一目で答える必要があります。
デザインのヒント:
* 最も重要なメトリックまたはステータスを左上に配置します。
* 関連するメトリックを明確なタイトルと短い説明を持つカードにグループ化します。
* 1 つの画面に多くのチャートタイプを避け、いくつかの標準的なものを再利用します。
* フィルターと時間範囲を明確に表示し、一貫させます。
プロンプト例:
```text theme={null}
このダッシュボードを再構築:
- 左上の目立つカードにメイン KPI を配置する
- 関連するメトリックを 2x2 のカードグリッドにグループ化する
- フィルターと日付範囲のコントロールをクリーンなトップバーに移動する
- 一貫した色とスタイルを使用してチャートのビジュアルノイズを減らす
```
リストとテーブルを使用すると、人々は多くの項目をスキャンしてアクションを実行できます。
デザインのヒント:
* 十分な間隔で明確な列見出しを使用します。
* 行の高さを快適に保ち、きつくなりすぎないようにします。
* 大きなテーブルには、ゼブラストライピングや控えめな行の区切りを使用します。
* アクションを行の末尾または一貫したメニューに配置します。
* 空、ロード中、エラー状態を追加します。
プロンプト例:
```text theme={null}
このテーブルビューをクリーンアップ:
- 行の高さを少し増やす
- 控えめな行の区切りやゼブラストライピングを使用する
- アクションを末尾の一貫した列に揃える
- 短いメッセージとプライマリアクションを持つ明確な空の状態を追加する
```
詳細ページは、メインオブジェクトとそのキーアクションを明らかにする必要があります。
デザインのヒント:
* オブジェクトのタイトルとプライマリアクションを上部に配置します。
* 1 つのメインコンテンツカラムとオプションのサイドパネルを持つ明確なレイアウトを使用します。
* 見出しまたはタブで関連情報をグループ化します。
* 破壊的アクションを視覚的に区別し、慎重に配置します。
プロンプト例:
```text theme={null}
この詳細ページを改善:
- メインタイトルとプライマリアクションをページの上部に移動する
- 左側にメインコンテンツ、右側にセカンダリ情報を持つ 2 カラムレイアウトを使用する
- 小さな見出しの下に関連フィールドをグループ化する
- 破壊的アクションを明確にラベル付けし、視覚的に区別する
```
フォームは多くのキーフローが発生する場所です。シンプルで寛容に感じる必要があります。
デザインのヒント:
* 見出しの下に関連フィールドをグループ化します。
* ほとんどのフォームに対してシングルカラムレイアウトを使用します。
* 長いマルチステップフローには進捗状況を表示します。
* エラーメッセージをフィールドの近くに配置し、明確にします。
* 明確なラベルとヘルパーテキストを使用します。
プロンプト例:
```text theme={null}
明瞭さのためにこのフォームを再設計:
- シングルカラムレイアウトを使用する
- 短い見出しの下に関連フィールドをグループ化する
- 必要に応じて明確なラベルとヘルパーテキストを追加する
- 検証が失敗したときに各フィールドの下にインラインエラーメッセージを表示する
既存のタイポグラフィと間隔システムを使用してください。
```
***
## テーマとモード
ビジュアルディレクションは、アプリの全体的なトーンです。テーマは、奥行き、色、効果を使用してそのトーンを表現する方法です。Base44 では、テーマに傾倒しながらブランドを保つことができます。
### デザインテーマ
背景に押し込まれたり浮き上がったように見える、柔らかく押し出された要素。
シンプルなコンテンツを持つ落ち着いたツールに最適です。
主な特徴:
* 控えめな内側と外側のシャドウ
* 柔らかいモノクロパレット
* 最小限の奥行きとクリーンな形
プロンプトのアイデア:
```text theme={null}
このアプリに柔らかいニューモーフィックタッチを与える:
- 現在のカラーパレットを保つ
- カードとプライマリボタンに控えめなシャドウを追加する
- 重いコントラストの背景は避ける
- 読みやすさのためにテキストのコントラストを高く保つ
```
透明感とぼかし効果のあるすりガラスのサーフェス。
オーバーレイ、サイドパネル、選択されたカードに最適です。
主な特徴:
* 背景ぼかし
* 控えめなボーダーを持つ透明パネル
* 軽い光と反射効果
プロンプトのアイデア:
```text theme={null}
オーバーレイとサイドパネルのみに控えめなガラス効果を適用:
- ぼかしと薄いボーダーを持つ半透明のサーフェスを使用する
- 背景をシンプルに保ち、テキストが読みやすくなるようにする
- ガラスサーフェスでの強いテキストコントラストを維持する
すべてのカードやメインコンテンツにはガラス効果を適用しないでください。
```
明確な高度と大胆な色を持つ、構造化されたグリッドベースのレイアウト。
ダッシュボード、管理ツール、データの多いアプリに最適です。
主な特徴:
* 明確な高度レイヤー
* クリーンなグリッドとアラインメント
* 意図的なモーション
プロンプトのアイデア:
```text theme={null}
このアプリを柔らかいマテリアルスタイルに移行:
- キーセクションに明確なカードの高度を使用する
- コンテンツが揃うようにアラインメントとグリッドをクリーンアップする
- 強いグラデーションよりも大胆でフラットな色を使用する
- トランジションを控えめで意図的に保つ
```
丸い形と優しいシャドウを持つ、柔らかく膨らんだ要素。
遊び心のあるアプリ、オンボーディング、または軽い体験に最適です。
主な特徴:
* 丸いコーナー
* パステルまたは柔らかいカラーパレット
* 柔らかく均一なシャドウ
プロンプトのアイデア:
```text theme={null}
キーコンポーネントに軽いクレイ感を追加:
- カードとプライマリボタンのコーナーをもっと丸める
- それらのコンポーネントの下に柔らかいシャドウを使用する
- 背景をニュートラルに保ち、アプリが読みやすくなるようにする
このスタイルは長いテキストセクションではなく、インタラクティブな要素のみに適用してください。
```
強い色のブロックと太いボーダーを持つ、意図的に大胆なもの。
繊細さよりも個性が重要なランディングページや内部ツールに最適です。
主な特徴:
* 高コントラストの色の組み合わせ
* 太いボーダーと強い形
* 生のタイポグラフィとシンプルなグリッド
プロンプトのアイデア:
```text theme={null}
マーケティングページに制御されたネオブルータリストの感じを適用:
- 1 つの大胆なアクセントカラー、1 つのダーク、1 つのライトニュートラルを使用する
- 太いボーダーと明確なセクションを追加する
- 見出しを大きく自信を持って表現する
- 本文テキストを非常に読みやすく保つ
このスタイルはデータテーブルや密なフォームには適用しないでください。
```
### ライトテーマとダークテーマ
ライトテーマとダークテーマでは、人々が最良と感じるものを選択でき、さまざまな環境で役立ちます。
AI チャットに、テーマサポートとトグルを追加するように依頼できます。
プロンプト:
```text theme={null}
ライトモードとダークモードのサポートを追加:
- ライトモード: 柔らかいグレーの背景とダークテキスト
- ダークモード: ほぼ黒の背景、ライトテキスト、控えめなボーダー
- プライマリとアクセントカラーは両モードで読みやすく一貫している必要があります
ヘッダーにテーマトグルを追加し、訪問者ごとに選択を記憶してください。
```
テーマサポートは多くのコンポーネントに影響を与えるため、AI がすべてを組み込むのに時間がかかる場合があります。ライトモードでのみまたはダークモードでのみ適用すべき変更を指定することもできます。
***
## モーションとフィードバック
モーションとフィードバックは、人々が画面で何が起こっているかを理解するのに役立ちます。それらを使用して、クリックが応答的に感じられるようにし、何かがロード中であることを示し、次に何をすべきかを説明できます。Base44 では、AI がこれらのパターンを追加できるので、すべてのアニメーションを手動でコーディングする必要はありません。
このセクションは、アプリがすでに機能しているが少しフラットまたは静的に感じる場合、もっと生き生きとして安心感のあるものにしたい場合に使用します。
マイクロインタラクションは、誰かが行うことに対する小さなビジュアルの反応です。例えば:
* ホバー時に少し成長して明るくなるボタン。
* マウスを上に動かすと持ち上がるカード。
* 何かが保存されたときに小さなチェックマークアニメーションを表示するアイコン。
これらの効果は、アプリを漫画化することなく応答的に感じさせます。
AI に一貫したインタラクションのセットを導入するように依頼できます:
```text theme={null}
控えめなインタラクションを追加:
- 短い時間で各ページをロード時にフェードインする
- ホバーとフォーカス時にプライマリボタンを優しく成長して明るくする
- ホバー時にカードに小さなリフト効果を追加する
reduced motion 設定を尊重し、急速な点滅は避けてください。
```
マーケティングや宣伝ページには、より強いトーンを使用できます:
```text theme={null}
マーケティングページのみで:
- 最初のロード時にヒーローセクションを横からスライドインする
- 機能カードがフォーカスまたはホバーされたときにアイコンをアニメーション化する
- ページが高速に感じるようにアニメーションを短く保つ
```
色、レイアウト、タイポグラフィに満足してからモーションを追加してください。モーションは、明瞭さをサポートする必要があり、弱い構造を隠してはなりません。
ロード中、空、エラー状態は、人々が詰まりを感じることが多い場所です。ここでの良いフィードバックは、アプリをより洗練されて寛容に感じさせることができます。
例:
* ロード中: 一般的なスピナーの代わりに最終レイアウトに一致するスケルトン形状。
* 空: ここに表示されるものを説明する友好的なメッセージと、何かを作成または接続するためのボタン。
* エラー: 短く人間味のある説明と、再試行またはヘルプを得るための明確な方法。
AI にアプリ全体でこれらのパターンを作成するように依頼できます:
```text theme={null}
フィードバック状態を改善:
- 各メインリストとダッシュボードに、レイアウトに一致するスケルトンローダーを追加する
- アイコン、1 行の説明、プライマリアクションを持つ空の状態をデザインする
- 関連する場所に短いメッセージと再試行ボタンを持つ明確なエラー状態を追加する
既存のカラーとタイポグラフィシステムを使用してください。
```
これらの変更はデータやロジックには影響せず、何かがロード中、欠落、または問題が発生したときに、アプリが人々にどのように通信するかだけを変更します。
***
## 高度なカスタマイズ
AI と **Edit** モードが提供するものを超えて行きたい場合は、独自のコードと npm パッケージを持ち込むことができます。AI はすべてを組み込んで揃えるのを依然として支援できます。
[npm パッケージ](/Building-your-app/NPM-packages) を使用して、すべてを最初から構築せずに、より豊かなモーション、ビジュアル効果、インタラクティブコンポーネントを Base44 アプリに取り込めます。パッケージは公開 npm レジストリから取得され、アプリエディタの AI チャットを通じてインストールされるので、同じワークフロー内に留まります。
**デザインに焦点を当てた例:**
* アニメーションライブラリ (例: anime.js) でトランジション、ホバー効果、マイクロインタラクションを追加します。
* UI コンポーネントまたはモーションライブラリで、組み込みのインタラクションパターンを持つモーダル、ツールチップ、カルーセル、ステップフローを処理します。
* チャートとグラフユーティリティで、アプリに一致するカスタムカラー、タイポグラフィ、間隔でデータを視覚化します。
* ドラッグアンドドロップまたはジェスチャーライブラリで、レイアウトをより触覚的でインタラクティブに感じさせます。
* 日付と時間のヘルパーで、UI に合うようにタイムスタンプとスケジュールをフォーマットします。
**パッケージがインストールされた後、AI チャットを使用して以下のことができます:**
* パッケージから適切な関数またはコンポーネントをインポートします。
* 既存のレイアウトとデザイントークン (色、タイポグラフィ、間隔、半径) に組み込みます。
* プロップ、バリアント、モーションを調整して、アプリの残りと一貫させます。
* フォーカス状態、キーボードナビゲーション、reduced motion 設定などのアクセシビリティの詳細を確認します。
**プロンプト例**
```text theme={null}
framer-motion npm パッケージを追加しました。既存のカードグリッドをリファクタリングして、各カードが framer-motion を使用してホバー時にアニメーションするようにしてください:
- 現在のレイアウトとコピーを保つ
- 既存のカラートークン、ボーダー半径、タイポグラフィを使用する
- prefers-reduced-motion を尊重し、キーボードフォーカスのアウトラインを明確に保つ
```
すべての npm パッケージはサードパーティのコードです。Base44 はその品質やセキュリティを保証できないので、パッケージの README を確認し、アプリでテストし、プロジェクトのデザインとパフォーマンスの要件を満たしていることを確認してください。
Base44 アプリは Tailwind CSS ユーティリティをよく使用します。AI は、乱雑なスタイルをよりシステマティックなものにリファクタリングするのを助けます。
AI に依頼できるタスク:
* インラインスタイルを Tailwind ユーティリティに置き換えます。
* 繰り返しのパターンを再利用可能なコンポーネントに抽出します。
* カラー値をデザイントークンと Tailwind 設定にマッピングします。
例:
```text theme={null}
これらのコンポーネントを一貫した Tailwind クラスを使用するようにリファクタリング:
- インラインスタイル属性を Tailwind ユーティリティに置き換える
- 色、間隔、タイポグラフィにデザイントークンを使用する
- ナビゲーション、カード、ボタンの主なクラスの組み合わせをドキュメント化する
```
レイアウト、アニメーション、コンポーネント構造を正確に制御したい場合があります。[コードファイルを開く](/documentation/building-your-app/editing-code) ことで直接編集するか、AI に依頼できます。
一般的なデザイン関連の編集:
* `Layout.js` を更新して、グローバルラッパー、ヘッダー、フッターを変更します。
* テーマプロバイダーまたはコンテキストを調整します。
* コンポーネントの構成方法と受け入れるプロップを変更します。
コードを編集するには:
1. 該当するファイルを開きます。
2. コードスニペットを AI チャットに貼り付けます。
3. 変更を求め、diff またはプレビューを確認します。
例:
```text theme={null}
これが私の Layout.js コンポーネントです。
以下のように調整してください:
- スクロール時にヘッダーがスティッキー
- メインコンテンツに最大幅があり、大きな画面で中央揃え
- 背景色にデザインシステムのサーフェストークンを使用
変更した内容をコメントで説明してください。
```
デザインの選択は [パフォーマンス](/Performance-and-SEO/App-performance) に影響します。特にパッケージや重いビジュアルを導入する場合に。
心に留めておくこと:
* 巨大な背景アセットよりも最適化された画像サイズを使用します。
* 初期ロードで多くの重いアニメーションや大きなライブラリをロードしないようにします。
* 深いレポートや高度なフィルターなど、めったに使用されないセクションを遅延ロードします。
* 多くのほぼコピーではなく、共有コンポーネントを再利用します。
AI にパフォーマンスを重視したレビューを依頼できます:
```text theme={null}
パフォーマンスの観点からこのアプリのデザインをレビュー:
- ロードを遅くする可能性のある重いビジュアルやコード関連の要素を特定する
- 同じ全体的な見た目を保つより軽い代替案を提案する
- 遅延ロードやコード分割が役立つ特定の場所を提案する
```
***
## アクセシビリティ
アクセシビリティは良いデザインの一部です。より多くの人がアプリを快適に使用できるようにし、誰にとっても明瞭さを向上させることができます。
色の選択は読みやすさに直接影響します。
良いプラクティス:
* テキストと背景の間で強いコントラストを使用します。
* 意味を伝えるために色だけを使用することを避けます。
* ボタンやリンクなどのインタラクティブ要素をすべての状態で明確に表示します。
* テーマをサポートしている場合は、ライトモードとダークモードの両方を確認します。
プロンプト例:
```text theme={null}
このアプリのカラーコントラストを監査:
- 背景に対してコントラストが低いテキストまたはアイコンを特定する
- 同じ一般的なパレットを保ちながらコントラストを強化する
- プライマリボタンとリンクが明確に区別できるようにする
適用した主な修正を説明してください。
```
読みやすいテキストは、フォントの選択だけではありません。
良いプラクティス:
* すべてのデバイスで快適なフォントサイズを使用します。
* 段落に十分な行の高さを使用します。
* ライトな背景に非常に軽いウェイトのフォントを使用することを避けます。
* 行の長さを合理的に保ちます。特にワイド画面で。
プロンプト例:
```text theme={null}
テキストの読みやすさを改善:
- 基本の本文フォントサイズを少し増やす
- 段落の行の高さを増やす
- 見出しが本文テキストよりも明らかに大きいことを確認する
- ワイド画面での非常に長い行の長さを減らす
```
人々はキーボードでアプリを使用でき、どこにいるかを確認できる必要があります。
良いプラクティス:
* Tab がインタラクティブ要素を論理的な順序で移動することを確認します。
* フォーカススタイルが表示されて区別できることを確認します。
* フォーカスが離れられないキーボードトラップを避けます。
プロンプト例:
```text theme={null}
キーボードとフォーカスのアクセシビリティを改善:
- すべてのインタラクティブ要素が Tab で到達できることを確認する
- ボタン、リンク、フォームフィールドに表示されるフォーカススタイルを追加する
- このページのフォーカス順序の問題を修正する
行った主な変更を説明してください。
```
モーションは助けにもなれば妨げにもなります。一部の人々はそれを少なくすることを好みます。
良いプラクティス:
* reduced motion 設定を尊重します。
* 急速な点滅や強いちらつきを避けます。
* 絶え間ないモーションよりも、控えめで意図的なアニメーションを使用します。
プロンプト例:
```text theme={null}
アクセシビリティのためのアニメーションを調整:
- ユーザーの reduced motion 設定を尊重する
- 大きな連続アニメーションを削除または簡素化する
- 理解を助ける短い控えめなモーションのみを保つ
```
明確な言語と説明は、支援技術を使用している人々を含むすべての人を助けます。
良いプラクティス:
* ボタンとリンクに明確で説明的なラベルを使用します。
* 重要な画像に意味のある alt テキストを提供します。
* コンテンツを構造化するために見出しを使用します。
* 「ここをクリック」などのあいまいなリンクテキストを避けます。
プロンプト例:
```text theme={null}
ラベルと alt テキストのアクセシビリティを改善:
- 必要に応じてボタンとリンクのラベルをより説明的にする
- 重要な画像の alt テキストを追加または改善する
- 見出しが明確な構造に従うことを確認する
トーンとブランドボイスは同じに保ってください。
```
***
## クイックトリック
迅速な改善が欲しい場合、これらの短いレシピがいくつかのプロンプトで多くの価値を得るのに役立ちます。
* シンプルなカラーシステムを導入し、グローバルに適用します。
* 明確なテキストの役割を定義し、行の高さを増やします。
* 基本的なカードとボタンのコンポーネントを追加し、再利用します。
プロンプト:
```text theme={null}
このプロトタイプを洗練:
- シンプルなカラーシステムを作成し、アプリ全体に適用する
- タイトル、見出し、本文テキストのタイポグラフィの役割を定義する
- ボタンとカードを標準化し、一貫して使用する
コンテンツとロジックは同じに保ってください。
```
* 行の高さを少し増やし、控えめな区切りを追加します。
* アクションを一貫した列またはメニューに移動します。
* 明確なトップバーにフィルターを追加します。
* ロード中、空、エラー状態を追加します。
プロンプト:
```text theme={null}
このテーブルページをクリーンアップ:
- 行の高さを増やし、控えめな行の区切りを追加する
- 行のアクションを末尾の一貫した列に移動する
- テーブルの上にシンプルなフィルターバーを追加する
- 明確なロード中、空、エラー状態を追加する
```
* 間隔と階層を調整します。
* カードとボタンの形を更新します。
* 控えめなマイクロインタラクションを導入します。
プロンプト:
```text theme={null}
このアプリにソフトなビジュアルリフレッシュを与える:
- ブランドカラーを同じに保つ
- 各ページの間隔と階層を改善する
- カードとボタンのコーナーを少し丸め、シャドウを柔らかくする
- プライマリアクションに控えめなホバーとフォーカス状態を追加する
```
***
## FAQ
アプリのデザインについて詳しく学ぶには、以下の質問をクリックしてください。
Tailwind CSS はユーティリティファーストの CSS フレームワークです。カスタム CSS ルールを書く代わりに、要素に直接小さなクラス名を追加して、色、間隔、タイポグラフィ、レイアウトを制御します。各クラス名は通常 1 つのビジュアルルールにマッピングされるので、クラス自体からデザインを「読む」ことができます。
見るかもしれない一般的な例:
* 色: `bg-blue-500` は青の背景を設定し、`text-white` は白いテキストを設定します。
* 間隔: `p-4` はすべての辺にパディングを追加し、`m-2` はすべての辺にマージンを追加します。
* タイポグラフィ: `font-bold` はテキストを太字にし、`text-lg` はより大きなテキストサイズを設定します。
* レイアウト: `flex` はフレックスコンテナを作成し、`grid` はグリッドコンテナを作成し、`items-center` はフレックスまたはグリッド行のアイテムを垂直方向に中央揃えします。
Base44 で Tailwind クラスを見たら、それらを組み合わせて要素の完全なスタイルを記述できます。例えば、`bg-blue-500 text-white p-4 flex items-center` は、白いテキスト、パディング、中央揃えのコンテンツを持つ青いバーを与えます。
より深いリファレンスとユーティリティの完全なリストについては、公式の Tailwind CSS ドキュメントを確認できます。
モバイル、タブレット、デスクトップを別々にデザインし、レイアウトがどのように適応するかを確認します。
Base44 でデザインするときは、これらのガイドラインを使用してください:
* モバイル: シングル垂直カラムを使用し、画面ごとに 1 つの明確なプライマリアクションを保ち、タップターゲットを十分な間隔で大きくします。ズームの必要がないようにテキストを短く保ちます。
* タブレット: タブレットをハイブリッドとして扱います。サイドメニューや分割レイアウトを使用できますが、ボタンをタッチフレンドリーに保ち、非常に小さなテーブルや密なコントロールを避けます。
* デスクトップ: 余分な幅をマルチカラムレイアウトとサイドバーに使用します。ホバー効果を追加できますが、重要なアクションはクリックまたはタップでも機能する必要があります。
* すべてのデバイス: 読みやすいフォントサイズを使用し、水平スクロールを避け、スペースがきついときは要素が重なるのではなく積み重なるようにします。コンテンツを切り取る固定の高さを避けてください。
AI にレスポンシブルールを適用するように依頼することもできます。例えば:
```text theme={null}
モバイル、タブレット、デスクトップ向けにこのレイアウトをレスポンシブにしてください。
水平スクロールを避け、過剰なスクロールなしでプライマリアクションを見えるようにしてください。
```
デザインの選択は、アプリのロード速度と感じ方に直接影響します。Base44 でデザインするときは、これらのガイドラインを念頭に置いてください:
* 大きなアセットが初期ロードを遅くしないように、最適化された画像サイズを使用します。圧縮されたフォーマットを好み、画面に表示されるよりもはるかに大きな画像をアップロードしないようにします。
* 特にモバイル重視のアプリでは、重いアニメーションと複雑な効果を制限します。短くシンプルなトランジションは問題ありませんが、絶え間ないモーションや大きなアニメーション化された背景を避けてください。
* レイアウトをクリーンで集中させます。レイヤー、オーバーレイ、ネストされたコンポーネントが少ないほど、特にローエンドデバイスでレンダリングが速くなります。
* 少しずつ異なる多くのバージョンを作成するのではなく、コンポーネントを再利用します。共有コンポーネントはキャッシュとメンテナンスが簡単です。
* すべてを一度にロードしないようにします。可能な場合は、重要でないコンテンツを後でロードします。例えば、セカンダリセクション、長いリスト、めったに使用されないパネルです。
* 地図、動画プレーヤー、ウィジェットなどのサードパーティの埋め込みに注意してください。実際の価値を追加する場所にのみ含めて、1 つの画面に多くの埋め込みを積み重ねないようにします。
AI チャットでデザインバージョン制御を使用して、変更をロールバックできます。
* 各 AI プロンプトには **Revert** オプションがあり、その特定のプロンプトがアプリで変更したすべてを即座に元に戻します。
* AI チャットの時計アイコンはバージョン履歴を開きます。アプリの以前の保存されたバージョンを選択して、1 ステップでロールバックできます。
[AI チャットモードとバージョン履歴について詳しく学ぶ](/Building-your-app/AI-chat-modes)。
AI チャットに特定の要素を削除するように依頼するか、AI チャットの **Edit** をクリックして要素を選択し、**Delete** アイコン をクリックします。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。