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