Getting Started
使い方ガイド
登録から、画面の叩き台作成、コードの土台出力まで。4ステップで使い始められます。
Step 01
30秒
アカウントを作成する
メールアドレスまたはGoogleアカウントで登録するだけ。クレジットカード不要で、すぐに使い始められます。
メールアドレスでの登録はパスワード設定のみ
Googleログインなら1クリックで完了
無料プランで全機能を試せます
SparkAIへようこそ
アカウントを作成してください
Googleで続ける
メールアドレス
you@example.com
アカウントを作成
Step 02
30秒
やりたいことを話す
スタジオを開いたら、チャット欄にアプリの概要を入力します。具体的でも曖昧でも構いません。足りない部分は会話で詰めていきます。
「ヘルスケアアプリ、緑系で」のように短くてもOK
目的・ターゲット・雰囲気を添えると意図が伝わりやすい
参考画像も添付できます
フィットネスアプリを作りたい。筋トレの記録と、カロリー管理ができるやつ。赤系のダークUIで。
かっこいいフィットネスアプリですね！ダッシュボード・ワークアウト記録・カロリー管理の3画面構成で作りましょうか？
アイデアを入力してみよう…
Step 03
数秒〜
画面で確かめ、会話で整える
提案された画面をプレビューで確認し、「色を変えて」「ボタンを大きく」など具体的な指示で叩き台を整えます。レイヤーから直接編集することもできます。
「却下する」で提案前の状態に戻せます
「採用する」で確定して次のステップへ
レイヤーパネルで各部品を選択・編集
レイヤー
DashboardScreen
WorkoutCard
CalorieGraph
AddButton
Step 04
1クリック
コードをエクスポートする
UIが完成したら、React NativeまたはWebのコードをワンクリックで取得。Expo Snackに貼り付けると実機でも確認できます。UISpec JSONもダウンロード可能です。
「Claude AIでコード生成」をクリックするだけ
Expo SnackでiPhone/Androidをシミュレート
コードはそのまま開発に使えます
使いこなすためのヒント
具体的に伝えるほど精度が上がる
「青系でモダンなUI」より「#3B82F6をアクセントにしたフラットデザイン」の方が理想に近づきます。
修正は何度でも無料
「もっとシンプルにして」「フォントを大きくして」など、自然な言葉で何度でも調整できます。
参考画像を渡すと方向が定まりやすい
スクリーンショットや参考サイトの画像をアップロードすると、スタイルの参考として読み取られます。
画面数は後から増やせる
まず1画面作って、「続いてログイン画面も追加して」と指示するだけで複数画面対応になります。