SparkAISparkAI
無料で始める
使い方ガイド

やりたいことから、
始められる

アイデアを形にするための6ステップ。
制作スタジオにすべて揃っています。

01
アイデアを画面にしたい

日本語で話すだけで、画面が出来上がる

アプリのアイデアを日本語で伝えると、画面構成とUIコンポーネントを作ってくれます。「3画面に増やして」「フォームを追加して」と会話を続けながら叩き台を仕上げられます。

  • 16種のUIコンポーネントを使用
  • 複数画面・ナビゲーション設計対応
  • 日本語で自然に指示できる
  • AIが却下したら元の状態に戻せる
家計簿アプリを作って。収支を記録して月次グラフで確認できるようにしたい
ホーム・記録・分析の3画面で設計しました。グラフは棒グラフで月次推移を表示します
記録画面にカテゴリ選択を追加して
02
画面の構成を整理したい

ホーム・詳細・設定、複数画面をまとめて管理

BottomNav、Tab、ドロワーメニューを含む複数の画面と遷移を一つのプロジェクトで管理できます。Screensタブで画面の順番や名前をいつでも整理できます。

  • 最大10画面まで設計可能
  • BottomNav / Tab / DrawerメニューUI
  • 画面間遷移の設計
  • Screensタブで画面の追加・並び替え
ホーム
詳細
設定
03
見た目をもっと整えたい

色・余白・フォントを部品ごとに調整できる

AIが出した叩き台を、レイヤーパネルとスタイルパネルで手作業で整えられます。色・余白・角丸・フォントサイズを変更でき、AIデザイン診断でアドバイスも受けられます。

  • レイヤーパネルで部品を管理
  • 色・余白・角丸・フォントを調整
  • AIデザイン診断でアドバイスを受ける
  • 変更はリアルタイムにプレビューへ反映
レイヤー
ヘッダー
統計カード
リスト
BottomNav
スタイル
背景色#10b981
余白16px
角丸12px
サイズ16px
04
コードを取り出して実装したい

React Native / Web の実装コードをそのまま出力

プレビューの画面からReact Native(Expo対応)またはReact + Tailwind CSSのコードを出力します。生成後に構文チェックを行い、エラーがあれば自動修正を試みます。

  • React Native(Expo SDK対応)
  • React + Tailwind CSS(Web)
  • 生成コードの構文検証(Babel)
  • コードのコピー・ダウンロード
// React Native (Expo)
export function HomeScreen() {
return (
<View style={styles.container}>
<Hero title="今月の支出" />
<ExpenseList items={data} />
</View>
)
}
05
スマホで動作確認したい

Expo SnackにワンクリックでQRコード確認

生成したReact NativeコードをExpo Snackに転送して、ブラウザ上でそのまま動作確認できます。スマホの実機確認もQRコードから可能。コードにエラーがあった場合は自動で修正を試みます。

  • ワンクリックでExpo Snack転送
  • ブラウザ上でのリアルタイムプレビュー
  • QRコードから実機確認
  • エラー時の自動修正・修正バナー表示
Expo Snack で開く
snack.expo.dev/abc123
✓ 構文チェック通過・転送完了
06
チームやクライアントに見せたい

読み取り専用URLで即共有、ギャラリー公開も

プロジェクトはすべて自動保存されます。読み取り専用URLでチームやクライアントに共有でき、ギャラリーに公開すると他のユーザーがテンプレートとして使えるようになります。

  • プロジェクト自動保存(作成直後から)
  • 読み取り専用URLで共有
  • ギャラリー公開・非公開を後から切り替え
  • チャット履歴・ファイルも保存
共有設定
非公開(自分のみ)
URL共有(閲覧のみ)
ギャラリーに公開
spark-ai.app/share/abc123

コード生成の
信頼性について

生成されたコードは構文チェックを行い、エラーが検出された場合は自動で修正を試みます。Expo Snack への転送前に検証が完了するため、エラーで止まるケースを減らしています。

  • Babel パーサーによる構文検証
  • エラー検出時の自動修正ループ(最大2回)
  • 修正が行われた場合の通知バナー
  • Expo Snack 対応コードのみを出力
コード生成フロー
1
AIがコードを生成
2
Babel構文チェック
3
エラー検出 → 自動修正
4
Expo Snackへ転送
SparkAI

まずは触ってみる

テンプレートから始めるか、ゼロから1画面作るか、お好きな方で。