ランチ選びアプリの制作記録：Geminiと画面を作り、公開するまで

「何食べる？」と聞いても、大学の友達との相談がなかなか決まらない。そんな昼休みの出来事から、ランチを選ぶWebアプリ「サクメシ！」を作りました。この記事では、HTML・CSSを学んでいた僕が、Geminiに相談しながら画面を作った過程と、そのときに感じたことを振り返ります。

サクメシ！の公開は終了しています。以下は2025年の制作記録です。

制作の流れを4つの段階で振り返る

当時の制作は、次の順で進めました。

友達と昼ご飯を食べることになり、「何食べる？」「なんでもいいよ」と話しているうちに、誰も決められない時間が続きました。そこで、選ぶきっかけを作るアプリがあれば役に立つのでは、と考えました。

当時の僕は、HTMLとCSSを学んでいるところでした。情報系の学科に通っていたこともあり、VS CodeとNode.jsのインストールは済ませていましたが、アプリを公開するまでの流れはGeminiに聞きながら進めました。

最初に伝えたのは、「今日のランチを自動で決めるアプリを作りたい」という目的です。次に、HTML・CSS・JavaScript・Node.jsの存在は知っていると伝え、具体的な開発手順を聞きました。

HTMLとCSSのファイルが必要だと分かっていたので、提案された手順に沿ってHTML、CSSと順番に作成を依頼しました。出てきたコードを用意し、実際の画面を見て「ここはこうしたい」と伝えることを繰り返しました。

必要なコードを用意してからも、GitHubへの保存や、アプリを公開するためのデプロイを調べる必要がありました。分からない言葉をそのままにせず、次に何をすればよいかを聞きながら進めました。

これから同じ流れを学ぶ場合は、GitHubへコードを保存する手順と、Webアプリを公開・更新する手順で、ファイル作成の後に必要な作業を確認できます。

当時は、AIの支援で、作りたいと思ったものを形にするハードルが下がったと感じました。知らないことを質問し、次にやることを聞けるのは、最初の一歩を進める助けになりました。

コードを受け取って終わりではなく、実際の表示を見て、どうしたいかを伝える作業がありました。自分の考えを言葉にして相談することも、制作の一部でした。

AIの情報を見極める力は必要だと感じました。同時に、「AIができることを、自分の力でもやってみたい」という気持ちが、その後の学習のモチベーションになりました。

この作品は公開を終了していますが、身近な困りごとを題材にして、画面を見ながら小さく作る出発点になりました。ここでは当時の過程を残しており、アプリをそのまま復元できるソースコード一式は掲載していません。

入力と計算の設計を具体的に振り返るなら金種計算アプリの制作記録へ。ルールを考えてAIと開発した別の例は、素数ゲームの仕様決めと確認の記録で紹介しています。

HTMLの書き方から試したい場合は、HTMLで1ページを作る手順も使えます。

GeminiとNext.jsで金種計算アプリを作った記録では、入力欄と計算結果をどう決めたか、別の制作記録を読めます。