レシピアプリの作り方：レシピ、分量の調整、買い物リスト、検索

レシピアプリは、レシピの集まりに、優れた検索、分かりやすい調理ページ、そして台所で役立つ機能（人数に合わせた分量の調整、単位の換算、レシピから買い物リストを作る機能）を加えたものです。家族の料理本でも、レシピカードを載せるフードブログでも、他人に提供するレシピ製品でも、すべてをうまく機能させる最も重要な判断は、材料を文章の段落ではなく、構造化されたデータとして保存することです。そこがうまくできていれば、役立つ機能は簡単に作れます。

どんなレシピアプリかを決める

4つのどれでも、データモデルは同じです。違うのは、誰が書き込めるか、そしてページを検索エンジンに見つけてもらう必要があるかどうかです。

レシピアプリに必要なもの

ページ

• レシピの一覧またはホーム：写真、タイトル、合計時間、タグを表示するカード。
• レシピのページ：調理のための表示。写真、人数の調整、材料の一覧、番号付きの手順、メモ。
• 検索とフィルター：名前、材料、タグ（ベジタリアン、時短、デザートなど）、調理時間で絞り込み。
• レシピの追加と編集：材料を一行ずつ扱えるフォーム。
• コレクション：「平日のごはん」「クリスマス」「お母さんのレシピ」など。
• 買い物リスト：一つまたは複数のレシピから作成。

データ

• レシピ：タイトル、スラッグ、説明、人数、準備時間、調理時間、写真、タグ、出典、作成者、公開範囲。
• 材料：レシピ、順番、分量、単位、名称、メモ（「みじん切り」など）、任意のグループ（「ソース用」など）。
• 手順：レシピ、順番、本文、任意のタイマー。
• コレクションとコレクションの項目。
• 買い物リストの項目：ユーザー、材料名、分量、単位、チェック済みかどうか。

分量は数値で保存してください。「1と1/2カップ」は、分量1.5、単位カップになります。アプリが理解する単位のリストを小さく決め、「ひとつまみ」「お好みで」のような自由入力（分量なし）も許可してください。

権限

個人の料理本なら、アカウント一つと非公開のレシピがあれば十分です。家族の料理本なら、複数の人が編集できる共有のコレクションが必要です。公開サイトなら、読者はログイン不要で、編集者はログインが必要です。コミュニティなら、メンバーは自分のレシピを持ち、モデレーターは何でも非表示にできる必要があります。

使われ続ける機能

人数に合わせた分量の調整。 すべての分量に、新しい人数÷元の人数を掛けます。分数は読みやすく表示してください（0.75カップではなく、¾カップ）。中途半端な量は丸めます。調味料、焼き時間、鍋の大きさなど、分量に比例しないものもあるので、レシピに短い注記があると役立ちます。

単位の換算。 メートル法と米国の単位を切り替えられるようにします。体積は同じ種類の中で換算してください。小麦粉のカップ数をグラムに換算するには、材料ごとの密度が必要です。これは最初の機能ではなく、後の機能です。

調理モード。 大きな文字、一度に一つの手順、またはチェックボックス付きのスクロールできるリスト。調理中は画面をスリープさせないようにします（多くの端末でブラウザがスクリーンウェイクロックに対応しています）。これは、利用者から感謝される機能です。

買い物リスト。 複数のレシピから材料を合わせ、同じ材料で同じ単位のものを一つにまとめ、売り場の通路ごとに分け、店でチェックを付けられるようにします。

材料で検索。 「鶏肉とネギで何が作れる？」という検索は、材料が個別のレコードになっているからこそ可能です。アプリに検索を追加する方法を参照してください。

公開するレシピページのSEO

検索でレシピを見つけてもらいたいなら、各レシピに固有のURL、固有のタイトルと説明が必要です。レシピの内容は、JavaScriptで後から描画するのではなく、ページの読み込み時にHTMLに含まれている必要があります。データベースから生成したschema.orgのRecipe構造化データ（材料、手順、時間、人数、画像）を追加してください。そうすれば、ページの内容と常に一致します。評価は、実際に利用者がページに付けたものだけを含めてください。マークアップの仕組みは構造化データとはで解説しています。Googleの公式ドキュメントには、Googleが使う項目が載っています。

最初に効くプロンプトの例

