Skip to main content
コンポーネントライブラリは、洗練された既製の UI コンポーネントのコレクションです。アプリエディタの AI チャットから直接アプリに追加できます。レイアウトを一から説明する必要はありません。厳選されたコンポーネントを閲覧して選ぶだけで、Base44 がアプリ内に再構築します。
コンポーネントを追加すると、Base44 がサイトに合わせてテーマを適用します。汎用的なブロックをそのまま配置するのではなく、色、フォント、コンテンツをアプリに合わせて調整します。AI チャットに依頼すれば、デザインをさらにカスタマイズすることもできます。
All components が選択され、Categories リストとカラフルなコンポーネントグリッドが表示された Component library ウィンドウのスクリーンショット

アプリエディタのコンポーネントライブラリ

​
コンポーネントライブラリを開く

コンポーネントライブラリは、AI チャットのプラスメニューから開きます。プラスメニューはプロンプトを入力する場所の横にあります。
コンポーネントを選択すると、AI チャットは自動的に Build mode に切り替わります。チャットモードの詳細は、AI チャットモード を参照してください。
コンポーネントライブラリを開くには:
  1. アプリエディタに移動します。
  2. AI チャットで、プロンプトボックスの横にあるプラスアイコンをクリックします。
  3. Explore component library をクリックします。
Explore component library にカーソルを合わせた AI チャットのプラスメニューのスクリーンショット

プラスメニューからコンポーネントライブラリを開く

​
コンポーネントを閲覧してプレビューする

コンポーネントライブラリは大きなウィンドウで開きます。上部に検索ボックス、左側にカテゴリの一覧があります。All components にはライブラリのすべてが表示されます。各カテゴリは、Commerce、Navigation、Booking & Scheduling など、目的ごとにコンポーネントをまとめています。 コンポーネントを探す方法は 3 つあります。
  • 検索: 検索ボックスにキーワードを入力します。開いているカテゴリ内を検索します。ライブラリ全体を検索するには、先に All components を選択してください。
  • カテゴリ: 左側のカテゴリをクリックすると、そのカテゴリのコンポーネントだけが表示されます。スマートフォンでは、カテゴリは検索ボックスの上に横一列で表示されます。
  • フィルター: Filters をクリックすると、タグで一覧を絞り込めます。
コンポーネントにカーソルを合わせると、動作を確認できます。クリックすると詳細が開きます。詳細では、Desktop と Mobile を切り替えられるライブプレビューと短い説明が表示されます。一部のコンポーネントでは、Try different states で追加前に各状態を確認できます。コンポーネント名の横の矢印で、前後のコンポーネントに移動できます。
Commerce カテゴリが強調表示され、そのコンポーネントが Filters とともに表示されたコンポーネントライブラリのスクリーンショット

コンポーネントライブラリでカテゴリを閲覧する

​
コンポーネントを追加する

コンポーネントの詳細から、AI にその使い方を伝えます。次に、プロンプトに追加するか、すぐに構築します。1 つのメッセージで追加できるコンポーネントは 1 つです。メッセージを送信すると、Base44 はコンポーネントをアプリ内の React コードとして再構築します。スタイル、フォント、文言もデザインに合わせて調整します。 アプリにコンポーネントを追加するには:
  1. アプリエディタの AI チャットで、プロンプトボックスの横にあるプラスアイコンをクリックします。
  2. Explore component library をクリックします。
  3. 目的のコンポーネントをクリックします。
  4. How should the AI use it? で、配置する場所を説明します。たとえば、ページやセクションです。この手順は省略できます。
  5. Add to chat をクリックすると、プロンプトに配置されます。送信前にメッセージを編集できます。すぐに送信する場合は Build now をクリックします。
ライブプレビュー、説明、強調表示された Add to chat と Build now が表示されたコンポーネント詳細のスクリーンショット

Add to chat と Build now が表示されたコンポーネントの詳細

コンポーネントの追加についての補足:
  • クイック追加: 詳細を開かずにコンポーネントを追加するには、カードの + をクリックします。
  • もう一度確認する: 後でコンポーネントを再確認するには、プロンプトボックス内か送信済みメッセージの上にあるチップをクリックします。
  • 新しいコードライブラリ: アプリにまだないコードライブラリがコンポーネントに必要な場合があります。その場合、Base44 はコンポーネントの構築の一環として、インストールの承認を求めます。詳細は npm パッケージの追加と使用 を参照してください。

​
よくある質問

質問をクリックすると詳細が表示されます。
1 つのメッセージで追加できるコンポーネントは 1 つです。別のコンポーネントを追加するには、コンポーネントライブラリをもう一度開き、同じ手順を繰り返します。
いいえ。コンポーネントの追加は通常の構築メッセージです。そのため、他のプロンプトと同じようにクレジットを使用します。コンポーネントの閲覧や追加に別途料金はかかりません。
はい。構築されたコンポーネントはアプリの一部になります。そのため、アプリの他の部分と同様に、AI チャットにスタイル、コンテンツ、レイアウトの変更を依頼できます。
このページは AI によって翻訳されました。最も正確で最新の情報については、英語版 を参照してください。