Skip to main content
アプリのデザインをカスタマイズする方法を理解したら、これらの基礎により、アプリの成長に合わせて一貫性、構造、アクセシビリティを維持できます。このページでは、一貫したデザインの構築、画像とビジュアルアセットの活用、レスポンシブレイアウトとページタイプ、高度なカスタマイズ、アクセシビリティについて説明します。

​
デザインの一貫性を保つ

これらのセクションでは、AI チャットを使用してアプリ全体で一貫したデザインパターンを確立し、色、タイポグラフィ、余白、コンポーネントに統一感を持たせる方法を説明します。

​
カラーシステム

色は、雰囲気を決め、注目を導くための最も強力なツールのひとつです。ランダムな 16 進コードではなく、役割を定義することから始めます。目安は次のとおりです:
  • プライマリブランドカラー 1 色
  • セカンダリカラー 1 色
  • ハイライト用のアクセントカラー 1 色
  • 背景、サーフェス、ボーダー用のニュートラルグレー 3〜5 色
  • 成功、警告、エラーの状態を示す明確な色
AI にゼロから完全なシステムを提案して適用するように依頼できます:
色の意味を一貫させます。例えば、成功の色はポジティブな状態にのみ、エラーの色は問題にのみ使用し、装飾には使用しません。
ブランドガイドや外部ツールで用意した 16 進コードがすでにある場合は、貼り付けて AI に役割へのマッピングを任せられます:
カラーパレットのスクリーンショットや画像を AI チャットに直接アップロードし、その色をアプリに適用するように依頼できます:
カラーテーマ変更のリクエストに添付されたパレット画像と、その下に AI チャットが編集したファイル

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

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

タイポグラフィは、アプリの読みやすさと見やすさを左右します。似たようなスタイルを多数持つより、明確なテキストスタイルを少数持つ方が効果的です。 次のような役割を定義します:
  • ページタイトル
  • セクション見出し
  • 本文テキスト
  • ラベルやタイムスタンプなどの小さなメタデータ
