ランニングアプリの 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/running 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
テンプレートの内容
| 画面 | 内容 |
|---|---|
| 今日 | 週間距離のリング、スタートボタン、前回のラン、今日の予定ワークアウト |
| ランの開始 | GPS の状態、目標の種類（フリーラン、距離、時間、ペース）、音声ガイド |
| ランニング中 | 距離、ペース、時間、心拍数をライブ表示。一時停止と停止は親指が届く位置 |
| ランのまとめ | ルート、自己ベスト、主要な数字、1 km ごとのスプリット、シェア |
| 履歴 | 週ごとの距離グラフと、最近のランの一覧 |
| ランの詳細 | ペースのグラフ、心拍ゾーン、天気、シューズ |
| プラン | ハーフマラソンプランの進捗と、今週のワークアウト |
| プロフィール | 累計、自己ベスト、実績、設定 |
どの画面も 390×844 の HTML ファイル 1 つで、Tailwind CSS v4 と共通の tokens.css でスタイルしています。ブラウザでファイルを開くだけで見られ、インストールもビルドも不要です。画面は標準でダークで、ライトテーマも組み込まれています。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/apps/running my-running-app
そのうえで、エージェントに自分のものにしてもらいましょう。
このフォルダは、ランニングアプリの UI テンプレートです。これを [アプリ名] に作り替えてください。[アプリの内容] のアプリです。DESIGN.md と tokens.css はデザインシステムとして残し、サンプルデータは [自分のデータ] に置き換え、タブの名前もアプリに合わせて変えてください。そのうえで、これらの画面を [Expo / SwiftUI / 自分のスタック] で作ってください。
デザインシステムは DESIGN.md に書かれているので、エージェントが新しく追加する画面も、すでにある 8 画面とそろいます。
Stride デザインシステムが土台
このテンプレートは、体を動かすアプリ向けのデザインシステム Stride を使っています。等幅の大きな縦長の数字、アクションと進捗に使うエネルギッシュなオレンジ 1 色、16px の角丸、48px のタッチ領域、下部のタブバーが特徴です。Stride のページには、ライブプレビュー、DESIGN.md の全文、shadcn テーマがあります。
よくある質問
このランニングアプリのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、個人のプロジェクトにも商用のプロジェクトにも使えます。
どのスタックで作られていますか？
HTML と Tailwind CSS v4 なので、どの AI エージェントでも読んで変更できます。準備ができたら、エージェントに React Native、Expo、SwiftUI、Flutter、または使っている Web フレームワークで画面を作り直してもらいましょう。
ライトテーマは使えますか？
はい。どの画面でも <html> タグから class="dark" を削除すると、Stride のライトテーマに切り替わります。