フードデリバリーアプリの UI テンプレート。
フードの注文と配達をするアプリの、完成した UI デザインです。ホームのフィードからチェックアウト、ライブの注文追跡まで、リアルなレストランと料理と価格を入れたスマートフォン画面を 8 つ用意しました。どの画面も素の HTML と Tailwind なので、Codex や Claude Code がクローンして、あなたのアプリに仕立てられます。
2026年11月6日 更新
Mobile app · 8 screens · Free and open source
01ホーム 
02レストラン 
03料理 
04カート 
05チェックアウト 
06注文の追跡 
07注文 
08アカウント
Clone it
npx degit ummydev/ui-templates/apps/food-ordering my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the フードデリバリーアプリ template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
テンプレートの内容
| 画面 | 内容 |
|---|---|
| ホーム | 配達先の住所、検索、料理ジャンルのカテゴリ、オファー、近くのレストラン |
| レストラン | 評価、配達時間と配達料、メニューのタブ、追加ボタン付きの料理、下部に固定のカートバー |
| 料理 | 説明、サイズ、辛さ、価格付きのトッピング、数量、カートに追加 |
| カート | 数量ステッパー付きの商品、お店へのメモ、プロモコード、料金の内訳 |
| チェックアウト | 住所、通常配達か時間指定か、支払い方法、配達員へのチップ、注文の確定 |
| 注文の追跡 | 配達員を表示する地図、到着予定時刻、注文のステップ、配達員への連絡、注文内容のまとめ |
| 注文 | 進行中の注文と、もう一度注文できる過去の注文 |
| アカウント | プロフィール、累計、紹介オファー、住所、支払い方法、設定 |
どの画面も 390×844 の HTML ファイル 1 つで、Tailwind CSS v4 と共通の tokens.css でスタイルしています。料理は、テンプレートに含まれる 12 点のフラットな SVG イラストなので、外部の画像は使っていません。ブラウザでファイルを開くだけで見られ、インストールもビルドも不要です。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/apps/food-ordering my-food-app
そのうえで、エージェントに自分のものにしてもらいましょう。
このフォルダは、フードデリバリーアプリの UI テンプレートです。これを [アプリ名] に作り替えてください。対象は [自分のレストランまたは市場] です。DESIGN.md と tokens.css はデザインシステムとして残し、サンプルのレストラン、料理、価格は [自分のメニュー] に置き換え、イラストは自分の写真に差し替えてください。そのうえで、これらの画面を [Expo / SwiftUI / 自分のスタック] で作ってください。
デザインシステムは DESIGN.md に書かれているので、エージェントが新しく追加する画面、たとえばレストラン検索やポイントのページも、すでにある 8 画面とそろいます。
Pantry デザインシステムが土台
このテンプレートは、フードと注文のアプリ向けのデザインシステム Pantry を使っています。クリーム色の背景、注文にはトマトレッド、配達と成功にはハーブグリーン、大きな丸い料理のカード、ピル型のボタン、48px のタッチ領域が特徴です。Pantry のページには、ライブプレビュー、DESIGN.md の全文、shadcn テーマがあります。
よくある質問
このフードデリバリーアプリのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、料理のイラストも含めて、個人のプロジェクトにも商用のプロジェクトにも使えます。
Figma で使えますか？
テンプレートは Figma ファイルではなく HTML です。だからこそ、AI エージェントが直接読んで変更できます。スクリーンショットは参考になりますし、DESIGN.md の色とフォントは Figma のスタイルとして設定できます。
ダークテーマはありますか？
はい。どの画面でも <html> タグに class="dark" を追加すると、Pantry のダークテーマに切り替わります。