AI にこれを設定して全体に適用するように依頼できます:
サイズをより直接的に指定することもできます:
カスタムフォントを使用し、レイアウトを通じて適用できます。
  1. 埋め込みスニペットを取得します (例えば Google Fonts の https://fonts.google.com から)。
  2. AI に Layout.js への追加とタイポグラフィシステムへの組み込みを依頼します。
プロンプト例:
Raleway フォントを Layout.js にインポートする AI チャットと、スタイルが変更されたアプリのプレビュー

カスタムフォントをインポートする

フォントファミリーは 1〜2 種類に抑えるようにします。フォントが多すぎると、インターフェースがまとまりなく見え、維持も難しくなります。

​
余白と密度

余白と密度は、アプリの使い心地を左右します。シンプルな余白スケールがあれば、ランダムな隙間や窮屈なセクションを防げます。 4、8、12、16、24 などのスケールを定義し、AI に適用を依頼できます:
ページが詰まりすぎ、または空きすぎに感じる場合は、AI チャットに診断と修正を任せられます:

​
コア要素と状態

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

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

画像、アイコン、動画などのビジュアルアセットは、アプリの印象を形作ります。AI は、それらの作成、配置、スタイリング、そしてデータやコードへの接続を支援します。
画像や動画を AI チャットにアップロードして、アプリのスタイル、レイアウト、コンテンツの視覚的なコンテキストを与えます。AI チャットにヒーロー画像をページに直接追加するように依頼できます:
Scandinavian Design の見出しの下に全幅のヒーロー画像がある NordHaus ストアのページ

全幅のヒーロー画像

プレースホルダー画像を置き換えるには:
  1. コードビューで Store.js などの該当するページファイルを開きます。
  2. <img> タグを見つけます。
  3. src 属性を自分の画像 URL に更新します。
Data セクションでエンティティ用の画像をアップロードし、コンポーネントにバインドして、カードやリストに適切な画像を自動的に表示させることもできます。
images フィールドが囲まれた Edit Product ドロワーと、Data の下で囲まれた Product

エンティティ画像をコンポーネントにバインドする

ヒーロー、プロダクトプレビュー、チュートリアル、オンボーディング画面などのビジュアルセクション用に、AI チャットに短い動画の生成を依頼できます。プロンプト例:
AI チャットからの動画生成には、Starter プラン以上が必要です。生成される動画ごとに、プロンプトのメッセージクレジットに加えて 1 メッセージクレジットが消費されます。
公開中のアプリでユーザーに動画を生成させることもできます。詳細は動画の生成を参照してください。
参考画像を使うと、使いたいスタイル、レイアウト、カラーパレット、ビジュアルの方向性を AI チャットに見せて、デザインを視覚的に導けます。
スタイル変更のリクエストに参考画像を添付した AI チャットと、スタイルが変更されたアプリ

参考画像でデザインを方向付ける

  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 で、プレビュー内の対応する要素をクリックして Edit モードを開きます。
  5. スタイルを AI プロンプトに貼り付け、変更内容を Base44 に正確に伝えます。例:
これにより、デザインファイルのグラデーション、シャドウ、ボーダーなどのスタイルを非常に正確に再現できます。
アイコンは単なる装飾ではなく、意味を支えるべきものです。一貫性が鍵です。よくあるタスク:
  • 汎用的なアイコンをより意味のあるものに置き換えます。
  • アイコンのサイズと線の太さをそろえます。
  • 明確さが重要な場所では、アイコンにテキストラベルを組み合わせます。
Lucide などのアイコンライブラリを使用し、AI チャットに組み込みを依頼できます:

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

レイアウトは、情報のグループ化と見え方を制御します。レスポンシブ対応により、そのレイアウトがあらゆるデバイスで機能します。
単発の画面ではなく、ページタイプで考えます:
  • ランディングページとマーケティングページ
  • ダッシュボード
  • リストとテーブル
  • 詳細ページ
  • フォームとウィザード
  • 設定ページとプロフィールページ
AI チャットにパターンの検出と標準化を依頼できます:
階層とホワイトスペースは、重要なものをひと目で見つけやすくします。AI に適用を依頼できるアイデア:
ホワイトスペースは、ダッシュボードやテーブルなどの密度の高いコンテンツで特に重要です。主要な要素に余裕を持たせます。
アプリは、スマートフォン、タブレット、デスクトップで自然に感じられる必要があります。レスポンシブのルールを 1 つのプロンプトにまとめられます:
Base44 エディターのデバイスプレビューを使用して、これらのルールが各画面サイズでどう動作するかを確認し、フォローアッププロンプトで調整します。

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

Base44 アプリはあらゆるデバイスに合わせてレイアウトを自動調整しますが、エディターのモバイルプレビューとカスタマイズツールを使用して、モバイルでの見た目と動作を微調整できます。これにより、モバイルを使う人に快適でシームレスな体験を提供できます。
Desktop、Tablet、Mobile を選べるアプリエディターのビューポートメニューが囲まれた状態

モバイルでアプリをプレビューする

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

​
ページタイプ

ページタイプによって必要なデザインの選択は異なります。これらのパターンを出発点として使用し、AI で調整できます。
明確な約束、1 つの主要なコールトゥアクション、強い視覚的階層に重点を置きます。デザインのヒント:
  • 最小限のナビゲーションを備えたシンプルなヘッダーを使用します。
  • ヒーローセクションは、短い見出しと 1 つのプライマリボタンで明確かつ集中したものにします。
  • メリット、機能、ソーシャルプルーフには補助的なセクションを使用します。
  • フォームは短くし、可能であればファーストビュー内に収めます。
プロンプト例:
ダッシュボードは「調子はどうか」にひと目で答えられるべきです。デザインのヒント:
  • 最も重要な指標やステータスを左上付近に配置します。
  • 関連する指標を、明確なタイトルと短い説明を持つカードにまとめます。
  • 1 画面に多くのチャートタイプを詰め込まず、少数の標準的なものを再利用します。
  • フィルターと期間の設定を見やすく一貫した場所に置きます。
プロンプト例:
リストとテーブルにより、多くの項目を確認して操作できます。デザインのヒント:
  • 十分な間隔を持つ明確な列見出しを使用します。
  • 行の高さは快適に保ち、詰めすぎないようにします。
  • 大きなテーブルには、しま模様や控えめな行区切りを使用します。
  • アクションは行の末尾か一貫したメニューに配置します。
  • 空、読み込み中、エラーの状態を追加します。
プロンプト例:
詳細ページでは、主要なオブジェクトとその主なアクションが明確に分かるようにします。デザインのヒント:
  • オブジェクトのタイトルと主要アクションを上部付近に配置します。
  • メインコンテンツ 1 カラムと任意のサイドパネルによる明確なレイアウトを使用します。
  • 関連する情報を見出しやタブでグループ化します。
  • 破壊的なアクションは視覚的に区別し、配置に注意します。
プロンプト例:
フォームは多くの重要なフローが行われる場所です。シンプルで寛容に感じられるべきです。デザインのヒント:
  • 関連するフィールドを見出しの下にグループ化します。
  • ほとんどのフォームには 1 カラムレイアウトを使用します。
  • 長い複数ステップのフローには進捗を表示します。
  • エラーメッセージはフィールドの近くに置き、明確にします。
  • 明確なラベルとヘルパーテキストを使用します。
プロンプト例:

​
高度なカスタマイズ

AI と Edit モードの標準機能を超えたい場合は、独自のコードや npm パッケージを導入できます。AI はそれらの接続や調整も引き続き支援します。
npm パッケージを使用すると、すべてをゼロから構築せずに、より豊かなモーション、ビジュアルエフェクト、インタラクティブなコンポーネントを Base44 アプリに取り込めます。パッケージは公開 npm レジストリから提供され、アプリエディターの AI チャットを通じてインストールされるため、同じワークフロー内で作業できます。デザイン重視の例:
  • アニメーションライブラリ (例: anime.js) で、トランジション、ホバーエフェクト、マイクロインタラクションを追加します。
  • UI コンポーネントやモーションライブラリで、組み込みのインタラクションパターンを持つモーダル、ツールチップ、カルーセル、ステップフローを扱います。
  • チャートやグラフのユーティリティで、アプリに合ったカスタムの色、タイポグラフィ、余白でデータを可視化します。
  • ドラッグアンドドロップやジェスチャーのライブラリで、レイアウトをより触感的でインタラクティブにします。
  • 日付と時刻のヘルパーで、UI に合った形式でタイムスタンプやスケジュールを表示します。
パッケージのインストール後、AI チャットで次のことができます:
  • パッケージから適切な関数やコンポーネントをインポートします。
  • 既存のレイアウトとデザイントークン (色、タイポグラフィ、余白、角丸) に組み込みます。
  • props、バリアント、モーションを調整して、アプリの他の部分と一貫させます。
  • フォーカス状態、キーボードナビゲーション、モーション低減設定などのアクセシビリティの詳細を確認します。
プロンプト例
すべての npm パッケージはサードパーティのコードです。Base44 はその品質やセキュリティを保証できないため、パッケージの README を確認し、アプリでテストして、プロジェクトのデザインとパフォーマンスの要件を満たすことを確認してください。
Base44 アプリは多くの場合 Tailwind CSS ユーティリティを使用します。AI は、乱雑なスタイルをより体系的なものにリファクタリングするのを支援します。AI に依頼できるタスク:
  • インラインスタイルを Tailwind ユーティリティに置き換えます。
  • 繰り返されるパターンを再利用可能なコンポーネントに抽出します。
  • 色の値をデザイントークンと Tailwind 設定にマッピングします。
例:
レイアウト、アニメーション、コンポーネント構造を正確に制御したい場合があります。コードファイルを直接開いて、自分で編集するか AI に依頼できます。デザインに関連するよくある編集:
  • Layout.js を更新して、グローバルなラッパー、ヘッダー、フッターを変更します。
  • テーマプロバイダーやコンテキストを調整します。
  • コンポーネントの構成と受け取る props を変更します。
コードを編集するには:
  1. 該当するファイルを開きます。
  2. コードスニペットを AI チャットに貼り付けます。
  3. 変更を依頼し、差分またはプレビューを確認します。
例:
デザインの選択は、特にパッケージや重いビジュアルを導入する場合に、パフォーマンスに影響します。留意点:
  • 巨大な背景アセットではなく、最適化された画像サイズを使用します。
  • 初回ロード時に多くの重いアニメーションや大きなライブラリを読み込まないようにします。
  • 詳細レポートや高度なフィルターなど、あまり使われないセクションは遅延読み込みします。
  • 似たようなコピーを多数作らず、共有コンポーネントを再利用します。
AI にパフォーマンス重視のレビューを依頼できます:

​
アクセシビリティ

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

​
FAQ

デザインの基礎とレイアウトの詳細については、以下の質問をクリックしてください。
モバイル、タブレット、デスクトップ向けに個別にデザインし、レイアウトの適応を確認します。Base44 でデザインする際は、次のガイドラインを使用します:
  • モバイル: 縦 1 カラムを使用し、画面ごとに明確な主要アクションを 1 つに保ち、タップターゲットを大きくして十分な間隔を確保します。ズームしなくても読めるようにテキストは短くします。
  • タブレット: タブレットはハイブリッドとして扱います。サイドメニューや分割レイアウトを使用できますが、ボタンはタッチしやすく保ち、非常に小さいテーブルや密なコントロールを避けます。
  • デスクトップ: 広い幅を活かして複数カラムのレイアウトやサイドバーを使用します。ホバーエフェクトを追加できますが、重要なアクションはクリックまたはタップでも動作する必要があります。
  • すべてのデバイス: 読みやすいフォントサイズを使用し、横スクロールを避け、スペースが足りないときは要素を重ねずに積み重ねます。コンテンツを切り取る固定の高さを避けます。
AI にレスポンシブのルールの適用を依頼することもできます。例:
デザインの選択は、アプリの読み込み速度と体感速度に直接影響します。Base44 でデザインする際は、次のガイドラインに留意します:
  • 大きなアセットが初回ロードを遅くしないよう、最適化された画像サイズを使用します。圧縮フォーマットを優先し、画面での表示サイズよりはるかに大きい画像のアップロードを避けます。
  • 特にモバイル中心のアプリでは、重いアニメーションや複雑なエフェクトを制限します。短くシンプルなトランジションは問題ありませんが、絶え間ない動きや大きなアニメーション背景を避けます。
  • レイアウトはクリーンで集中したものに保ちます。レイヤー、オーバーレイ、ネストされたコンポーネントが少ないほど、特に低スペックのデバイスで描画が速くなります。
  • わずかに異なるバージョンを多数作らず、コンポーネントを再利用します。共有コンポーネントはキャッシュや維持がしやすくなります。
  • すべてを一度に読み込まないようにします。可能な場合は、補助的なセクション、長いリスト、あまり使われないパネルなど、重要度の低いコンテンツを後から読み込みます。
  • マップ、動画プレーヤー、ウィジェットなどのサードパーティ埋め込みには注意します。本当に価値がある場所にのみ含め、1 つの画面に多くの埋め込みを重ねないようにします。
このページは AI によって翻訳されました。最も正確で最新の情報については、英語版 を参照してください。