Skip to main content
Base44 では、アプリをデザインするためのいくつかの方法が提供されています。グローバルな色とフォントのための Theme パネル、要素ごとのスタイリングのための Edit モード、より広範な変更のための AI チャットです。このページでは、直接使用できるプロンプトと例を交えて、各アプローチを説明します。
Designing your app in Base44

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

​
デザインでの AI との連携

AI は Base44 でのデザインの中心にあります。必要なものを自然言語で説明するだけで、AI がコード、スタイル、コンポーネントを更新します。Edit モードでは、画面に表示されているものを微調整でき、AI コントロールでは境界を設定できます。
AI チャットは、アプリの多くの部分に影響するグローバルな変更やデザインの決定に最適です。一度ペルソナと概要を定義し、それを基に構築できます:
役立つパターン:
  • 変更を求める前にクリティークを求めます。
  • Discuss モードで計画を求め、承認してから AI に実装を依頼します。
  • デザインの範囲(アプリ全体、1 ページ、または 1 要素)を常に明確にします。
例:
レビュー後:
Edit モードは、すべてを書き直さずに表示されているものを調整したいときに最適です。
Visualedittoolbar
チャットの Edit をクリックして、変更したい要素を選択します。次のことができます:
  • セクションを選択して、色、間隔、レイアウトを視覚的に調整します。
  • AI に 1 つのコンポーネントインスタンスのみのリスタイルを依頼します。
  • Delete アイコン を使用して、不要な要素を削除します。
  • パターンをアプリの残りに展開する前の安全なサンドボックスとして使用します。
Edit ツールバーの Edit Element をクリックして、AI に変更を依頼します。例:
チャットの AI コントロール を使用して、デザインをガイドして保護します。次のことができます:
  • すべてのプロンプトに適用されるデザインガイドラインを設定します。
  • 特定のファイルやページを凍結して、AI が変更しないようにします。
  • ミニマル、ボールド、プレイフルなどのトーンを確立します。
ガイドラインの例:
プロンプトでは常に範囲を明示してください。同じ変更がアプリ全体、1 ページ、または 1 つの要素に適用される可能性があり、AI はあなたのリードに従います:
満足している領域を保護しながら、他の場所で実験するには:
  • AI コントロールを使用して特定のファイルやページを凍結し、AI が変更しないようにします。
  • 個々のプロンプトの Revert オプションを使用して、1 つの変更を元に戻します。
  • バージョン履歴を使用して、以前の状態にロールバックします。
AI チャットを使用して、コミットする前にさまざまな方向性を探索できます。クリティークループ:
代替方向:
オプションを選んだら、AI にその方向性を同様のページに適用するように依頼できます。
セクションや要素のデザインやレイアウトを変更するように AI に依頼すると、すぐに変更を適用するのではなく、選択するためのビジュアルオプションが表示されることがあります。各オプションにはプレビューが表示されるので、コミットする前にどのように見えるかを確認できます。
Design Options
希望するオプションを選択して Submit をクリックするか、Skip をクリックして AI に決定させます。

​
グローバルな変更

Theme パネルでは、1 つの場所からアプリ全体の色とフォントを設定できます。あなたが行った変更はすぐにすべての場所に適用されるので、要素を 1 つずつ更新する必要はありません。 パネルの上部には現在のパレットのプレビューが表示され、その後にカスタマイズできる背景、前景、プライマリ、セカンダリ、カード、ポップオーバーなどの色の役割のリストが続きます。パネルの上部にある Fonts をクリックして、アプリのフォントを代わりに設定します。
Accessing and customizing your app's theme

アプリのテーマへのアクセスとカスタマイズ

​
テーマカラー

任意のカラーの役割をクリックして、アプリ全体で更新します。 テーマの色を変更するには:
  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 をクリックしてアプリ全体に変更を適用します。
Changing your theme fonts in your app

アプリのテーマフォントを変更する

