テンプレート

テンプレートの使い方

ゼロから始めることも一つの方法ですが、MonstarX にはより速いパスがあります。プロフェッショナルがデザインした多数のテンプレートが利用可能です。ライブラリを閲覧し、ビジョンに合うものを見つけ、ターゲットを絞った編集を行い、独自のものに仕上げましょう。

---

テンプレートとは？

テンプレートは、構造、UI パターン、主要ページがすでに用意されたプロジェクトの設計図です。アプリをゼロから説明する代わりに、完成した土台からスタートして、具体的なニーズに合わせて調整できます。

すべてのテンプレートは本番品質で作られています — レスポンシブ、クリーン、実際のサービスに接続する準備が整っています。

---

利用可能なテンプレート

テンプレート	含まれるもの
SaaS Landing	マーケティングサイト + ウェイトリスト収集
E-Commerce	商品リスト、カート、チェックアウト
Dashboard	チャート、KPI カード、データテーブル
Task Manager	Kanban ボード + 締め切り管理
Portfolio	プロジェクト紹介 + お問い合わせセクション
Blog Platform	記事リスト + コンテンツエディター
Booking System	カレンダー選択 + 支払いフロー
Mobile App	React Native + Expo スターター

---

テンプレートの使用方法

ステップ 1 — テンプレートセクションを開く

MonstarX を開くと、ホーム画面に Templates タブがあります。クリックすると全ライブラリが開きます。

表示されるもの: テンプレートカードのギャラリー。各カードにテンプレート名と短い説明が表示されます。

ステップ 2 — 閲覧して選ぶ

利用可能なオプションをスクロールしてください。各カードにはそのテンプレートの内容が記載されています。時間をかけてじっくり探しましょう。

ヒント: アプリの種類（E-Commerce、SaaS、Portfolio など）がある程度決まっている場合は、カテゴリでフィルタリングするとより速く絞り込めます。

ステップ 3 — テンプレートを選択する

プロジェクトの目的に最も合うテンプレートをクリックしてください。MonstarX がプレビューを読み込み、コミットする前にレイアウトを確認できます。

期待される結果: テンプレートのプレビューが開き、デフォルトのページと構造が表示されます。

ステップ 4 — 自分のものにする

テンプレートを選択したら、何を変更するかを MonstarX に伝えましょう。以下のことができます。

• コピー、ブランド名、カラーパレットを更新する。
• ページを追加または削除する。
• レイアウトを変更したりセクションを調整する。
• 追加したい新しい機能を説明する。

テンプレートとのやり取りは、通常の MonstarX プロジェクトと同じ方法で行います — チャットでの自然言語プロンプトです。

プロンプトの例:

「ブランド名を Acme Corp に変更し、ヒーローの見出しを「Ship faster, worry less」に更新し、ウェイトリストフォームを「Book a demo」ボタンに置き換えてください。」

期待される結果: MonstarX が変更を適用し、影響を受けたセクションが Preview で再生成されます。

ステップ 5 — 構築を続ける

ここからは、通常の MonstarX プロジェクトとして作業します。以下のことができます。

• インテグレーションを接続する（Supabase、Stripe、Resend など）。
• Code タブで生成されたコードを確認・編集する。
• アプリを公開してライブ URL を共有する。
• プロジェクトを GitHub にプッシュする。

Workbench の完全なガイドは機能をご覧ください。

---

問題の解決

問題	解決策
テンプレートのプレビューが読み込まれない	ページを更新して、テンプレートを再度選択してください。
変更が期待通りに反映されない	プロンプトを具体的にしてください。どのセクションを変更し、新しいコンテンツが何であるかを正確に説明してください。
間違ったテンプレートを選択してしまった	新しいプロジェクトを開始して選び直してください — テンプレート選択はコードが生成される前に行うので、何も失われません。

---

注意: テンプレートの名前と利用可能なオプションは現在の MonstarX ビルドを反映しています。ライブラリは今後拡張される可能性があります。