KICK OFF PREVIEW

Tiful v4.0

肌管理を、憧れから始める。
憧れの一人から、肌を教わる時代へ。

そもそも、Tifulは「肌管理を、憧れから始める」ために生まれた。
いつか、「誰もが"憧れの一人"から、肌を教わる時代」を目指す。
そのためにいま、「肌の、コンパス」をつくる。

🆕 Latest — Phase 18a 最新更新

2026-04-28 更新分。Onboarding 3画面 + Circle 第二世代 + Record 新規入力

Onboarding (Phase 18a — ShopMy 0204-0206 踏襲)

01. Hero
ランディング (V9 frontal KV / "Your skin, guided by the people you trust.")
開く
02a. 肌の、コンパス
あなたの肌の正解へ、Tifuler が導く / 中央 portrait_01_nana.jpg
開く
02b. Tifuler の知見を集める
信頼する Tifuler の発信を継続的に追う / 4枚 2x2 grid
開く
02c. Pick で、肌の地図ができる
Tifuler の Pick が集まると、自分の肌のための地図ができる / hero_serum_sizzle.jpg
開く

Circle 第二世代 (v2 / Tifuler / Admin v2 / Peer)

Circle v2 — 集う (改定版)
v1 から構造刷新。最新版
開く
Circle — Tifuler 向け
Tifuler 視点での Circle 体験
開く
Circle — Peer (NEW)
Peer 視点での Circle 体験
開く
Section C — Circle 運営管理 v2
v1 改定版。最新の運営管理
開く

Record 新規入力フォーム

New Record — Maintenance
施術記録の新規入力
開く
New Record — HomeCare
HomeCare 商品記録の新規入力
開く
New Record — Routine
ルーティン記録の新規入力
開く
Dermal Detail v1
旧称 Dermal の Detail 画面
開く

🔬 Maintenance Record — 3案比較(v4 方向性決定用)

カード境界廃止 × エディトリアル × 縦線形歴史。3案で実物を見て選ぶ

Plan A / B / C 縦比較
スクロールして3案を実物サイズで比較 → 1つ選ぶ
開く

Product Mocks — 本線 v4 Editorial

Plan A+B Hybrid(歴史の幹 × 雑誌編集美学)・T10-T13 準拠・カード境界全廃