Fonts タブが表示されない場合、アプリにテーマフォント変数がまだ設定されていない可能性があります。AI チャットに追加するように依頼してください: Theme パネルからフォントを変更できるようにアプリにテーマフォント変数を追加して。

​
要素の変更

Edit モードでは、任意の個々の要素を直接スタイル設定できます。要素を選択し、Edit ツールバーのアイコンを使用して、色、タイポグラフィ、間隔、コーナー半径、不透明度を変更したり、カスタム Tailwind クラスを追加したりできます。ツールバーで使用できるオプションは、選択する要素のタイプによって変わります。
Visual edit toolbar in Base44

​
色

テーマで定義された色またはカスタムカラーを使用して、任意の要素の背景色とテキストの色を設定できます。
Editing the color of an element using the theme colors in Base44

テーマカラーを使用して要素の色を編集する

要素の色を変更するには:
  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 で入力します。水平方向と垂直方向のショートハンドコントロールを使用して、両側を一度に設定します。
Editing spacing of elements in Base44

​
コーナー半径

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 に最初から完全なシステムを提案して適用するように依頼できます:
色の意味を一貫させてください。例えば、成功の色はポジティブな状態にのみ使用し、エラーの色は問題にのみ使用し、装飾には使用しません。
ブランドガイドや外部ツールからすでに 16 進コードがある場合は、それらを貼り付けて AI に役割にマッピングさせます:
カラーパレットのスクリーンショットや画像を AI チャットに直接アップロードして、その色をアプリに適用するように依頼できます:
Changing the color palette of a Base44 app

Base44 でアプリのカラーパレットを変更する

​
タイポグラフィシステム

タイポグラフィは、アプリの読みやすさとスキャンしやすさを制御します。多くの似たようなスタイルよりも、いくつかの明確なテキストスタイルを持つ方が良いです。 次のような役割を定義します:
  • ページタイトル
  • セクション見出し
  • 本文テキスト
  • ラベルやタイムスタンプなどの小さなメタデータ
