はじめに
「自分に合ったサプリ、結局どれ飲めばいいの？」
ネットで検索すると情報が多すぎて逆に迷う。論文ベースの情報は英語で難解だし、アフィリエイト記事は信用できるかわからない。じゃあ自分で、プロフィールを入力したら根拠付きで優先順位を出してくれるツールを作ろう、と思ったのがきっかけです。
完成したのが「ATP増産 + 長寿サプリメント完全ガイド」。HTMLファイル1つだけで動く、サーバー不要のパーソナライズ推奨エンジンです。
全体の構造
技術的にはかなりシンプルです。
- HTML 1ファイル完結（CSS + JS をすべてインライン）
- サーバーサイド処理なし。個人情報をどこにも送らない
- データベースは JavaScript の配列リテラル（
ALL_ITEMS）
サプリメント18種・食事由来12種、計30アイテムのデータをすべてクライアントサイドで持っていて、入力に応じてスコアリング → ソート → 表示、を行います。
7ステップのオンボーディング
いきなり計算するのではなく、7つの質問に順番に答えてもらいます。
| ステップ | 質問内容 | 使い道 |
|---|---|---|
| 1 | 何を重視するか（ATP/長寿/運動/美容） | スコアの重み付け変更 |
| 2 | 体の悩み（関節/疲労/睡眠/集中力/肌） | 特定アイテムのスコア加算 |
| 3 | 魚の摂取頻度 | オメガ3系アイテムの優先度調整 |
| 4 | 肉・卵の摂取頻度 | カルニチン・B群の優先度調整 |
| 5 | 発酵食品・野菜の摂取頻度 | スペルミジン等の優先度調整 |
| 6 | 現在飲んでいるサプリ | 重複アイテムの優先度ダウン |
| 7 | 服用中の薬 | 相互作用の警告バッジ表示 |
この設計で意識したのは、質問の答えが直接スコアリングロジックに反映されること。「なんとなく聞いてるだけ」の質問はゼロです。
スコアリングの仕組み
ここがこのツールの核心部分です。
各アイテムの固定スコア
すべてのアイテムに4軸のスコア（各10点満点）を事前に設定しています。
- atp: ATP合成への直接的な寄与度
- longevity: 長寿・アンチエイジング効果
- exercise: 運動パフォーマンスへの効果
- evidence: 科学的根拠の強さ
例えばクレアチンは { atp: 10, longevity: 5, exercise: 10, evidence: 10 } で、ATP合成と運動に最高評価、エビデンスも最強クラス。
動的な重み付け
基本の重みは次のように決まります：
- ATP重み = 0.35（固定ベース）
- 運動重み = 運動週3回以上なら 0.30、未満なら 0.15
- 長寿重み = 40歳以上なら 0.30、未満なら 0.20
- エビデンス重み = 残り（1.0 - 上3つの合計）
つまり、年齢と運動量だけで重みが変わる。40歳以上の運動習慣がある人は「ATP + 運動 + 長寿」が三本柱になり、20代の運動しない人は「ATP + エビデンス」重視になります。
食事による減点/加点
「魚を週3回以上食べる」→ オメガ3系アイテムに -1.5点（食事で十分カバーできている）。逆に「ほぼ食べない」→ +1.0点（食事で不足しているので優先度UP）。
これにより「普段の食事で足りてるものはサプリ不要、足りないものは優先」という現実的な推奨になります。
薬の相互作用警告
スコアには影響しませんが、警告バッジとして表示されます。
- 抗凝固薬 → オメガ3（出血リスク）、D3+K2（ワルファリン減弱）
- 糖尿病薬 → R-αリポ酸（低血糖リスク）
- 降圧薬 → マグネシウム（過度の血圧低下）
- 免疫抑制剤 → 全サプリメントに「医師に相談」警告
2つのモード設計
標準モード
RCT（ランダム化比較試験）やガイドラインに基づく固定用量を表示。「CoQ10 → 100-200mg/日」のように、体重に関係なく確立された用量です。
実験的モード
体重ベースの用量計算を含む可変用量。例えば CoQ10 なら 体重 × 1.5-3mg/kg で計算。62kgの人なら「93-186mg/日」と表示されます。
実験的モードでは各アイテムの4軸スコアがバーグラフで可視化されるので、「なぜこのアイテムが上位なのか」が一目でわかります。
UI/UXの工夫
グラスモーフィズム
入力セクションに backdrop-filter: blur() を使った半透明ガラス風デザインを採用。ヒーロー部分のグラデーション背景が透けて見えることで奥行きが出ます。
カード入場アニメーション
計算結果のカードは CSS の @keyframes cardEntrance で下からフェードインし、CSS変数でスタガー遅延をかけています。上位のカードから順に現れるので、ランキング感が視覚的に伝わります。
モバイルファースト
レスポンシブは min-width ベースで設計。タッチターゲットは全て最低44px（Apple HIG準拠）を確保しています。
まとめ
このツールの設計思想は3つ：
- 透明性 — なぜその推奨なのか、スコアとメカニズムで説明する
- パーソナライズ — 年齢・体重・運動量・食習慣・既存サプリ・服薬を全部考慮する
- 安全性 — 薬の相互作用警告、標準/実験的モードの分離、医師相談の明示
「最強のサプリリスト」ではなく「あなたに合った優先順位」を出すこと。それがこのツールの目指したところです。