スマホを優先して設計した、家族向けのレシピアプリを作ってください。各レシピは、タイトル、写真、人数、準備時間と調理時間、タグ、材料、番号付きの手順を持ちます。材料は一つずつ、分量、単位、名称、メモを持つ個別のレコードとして保存し、「ソース用」などの任意のセクションにまとめてください。レシピのページには、すべての分量を調整する人数のコントロール（分かりやすい分数で表示）、メートル法と米国の単位の切り替え、大きな文字、手順のチェックボックス、画面をスリープさせない調理モードを備えてください。レシピ名または材料で検索でき、タグと合計時間で絞り込めるようにしてください。利用者はレシピをコレクションに保存でき、一つ以上のレシピを買い物リストに追加できます。リストでは同じ材料をまとめ、私がチェックを付けられるようにしてください。家族はメールアドレスとパスワードでログインし、全員が編集できる一つの料理本を共有します。すべてをデータベースに保存し、写真はファイル保存領域に保存してください。サンプルレシピを六つ入れてください。

作成のステップ

1. サンプルデータでレシピのページを作る。何よりもまず、スマホで調理のための画面を見やすくしてください。
2. 材料の構造化された入力。各行が分量、単位、材料、メモになっているフォーム。さらに、テキストを行に分割して「リストを貼り付ける」欄も用意し、分割が間違った箇所は調理する人が直せるようにします。
3. 分量の調整と単位。難しいケースでテストします。⅓カップを二倍にする、卵1個を半分にする、「塩はお好みで」など。
4. 検索とフィルター。
5. 買い物リスト。「玉ねぎ2個」と「玉ねぎ1個」を「玉ねぎ3個」にまとめる。単位が違うものは推測せず、別々にしておきます。
6. ログインと共有。アプリにログインを追加する方法を参照してください。
7. 写真。アップロード時にリサイズし、ページを速く保ちます。
8. 公開ページとマークアップ（公開する場合）。公開したら、レシピページのソースを確認してください。

よくある失敗

• 材料を一つのテキスト欄に入れる。 分量の調整、買い物リスト、材料での検索ができなくなります。
• 画面に小数を表示する。 「0.333カップ」では使えません。分数で表示してください。
• レシピの前に長い思い出話がある。 自分のアプリでは、材料をなるべく上のほうに置き、思い出話がある場合は「レシピへ移動」のリンクを付けてください。
• 元の大きな写真。 スマホの写真は大きいので、リサイズして圧縮してください。
• 他サイトのレシピを公開で転載する。 個人的に取り込むことと、他人の文章や写真を再配布することは別です。
• 構造化データで偽の評価を付ける。 検索エンジンは、誤解を招くマークアップを不利に扱うことがあります。
• 栄養価を正確な数値として見せる。 計算した栄養価なら、推定値であることと、データの出典を明記してください。

既製のレシピアプリを選んだほうがよい場合

自分のレシピを保存して作るだけなら、定評のあるレシピ管理アプリが、Webサイトからの取り込み、端末間の同期、オフラインでの利用に既に対応しています。フードブログなら、ブログのプラットフォームにレシピカードのプラグインがあり、マークアップや印刷用の表示を標準で扱えることが多いです。

自作が向いているのは、既存のツールにない機能が必要なときです。原価計算やアレルゲン管理を伴う事業向けのレシピ、大家族で独自の構成を持つ料理本、献立や店舗とつながるレシピ、または完全に自分のデザインにしたいとき。週の献立を立てることが本当の目的なら、次は献立プランナーアプリの作り方を読んでください。

Mythexで作る

Mythexでは、チャットでレシピアプリを説明し、ライブプレビューのスマホサイズのフレームで調理画面を確認してから、家族や読者がスマホで開いてホーム画面に追加できる公開アドレスに公開できます。レシピと材料のための専用のPostgresデータベースと、必要に応じて写真のためのファイル保存領域を追加します。ログインは自分で用意する方式です。使う方法を選べば、エージェントが接続します。Proプランでは、アプリをAndroidとiPhoneのアプリとしてラップし、Google PlayのテストトラックとTestFlightに送ることもできます。公開レシピサイトには、フードブログのテンプレートと、モバイル対応のWebアプリの作り方のガイドが参考になります。

よくある質問