技術・開発 更新日: 2025年1月12日

CookSuggestアプリ開発秘話｜料理提案ツールの技術と工夫

📅 公開日: 2025年1月15日 🔄 最終更新: 2025年1月15日
記事のアイキャッチ画像

「冷蔵庫にある食材で何か作りたいけど、何を作ればいいかわからない...」仕事終わりに疲れて帰宅し、冷蔵庫を開けて途方に暮れた経験は誰にでもあるはずです。私自身、一人暮らしを始めてから毎日この問題に直面していました。そんな日々の悩みを解決するために開発したのが「CookSuggest」という料理提案アプリです。この記事では、開発の裏側、技術的な実装、そしてユーザー体験向上のために試行錯誤したポイントを紹介します。

CookSuggestを作ったきっかけ

日常の「料理の悩み」から生まれたアイデア

このアプリを作ったきっかけは、極めて個人的な悩みでした。社労士として働きながらプログラミング学習をしていた時期、仕事で疲れて帰宅すると「何を作るか考えるのも面倒」という状態になることが多かったのです。

レシピサイトは数多くありますが、以下のような課題がありました：

  • 検索が面倒：「今ある食材」を1つずつ検索条件に入力するのが手間
  • レシピが多すぎて選べない：検索結果が何百件も出て、かえって迷う
  • 冷蔵庫の在庫を活かせない：「じゃがいも」で検索しても、他に必要な食材が多すぎる
  • 献立のマンネリ化：いつも同じようなものを作ってしまう

「今ある食材を選ぶだけで、パッと料理が提案されたら便利だな」というシンプルな思いから、CookSuggestの開発をスタートしました。

コンセプトの決定：3クリックで料理決定

開発前に決めた最重要コンセプトは「3クリックで料理を決定できる」ことでした。

  • 1クリック目：食材カテゴリーを選択（肉、野菜、など）
  • 2クリック目：具体的な食材を選択（鶏肉、じゃがいも、など）
  • 3クリック目：提案された料理を選択

このシンプルさを実現するために、UIデザインと技術実装の両面で工夫が必要でした。

技術選定と設計思想

セクション画像

アーキテクチャの全体像

CookSuggestは以下の構成で実装しています： 

技術スタック：
- フロントエンド: HTML/CSS/JavaScript (Vanilla JS)
- データ管理: JSON形式（食材データ、料理データ）
- ホスティング: GitHub Pages（完全無料）
- デザイン: レスポンシブ対応のシンプルUI

なぜフレームワークを使わなかったのか

ReactやVueなどのフレームワークを使わず、Vanilla JavaScriptで実装した理由：

  • 高速表示：フレームワークの読み込み時間がない分、瞬時に起動
  • 軽量：全体で100KB以下の軽量アプリ
  • 学習しやすい：初心者でもコードを読んで理解できる
  • 依存関係なし：ライブラリのバージョンアップを気にしなくて良い

結果として、スマホでも0.3秒以内に起動する高速アプリになりました。

実装の核心：データ構造とマッチングロジック

食材データベースの設計

最も苦労したのが「食材データの構造化」です。以下のようなJSON形式で管理しています： 

{
  "ingredients": [
    {
      "id": "chicken",
      "name": "鶏肉",
      "category": "meat",
      "synonyms": ["とりにく", "チキン"],
      "commonDishes": ["chicken_rice", "karaage", "teriyaki_chicken"]
    }
  ],
  "dishes": [
    {
      "id": "chicken_rice",
      "name": "鶏肉の炊き込みご飯",
      "requiredIngredients": ["chicken", "rice"],
      "optionalIngredients": ["carrot", "mushroom"],
      "cookingTime": 40,
      "difficulty": "easy",
      "description": "炊飯器で簡単に作れる本格的な炊き込みご飯"
    }
  ]
}

この構造のポイント：

  • synonyms（同義語）：「鶏肉」「とりにく」「チキン」どの表記でも検索可能
  • requiredIngredients vs optionalIngredients：必須食材とあると良い食材を区別
  • cookingTime, difficulty：時間や難易度でフィルタリング可能
  • commonDishes：食材から逆引きで料理を検索

マッチングアルゴリズムの工夫

ユーザーが選んだ食材から料理を提案する「マッチングロジック」は、以下の優先順位で実装しました：

  1. 完全一致：選んだ食材だけで作れる料理
  2. ほぼ一致：あと1〜2食材追加すれば作れる料理
  3. 部分一致：選んだ食材を2つ以上使う料理

実装では、JavaScriptの配列メソッド（filter, includes, every）を組み合わせて、効率的にマッチング処理を行っています。 

// マッチング例（簡略版）
function findDishes(selectedIngredients) {
  return dishes.filter(dish => {
    const required = dish.requiredIngredients;
    const matchCount = required.filter(ing =>
      selectedIngredients.includes(ing)
    ).length;

    return matchCount / required.length >= 0.7; // 70%以上一致
  });
}

