フィットネス・ウェルネス デザインインスピレーション
エネルギーとモチベーション。データが燃料 -- これがフィットネスデザインの本質だ。Nike Training Club、Peloton、そして世界中のフィットネスアプリに共通するのは、大きな数字がユーザーを鼓舞し、プログレスリングが達成への道を照らす力である。暗い背景にエナジーレッドが脈打つ空間で、身体データが意味を持つ。
このページの使い方
スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。
デザイン哲学 -- 数字が鼓舞する
大きな数字。太い書体。赤いエネルギー。
最高のフィットネスアプリでは、画面を見た瞬間に自分の達成状況が分かる。56pxの数字が「もう少しだ」と鼓舞し、プログレスリングが目標への距離を視覚化する。データは抽象的な数値ではなく、ユーザーの努力の証として表示される。
なぜエナジーレッドなのか
- 情熱と活力: 赤は心拍を連想させ、運動のエネルギーを体現する
- 緊急性: 「今日のワークアウトを始めよう」という行動を促す
- アチーブメントとの対比: 赤(活動中)と緑(達成)のコントラストが明確
以下が、この哲学を体現したフィットネスダッシュボードのプレビューである:
カラーパレット -- エネルギーの階層
フィットネスUIの背景は深い黒。#0f0f0fから始まり、エナジーレッドとアチーブメントグリーンが活力を注ぐ。
Background Hierarchy
アクセントカラーペア
Energy Red
#ff4444
Achieve Green
#00d4aa
Calories
#ff8c00
Duration
#a78bfa
Distance
#48dbfb
| Token | 値 | 役割 |
|---|---|---|
| bg-deepest | #0f0f0f | 最深部 |
| bg-surface | #242424 | カード |
| accent-energy | #ff4444 | エナジーレッド |
| accent-achieve | #00d4aa | アチーブメントグリーン |
| calories | #ff8c00 | カロリー |
| duration | #a78bfa | 時間 |
| heart-rate | #ff4444 | 心拍数 |
タイポグラフィ -- ボールドな存在感
フィットネスUIではOswald（太いコンデンス書体）が力強さとスポーティさを演出する。数字は大きく、ラベルは小さく。
Push Your Limits
限界を超えろ。昨日の自分を超える毎日が、最高のトレーニングだ。
Oswald / 48px / Weight 700 / Uppercase
スタッツの数字
2,451
Calories
67
Minutes
145
Avg BPM
コンポーネント -- ワークアウトとプログレス
ワークアウトプランリスト
This Week's Plan
HIIT Training
45 min -- Upper Body
Today
Yoga Flow
30 min -- Recovery
Done
Strength Training
60 min -- Full Body
Thu
達成バッジ
Achievements
★
7-Day Streak
⚡
1000 Cal
🏆
Marathon
ボタン
Start Workout
View History
Complete
レイアウト -- モバイルファースト構造
Mobile-First Layout
Header + Avatar
Today's Workout Card
Cal
Time
HR
Workout Plan List
Achievement Badges
Bottom Tab Bar (64px)
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/FITNESS_WELLNESS.mdをプロジェクトのDESIGN.mdにコピー- Google Fonts から Oswald を読み込み設定
- Stitch に「この DESIGN.md に従ってフィットネスダッシュボードを作成してください」と指示
適したプロジェクト
- フィットネストラッキングアプリ
- ヘルスケアダッシュボード
- ワークアウト管理サービス
- ウェルネス系アプリ
不向きなプロジェクト
- 静的な情報サイト
- ECサイト
- ビジネスツール（テキスト主体）
プログレスリング実装注意
プログレスリングはSVGのcircle要素とstroke-dasharray/stroke-dashoffsetで実装してください。CSSアニメーション（transition: stroke-dashoffset 1s ease）で滑らかな進捗表示が可能です。canvasは不要です。