Tifulers v3 — 憧れる TIER 2 · NEW
editorial monochrome portrait × hairline strip × no-radius tile / 12 Tifulers Nano Banana Pro 生成、Discover / My Circle / Most Trusted 3モード
開く
IFProfile v3 — 深層
v4 editorial トンマナ / Plan A+B Hybrid Record + editorial HomeCare 3軸
開く
Journal v4 — 重ねる
ロゴTOP + Plan A+B Hybrid Maintenance Record + editorial HomeCare + Journey下部
開く
Circle v1 — 集う TIER 2
editorial Circle switcher × Feed / Challenge / Members / Glow Report の4タブ。Journal と完全同一の視覚言語
開く
Talk v1 — 聞く TIER 2 · NEW
DM スレッド × Smart Q&A(Tifuler軌跡への AI 問い合わせ)× Ask My Circle(複数Tifuler一括質問)の3モード
開く
Care v1 — 試す TIER 2 · NEW
Maintenance(施術 Picks 横断) × Cosme(My Circle / Most Trusted / 成分ライブラリ) × Routine(Tifuler 採用) × Clinic(Tifuler 通院先 + 地域 + 公式サイト遷移)の4並列 — Picks from my Tifulers (D-4)
開く
My Compass v1 — 最終系BEST (Compass) PHASE 5c · r5e ⭐
⭐ r5e 確定版 / 二軸 (コンパス92 + Trusted 1,247) / 6stop プラチナ + 水光肌 sheen 流れ / メーター成長アニメ / Trusted 表記 / 7 Tips / A Tifuler is
開く
My Compass v1 — Phase 0 (Seeker) PHASE 5c · r5e ⭐
Phase 0 = 2026-06。アースブロンズ 6stop / Mio · Compass Score 18 / Trusted 自動非表示 / メーター成長 / 7 Tips 2ACTIVE+5Locked / Section A 開放 / Section C ロック
開く
My Compass v1 — 4Tier 切替 Preview PHASE 5c · r5e ⭐
⭐ 上部ボタンで 4Tier 瞬時切替 / 各 Tier 6stop グラデ全差別化 / Compass のみ水光肌 sheen / メーター成長アニメ / Trusted (自動hide含む) 連動
開く
Section A — 投稿 URL 管理 PHASE 5c · A NEW ⭐
⭐ My Compass Section A 別画面。Maintenance/HomeCare タブ + サムネリスト (IG/TikTok/YouTube) + FAB + 登録モーダル (URL→サムネ取得→紐付け先選択→保存) / 既存エントリへ紐付けのみ・新規作成不可
開く
Section C — Circle 運営管理 PHASE 5c · C NEW ⭐
⭐ My Compass Section C 別画面。Hero (毛穴改善 47名) + 今月収入 ¥51,750 (サブスク+Premium 内訳) + サブタブ (スレッド/メンバー) + 統合スレッドリスト (Free/Premium バッジ) + 通報セクション
開く
Maintenance Detail — Pico Laser 3rd PHASE 5d NEW ⭐
⭐ 本線。Nana実顔SNS投稿サムネ (IG-style chrome: avatar+handle+場所+♡💬✈🔖+caption) + 注釈「実投稿サムネ反映」+ Maintenance Treatment ブロック (機材サムネ右配置 64×64) + Clinic + Treatment Detail + Note + Related 3件
開く
Maintenance Detail — Hydrafacial PHASE 5d NEW ⭐
月1のハイドラフェイシャル経過 (GINZA Skin Clinic / Dr. 高橋 美咲)。3-step + ヒアルロン酸ブースター / DT 0day / ¥22,000
開く
Maintenance Detail — Dermapen 4 6th PHASE 5d NEW ⭐
ダーマペン 6回目 + PRP併用 (MY Clinic 表参道 / Dr. 山田 真理子)。1.5mm / DT 5day / ¥55,000
開く
Maintenance Detail — Profhilo 1st PHASE 5d NEW ⭐
プロファイロ初体験 (BIOTOPE Beauty Clinic / Dr. 佐藤 ひかり)。5点法 / DT 1day / ¥85,000
開く
HomeCare Detail — Vit-C Serum 15% PHASE 5d NEW ⭐
⭐ HomeCare 本線。Obagi Vit-C Serum 15% / ¥8,800。商品サムネ右配置 + 価格行 + 購入CTA + Ingredient + How Nana Uses + Note + Related
開く
HomeCare Detail — 夜のルーティン (5-step) PHASE 5d NEW ⭐
5本セット (DUO クレンジング + Paula's Choice トナー + Obagi Vit-C + Dr.Jart+ クリーム + Laneige マスク)。Routine Steps + How Nana Uses
開く
HomeCare Detail — UV Shield SPF50+ PHASE 5d NEW ⭐
Bioderma UV Shield SPF50+/PA++++ / ¥4,200。Pico Laser 後でもしみない / 下地利用可
開く
HomeCare Detail — 2% BHA Clear Toner PHASE 5d NEW ⭐
Paula's Choice 2% BHA Clear Toner / ¥3,900。サリチル酸2% / 週3ペース。Pico Laser 前1週間は休む
開く
Maintenance Detail — HIFU 1st (まこ Owner) PHASE 5e NEW ⭐
一般ユーザー (まこ) Owner の Detail。Tifuler ではないので Compass マーク・Tier 表示なし。Hadakanri Clinic 渋谷 / Ultraformer III 800 shots
開く
Maintenance Detail — PRX-T33 5th PHASE 5e NEW ⭐
Nana / Aoyama Skin Clinic / TCA 33% 5層ペイント・剥離なし。Pico Laser のオフ期間に挟むメンテ
開く
Maintenance Detail — Dermashine 4th (水光肌) PHASE 5e NEW ⭐
Nana / BIOTOPE Beauty Clinic / リジュランI 2ml + ヒアルロン酸。9連針ムラなく注入
開く
Maintenance Detail — Thermage FLX 1st PHASE 5e NEW ⭐
Nana / MY Clinic 表参道 / Total Tip 4.0 825 shots。年1の大投資 ¥330,000
開く
My Studio v2 (旧 r2 / 退役)
v2 r2 (My Studio名 / 単軸) — リファレンス値として残置。本線は My Compass v1
開く
My Studio v1 (旧 / 退役)
v1 (editorial monochrome 版) — v2 (ShopMyトンマナ) でリファレンス値として残置
開く
My Studio v1 Phase 0 (旧 / 退役)
v1 Phase 0 (editorial monochrome 版) — リファレンス用
開く

v3 Reference(ルナルナ判定・却下)

角丸カード境界が "ルナルナ感" の原因。v4 で editorial に刷新

Journal v3(却下)
2列カードグリッド、角丸カード囲み
開く
IFProfile v2(却下)
同上、角丸カード基調
開く

v2 Reference(Pinterest masonry baseline / 花弁リング版)

トンマナ転換前の中間版。Tifulers v2 = パステルSVG masonry(editorial 未達)、Journal v2 = 花弁リング版。v3 で editorial 刷新

Tifulers v2(Pinterest baseline)
パステルSVG portrait の 2列 masonry。v3 で editorial monochrome 実写に刷新
開く
Journal v2(花弁リング版)
花弁扇型 + 肌の波線 + 光の放射。v3 に統合済み(下部Journey波線)
開く

Baseline Comparison(A案寄り初版)

Phase α-ゲート判定用のベースライン

Tifulers v1(baseline)
A案寄り初版、Instagram風フィード
開く
Journal v1(baseline)
A案寄り初版、Activity Rings型
開く

Navigation Structure

5タブ + Create FAB(Apple HIG / Material / NNG 推奨レンジ)

UI Principles

Conceptを規範として情報配置を決める8原則

P1
自己携帯性
開いた瞬間「私のコンパス」と感じる密度。他者の情報・広告を前面に出さない
P2
単数主義
人気軸排除・信頼軸のみ。いいね/フォロワー数は表示しない
P3
記録の重さ
"流れるTL" ではなく "積み重なる層" として見える密度
P4
選択の余白
押し付け型レコメンド禁止、方向だけ示してユーザーが選ぶ
P5
地続き性
HomeCare と Clinic の記録フォーマット統一、整形を否定しない連続世界
P7
相談の針
「この人の軌跡を針にする」体験がTifulersタブの核

Tonmana T1–T13

Pinterest/ShopMY の洗練 × ロゴエッセンスを担保する13原則

T1–T4
無彩色ベース × 発光の挿し色
白/オフホワイト/黒/グレー3段階。パステル大面積禁止。ロゴグラデは印象点のみ。写真/人物が主役
T5
Sans 主体クリーン
Inter + Noto Sans JP、Serif 原則不使用
T6–T7
余白 × 発光アクセント
Pinterest/ShopMY水準の余白。ピンク文字/枠禁止、アクセントは発光のみ
T8–T9
絵文字節制 × Tabular
絵文字は機能限定。大きな数字は Inter Light Tabular で静謐と信頼
T10–T11
カード境界全廃 × フルブリード
border-radius/border/背景枠を使わない。画像フルブリードで editorial
T12–T13
タイポ階層 × hairline 区切り
日付/商品名/メタの3段階のみで情報分離。区切りは余白 + 0.5px hairline

Next Phase

キックオフ後の開発・デザインロードマップ

Phase 2 · 完了
Tier 2 全画面 editorial 揃う
Tifulers v3 / IFProfile v3 / Journal v4 / Circle v1 / Talk v1 / Care v1 全6画面 editorial 完成 (2026-04-23)。Tier 3 は Onboarding / Search / 設定
Phase 2
HomeCare 商品画像補完
Emulsion / Eye / Lip 等の残3点を Nano Banana Pro で追加生成
Phase 3
Onboarding / Search / 設定
初回起動フロー、検索、プロフィール編集、施術登録フォーム
Phase 3
Figma化 & Design System
デザインチーム引き継ぎ、コンポーネント化、Tokens 整備