UI/UXで工夫したポイント

セクション画像

1. 食材選択のインターフェース

食材選択画面は、以下の工夫をしました：

  • カテゴリータブ：肉、魚、野菜、調味料などタブで切り替え
  • よく使う食材を上部に：使用頻度の高い食材は最初に表示
  • アイコン表示：絵文字アイコンで視覚的にわかりやすく
  • 選択状態の明示：選んだ食材は色が変わる

2. 料理提案画面のデザイン

提案画面では「迷わせない」ことを重視しました：

  • カード形式：1料理1カードで視覚的に整理
  • 必要な追加食材を明示：「あと〇〇が必要」と表示
  • 調理時間・難易度表示：今の気分に合わせて選べる
  • レシピへのリンク：人気レシピサイトへ直接遷移

3. レスポンシブ対応

スマホでの使用を想定し、タッチ操作に最適化：

  • 食材ボタンは指でタップしやすい大きさ（最低44px×44px）
  • スクロール不要で主要機能にアクセス可能
  • 画像を使わず、絵文字とCSSで軽量化

開発中に直面した課題と解決策

課題1: 料理データの充実度

最大の課題は「どれだけの料理データを用意するか」でした。データが少ないと提案が貧弱になりますが、多すぎるとメンテナンスが大変です。

解決策：

  • まずは定番料理50種類からスタート
  • ユーザーフィードバックで要望の多い料理を優先的に追加
  • 料理データの追加フォームを設置し、コミュニティで拡充

課題2: 食材名のゆらぎ対応

「トマト」「ミニトマト」「プチトマト」など、同じような食材でも表現が異なる問題がありました。

解決策：

  • synonyms（同義語リスト）をデータに含める
  • 検索時にひらがな・カタカナを正規化
  • 「これも同じ食材？」という提案機能を追加

課題3: パフォーマンス最適化

食材・料理データが増えると、マッチング処理が遅くなる懸念がありました。

解決策：

  • データをカテゴリーごとに分割し、必要な分だけ読み込む
  • よく選ばれる組み合わせをキャッシュ
  • Web Workerで非同期処理（将来的な改善予定）

リリース後の反応と改善

ユーザーからの嬉しい反応

リリース後、以下のような声をいただきました：

  • 「冷蔵庫の食材を無駄にしなくなった」
  • 「料理のレパートリーが増えた」
  • 「献立を考えるストレスが減った」
  • 「シンプルで使いやすい。広告がないのが良い」

ユーザーフィードバックを受けた改善

実際に使っていただいた方の声を元に、以下の機能を追加しました：

  • 調理時間フィルター：「15分以内」「30分以内」で絞り込み
  • 難易度フィルター：初心者向け、本格派向けで分類
  • お気に入り機能：よく作る料理を保存
  • 履歴機能：過去に作った料理を確認
  • ランダム提案：「おまかせ」ボタンで即決

このプロジェクトで学んだこと

技術面での学び

  • データ設計の重要性：最初のデータ構造設計が、後の拡張性を左右する
  • シンプルな技術選定：Vanilla JSでも十分実用的なアプリが作れる
  • パフォーマンス最適化：ユーザー体験向上のため、表示速度は最重要
  • 検索アルゴリズムの奥深さ：「あいまい検索」の実装は思ったより難しい

プロダクト開発の学び

  • 自分の課題を解決するプロダクトは、他の人の課題も解決する
  • シンプルさは最大の価値：「3クリックで完結」というコンセプトが成功の鍵
  • データの充実は継続的な取り組み：一度に完璧を目指さず、少しずつ拡充
  • ユーザーの声を聞く：想定外の使い方や要望が次の改善につながる

今後の展望

今後、以下の機能追加を検討しています：

  • 栄養バランス表示：カロリーやタンパク質などの栄養情報
  • 買い物リスト生成：足りない食材を自動でリスト化
  • 献立プランナー：1週間分の献立を一括提案
  • 画像認識：冷蔵庫の写真から食材を自動認識
  • コミュニティ機能：ユーザー投稿レシピの共有

まとめ

CookSuggestの開発を通じて、「日常の小さな不便を解決するツール」の価値を実感しました。このプロジェクトのポイントをまとめます：

  • 明確なコンセプト：「3クリックで料理決定」というシンプルな目標
  • データ構造設計：食材と料理の関係性を適切にモデル化
  • マッチングロジック：効率的なアルゴリズムで高速検索を実現
  • UX重視：迷わせない、ストレスフリーなインターフェース
  • 継続的改善：ユーザーフィードバックを受けて進化

「今日の夕飯、何にしよう？」という日常の悩みを、少しでも楽にできていれば嬉しいです。もし使ってみて、追加してほしい料理や機能があれば、ぜひお問い合わせください。

📚 関連記事

この記事が役に立ったら、ぜひシェアしてください！