瞑想アプリの UI テンプレート。
瞑想と睡眠のためのアプリの完全な UI デザインです。Stillpoint というサンプルアプリの 8 つのスマホ画面で、今日のおすすめや 7 日間のコースから、プレーヤー、呼吸ガイド、睡眠ストーリー、練習の記録までそろっています。連続日数、分数、コースの進み具合はどの画面でも一致していて、すべての画面がシンプルな HTML と Tailwind なので、Codex や Claude Code がクローンしてあなたのアプリに作り替えられます。
2026年11月7日 更新
Mobile app · 8 screens · Free and open source
01今日 
02探す 
03コース 
04プレーヤー 
05呼吸 
06睡眠 
07記録 
08プロフィール
Clone it
npx degit ummydev/ui-templates/apps/meditation 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.
Design system
Calmアプリやわらかなセージ、穏やかなセリフ体、息をつける余白。見出しは Newsreader- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
テンプレートの内容
| 画面 | 内容 |
|---|---|
| 今日 | 今夜のおすすめ、連続日数、今週の分数、続きから聴けるセッション |
| 探す | 睡眠・集中・不安・呼吸のテーマごとに、長さ付きのセッションを横に並べる |
| コース | 7 日間のコース、講師、各セッションと完了状況 |
| プレーヤー | 進捗リング、残り時間、前後へのスキップ、背景音 |
| 呼吸 | 4-4-6 呼吸のガイド。回数と長さを選べ、アニメーションは端末の設定に従う |
| 睡眠 | 常にダーク表示。睡眠ストーリー、環境音、再生を止めるタイマー |
| 記録 | 連続日数、合計の分数とセッション数、今週のグラフ、気分の記録 |
| プロフィール | サブスクリプション、リマインダー、ダウンロード、サウンド、設定 |
サンプルデータは、ある人の土曜の夜の練習記録です。連続 12 日、今週 75 分、累計 1,286 分・142 セッション。Steady Mind コースは 7 セッション・合計 69 分で、3 つが完了済み。4 日目は 9:00 のうち残り 3:40 で、今日・コース・プレーヤーのどの画面でも同じ進み具合です。呼吸のリズムは吸う 4 秒、止める 4 秒、吐く 6 秒なので、5 分でちょうど 21 回。端末が動きを減らす設定のときはアニメーションが止まります。
各画面は 390×844 の HTML ファイル 1 つで、Tailwind CSS v4 と共通の tokens.css でスタイルを付けています。イラストはデザインシステムの色を使ったフラットな SVG 図形で、グラデーションや光彩はありません。アイコンは Lucide です。どのファイルもブラウザで開くだけで、インストールやビルドは要りません。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/apps/meditation my-meditation-app
あとはエージェントに、あなたのアプリにするよう頼みます。
このフォルダは瞑想アプリの UI テンプレートです。[アプリ名] に作り替えてください。対象は [誰のためのアプリか] です。DESIGN.md と tokens.css はデザインシステムとして残し、コース、講師、サウンドを [あなたのコンテンツ] に置き換えて、連続日数、分数、セッションの進み具合がすべての画面で一致するようにしてください。そのうえで、これらの画面を [Expo / SwiftUI / あなたの技術スタック] で実装してください。
デザインシステムが DESIGN.md に書かれているので、エージェントが後から追加する画面（ジャーナルや就寝前のルーティンなど）も、既存の 8 画面とそろいます。
Calm デザインシステムが土台
このテンプレートは、ウェルネス系アプリ向けのデザインシステム Calm を使っています。やわらかなセージ色の背景、操作には深い緑、見出しに Newsreader、本文に Figtree、24px の角丸、48px のタッチ領域、3 項目のタブバーが特徴です。ページではライブプレビュー、DESIGN.md の全文、shadcn テーマを見られます。Calm はデザインシステムの名前で、同名のアプリとは関係ありません。
よくある質問
この瞑想アプリのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、個人でも商用でも使えます。
ダークテーマはありますか？
あります。どの画面でも <html> タグに class="dark" を付けると、Calm のダークテーマに切り替わります。睡眠の画面は夜に開くものなので、常にダーク表示です。
呼吸のアニメーションは「視差効果を減らす」設定に対応していますか？
はい。CSS だけで作られていて、OS で動きを減らす設定がオンのときは止まります。その場合も、各段階と長さは文字で表示されます。