Base44 の使い方
Base44 は AI 搭載の Web サイトおよび アプリビルダー です。コーディングや技術スキルは必要ありません。構築したいものを説明するだけで、Base44 がアイデアを実現します。
Base44 で構築できるものの例
- 新しいビジネスアイデアのプロトタイプ作成
- 個人的な To-Do リストの作成
- リマインダー付きのイベントサインアップページの設定
- アンケートを構築して、回答をすぐに見る
- ダッシュボードでプロジェクトや売上を追跡
- 安全な予約システムまたは CRM の構築
- クライアントとファイルをプライベートに共有
- チャットと分析を備えたコミュニティサイトをローンチ
アイデアを実現する準備はできましたか?
今すぐアプリを構築する
ステップ 1 | アイデアを説明する
Base44 に行って、自分の言葉で構築したいものを伝えるところから始めます。 開始すると、サインアップを求められます。これにより、作業が保存され、いつでもアプリに戻ることができます。プロンプトを使用する
構築したいアプリを自分の言葉で書くだけです。例えば、「シンプルな To-Do リスト」、「ユーザーがログインできるクライアントポータル」、または考えていることなどを入力できます。好きなだけ詳細を共有してください。この最初のプロンプトはアプリの開始に役立ち、後で機能を追加したり変更したりできます。 Google Workspace ツール、Slack、GitHub などの人気ツールにアプリを接続することから始めることもできます。+ メニューをクリックして Connectors を選択し、プロンプトを送信します。詳細については、共有コネクタの設定 を参照してください。
plan モードを使用する
構築を開始する前にアプリを計画するためのヘルプが必要な場合は、plan モードを使用します。最初のプロンプトの下で Plan をオンにして、構築したいものについての集中した会話を始めます。AI は、アプリが誰のためで、何をすべきか、何を含めたいかなど、アプリについての質問をします。答えるにつれて、アイデアを進めながら調整できる構造化された計画に変えていきます。
- 意図に合わせてアプリを整列させることで、より高品質の最初の構築を得る
- 重要な詳細を前面に追加することで、後でのやり取りを減らす
- 何を指定すべきかを事前に知る必要なしにアイデアを考える
- フロー、ロール、制約を含むより完全な要件をキャプチャする
- 集中したフローに留まりながら、アイデアから実行までより速く移動する
- Base44 に移動します。
- 最初のプロンプトを入力し、プロンプトボックスで Plan トグルをオンにします。
- 質問に答え、必要に応じて詳細を追加します。
- 準備ができたら、計画で Start Building をクリックします。
既存の URL から始める
所有している既存の Web サイトから新しい Base44 アプリを開始するには Start from URL を使用します。これは、見える公開ページのピクセルレベルの開始点を提供し、フロントエンドに焦点を当てます。これには、全体的なページ構造、キーコンテンツセクション、視覚階層、ヒーローセクション、カード、リストなどの馴染みのある UI パターンが含まれます。これにより、認識可能なものをすぐにアプリエディタに入れて、すべてを最初から再構築するのではなく、AI で繰り返すことができます。 Base44 がサイトをどう使うかを選択できます:- Content & Design: サイトのコンテンツとレイアウトを再作成して、同様のサイトを構築します。
- Design only: サイトの視覚スタイルを使用して、同じ見た目と感じを持つ新しいサイトを作成します。
- 一から再設計せずに、所有している既存のサイトを再作成する
- ブランド、レイアウト、視覚階層を維持する
- 推測ではなく、堅固なページ構造で移行を開始する
- 実際のように見えて感じる高忠実度のプロトタイプを作成する
- Base44 に移動します。
- プロンプトボックスの + アイコンをクリックします。
- Start from URL をクリックします。
- 使用したい Web サイトの URL を貼り付けます。提供する URL のコンテンツを使用する権利があることを確認してください。
- 何を再利用したいかに応じて、Content & Design または Design only を選択します。
- Add をクリックします。
Figma デザインから始める
既存の Figma デザインを動作する Base44 アプリに変えるには Import from Figma を使用します。Figma でデザインした特定のフレームやセクションから始めて、Base44 にレイアウト、構造、視覚スタイルを再作成させ、ページを一から再構築する代わりに馴染みのある開始点から続行できます。
- Base44 に移動します。
- プロンプトボックスの + アイコンをクリックします。
- Import from Figma をクリックします。
- Connect to Figma をクリックします。
- Base44 に Figma へのアクセスを与えるための画面の指示に従います。
- Figma リンクを貼り付けて Import をクリックします。
Figma ファイルの要件
Figma ファイルの要件
Figma ファイルを正しく準備することで、Base44 がデザインを読み取り、動作するレイアウトとして再作成しやすくなります。
- Figma Design ファイルで作業していることを確認してください。FigJam、Slides、その他のファイルタイプはサポートされていません。
- インポートしたい 単一のフレームまたはセクション を選択します。完全なドキュメントやページレベルのリンクを使用しないでください。
- Figma で、Share をクリックして、Who has access の下で、リンクを Anyone with the link – Can view に設定します。選択したフレームまたはセクションのリンクをコピーして、Base44 の Import from Figma に貼り付けます。インポートが完了したら、必要に応じて Figma ファイルの権限をプライベートに戻すことができます。
Import from Figma は選択したフレームまたはセクションに焦点を当てます。Figma ファイルの他の部分は、別途インポートしない限り Base44 には取り込まれません。
デザインの構造化
デザインの構造化
Figma での明確な構造により、Base44 が意図に一致するレスポンシブレイアウトを構築しやすくなります。
- ページを論理的なセクションに分割する: 関連するコンテンツ (例えば、ヒーロー、機能の行、フッター) をフレームまたはグループ内にラップして、ページの各エリアが明確に定義されるようにします。
- 階層に Auto Layout を使用する: カード、ナビゲーションバー、繰り返しのコンテンツブロックなどのコンポーネントに
Auto Layoutを適用します。例えば、画像、タイトル、説明を持つ情報カードは、FrameまたはGroup、できればAuto Layoutとしてグループ化する必要があります。これにより、Base44 が要素同士の関係とそのリサイズ方法を理解しやすくなります。
- ネストを意味のあるものに保つ: 一緒に属する要素 (例えば、カード内の画像 + タイトル + 説明) をグループ化し、視覚構造を反映しない深い不要なネストを避けます。
- 一貫してアラインメントと間隔を取る: フレーム内で一貫したパディング、ギャップ、アラインメントを使用して、Base44 が間隔と階層を保持できるようにします。
ベクターと形の操作
ベクターと形の操作
インポート前にベクター要素をクリーンアップすると、配置とレンダリングがより正確になります。ベクターを平面化して簡素化することで、要素が Base44 で一度入った後の配置、スケール、レンダリング方法のサプライズが減ります。
- 複雑なベクターを平面化: ベクターが多くの別々のパス (例えば、複数の形から作られたアイコン) から構築されている場合は、可能な限り単一のベクターに平面化します。
- 平面化する前にストロークをアウトライン化: 線、円、星、および同様の形に対して: Outline Stroke を使用してから、結果を単一のベクター要素に平面化します。
- 隠れた要素を削除: インポートされたレイアウトを妨げないように、完全に隠れている、またはキャンバスから遠くに押し出されたレイヤーを削除します。
- 塗りを簡素化: 要素に複数の塗りがある場合、実際に必要なものだけを保ちます。Base44 は要素の最後の塗りのみをインポートします。
注意事項と制限
注意事項と制限
Import from Figma は、フレームの視覚デザインとレイアウトを可能な限り正確に再作成することに焦点を当てますが、現時点ではいくつかの制限があります。
- フォント: Google Fonts のみが完全にサポートされています。カスタムフォントはインポート中にデフォルトフォントに置き換えられます。Base44 内でタイポグラフィを後で調整できます。
- デザイン効果: 一部の Figma 効果はまだサポートされていません。例えば: 画像フィルター、単一要素の複数の背景レイヤー、変数。
- インポート後の微調整: アプリエディタの AI チャットまたは Edit モードを使用して、インポート後に間隔、レスポンシブ、インタラクションをいつでも洗練できます。
アプリの残りの部分の構築
アプリの残りの部分の構築
Figma フレームがインポートされたら、新しいページを完全なアプリまたは Web サイトの基礎として扱うことができます。インポートされたページを ホームページ と、構造、レイアウト、視覚言語のメインリファレンスとして使用します。AI チャットに以下を依頼します:
- どの追加ページが欠けているかを特定する (例えば、About、Pricing、Blog、Contact)。
- 同じデザイン言語とレイアウト原則に従う新しいページを作成する。
- ホームページのボタン、メニュー、リンクを新しい内部ページに接続する。
ホームページのコンテンツとデザインスタイルの両方を含めて、慎重にレビューしてください。ホームページを Web サイトの構造とデザイン言語を理解するためのメインリファレンスとして使用してください。完全な Web サイトを作成するために、どの追加ページが必要かを特定してください。同じデザイン言語、レイアウト原則、視覚スタイルを維持しながら、欠けているページを作成し、それらが直接の続きとして感じられ、切り離されていないようにしてください。完了したら、ホームページに戻って、すべての関連するボタンとリンクが適切な内部ページに移動するように接続してください。
ステップ 2 | アプリが生き生きとするのを見る
アイデアを共有すると、Base44 の AI が残りを処理します。色を選び、ボタンを配置し、メニューを整理して、すべてがクリーンに見え、スムーズに機能するようにアプリの外観を自動的に設計します。カレンダー、フォーム、またはタスクリストなどの特別なページや機能が必要な場合、Base44 はそれらをすぐに追加するので、アプリは使用準備完了です。 すべての複雑な部分も、バックグラウンドで処理されます。Base44 は、アプリのすべてのデータを安全に保存し、必要に応じてアカウントとログインシステムを管理し、アプリを動かすテクノロジーをスムーズに動かし続けます。何もセットアップしたり管理したりする必要はありません。Base44 がすべての詳細を処理するので、アイデアに集中できます。
ステップ 3 | アプリをカスタマイズする
アプリが構築されたら、それを本当に自分のものにできます。最も簡単な方法は AI チャットを使用することです。変更または追加したい内容を入力するだけで、Base44 がアプリを更新します。例えば、「メインカラーを緑に変えて」、「氏名と会社を収集するサインアップページを追加して」などと言えます。 ニーズに合わせてアプリを変更および改善する方法はたくさんあります。次のことができます:アプリの機能を変更する
アプリの機能を変更する
AI チャットで、新機能を追加したり、アプリの動作を変更したりできます:
- ユーザーが対話するためのボタンやフォームを追加する
- 誰かがサインアップしたときにウェルカムメールを送信するなどの自動化されたワークフローを作成する
- 通知、リマインダー、または自動化されたメッセージを設定する
- AI にページを追加または更新するように依頼する (例えば、「イベント用のカレンダーページを追加して」)
- アプリがユーザーにどう応答するか、または異なるタスクを管理するかの背後にあるロジックを調整する
アプリをデザインする
アプリをデザインする
AI とチャットするだけで、アプリの色、レイアウト、スタイルをカスタマイズできます。次のことができます:
- 背景色、テキストの色、またはフォントスタイルを変更する
- セクションを並べ替え、ボタンを移動、または画像とアイコンを更新する
- 変更をグローバルに、または 1 つのページにのみ適用する (例えば、「すべての画面にこの新しいフォントを適用」、または「ログインページの背景のみを変更」)
収集するデータを管理する
収集するデータを管理する
アプリが使用および収集する情報を決定します。
- AI チャットを使用してデータフローを構築または変更する (例えば、「サインアップフォームに会社名のフィールドを追加して」)。
- サインアップ、フィードバック、注文など、ユーザーから詳細を収集するためのフォームを作成または更新する。
- アプリのダッシュボードの Data から、アプリが収集するデータを整理し、誰が情報を追加、編集、または表示できるかのルールを設定し、データを他の場所で使用するためにエクスポートできます。
アプリの設定を更新する
アプリの設定を更新する
アプリにアクセスできる人と、できることを制御します。アプリのダッシュボードの Settings から、次のことができます:
- 特定の人やロールのみが情報を見たり編集したりできるよう権限を設定する (一部のページを管理者のみに表示するなど)
- アプリを公開、招待制、または特定のユーザーまたはワークスペースのメンバーに制限するかを決定する
- Google などのソーシャルログインを含む、安全なログインと登録を設定する
- カスタムユーザーロールを追加し、各ロールが何をできるかを正確に指定する (例えば、「Event Organizer というロールを作成して、イベントの追加と編集はできるがアプリ設定の変更はできないようにして」)
- 機密データを安全に保つためにプライバシーとセキュリティのルールを調整する
ステップ 4 | アプリをテストする
アプリを他の人と共有する前に、すべてがどう機能するかをテストすることが重要です。さまざまな視点からアプリを探索および確認する方法がいくつかあります:- エンドユーザーのようにプレビューと対話します。クリックしたり、フォームに入力したり、すべての機能を確認したりします。
- トップバーの More Actions アイコン をクリックして、Act as a user を選択し、特定の人物やロールとしてアプリを表示します。
- AI チャットに「ゲストとしてテストして」、「管理者が何をできるか見せて」など、主要なフローやエッジケースのテストを支援するように依頼します。
- 異なるロールや権限を持つテストユーザープロファイルを作成して、それぞれが何にアクセスできるかを確認します。
- シークレットまたはプライベートブラウザウィンドウを使用して、初めての訪問者が何を体験するかを確認します。
- デスクトップとモバイルの両方でアプリを確認して、レイアウトやナビゲーションの問題をキャッチします。
ステップ 5 | アプリを共有して公開する
アプリを共有する準備ができたら、トップバーの Publish をクリックします。 そこから、次のことができます:- アプリの Web URL をコピーします。
- Connect a custom domain または Get Domain をクリックして、独自のアドレスを接続します。
- Share your app をクリックして、メールやソーシャルで共有できるリンクを取得します。
- App Visibility を使用して、アプリにアクセスできる人を選択します。
- Publish App をクリックして、最新の変更をライブにプッシュします。
アプリエディタのガイド付きツアー
アプリエディタ内には 3 つの主要な作業エリアがあります: AI チャット、プレビュー、アプリのダッシュボードです。トップバーはそれらの上にあり、プレビュー、ダッシュボード、コード、テストツール、公開へのクイックアクセスを提供します。AI チャット
ここで Base44 とチャットします。アプリエディタの左側にあるチャットに欲しいものを入力するだけで、Base44 がアイデアを実現します。
プレビュー
画面の右側に、リアルタイムで更新されるアプリのプレビューバージョンが表示されます。プレビューを使用して、ユーザーと同じようにアプリと対話できます。アプリのさまざまな部分をクリックして、どう動作するかを確認したり、Visual Edit を使用してデザインの変更を行ったりします。
アプリダッシュボード
アプリを管理したいときはいつでも、アプリのダッシュボードに移動します。ダッシュボードでは、チームメイトを招待したり、アナリティクスとユーザーアクティビティを追跡したり、アクセスを制御したり、アプリを公開または非公開に設定したり、カスタムドメインを追加したりできます。
クレジットとプランの開始
Base44 は、AI がアプリを構築または更新するたびにクレジットを使用します。アプリをプレビューして対話してもクレジットは使用されません。サインアップすると、開始するための無料クレジットを受け取ります。 もっとやる準備ができたら、プランをアップグレードすると、バックエンド関数、カスタムドメイン、GitHub 統合、より高いクレジット制限などの機能がアンロックされます。 クレジット と プラン について詳しく学びましょう。FAQ
詳しく学ぶには、以下の質問をクリックしてください。モバイルでアプリは良く見えますか?
モバイルでアプリは良く見えますか?
はい。Base44 はモバイルデバイス用にアプリを自動的に適応させます。トップバーのデバイスメニューを使用してモバイルビューに切り替え、すべてがどう表示されるかを確認し、レイアウト、ボタン、テキストが任意の画面サイズで簡単に使えることを確認してください。
アクティビティモニターは何を表示しますか?
アクティビティモニターは何を表示しますか?
アクティビティモニターは、アプリによって行われた最新のアクションとリクエストを表示します。これを使用して、ユーザーアクティビティを表示し、パフォーマンスを追跡し、リアルタイムで問題のトラブルシューティングを行うことができます。アクティビティモニターにアクセスするには、上部の Code をクリックしてから、Activity Monitor アイコンをクリックします:
アプリのファイルとコンポーネントを表示するには?
アプリのファイルとコンポーネントを表示するには?
アプリを動かすファイルとコンポーネントを、トップバーとコードビューから確認できます。
- トップバーの More Actions アイコン をクリックして、Files used in this page を選択して、現在編集しているページで使用されているファイルを表示します。完全なファイルリストを開くには See all files を使用します。
- トップバーの Code をクリックして、アプリの完全なファイル構造を開き、コンポーネントを参照します。
- すべてを ZIP ファイルとしてダウンロードするには、Code を開いて、コードビューの右上にある Export project as ZIP アイコンをクリックします。
- 高度なバージョン管理のためにプロジェクトを GitHub に接続するには、トップバーの GitHub アイコンをクリックして、セットアップ手順に従います。
アプリのコピーを作成できますか?
アプリのコピーを作成できますか?
はい。いつでもアプリをクローンできます。これは、ライブアプリに影響を与えずに大きな変更をテストしたい場合や、既存のアプリを新しいプロジェクトの開始点として使用したい場合に便利です。Apps ページからクローンするには:
- Apps ページ に移動します。
- アプリカードの More actions アイコンをクリックします。
- Clone App をクリックします。
- アプリエディタで Dashboard をクリックします。
- Settings をクリックします。
- App Settings をクリックします。
- Clone App の横にある Create Copy をクリックします。
Base44 アプリケーションはどのようにデプロイされますか?
Base44 アプリケーションはどのようにデプロイされますか?
自動的に処理されます。Base44 には組み込みのホスティングが付属しているので、デプロイプロセスはありません。アプリが作成されると、すぐにライブで共有可能になります。
アプリをエクスポートできますか?
アプリをエクスポートできますか?
はい。いつでもアプリのコードをエクスポートできます。
- ZIP ファイルとしてエクスポート: トップバーの Code をクリックして、コードビューの右上にある Export project as ZIP アイコン をクリックします。
- GitHub にエクスポート: トップバーの GitHub アイコンをクリックして、セットアップフローに従います。
Base44 アプリのレビューのためにヘルプやコンサルティングを受けられますか?
Base44 アプリのレビューのためにヘルプやコンサルティングを受けられますか?
作業中のセルフサーブガイダンスのためには、ワークスペースのアバターをクリックして、Help Center を選択してドキュメントを開くか、https://docs.base44.com/ にアクセスしてください。より実践的なヘルプが必要な場合は、Base44 アプリの専門家のヘルプを得るためのいくつかのオプションがあります。Base44 パートナー と協力して、大規模または継続的なプロジェクトでのカスタマイズされた 1 対 1 のサポートを受けることができます。パートナーは、完全なアプリの計画と構築、複雑な統合の処理、長期的な戦略的ガイダンスを提供できます。パートナーを選ぶ →Base44 で構築している他の人々からのフィードバックが欲しい場合は、Discord コミュニティに参加 することもできます。自分のプロジェクトからアドバイス、ヘルプ、ヒントを共有できる他の人々と接続するための優れたスペースです。
アプリを非公開にできますか?
アプリを非公開にできますか?
はい。いつでもアプリを非公開にできます。アプリが非公開になると、再度公開するまで人々はアクセスできなくなります。非公開にしてもすべてのデータと設定は保存されます。アプリを非公開にするには:
- アプリダッシュボードに移動します。
- Settings をクリックして App Settings をクリックします。
- Danger Zone までスクロールして、Unpublish App をクリックしてから、ダイアログで Unpublish をクリックします。
Base44 はどのブラウザをサポートしていますか?
Base44 はどのブラウザをサポートしていますか?
Base44 は、ES6+ JavaScript、CSS Grid、Flexbox、現代の DOM API をサポートするすべての主要な現代のブラウザでスムーズに動作するように構築されています。次のブラウザの現在および最近のバージョンで Base44 を使用できます:
- Google Chrome (ES6 用バージョン 51 以上、CSS Grid 57+、Flexbox 29+)
- Mozilla Firefox (ES6 用バージョン 54 以上、CSS Grid 52+、Flexbox 28+)
- Microsoft Edge (Chromium ベース) (リリース以降フルサポート)
- Safari (CSS Grid 10.1+、Flexbox 9+、ES6 10+)
- Opera (ES6 用バージョン 38+、CSS Grid 44+、Flexbox 12.1+)
Base44 アプリの使用に対して人々に課金できますか?
Base44 アプリの使用に対して人々に課金できますか?
はい、Builder プラン以上にいる場合、アプリの使用に対して人々に課金できます。Stripe や API をサポートする他のサービスなどの支払いプロバイダーに接続して、アプリのユーザーから支払いを受け付けることができます。Secrets タブを使用して、API キーを安全に保存します。アプリの 支払いの設定 方法を確認してください。
Base44 プラットフォームバッジとは?
Base44 プラットフォームバッジとは?
プラットフォームバッジは、‘Edit with Base44’ というテキストでライブアプリの右下に表示されるラベルです。Base44 でアプリを構築したことを人々に知らせ、誰でもアプリのコピーを自分のアカウントに作成して、独自のバージョンを編集できるようにします。
注意:
- プラットフォームバッジの削除は無料プランでは利用できません。バッジを非表示にするには、有料プランにアップグレードする必要があります。
- アプリがプライベートに設定されている場合、バッジは表示されません。
- アプリが公開に設定されている場合、誰もがバッジを見ることができます。誰かがそれをクリックすると、自分のアカウントにアプリのコピーを作成して、独自のバージョンのアプリを編集できます。
- アプリのダッシュボードに移動して Settings をクリックします。
- App Settings をクリックします。
- Platform Badge トグルを有効または無効にします。
Base44 アカウントに国や地域の制限はありますか?
Base44 アカウントに国や地域の制限はありますか?
米国に拠点を置く企業として、米国財務省海外資産管理局 (OFAC) によって発行された要件に準拠しています。これらの規制により、OFAC 制裁リストに表示される特定の個人、団体、または管轄区域にサービスを提供することは禁止されています。次の国と地域は制限されています:
- イラン
- 北朝鮮
- シリア
- キューバ
- クリミア地域
- いわゆるドネツク人民共和国
- いわゆるルガンスク人民共和国
- Base44 サービス (Base44 サイトを含む) に登録または使用することはできません。
- 次の拡張子を持つドメインを Base44 に接続することはできません (ポインティングまたはネームサーバーによる):
- キューバ: .cu
- イラン: .ir、.xn—mgba3a4f16a (ایران.)
- 北朝鮮: .kp
- シリア: .sy、.xn—ogbpf8fl (سورية.)
キーボードショートカットを使用してアプリエディタをナビゲートできますか?
キーボードショートカットを使用してアプリエディタをナビゲートできますか?
はい。Cmd+K (Mac) または Ctrl+K (Windows) を押して、コマンドパレットを開きます。そこから、ビュー間のナビゲート、ページの切り替え、ファイルの開放、エンティティへのジャンプ、公開やコラボレーターの招待などのクイックアクションのトリガー、アプリを離れることなく Base44 ドキュメントを検索できます。コマンドパレットは、ワークスペースのホーム画面とアプリエディタの両方から利用できます。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。