クイックスタート:最初のアプリを作る
要点無料アカウントを作成し、プロジェクト一覧のプロンプト欄にアプリでやりたいことを書いて「作成する」を押します。MonstarX が機能を計画してアプリを作成し、たいていは数分でプレビューに動くアプリが表示されます。触って試し、チャットで変更を頼んだら、「公開」を押して your-app.monstarx.app でオンラインに公開しましょう。
これから数分で、ページ、データベース、サインインを備えた本物の Web アプリを作り、インターネットに公開します。コードを書く必要はありません。必要なのは、1〜2文で説明できるアイデアだけです。
例として、ヨガスタジオの予約サイトを作ります。自分のアイデアがあれば、そちらを使ってください。
- 最新のブラウザ(Chrome、Safari、Edge、Firefox)が使えるパソコンかスマートフォン。
- 10分ほどの時間。
ステップ 1:無料アカウントを作成する
Section titled “ステップ 1:無料アカウントを作成する”-
monstarx.com を開いて 作成を始める を押します。すでにアカウントをお持ちの場合は サインイン を押します。
-
メールアドレス、または表示されていれば Google や GitHub でアカウントを作成します。Free プランならクレジットカードは不要です。
MonstarX のアカウントは、作ったアプリとは別のものです。アプリごとに、その利用者のための専用のサインインが用意されます。
ステップ 2:アプリの内容を伝える
Section titled “ステップ 2:アプリの内容を伝える”サインインすると、MonstarX のホームである プロジェクト一覧 が開きます。一番上の大きなプロンプト欄には 次は何を作りましょうか? と表示されています。
-
プロンプト欄をクリックし、誰のためのアプリで、利用者がそこで何をできるようにしたいかを普段の言葉で書きます。
ヨガスタジオの予約サイト:週間のクラス時間割、クラスごとの定員、会員のサインイン、予約したときの確認メール。
-
作成する を押すか、Enter を押します(Shift Enter で改行します)。
何を書けばいいか迷ったら、プロンプト欄の下にあるアイデア(顧客ポータル、予約サイト、社内ツール、AI アシスタント、マーケットプレイスアプリ)をクリックして入力し、内容を自分に合わせて書き換えましょう。入力の手を止めると、AI で自動改善 が、ざっくりしたアイデアを詳しいリクエストに書き直すことを提案します。AI で自動改善をご覧ください。
今は気にしなくていいオプション
Section titled “今は気にしなくていいオプション”プロンプト欄の下にはいくつかのスイッチがあります。最初のアプリでは、どれも使わなくてかまいません。
| オプション | できること |
|---|---|
| プランから始める | 作成の前に、利用者、アプリの名前、見た目などについて MonstarX がいくつか質問します。プランファーストをご覧ください。 |
| デザインを先に | 完成品のような最初の画面がいくつか表示され、選んだものがアプリ全体の見た目になります。デザインファーストをご覧ください。 |
| 自動(モデル) | リクエストごとに最適な AI モデルを選びます。モデルを選ぶをご覧ください。 |
| クリップのアイコン | スクリーンショット、モックアップ、資料、スプレッドシートを添付します。ファイルを添付するをご覧ください。 |
| インポート | GitHub、Lovable、.zip、公開中の Web サイトなど、お持ちのアプリを取り込みます。アプリをインポートするをご覧ください。 |
| Figma | Figma のデザインを動くアプリにします。Figma デザインから作るをご覧ください。 |
| エージェント | Claude Code、Codex、Cursor で作ったアプリを MonstarX に送ります。コーディングエージェントから始めるをご覧ください。 |
ステップ 3:作成の様子を見る
Section titled “ステップ 3:作成の様子を見る”MonstarX がプロジェクトを作成して開きます。ここからの作業は、ブラウザではなく MonstarX のクラウドで行われます。
画面には次のものが表示されます。
- チャットの一番上にあなたのリクエスト、その下に MonstarX が今していること(「推論中」「機能プランを作成中…」「コードを作成中」など)。
- 機能プラン:「週間クラス時間割」「会員のサインインと新規登録」のように、これから作るものの短いチェックリストです。作成が進むと一つずつチェックが付きます。チャット上部の 機能 のバーで、いくつ完成したかがわかります。
- 右側のプレビュー:表示できるものができるまでは、タイマー付きで アプリを作成中… というカードが表示され、その下で待ち時間に遊べる小さなゲーム Monstar Run ができます(スペースキーでジャンプします)。
最初の作成は、たいてい数分で終わります。大きなアプリほど時間がかかります。
ステップ 4:アプリを試す
Section titled “ステップ 4:アプリを試す”作成が終わると、プレビューにアプリが表示されます。本物のアプリが動いているので、訪問者と同じように、あちこちクリックしたり、フォームに入力したり、新規登録したりしてみましょう。
チャットでは、次のものを確認しましょう。
- デモアカウントを用意しました:アプリにすぐサインインできるよう MonstarX が用意したメールアドレスとパスワードです(アプリにサインイン機能がある場合)。横のボタンでコピーできます。
- プランの機能はすべて完成しました:アプリで今できることの短いまとめです。
- 次に追加できる機能のアイデア:次の機能の提案です。追加 を押してプランに入れ(または すべて追加)、作成する を押します。使うかどうかは自由です。
MonstarX は、作成した内容をもとにプロジェクトの短い名前と説明も付けます。上部の名前をクリックすれば、いつでも変更できます。
ステップ 5:頼めば何でも変えられる
Section titled “ステップ 5:頼めば何でも変えられる”同じチャットで続けましょう。変えたいことを普段の言葉で書き、送信 を押します。
最初の変更におすすめの例です。
- 「ヘッダーを濃い緑にして、見出しには明朝体のフォントを使ってください。」
- 「講師紹介のページを追加して、一人ひとりの写真と短いプロフィールを載せてください。」
- 「クラスが満席のときは、予約ボタンの代わりにキャンセル待ちボタンを表示してください。」
言葉で説明するより指し示したいときは、プレビューの上にある 編集 を押し、変えたいページの部分をクリックして、そこをどう変えるか書きます。編集モードをご覧ください。
変更はすべてバージョンとして保存されます。気に入らない変更があれば、上部の バージョン を開いて、一つ前のバージョンを復元しましょう。バージョンをご覧ください。
ステップ 6:公開する
Section titled “ステップ 6:公開する”満足したら、アプリをインターネットに公開しましょう。
-
プロジェクトの右上にある 公開 を押します。
-
サイトを公開 を押します。メニューに進み具合(サイトを準備中、サイトをビルド中、サイトを公開中)が表示されます。処理の間、メニューは閉じてもかまいません。
-
サイトを見る で開くか、リンクをコピー で共有します。
これで、プロジェクト名から作られた専用のアドレス(yoga-studio-booking.monstarx.app など)で、HTTPS 付きでアプリが公開されました。後でアプリを変更したら、公開 から 再公開 を押すと公開中のサイトが更新されます。訪問者が作りかけの変更を目にすることはありません。アプリを公開するをご覧ください。
sagebrookyoga.com のような自分だけの名前を使いたいですか?数クリックでドメインを購入することも、お持ちのドメインを接続することもできます。
次にやること
Section titled “次にやること”- しっかりテストする。 MonstarX は実際のブラウザでアプリをテストし、うまくいかなかった部分を修正できます。QA テストをご覧ください。
- データを見る。 管理 タブでは、新規登録した人やすべての予約をシンプルなフォームで確認できます。管理パネルをご覧ください。
- リクエストの精度を上げる。 上手な頼み方をご覧ください。
- 画面に慣れる。 ワークスペースの見方をご覧ください。
よくある質問
Section titled “よくある質問”最初の作成にはどのくらい時間がかかりますか?
たいてい数分です。機能の多い大きなアプリでは、もっと時間がかかります。作成中にタブを閉じても MonstarX 上で作成は続き、完了したときに通知を受け取ることもできます。
最初のリクエストには何を書けばいいですか?
誰のためのアプリで、利用者がそこで何をできるようにしたいかを1〜3文で書きましょう。ほかのことは後から追加できます。上手な頼み方をご覧ください。
最初のアプリを作るのにお金はかかりますか?
Free プランならかかりません。リクエストのたびにプランの使用量を少しずつ使いますが、Free プランには小さなアプリを作成して公開できるだけの使用量があります。使用量と上限をご覧ください。
作成を止めることはできますか?
できます。プロンプト欄の赤い 停止 ボタンを押します。それまでに作成した内容は残り、新しいリクエストで続けられます。
作成が終わるとすぐにアプリが公開されますか?
されません。公開 を押すまで、専用のアドレスでインターネットに出ることはありません。見られるのは、あなた、プロジェクトを共有した人、プレビューのリンクを送った人だけです。
うまくいかないときはどうすればいいですか?
見えている状況をチャットで MonstarX に伝えるか、バージョン から以前のバージョンを復元します。トラブルシューティングをご覧ください。