AI にこれを設定してすべてに適用するように依頼できます:
サイズをより直接的にターゲットにすることもできます:
カスタムフォントを使用してレイアウト経由で適用できます。
  1. 埋め込みスニペットを取得します (例: https://fonts.google.com の Google Fonts から)。
  2. Layout.js に追加し、タイプシステムに組み込むように AI に依頼します。
プロンプト例:
Using a custom font in the Base44 layout file
フォントファミリーは 1 つか 2 つに制限してみてください。フォントが多すぎると、インターフェースが整理されていない感じになり、メンテナンスが難しくなります。

​
間隔と密度

間隔と密度は、アプリが快適に使用できるかどうかを制御します。シンプルな間隔スケールにより、ランダムなギャップや窮屈なセクションを防止できます。 4、8、12、16、24 などのスケールを定義し、AI に適用するように依頼できます:
ページが混雑していたり空すぎたりする場合は、AI チャットに診断して修正させることができます:

​
コア要素と状態

色、タイプ、間隔が整ったら、どこでも使用するビルディングブロックを標準化します。 以下に焦点を当てます:
  • ボタン (プライマリ、セカンダリ、テキストのみ)
  • カードとパネル
  • ナビゲーションバーとサイドバー
  • フォームフィールド (デフォルト、フォーカス、エラー、無効)
  • 使用する場合はチップ、タグ、バッジ
AI にパターンを検出して統一するように依頼できます:
これにより、新しいページが同じ製品に属するように見える再利用可能な言語が得られます。

​
画像とビジュアルアセット

画像、アイコン、動画などのビジュアルアセットは、アプリの感じ方を形作ります。AI は、それらを作成、配置、スタイリングし、データやコードに接続するのに役立ちます。
画像や動画を AI チャットにアップロードして、アプリのスタイル、レイアウト、コンテンツのためのビジュアルコンテキストを与えます。AI チャットに、ページに直接ヒーロー画像を追加するように依頼できます:
Hero image example in a Base44 appプレースホルダー画像を置き換えるには:
  1. 該当するページファイル (例: Store.js) をコードビューで開きます。
  2. <img> タグを見つけます。
  3. src 属性を独自の画像 URL で更新します。
Data セクションでエンティティの画像をアップロードし、コンポーネントにバインドすることもできます。これにより、カードとリストが適切な画像を自動的に表示します。Managing entity images in the Base44 Data section
AI チャットに、ヒーロー、製品プレビュー、チュートリアル、オンボーディング画面などのビジュアルセクションのための短い動画を生成するように依頼します。プロンプト例:
AI チャットからの動画の生成には Starter プラン 以上が必要です。生成された各動画は、プロンプトのメッセージクレジットと 1 つの追加メッセージクレジットを使用します。
ライブアプリで人々に動画を生成させることもできます。動画の生成 について詳しく学びましょう。
参照画像を使用すると、使いたいスタイル、レイアウト、カラーパレット、ビジュアルディレクションを AI チャットに示すことで、デザインをビジュアルに導けます。Uploading a reference image for app design inspiration
  1. AI チャットで Upload icon (+) をクリックします。
  2. インスピレーション画像またはスクリーンショットをアップロードします。
  3. AI に、借りたいものと無視するものを正確に伝えます。
プロンプトのアイデア:
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 に正確に何を変更するか伝えます。例えば:
これにより、デザインファイルからグラデーション、シャドウ、ボーダー、その他のスタイルを非常に正確に一致させることができます。Figma Dev mode showing CSS and gradient background for a selected element
アイコンは装飾だけでなく、意味をサポートする必要があります。一貫性が鍵です。一般的なタスク:
  • 一般的なアイコンをより意味のあるものに置き換えます。
  • アイコンのサイズとストロークの太さを揃えます。
  • 明瞭さが重要な場合はアイコンをテキストラベルとペアにします。
Lucide などのアイコンライブラリを使用して、AI チャットに組み込むように依頼できます:

​
レイアウトとレスポンシブ

レイアウトは、情報がどのようにグループ化され、スキャンされるかを制御します。レスポンシブにより、レイアウトはあらゆるデバイスで機能します。
1 回限りの画面ではなく、ページタイプで考えます:
  • ランディングとマーケティングページ
  • ダッシュボード
  • リストとテーブル
  • 詳細ページ
  • フォームとウィザード
  • 設定とプロフィールページ
AI チャットにパターンを検出して標準化するように依頼できます:
階層と余白は、人々が何が重要かを一目で理解するのに役立ちます。AI に適用するように依頼できるアイデア:
余白は、ダッシュボードやテーブルなどの密なコンテンツに特に重要なので、キー要素に呼吸する余裕を与えます。
アプリはスマートフォン、タブレット、デスクトップで自然に感じる必要があります。1 つのプロンプトでレスポンシブルールをエンコードできます:
Base44 エディタのデバイスプレビューを使用してこれらのルールがさまざまな画面サイズでどのように動作するかを確認し、その後フォローアッププロンプトで洗練させます。

​
モバイル向けのアプリのカスタマイズ

Base44 アプリは任意のデバイスに自動的にレイアウトを調整しますが、エディタのモバイルプレビューとカスタマイズツールを使用して、アプリがモバイル上でどのように見えて動作するかを微調整できます。これにより、モバイルユーザーのために快適でシームレスな体験を作成できます。
Viewing the mobile version of your app in the Base44 app editor

Base44 アプリエディタでアプリのモバイル版を表示する

モバイル向けにアプリをカスタマイズするには:
  1. アプリエディタに移動します。
  2. 上部の Screen アイコンをクリックして Mobile を選択します。
  3. レイアウト、ナビゲーション、コンテンツを確認します。
  4. 必要に応じて以下のいずれかの方法で変更を加えます:
    • AI チャットに、モバイルへの変更を依頼します。
    • AI チャットの Edit モードを使用して、特定の要素のデザインやレイアウトを変更します。
モバイルでアプリを良く見せるためのヒント:
  • テキストが読みやすいことを確認します
  • 要素をモバイル画面に合わせてリサイズします
  • 必要に応じて要素を非表示または表示します
  • ボタンとアイコンボタンが簡単にタップできることを確認します
  • 画像が良く見えるか確認します

​
ページタイプ

異なるページタイプには異なるデザインの選択が必要です。これらのパターンを出発点として使用し、AI で適応させることができます。
明確な約束、1 つのメインのコールトゥアクション、強力なビジュアル階層に焦点を当てます。デザインのヒント:
  • 最小限のナビゲーションを持つシンプルなヘッダーを使用します。
  • ヒーローセクションを明確で集中させ、短い見出しと 1 つのプライマリボタンを持つようにします。
  • 利点、機能、社会的証明にはサポートセクションを使用します。
  • 可能な場合はフォームを短く、スクロール上部に保ちます。
プロンプト例:
ダッシュボードは “私の調子はどう?” に一目で答える必要があります。デザインのヒント:
  • 最も重要なメトリックまたはステータスを左上に配置します。
  • 関連するメトリックを明確なタイトルと短い説明を持つカードにグループ化します。
  • 1 つの画面に多くのチャートタイプを避け、いくつかの標準的なものを再利用します。
  • フィルターと時間範囲を明確に表示し、一貫させます。
プロンプト例:
リストとテーブルを使用すると、人々は多くの項目をスキャンしてアクションを実行できます。デザインのヒント:
  • 十分な間隔で明確な列見出しを使用します。
  • 行の高さを快適に保ち、きつくなりすぎないようにします。
  • 大きなテーブルには、ゼブラストライピングや控えめな行の区切りを使用します。
  • アクションを行の末尾または一貫したメニューに配置します。
  • 空、ロード中、エラー状態を追加します。
プロンプト例:
詳細ページは、メインオブジェクトとそのキーアクションを明らかにする必要があります。デザインのヒント:
  • オブジェクトのタイトルとプライマリアクションを上部に配置します。
  • 1 つのメインコンテンツカラムとオプションのサイドパネルを持つ明確なレイアウトを使用します。
  • 見出しまたはタブで関連情報をグループ化します。
  • 破壊的アクションを視覚的に区別し、慎重に配置します。
プロンプト例:
フォームは多くのキーフローが発生する場所です。シンプルで寛容に感じる必要があります。デザインのヒント:
  • 見出しの下に関連フィールドをグループ化します。
  • ほとんどのフォームに対してシングルカラムレイアウトを使用します。
  • 長いマルチステップフローには進捗状況を表示します。
  • エラーメッセージをフィールドの近くに配置し、明確にします。
  • 明確なラベルとヘルパーテキストを使用します。
プロンプト例:

​
テーマとモード

ビジュアルディレクションは、アプリの全体的なトーンです。テーマは、奥行き、色、効果を使用してそのトーンを表現する方法です。Base44 では、テーマに傾倒しながらブランドを保つことができます。

​
デザインテーマ

Neumorphism style interface example in Base44背景に押し込まれたり浮き上がったように見える、柔らかく押し出された要素。シンプルなコンテンツを持つ落ち着いたツールに最適です。主な特徴:
  • 控えめな内側と外側のシャドウ
  • 柔らかいモノクロパレット
  • 最小限の奥行きとクリーンな形
プロンプトのアイデア:
Glassmorphism style interface example in Base44透明感とぼかし効果のあるすりガラスのサーフェス。オーバーレイ、サイドパネル、選択されたカードに最適です。主な特徴:
  • 背景ぼかし
  • 控えめなボーダーを持つ透明パネル
  • 軽い光と反射効果
プロンプトのアイデア:
Material style interface example in Base44明確な高度と大胆な色を持つ、構造化されたグリッドベースのレイアウト。ダッシュボード、管理ツール、データの多いアプリに最適です。主な特徴:
  • 明確な高度レイヤー
  • クリーンなグリッドとアラインメント
  • 意図的なモーション
プロンプトのアイデア:
Claymorphism style interface example in Base44丸い形と優しいシャドウを持つ、柔らかく膨らんだ要素。遊び心のあるアプリ、オンボーディング、または軽い体験に最適です。主な特徴:
  • 丸いコーナー
  • パステルまたは柔らかいカラーパレット
  • 柔らかく均一なシャドウ
プロンプトのアイデア:
Neo brutalism style interface example in Base44強い色のブロックと太いボーダーを持つ、意図的に大胆なもの。繊細さよりも個性が重要なランディングページや内部ツールに最適です。主な特徴:
  • 高コントラストの色の組み合わせ
  • 太いボーダーと強い形
  • 生のタイポグラフィとシンプルなグリッド
プロンプトのアイデア:

​
ライトテーマとダークテーマ

ライトテーマとダークテーマでは、人々が最良と感じるものを選択でき、さまざまな環境で役立ちます。 AI チャットに、テーマサポートとトグルを追加するように依頼できます。 Light and dark mode themes in a Base44 app Code example for theme handling in a Base44 app プロンプト:
テーマサポートは多くのコンポーネントに影響を与えるため、AI がすべてを組み込むのに時間がかかる場合があります。ライトモードでのみまたはダークモードでのみ適用すべき変更を指定することもできます。

​
モーションとフィードバック

モーションとフィードバックは、人々が画面で何が起こっているかを理解するのに役立ちます。それらを使用して、クリックが応答的に感じられるようにし、何かがロード中であることを示し、次に何をすべきかを説明できます。Base44 では、AI がこれらのパターンを追加できるので、すべてのアニメーションを手動でコーディングする必要はありません。 このセクションは、アプリがすでに機能しているが少しフラットまたは静的に感じる場合、もっと生き生きとして安心感のあるものにしたい場合に使用します。
マイクロインタラクションは、誰かが行うことに対する小さなビジュアルの反応です。例えば:
  • ホバー時に少し成長して明るくなるボタン。
  • マウスを上に動かすと持ち上がるカード。
  • 何かが保存されたときに小さなチェックマークアニメーションを表示するアイコン。
これらの効果は、アプリを漫画化することなく応答的に感じさせます。AI に一貫したインタラクションのセットを導入するように依頼できます:
マーケティングや宣伝ページには、より強いトーンを使用できます:
色、レイアウト、タイポグラフィに満足してからモーションを追加してください。モーションは、明瞭さをサポートする必要があり、弱い構造を隠してはなりません。
ロード中、空、エラー状態は、人々が詰まりを感じることが多い場所です。ここでの良いフィードバックは、アプリをより洗練されて寛容に感じさせることができます。例:
  • ロード中: 一般的なスピナーの代わりに最終レイアウトに一致するスケルトン形状。
  • 空: ここに表示されるものを説明する友好的なメッセージと、何かを作成または接続するためのボタン。
  • エラー: 短く人間味のある説明と、再試行またはヘルプを得るための明確な方法。
AI にアプリ全体でこれらのパターンを作成するように依頼できます:
これらの変更はデータやロジックには影響せず、何かがロード中、欠落、または問題が発生したときに、アプリが人々にどのように通信するかだけを変更します。

​
高度なカスタマイズ

AI と Edit モードが提供するものを超えて行きたい場合は、独自のコードと npm パッケージを持ち込むことができます。AI はすべてを組み込んで揃えるのを依然として支援できます。
npm パッケージ を使用して、すべてを最初から構築せずに、より豊かなモーション、ビジュアル効果、インタラクティブコンポーネントを Base44 アプリに取り込めます。パッケージは公開 npm レジストリから取得され、アプリエディタの AI チャットを通じてインストールされるので、同じワークフロー内に留まります。デザインに焦点を当てた例:
  • アニメーションライブラリ (例: anime.js) でトランジション、ホバー効果、マイクロインタラクションを追加します。
  • UI コンポーネントまたはモーションライブラリで、組み込みのインタラクションパターンを持つモーダル、ツールチップ、カルーセル、ステップフローを処理します。
  • チャートとグラフユーティリティで、アプリに一致するカスタムカラー、タイポグラフィ、間隔でデータを視覚化します。
  • ドラッグアンドドロップまたはジェスチャーライブラリで、レイアウトをより触覚的でインタラクティブに感じさせます。
  • 日付と時間のヘルパーで、UI に合うようにタイムスタンプとスケジュールをフォーマットします。
パッケージがインストールされた後、AI チャットを使用して以下のことができます:
  • パッケージから適切な関数またはコンポーネントをインポートします。
  • 既存のレイアウトとデザイントークン (色、タイポグラフィ、間隔、半径) に組み込みます。
  • プロップ、バリアント、モーションを調整して、アプリの残りと一貫させます。
  • フォーカス状態、キーボードナビゲーション、reduced motion 設定などのアクセシビリティの詳細を確認します。
プロンプト例
すべての npm パッケージはサードパーティのコードです。Base44 はその品質やセキュリティを保証できないので、パッケージの README を確認し、アプリでテストし、プロジェクトのデザインとパフォーマンスの要件を満たしていることを確認してください。
Base44 アプリは Tailwind CSS ユーティリティをよく使用します。AI は、乱雑なスタイルをよりシステマティックなものにリファクタリングするのを助けます。AI に依頼できるタスク:
  • インラインスタイルを Tailwind ユーティリティに置き換えます。
  • 繰り返しのパターンを再利用可能なコンポーネントに抽出します。
  • カラー値をデザイントークンと Tailwind 設定にマッピングします。
例:
レイアウト、アニメーション、コンポーネント構造を正確に制御したい場合があります。コードファイルを開く ことで直接編集するか、AI に依頼できます。一般的なデザイン関連の編集:
  • Layout.js を更新して、グローバルラッパー、ヘッダー、フッターを変更します。
  • テーマプロバイダーまたはコンテキストを調整します。
  • コンポーネントの構成方法と受け入れるプロップを変更します。
コードを編集するには:
  1. 該当するファイルを開きます。
  2. コードスニペットを AI チャットに貼り付けます。
  3. 変更を求め、diff またはプレビューを確認します。
例:
デザインの選択は パフォーマンス に影響します。特にパッケージや重いビジュアルを導入する場合に。心に留めておくこと:
  • 巨大な背景アセットよりも最適化された画像サイズを使用します。
  • 初期ロードで多くの重いアニメーションや大きなライブラリをロードしないようにします。
  • 深いレポートや高度なフィルターなど、めったに使用されないセクションを遅延ロードします。
  • 多くのほぼコピーではなく、共有コンポーネントを再利用します。
AI にパフォーマンスを重視したレビューを依頼できます:

​
アクセシビリティ

アクセシビリティは良いデザインの一部です。より多くの人がアプリを快適に使用できるようにし、誰にとっても明瞭さを向上させることができます。
色の選択は読みやすさに直接影響します。良いプラクティス:
  • テキストと背景の間で強いコントラストを使用します。
  • 意味を伝えるために色だけを使用することを避けます。
  • ボタンやリンクなどのインタラクティブ要素をすべての状態で明確に表示します。
  • テーマをサポートしている場合は、ライトモードとダークモードの両方を確認します。
プロンプト例:
読みやすいテキストは、フォントの選択だけではありません。良いプラクティス:
  • すべてのデバイスで快適なフォントサイズを使用します。
  • 段落に十分な行の高さを使用します。
  • ライトな背景に非常に軽いウェイトのフォントを使用することを避けます。
  • 行の長さを合理的に保ちます。特にワイド画面で。
プロンプト例:
人々はキーボードでアプリを使用でき、どこにいるかを確認できる必要があります。良いプラクティス:
  • Tab がインタラクティブ要素を論理的な順序で移動することを確認します。
  • フォーカススタイルが表示されて区別できることを確認します。
  • フォーカスが離れられないキーボードトラップを避けます。
プロンプト例:
モーションは助けにもなれば妨げにもなります。一部の人々はそれを少なくすることを好みます。良いプラクティス:
  • reduced motion 設定を尊重します。
  • 急速な点滅や強いちらつきを避けます。
  • 絶え間ないモーションよりも、控えめで意図的なアニメーションを使用します。
プロンプト例:
明確な言語と説明は、支援技術を使用している人々を含むすべての人を助けます。良いプラクティス:
  • ボタンとリンクに明確で説明的なラベルを使用します。
  • 重要な画像に意味のある alt テキストを提供します。
  • コンテンツを構造化するために見出しを使用します。
  • 「ここをクリック」などのあいまいなリンクテキストを避けます。
プロンプト例:

​
クイックトリック

迅速な改善が欲しい場合、これらの短いレシピがいくつかのプロンプトで多くの価値を得るのに役立ちます。
  • シンプルなカラーシステムを導入し、グローバルに適用します。
  • 明確なテキストの役割を定義し、行の高さを増やします。
  • 基本的なカードとボタンのコンポーネントを追加し、再利用します。
プロンプト:
  • 行の高さを少し増やし、控えめな区切りを追加します。
  • アクションを一貫した列またはメニューに移動します。
  • 明確なトップバーにフィルターを追加します。
  • ロード中、空、エラー状態を追加します。
プロンプト:
  • 間隔と階層を調整します。
  • カードとボタンの形を更新します。
  • 控えめなマイクロインタラクションを導入します。
プロンプト:

​
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 にレスポンシブルールを適用するように依頼することもできます。例えば:
デザインの選択は、アプリのロード速度と感じ方に直接影響します。Base44 でデザインするときは、これらのガイドラインを念頭に置いてください:
  • 大きなアセットが初期ロードを遅くしないように、最適化された画像サイズを使用します。圧縮されたフォーマットを好み、画面に表示されるよりもはるかに大きな画像をアップロードしないようにします。
  • 特にモバイル重視のアプリでは、重いアニメーションと複雑な効果を制限します。短くシンプルなトランジションは問題ありませんが、絶え間ないモーションや大きなアニメーション化された背景を避けてください。
  • レイアウトをクリーンで集中させます。レイヤー、オーバーレイ、ネストされたコンポーネントが少ないほど、特にローエンドデバイスでレンダリングが速くなります。
  • 少しずつ異なる多くのバージョンを作成するのではなく、コンポーネントを再利用します。共有コンポーネントはキャッシュとメンテナンスが簡単です。
  • すべてを一度にロードしないようにします。可能な場合は、重要でないコンテンツを後でロードします。例えば、セカンダリセクション、長いリスト、めったに使用されないパネルです。
  • 地図、動画プレーヤー、ウィジェットなどのサードパーティの埋め込みに注意してください。実際の価値を追加する場所にのみ含めて、1 つの画面に多くの埋め込みを積み重ねないようにします。
AI チャットでデザインバージョン制御を使用して、変更をロールバックできます。
  • 各 AI プロンプトには Revert オプションがあり、その特定のプロンプトがアプリで変更したすべてを即座に元に戻します。
  • AI チャットの時計アイコンはバージョン履歴を開きます。アプリの以前の保存されたバージョンを選択して、1 ステップでロールバックできます。
AI チャットモードとバージョン履歴について詳しく学ぶ。
AI チャットに特定の要素を削除するように依頼するか、AI チャットの Edit をクリックして要素を選択し、Delete アイコン をクリックします。
Deleting an element using Visual Edit
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。