アプリのデザイン

​

デザインでの AI との連携

​

グローバルな変更

​

テーマカラー

1. アプリエディタの上部にある Theme アイコン をクリックします。
2. リスト内の任意のカラーの役割をクリックしてカラーピッカーを開きます。パネルの上部のバーは現在のパレットのプレビューであり、クリックできません。
3. ピッカーをドラッグするか、16 進値を入力するか、スポイトを使用して画面上の任意の色をサンプリングするか、ピッカー下部のドロップダウンを使用してパレットから選択することで色を選びます。
4. Apply をクリックしてアプリで変更をプレビューします。
5. Theme パネルの Save & Apply をクリックしてすべての場所に適用します。

​

フォント

1. アプリエディタの上部にある Theme アイコン をクリックします。
2. Fonts タブをクリックします。
3. ドロップダウンをクリックしてフォントを選択します。名前で検索するか、Brand Fonts および All fonts を参照するか、Upload Fonts をクリックして独自のフォントを追加できます。
4. Save & Apply をクリックしてアプリ全体に変更を適用します。

​

要素の変更

​

色

1. エディタの上部にある Edit をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの Colors アイコン をクリックします。
4. 変更したい部分(背景またはテキストなど)を選択します。
5. 色を選びます:
   • Theme: テーマで定義されたカラーロール(背景、前景、カード、プライマリなど)から選択します。
   • Custom: ピッカーをドラッグするか、16 進値を入力するか、スポイトを使用して画面上の任意の色をサンプリングするか、ピッカー下部のドロップダウンを使用してパレットから選択します。
6. Apply をクリックして変更を確認します。

​

タイポグラフィ

1. エディタの上部にある Edit をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーの T アイコンをクリックします。
4. Text content フィールドに変更を入力します。

1. エディタの上部にある Edit をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーのフォントファミリーのドロップダウンをクリックします。
4. フォントを検索または参照し、クリックして適用します。> 矢印があるフォントにカーソルを合わせると、利用可能なウェイトが表示されます。ウェイトをクリックして適用します。

1. エディタの上部にある Edit をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーのサイズのドロップダウンをクリックします。
4. サイズを選択します。使用可能なサイズは 12 から 128 まであります。

1. エディタの上部にある Edit をクリックします。
2. テキスト要素を選択します。
3. Edit ツールバーの Text style アイコンをクリックします。
4. 変更したい設定を調整します:
   • Alignment: 左、中央、右、または両端揃え。
   • Case: none、uppercase、lowercase、または capitalize。
   • Decoration: none、下線、取り消し線、または斜体。

​

間隔

1. エディタの上部にある Edit をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの Spacing アイコン をクリックします。
4. マージンとパディングの値を px で入力します。水平方向と垂直方向のショートハンドコントロールを使用して、両側を一度に設定します。

​

コーナー半径

1. エディタの上部にある Edit をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの Corners アイコンをクリックします。
4. 値を px で入力するか、矢印を使用して調整します。

​

不透明度

1. エディタの上部にある Edit をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの Opacity アイコンをクリックします。
4. スライダーをドラッグするか、0 (完全透明) から 100 (完全不透明) までの値を入力します。

​

Tailwind クラス

1. エディタの上部にある Edit をクリックします。
2. 変更したい要素を選択します。
3. Edit ツールバーの Tailwind classes アイコンをクリックします。
4. 任意の Tailwind CSS クラスを入力します。例えば、shadow-lg は大きなシャドウを追加し、border border-gray-200 は控えめなボーダーを追加します。

​

テーマとモード

​

デザインテーマ

ニューモーフィズム

背景に押し込まれたり浮き上がったように見える、柔らかく押し出された要素。シンプルなコンテンツを持つ落ち着いたツールに最適です。主な特徴:

• 控えめな内側と外側のシャドウ
• 柔らかいモノクロパレット
• 最小限の奥行きとクリーンな形

プロンプトのアイデア:

このアプリに柔らかいニューモーフィックタッチを与える:
- 現在のカラーパレットを保つ
- カードとプライマリボタンに控えめなシャドウを追加する
- 重いコントラストの背景は避ける
- 読みやすさのためにテキストのコントラストを高く保つ

グラスモーフィズム

透明感とぼかし効果のあるすりガラスのサーフェス。オーバーレイ、サイドパネル、選択されたカードに最適です。主な特徴:

• 背景ぼかし
• 控えめなボーダーを持つ透明パネル
• 軽い光と反射効果

プロンプトのアイデア:

オーバーレイとサイドパネルのみに控えめなガラス効果を適用:
- ぼかしと薄いボーダーを持つ半透明のサーフェスを使用する
- 背景をシンプルに保ち、テキストが読みやすくなるようにする
- ガラスサーフェスでの強いテキストコントラストを維持する
すべてのカードやメインコンテンツにはガラス効果を適用しないでください。

マテリアルスタイル

