AIでレシピアプリを作る方法

最初の版は小さく保ちましょう。レシピアプリは多方向に広げられますが、最短ルートは明確なVersion 1を作ることです。

まず、基本のユーザーフローを決めます。

• レシピを一覧で見る
• 名前や材料名で検索する
• 食事の種類、料理ジャンル、準備時間で絞り込む
• レシピ詳細ページを開く
• アカウントが必要ならお気に入りを保存する

最初の構築では、画面を洗い出します。

• ホームまたはブラウズ画面
• レシピ一覧画面
• レシピ詳細画面
• 必要なら保存済みレシピ画面
• アカウントが重要な場合のみ、簡単なプロフィールまたはサインイン画面

次に、各レシピに必要なデータを決めます。

• タイトル
• 短い説明
• 画像
• 準備時間
• 調理時間
• 分量
• 材料
• 作り方の手順
• vegetarian、quick、gluten-free などのタグ

また、これがWebサイトなのかモバイルアプリなのかも決めましょう。Moremadeでは、WebサイトはReact + Tailwindのコードとして作成されます。モバイルアプリはReact Native with Expoで構築されます。主にスマホで使ってほしいなら、モバイルアプリとして始めるのがよいでしょう。

最初のプロンプトは、構造を決めるので重要です。画面、データ項目、動作を具体的に書きましょう。"レシピアプリを作って"のような曖昧な依頼から始めないでください。

良いプロンプトには次の要素があります。

• プラットフォーム: Webかモバイルか
• 想定ユーザー
• 必要な画面
• 重要な操作
• サンプルコンテンツ
• 見た目のスタイルを平易な言葉で

以下は、よい出発点です。

React Native (Expo) で、家庭で料理する人向けのモバイルレシピアプリを作ってください。おすすめレシピとカテゴリを表示するホーム画面、食事の種類・料理ジャンル・準備時間で検索と絞り込みができるブラウズ画面、画像、材料、手順を1つずつ表示する作り方、分量、準備時間、調理時間、タグを含むレシピ詳細画面、保存済みレシピ画面を含めてください。12件のサンプルレシピデータを使ってください。大きめのレシピ写真、シンプルなボトムナビゲーション、余白をしっかり取った、見やすくすっきりしたデザインにしてください。検索と絞り込みはサンプルデータで動作するようにしてください。

これで、プロジェクトを複雑にしすぎずに、具体的な初期案を生成できます。

最初の構築が終わったら、ライブプレビューを開いて基本を確認します。

• ナビゲーションはわかりやすいか
• ユーザーはレシピをすぐ見つけられるか
• 料理中に詳細ページが読みやすいか
• 絞り込みは直感的か
• スマホ画面で文字は十分な大きさか

変更は1回につき1つずつ、小さな追加入力で行いましょう。全面的な再設計を頼むより、うまくいくことが多いです。

役立つ例を3つ挙げます。

• "検索をブラウズ画面の上部に移動し、絞り込みは横並びのチップ列にして、検索のプレースホルダーを 'Search recipes or ingredients' にしてください。"
• "レシピ詳細画面に、レシピを保存する固定ボタンを追加し、材料と作り方の行間を広げて読みやすくしてください。"
• "一般的なサンプル料理を、より現実的な平日向けのメニューに差し替え、high-protein、vegetarian、under-30-minutes のようなタグを追加してください。"

Moremadeにはビジュアルインスペクターもあるので、要素を指して変更できますし、生成されたソースをより直接確認したい場合はコードビューも使えます。あとで変更が悪化した場合に戻せるよう、バージョン履歴も役立ちます。

多くのレシピアプリは、Version 1ではユーザーアカウントや決済を必要としません。バックエンド機能を追加する明確な理由がない限り、静的なサンプルデータから始めましょう。

次のような場合はSupabaseを使います。

• 端末をまたいで保存レシピを使いたいユーザーアカウント
• ユーザーが作成したレシピ用のデータベース
• アップロードしたレシピ写真のファイル保存

次のようなものを販売する予定があるならStripeを使います。

• プレミアムな献立セクション
• 有料レシピパック
• 高度な機能のサブスクリプション

MoremadeにはSupabaseとStripeの組み込みコネクタがあります。ブラウズ、検索、レシピ詳細だけで十分なら、最初は両方とも省略してかまいません。ユーザーフローがうまく動くようになってから追加すればよいです。

実践的な順番は次のとおりです。

1. サンプルレシピでアプリを作る
2. 画面と操作を確認する
3. ユーザーアカウントや保存データが必要ならSupabaseを追加する
4. 明確な有料機能がある場合のみStripeを追加する

こうすると、最初の版はシンプルで、テストもしやすくなります。

レシピアプリは、主にキッチンで、小さな画面で、片手で使われます。それに合わせてテストしましょう。

次の点を確認してください。

• レシピタイトルが不自然に折り返されない
• 材料一覧をすばやく見渡せる
• 作り方の手順に十分な余白がある
• 絞り込み操作が親指で使いやすい
• 写真の読み込みサイズが適切
• 保存レシピへ簡単に戻れる

また、現実的な長さのコンテンツでもテストしてください。短いダミーレシピでは問題なく見えても、本物のレシピでレイアウトが崩れることがあります。

違和感があるときは、広い不満ではなく、狙いを絞ったプロンプトを送りましょう。たとえば次のようにします。

• "レシピカードの画像の高さを下げて、1画面にもっと多くのレシピが表示されるようにしてください。"
• "タッチ入力しやすいように、材料のチェックボックスを大きくしてください。"
• "タイトルの下に、分量、準備時間、調理時間を1つの要約行で表示してください。"

Webサイトとして作っている場合でも、スマホサイズのビューポートで必ずテストしてください。レシピサイトはモバイルブラウザからの利用が多いです。

外部テストに出せる状態になったら、公開しましょう。

Moremadeでは、無料の yourname.moremade.ai サブドメインにワンクリックで公開できます。有料プランでは、独自ドメインを接続できます。ドメインはMoremade内で購入することもできます。

初期テストなら、無料のサブドメインで十分なことが多いです。ドメイン代を払う前にフィードバックを集めたり、細部を整えたりしたいときに便利です。

クライアントやチームと進めているなら、ZIPでソース全体を書き出すか、GitHubにプッシュするのもおすすめです。Moremadeはその両方に対応しています。コードを手元に残せて、1つのホスティング環境に縛られないからです。

自然なリリース手順は次のとおりです。

• 一時的なサブドメインに公開する
• 少人数でテストする
• レイアウトとコンテンツの問題を修正する
• プロジェクトに価値が出た段階で独自ドメインを接続する

最大の失敗は、たいていコードではなく、スコープとプロンプトにあります。

次の点に注意してください。

• 最初の構築でやりすぎる
• 必須機能と将来アイデアを混ぜる
• メインのレシピフローを証明する前にサインインを追加する
• "もっと良くして" や "モダンにして" のような曖昧なプロンプトを使う
• 長い材料リストや実際の手順でテストしない
• モバイルでの読みやすさを無視する

役立つ習慣もいくつかあります。

• Version 1を短い箇条書きで定義する
• 実際のレシピに近いサンプルデータを使う
• 1画面または1操作ずつ改善する
• バックエンド機能は、製品に必要になってから追加する
• 安定した節目でコードを書き出す

この流れに沿えば、より早く動くレシピアプリを作れて、次に何を作るべきかもより明確に判断できます。