> ## 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 アプリの一貫性と構造を維持します。デザインシステム、画像とビジュアルアセット、レスポンシブレイアウト、ページタイプ、高度なカスタマイズ、アクセシビリティを扱います。
[アプリのデザインをカスタマイズする方法](/Building-your-app/Design)を理解したら、これらの基礎により、アプリの成長に合わせて一貫性、構造、アクセシビリティを維持できます。このページでは、一貫したデザインの構築、画像とビジュアルアセットの活用、レスポンシブレイアウトとページタイプ、高度なカスタマイズ、アクセシビリティについて説明します。
***
## デザインの一貫性を保つ
これらのセクションでは、AI チャットを使用してアプリ全体で一貫したデザインパターンを確立し、色、タイポグラフィ、余白、コンポーネントに統一感を持たせる方法を説明します。
### カラーシステム
色は、雰囲気を決め、注目を導くための最も強力なツールのひとつです。ランダムな 16 進コードではなく、役割を定義することから始めます。目安は次のとおりです:
* プライマリブランドカラー 1 色
* セカンダリカラー 1 色
* ハイライト用のアクセントカラー 1 色
* 背景、サーフェス、ボーダー用のニュートラルグレー 3〜5 色
* 成功、警告、エラーの状態を示す明確な色
AI にゼロから完全なシステムを提案して適用するように依頼できます:
```text theme={null}
このアプリのカラーシステムを作成して:
- プライマリブランドカラー 1 色
- セカンダリカラー 1 色
- ハイライト用のアクセントカラー 1 色
- 背景、サーフェス、ボーダー用のニュートラルグレー 4 色
色を primary、surface、border、success、warning、error などの役割にマッピングして。
背景上のテキストがアクセシビリティのコントラスト基準を満たすようにして。
このシステムをアプリ全体に適用し、単発の色を置き換えて。
```
色の意味を一貫させます。例えば、成功の色はポジティブな状態にのみ、エラーの色は問題にのみ使用し、装飾には使用しません。
ブランドガイドや外部ツールで用意した 16 進コードがすでにある場合は、貼り付けて AI に役割へのマッピングを任せられます:
```text theme={null}
このパレットを使用し、各 16 進コードを役割に割り当てて:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
どれがプライマリ、セカンダリ、アクセント、ニュートラルの役割かを定義して。
ハードコードされた色を、これらの役割に従うトークンまたは Tailwind クラスに置き換えて。
```
カラーパレットのスクリーンショットや画像を AI チャットに直接アップロードし、その色をアプリに適用するように依頼できます:
```text theme={null}
この画像の色を私のアプリに適用して。
各色を primary、background、foreground、accent などの役割にマッピングして。
アプリ全体の既存の色を置き換えて合わせて。
```
***
### タイポグラフィシステム
タイポグラフィは、アプリの読みやすさと見やすさを左右します。似たようなスタイルを多数持つより、明確なテキストスタイルを少数持つ方が効果的です。
次のような役割を定義します:
* ページタイトル
* セクション見出し
* 本文テキスト
* ラベルやタイムスタンプなどの小さなメタデータ
AI にこれを設定して全体に適用するように依頼できます:
```text theme={null}
タイポグラフィシステムを設定して:
- ページタイトル: 最大サイズ、太字、モダンなサンセリフ
- セクション見出し: 中サイズ、セミボールド
- 本文テキスト: 標準サイズ、通常のウェイト
- メタデータ: 小さい大文字で字間を広めに
これらの役割をすべてのページに一貫して適用し、場当たり的なフォントサイズを削除して。
```
サイズをより直接的に指定することもできます:
```text theme={null}
タイポグラフィをより読みやすくして:
- 基本の本文テキストサイズを少し大きくして
- 段落の行間を広げて
- 見出しが本文テキストの 1.4 倍以上のサイズになるようにして
フォントファミリーはそのままにして。
```
カスタムフォントを使用し、レイアウトを通じて適用できます。
1. 埋め込みスニペットを取得します (例えば Google Fonts の [https://fonts.google.com](https://fonts.google.com) から)。
2. AI に `Layout.js` への追加とタイポグラフィシステムへの組み込みを依頼します。
プロンプト例:
```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 で、プレビュー内の対応する要素をクリックして **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」アイコンを使用して
- アイコンサイズを小さく保ち、パディングを均等にして
- セカンダリボタンや破壊的なボタンにはアイコンを追加しないで
```
***
## レイアウトとレスポンシブ
レイアウトは、情報のグループ化と見え方を制御します。レスポンシブ対応により、そのレイアウトがあらゆるデバイスで機能します。
単発の画面ではなく、ページタイプで考えます:
* ランディングページとマーケティングページ
* ダッシュボード
* リストとテーブル
* 詳細ページ
* フォームとウィザード
* 設定ページとプロフィールページ
AI チャットにパターンの検出と標準化を依頼できます:
```text theme={null}
このアプリの主要なページタイプ (ランディング、ダッシュボード、リスト、詳細、フォーム、設定) を特定して。
各タイプについて:
- 一貫したレイアウト構造を提案して
- 再利用できる既存のコンポーネントを提案して
コンテンツを変更せずに、同じタイプのすべてのページにそのレイアウトを適用して。
```
階層とホワイトスペースは、重要なものをひと目で見つけやすくします。
AI に適用を依頼できるアイデア:
```text theme={null}
このページの視覚的な階層とホワイトスペースを改善して:
- ページタイトルを他のテキストより明確に目立たせて
- 一貫したセクション見出しでコンテンツをグループ化して
- 各セクションの上下のパディングを増やして
- カードの行間の間隔を広げて
新しい色やフォントの追加は避けて。
```
ホワイトスペースは、ダッシュボードやテーブルなどの密度の高いコンテンツで特に重要です。主要な要素に余裕を持たせます。
アプリは、スマートフォン、タブレット、デスクトップで自然に感じられる必要があります。
レスポンシブのルールを 1 つのプロンプトにまとめられます:
```text theme={null}
このレイアウトをレスポンシブにして:
- スマートフォンでは縦 1 カラムにしてセクションを積み重ねて
- タブレットではスペースが許す限りカードを 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 カラムレイアウトを使用して
- 関連するフィールドを小さな見出しの下にグループ化して
- 破壊的なアクションを明確にラベル付けし、視覚的に区別して
```
フォームは多くの重要なフローが行われる場所です。シンプルで寛容に感じられるべきです。
デザインのヒント:
* 関連するフィールドを見出しの下にグループ化します。
* ほとんどのフォームには 1 カラムレイアウトを使用します。
* 長い複数ステップのフローには進捗を表示します。
* エラーメッセージはフィールドの近くに置き、明確にします。
* 明確なラベルとヘルパーテキストを使用します。
プロンプト例:
```text theme={null}
このフォームを分かりやすく再設計して:
- 1 カラムレイアウトを使用して
- 関連するフィールドを短い見出しの下にグループ化して
- 必要に応じて明確なラベルとヘルパーテキストを追加して
- バリデーション失敗時に各フィールドの下にインラインのエラーメッセージを表示して
既存のタイポグラフィと余白のシステムを使用して。
```
***
## 高度なカスタマイズ
AI と **Edit** モードの標準機能を超えたい場合は、独自のコードや npm パッケージを導入できます。AI はそれらの接続や調整も引き続き支援します。
[npm パッケージ](/Building-your-app/NPM-packages)を使用すると、すべてをゼロから構築せずに、より豊かなモーション、ビジュアルエフェクト、インタラクティブなコンポーネントを Base44 アプリに取り込めます。パッケージは公開 npm レジストリから提供され、アプリエディターの AI チャットを通じてインストールされるため、同じワークフロー内で作業できます。
**デザイン重視の例:**
* アニメーションライブラリ (例: anime.js) で、トランジション、ホバーエフェクト、マイクロインタラクションを追加します。
* UI コンポーネントやモーションライブラリで、組み込みのインタラクションパターンを持つモーダル、ツールチップ、カルーセル、ステップフローを扱います。
* チャートやグラフのユーティリティで、アプリに合ったカスタムの色、タイポグラフィ、余白でデータを可視化します。
* ドラッグアンドドロップやジェスチャーのライブラリで、レイアウトをより触感的でインタラクティブにします。
* 日付と時刻のヘルパーで、UI に合った形式でタイムスタンプやスケジュールを表示します。
**パッケージのインストール後、AI チャットで次のことができます:**
* パッケージから適切な関数やコンポーネントをインポートします。
* 既存のレイアウトとデザイントークン (色、タイポグラフィ、余白、角丸) に組み込みます。
* props、バリアント、モーションを調整して、アプリの他の部分と一貫させます。
* フォーカス状態、キーボードナビゲーション、モーション低減設定などのアクセシビリティの詳細を確認します。
**プロンプト例**
```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 クラスを使うようにリファクタリングして:
- インラインの style 属性を Tailwind ユーティリティに置き換えて
- 色、余白、タイポグラフィにはデザイントークンを使用して
- ナビゲーション、カード、ボタンの主なクラスの組み合わせをドキュメント化して
```
レイアウト、アニメーション、コンポーネント構造を正確に制御したい場合があります。[コードファイルを直接開いて](/documentation/building-your-app/editing-code)、自分で編集するか AI に依頼できます。
デザインに関連するよくある編集:
* `Layout.js` を更新して、グローバルなラッパー、ヘッダー、フッターを変更します。
* テーマプロバイダーやコンテキストを調整します。
* コンポーネントの構成と受け取る props を変更します。
コードを編集するには:
1. 該当するファイルを開きます。
2. コードスニペットを AI チャットに貼り付けます。
3. 変更を依頼し、差分またはプレビューを確認します。
例:
```text theme={null}
これが私の Layout.js コンポーネントです。
次のように調整して:
- ヘッダーをスクロール時に固定して
- メインコンテンツに最大幅を設定し、大きい画面では中央にそろえて
- 背景色にはデザインシステムの surface トークンを使用して
変更内容をコメントで説明して。
```
デザインの選択は、特にパッケージや重いビジュアルを導入する場合に、[パフォーマンス](/Performance-and-SEO/App-performance)に影響します。
留意点:
* 巨大な背景アセットではなく、最適化された画像サイズを使用します。
* 初回ロード時に多くの重いアニメーションや大きなライブラリを読み込まないようにします。
* 詳細レポートや高度なフィルターなど、あまり使われないセクションは遅延読み込みします。
* 似たようなコピーを多数作らず、共有コンポーネントを再利用します。
AI にパフォーマンス重視のレビューを依頼できます:
```text theme={null}
パフォーマンスの観点からこのアプリのデザインをレビューして:
- 読み込みを遅くする可能性のある重いビジュアルやコード要素を特定して
- 全体の見た目を維持できる軽い代替案を提案して
- 遅延読み込みやコード分割が役立つ具体的な箇所を提案して
```
***
## アクセシビリティ
アクセシビリティは良いデザインの一部です。より多くの人が快適にアプリを使えるようになり、すべての人にとっての明確さも向上します。
色の選択は読みやすさに直接影響します。
良いプラクティス:
* テキストと背景の間に強いコントラストを使用します。
* 色だけで意味を伝えることは避けます。
* ボタンやリンクなどのインタラクティブな要素を、すべての状態で明確に見えるようにします。
* テーマをサポートする場合は、ライトモードとダークモードの両方を確認します。
プロンプト例:
```text theme={null}
このアプリの色のコントラストを監査して:
- 背景に対してコントラストが低いテキストやアイコンを特定して
- 全体のパレットを維持しながらコントラストを強化して
- プライマリボタンとリンクが明確に区別できるようにして
適用した主な修正を説明して。
```
読みやすいテキストは、フォントの選択だけでは決まりません。
良いプラクティス:
* すべてのデバイスで快適なフォントサイズを使用します。
* 段落に十分な行間を確保します。
* 明るい背景に非常に細いウェイトのフォントを使用しないようにします。
* 特にワイド画面では、行の長さを適度に保ちます。
プロンプト例:
```text theme={null}
テキストの読みやすさを改善して:
- 基本の本文フォントサイズを少し大きくして
- 段落の行間を広げて
- 見出しが本文テキストより明確に大きくなるようにして
- ワイド画面での長すぎる行を短くして
```
キーボードでアプリを操作でき、現在の位置が分かるようにします。
良いプラクティス:
* Tab キーでインタラクティブな要素を論理的な順序で移動できることを確認します。
* フォーカススタイルが見やすく明確であることを確認します。
* フォーカスが移動できなくなるキーボードトラップを避けます。
プロンプト例:
```text theme={null}
キーボードとフォーカスのアクセシビリティを改善して:
- すべてのインタラクティブな要素に Tab で到達できるようにして
- ボタン、リンク、フォームフィールドに見えるフォーカススタイルを追加して
- このページのフォーカス順序の問題を修正して
行った主な変更を説明して。
```
モーションは役立つこともあれば妨げになることもあります。少ない方を好む人もいます。
良いプラクティス:
* モーション低減の設定を尊重します。
* 高速な点滅や強いちらつきを避けます。
* 絶え間ない動きではなく、控えめで目的のあるアニメーションを使用します。
プロンプト例:
```text theme={null}
アクセシビリティのためにアニメーションを調整して:
- ユーザーのモーション低減設定を尊重して
- 大きく連続するアニメーションを削除または簡略化して
- 理解を助ける短く控えめなモーションだけを残して
```
明確な言葉と説明は、支援技術を使う人を含め、すべての人の助けになります。
良いプラクティス:
* ボタンとリンクに明確で説明的なラベルを使用します。
* 重要な画像に意味のある代替テキストを付けます。
* 見出しを使ってコンテンツを構造化します。
* 「ここをクリック」のような曖昧なリンクテキストを避けます。
プロンプト例:
```text theme={null}
ラベルと代替テキストのアクセシビリティを改善して:
- 必要に応じてボタンとリンクのラベルをより説明的にして
- 重要な画像の代替テキストを追加または改善して
- 見出しが明確な構造に従うようにして
トーンとブランドボイスは維持して。
```
***
## FAQ
デザインの基礎とレイアウトの詳細については、以下の質問をクリックしてください。
モバイル、タブレット、デスクトップ向けに個別にデザインし、レイアウトの適応を確認します。
Base44 でデザインする際は、次のガイドラインを使用します:
* モバイル: 縦 1 カラムを使用し、画面ごとに明確な主要アクションを 1 つに保ち、タップターゲットを大きくして十分な間隔を確保します。ズームしなくても読めるようにテキストは短くします。
* タブレット: タブレットはハイブリッドとして扱います。サイドメニューや分割レイアウトを使用できますが、ボタンはタッチしやすく保ち、非常に小さいテーブルや密なコントロールを避けます。
* デスクトップ: 広い幅を活かして複数カラムのレイアウトやサイドバーを使用します。ホバーエフェクトを追加できますが、重要なアクションはクリックまたはタップでも動作する必要があります。
* すべてのデバイス: 読みやすいフォントサイズを使用し、横スクロールを避け、スペースが足りないときは要素を重ねずに積み重ねます。コンテンツを切り取る固定の高さを避けます。
AI にレスポンシブのルールの適用を依頼することもできます。例:
```text theme={null}
このレイアウトをモバイル、タブレット、デスクトップ向けにレスポンシブにして。
横スクロールを避け、過度なスクロールなしで主要アクションが見えるようにして。
```
デザインの選択は、アプリの読み込み速度と体感速度に直接影響します。Base44 でデザインする際は、次のガイドラインに留意します:
* 大きなアセットが初回ロードを遅くしないよう、最適化された画像サイズを使用します。圧縮フォーマットを優先し、画面での表示サイズよりはるかに大きい画像のアップロードを避けます。
* 特にモバイル中心のアプリでは、重いアニメーションや複雑なエフェクトを制限します。短くシンプルなトランジションは問題ありませんが、絶え間ない動きや大きなアニメーション背景を避けます。
* レイアウトはクリーンで集中したものに保ちます。レイヤー、オーバーレイ、ネストされたコンポーネントが少ないほど、特に低スペックのデバイスで描画が速くなります。
* わずかに異なるバージョンを多数作らず、コンポーネントを再利用します。共有コンポーネントはキャッシュや維持がしやすくなります。
* すべてを一度に読み込まないようにします。可能な場合は、補助的なセクション、長いリスト、あまり使われないパネルなど、重要度の低いコンテンツを後から読み込みます。
* マップ、動画プレーヤー、ウィジェットなどのサードパーティ埋め込みには注意します。本当に価値がある場所にのみ含め、1 つの画面に多くの埋め込みを重ねないようにします。
このページは AI によって翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。