明確な高度と大胆な色を持つ、構造化されたグリッドベースのレイアウト。ダッシュボード、管理ツール、データの多いアプリに最適です。主な特徴:

• 明確な高度レイヤー
• クリーンなグリッドとアラインメント
• 意図的なモーション

プロンプトのアイデア:

このアプリを柔らかいマテリアルスタイルに移行:
- キーセクションに明確なカードの高度を使用する
- コンテンツが揃うようにアラインメントとグリッドをクリーンアップする
- 強いグラデーションよりも大胆でフラットな色を使用する
- トランジションを控えめで意図的に保つ

クレイモーフィズム

丸い形と優しいシャドウを持つ、柔らかく膨らんだ要素。遊び心のあるアプリ、オンボーディング、または軽い体験に最適です。主な特徴:

• 丸いコーナー
• パステルまたは柔らかいカラーパレット
• 柔らかく均一なシャドウ

プロンプトのアイデア:

キーコンポーネントに軽いクレイ感を追加:
- カードとプライマリボタンのコーナーをもっと丸める
- それらのコンポーネントの下に柔らかいシャドウを使用する
- 背景をニュートラルに保ち、アプリが読みやすくなるようにする
このスタイルは長いテキストセクションではなく、インタラクティブな要素のみに適用してください。

ネオブルータリズム

強い色のブロックと太いボーダーを持つ、意図的に大胆なもの。繊細さよりも個性が重要なランディングページや内部ツールに最適です。主な特徴:

• 高コントラストの色の組み合わせ
• 太いボーダーと強い形
• 生のタイポグラフィとシンプルなグリッド

プロンプトのアイデア:

マーケティングページに制御されたネオブルータリストの感じを適用:
- 1 つの大胆なアクセントカラー、1 つのダーク、1 つのライトニュートラルを使用する
- 太いボーダーと明確なセクションを追加する
- 見出しを大きく自信を持って表現する
- 本文テキストを非常に読みやすく保つ
このスタイルはデータテーブルや密なフォームには適用しないでください。

​

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

ライトモードとダークモードのサポートを追加:
- ライトモード: 柔らかいグレーの背景とダークテキスト
- ダークモード: ほぼ黒の背景、ライトテキスト、控えめなボーダー
- プライマリとアクセントカラーは両モードで読みやすく一貫している必要があります
ヘッダーにテーマトグルを追加し、訪問者ごとに選択を記憶してください。

​

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

控えめなインタラクションを追加:
- 短い時間で各ページをロード時にフェードインする
- ホバーとフォーカス時にプライマリボタンを優しく成長して明るくする
- ホバー時にカードに小さなリフト効果を追加する
reduced motion 設定を尊重し、急速な点滅は避けてください。

マーケティングページのみで:
- 最初のロード時にヒーローセクションを横からスライドインする
- 機能カードがフォーカスまたはホバーされたときにアイコンをアニメーション化する
- ページが高速に感じるようにアニメーションを短く保つ

フィードバック状態を改善:
- 各メインリストとダッシュボードに、レイアウトに一致するスケルトンローダーを追加する
- アイコン、1 行の説明、プライマリアクションを持つ空の状態をデザインする
- 関連する場所に短いメッセージと再試行ボタンを持つ明確なエラー状態を追加する
既存のカラーとタイポグラフィシステムを使用してください。

​

クイックトリック

このプロトタイプを洗練:
- シンプルなカラーシステムを作成し、アプリ全体に適用する
- タイトル、見出し、本文テキストのタイポグラフィの役割を定義する
- ボタンとカードを標準化し、一貫して使用する
コンテンツとロジックは同じに保ってください。

このテーブルページをクリーンアップ:
- 行の高さを増やし、控えめな行の区切りを追加する
- 行のアクションを末尾の一貫した列に移動する
- テーブルの上にシンプルなフィルターバーを追加する
- 明確なロード中、空、エラー状態を追加する

このアプリにソフトなビジュアルリフレッシュを与える:
- ブランドカラーを同じに保つ
- 各ページの間隔と階層を改善する
- カードとボタンのコーナーを少し丸め、シャドウを柔らかくする
- プライマリアクションに控えめなホバーとフォーカス状態を追加する

​

FAQ

Tailwind CSS とは何ですか? そのクラス名をどう読むのですか?

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 ドキュメントを確認できます。

AI の変更を元に戻したり、デザインの以前のバージョンを復元したりするには?

AI チャットでデザインバージョン制御を使用して、変更をロールバックできます。

• 各 AI プロンプトには Revert オプションがあり、その特定のプロンプトがアプリで変更したすべてを即座に元に戻します。
• AI チャットの時計アイコンはバージョン履歴を開きます。アプリの以前の保存されたバージョンを選択して、1 ステップでロールバックできます。

AI チャットモードとバージョン履歴について詳しく学ぶ。

アプリから要素を削除するには?

AI チャットに特定の要素を削除するように依頼するか、AI チャットの Edit をクリックして要素を選択し、Delete アイコン をクリックします。