// shiwake LP — sections const { useState, useEffect } = React; /* ──────────────────────────────────────────────────────────────── NAV ──────────────────────────────────────────────────────────────── */ function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ──────────────────────────────────────────────────────────────── HERO ──────────────────────────────────────────────────────────────── */ function Hero() { return (
{/* Vertical kicker on the side */}
FOOD · WEIGHT · NOTES
{/* Left: copy */}
●  01 — For those who quit

ダイエットアプリの 記録地獄に挫折した方へ。

ワンタップして話すだけ、
食事、体重、運動の記録を 5 秒で終わらせる。

α版のテストに参加する
{/* Right: phone mockup with Camera UI */}
fig. 01 — app interface
); } function KeyStat({ n, unit, label }) { const [ref, val] = useCountUp(parseInt(n, 10), 1400); return (
{Math.round(val)} {unit}
{label}
); } /* ──────────────────────────────────────────────────────────────── FEATURES ──────────────────────────────────────────────────────────────── */ function Features() { const items = [ { n: "01", en: "Zero-tap capture", jp: "起動ゼロタップ、3 秒で記録。", body: "ホーム画面のウィジェットから話しかければ、アプリを開かなくても記録が走る。ロックを解除してから入力欄を探す、あの 10 秒がまるごと消える。", meta: "Widget · Lock screen · Shortcuts", }, { n: "02", en: "AI sorts the murmur", jp: "雑談を、AI が仕訳ける。", body: "「やよい軒で唐揚げ定食、体重 67.8、ちょっと食べすぎた」。そんな一文を、食事・体重・メモの 3 つに自動で分けて、それぞれの正しい場所に保存。", meta: "Meals · Weights · Notes", }, { n: "03", en: "Hard menus, solved", jp: "難しいメニューも、正確に。", body: "ラーメン二郎マシマシ。コンビニの新作スイーツ。チェーン店の期間限定。Web 検索を使ってカロリーと栄養素を毎回ちゃんと拾いに行く。", meta: "Web search · Chain menus · Convenience", }, { n: "04", en: "Quiet by design", jp: "急かさない、責めない。", body: "通知も、連続記録のカウントも、ない。ダイエットは習慣であって試験じゃない。続けたい日に開けば、ちゃんとそこにある日記。", meta: "No streaks · No nags · No shame", }, ]; return (
02 — Features  /  主な機能

記録までに必要な動線を、
徹底して省略。

{items.map((it, i) => ( ))}
); } function FeatureItem({ n, en, jp, body, meta }) { return (
{n}
{en}

{jp}

{body}

); } /* ──────────────────────────────────────────────────────────────── A DAY WITH SHIWAKE ──────────────────────────────────────────────────────────────── */ function Day() { const moments = [ { time: "07:42", label: "Morning", jp: "朝、駅のホームで", utter: "「コンビニのおにぎり 2 個と、無糖ラテ」", action: "メニュー検索 → 食事カードに 2 件追加。", }, { time: "08:10", label: "Weigh-in", jp: "通勤の途中、ふと", utter: "「今日の朝、体重 67.4 だった」", action: "体重カードに 67.4 kg を記録、前日比 −0.2 を計算。", }, { time: "12:33", label: "Lunch", jp: "昼休み、社食で", utter: "「やよい軒、唐揚げ定食」", action: "チェーン店メニューを参照、約 1,020 kcal を仕訳。", }, { time: "19:48", label: "Hard menu", jp: "ジムのあと、二郎で", utter: "「ラーメン二郎、小ラーメン、ニンニク・ヤサイマシ」", action: "Web 検索で実カロリーを推定、注釈付きで保存。", }, { time: "23:15", label: "Note", jp: "寝る前、ベッドで", utter: "「今日ちょっと食べすぎた。明日は控えめにしたい」", action: "メモに分類、明日の朝のリマインダーに紐付け。", }, ]; return (
06 — A day with shiwake

ある減量中の
火曜日の、5 つの瞬間。

シワケは「記録する時間」を作りません。 通勤のホームで。昼休みの食堂で。寝る前のベッドで。 ふと口をついて出た一言を、その場で受け取って、後で見返せる形に整えます。

{/* timeline */}
{moments.map((m, i) => (
{m.time}
{m.label}
{m.jp}

{m.utter}

→ {m.action}

))}
); } /* ──────────────────────────────────────────────────────────────── AI SORTING DEMO ──────────────────────────────────────────────────────────────── */ function AI() { const cards = [ { label: "Meals", jp: "食事", items: [ { k: "やよい軒 唐揚げ定食", v: "≈ 1,020 kcal" }, { k: "ライス", v: "おかわり ×1" }, ], tone: "var(--accent)", }, { label: "Weights", jp: "体重", items: [ { k: "本日 朝", v: "67.8 kg" }, { k: "前日比", v: "+0.1 kg" }, ], tone: "var(--ink)", }, { label: "Notes", jp: "メモ", items: [ { k: "気分", v: "ちょっと食べすぎた" }, { k: "明日", v: "控えめにしたい" }, ], tone: "var(--ink-2)", }, ]; return (
07 — How the AI sorts

ひとつのつぶやきを、
3 つの場所へ。

"仕訳" は会計の用語で、ひとつの出来事を勘定科目に分けて記す作業のこと。シワケはそれを、毎日のごはんや体重に対してやります。

{/* Input */}
Input — つぶやき
23:08

「今日やよい軒で唐揚げ定食食べた。体重 67.8 だった。ちょっと食べすぎたかも、明日は控えめにしたい。」

{/* Arrow */}
AI sorts 3 categories
{/* Output */}
Output — 仕訳結果
{cards.map((c) => (
{c.label} ／ {c.jp}
{c.items.map((it, i) => (
{it.k} {it.v}
))}
))}
{/* Hard menu note */}
※ note
Hard menus

「ラーメン二郎マシマシ」も、コンビニの新作スイーツも、AI が Web を見に行って実カロリーを推定する。

一般的な栄養素データベースに載っていない、ローカルチェーンや期間限定メニュー、トッピング豊富な丼など。曖昧な記録のままにせず、出典付きの推定値で残します。

); } /* ──────────────────────────────────────────────────────────────── GRAPH PREVIEW ──────────────────────────────────────────────────────────────── */ function Graph() { // generate a smooth weight curve trending down const points = [68.4, 68.5, 68.2, 67.9, 68.1, 67.8, 67.6, 67.7, 67.4, 67.2, 67.3, 67.0, 66.8, 66.9, 66.6]; const w = 720, h = 220, pad = 32; const min = 66.4, max = 68.8; const xs = points.map((_, i) => pad + (i * (w - pad * 2)) / (points.length - 1)); const ys = points.map((p) => pad + ((max - p) / (max - min)) * (h - pad * 2)); const path = xs.map((x, i) => `${i === 0 ? "M" : "L"} ${x} ${ys[i]}`).join(" "); const area = `${path} L ${xs[xs.length - 1]} ${h - pad} L ${xs[0]} ${h - pad} Z`; const kcal = [1820, 2100, 1640, 1920, 1480, 2240, 1760]; return (
08 — Graphs & data

続けるほど、輪郭がはっきりする。

日々のつぶやきが積み上がると、体重の傾向と摂取カロリーの相関が、淡くしかし確かに浮かび上がります。

{/* Weight chart */}
Weight · 体重
66.6 kg − 1.8 kg / 14 days
May 09 — May 23, 2026
{/* grid lines */} {[0, 1, 2, 3, 4].map((i) => { const y = pad + (i * (h - pad * 2)) / 4; return ; })} {/* area */} {/* line */} {/* points */} {xs.map((x, i) => ( ))} {/* axis labels */} MAY 09 MAY 23
{/* Kcal bar chart + stats */}
Daily intake · 摂取カロリー
1,851 kcal avg / 7d
{kcal.map((v, i) => { const pct = ((v - 1200) / 1500) * 100; const over = v > 2000; return (
{["MON","TUE","WED","THU","FRI","SAT","SUN"][i]}
); })}
This week · 今週のまとめ
  • 記録した食事 21 件
  • 体重の記録 6 回
  • 残したメモ 9 件

※ 数値はサンプル。実画面ではあなたの記録が反映されます。

); } /* ──────────────────────────────────────────────────────────────── SIGNUP ──────────────────────────────────────────────────────────────── */ function Signup() { const [email, setEmail] = useState(""); // status: 'idle' | 'sending' | 'success' | 'error' const [status, setStatus] = useState("idle"); const onSubmit = async (e) => { e.preventDefault(); if (!email.includes("@") || status === "sending") return; setStatus("sending"); try { const res = await fetch("/api/waitlist", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, source: "lp" }), }); if (!res.ok) throw new Error("request failed"); setStatus("success"); } catch (err) { setStatus("error"); } }; return (
12 — Stay in the loop

公開のお知らせを、
静かに、月に一度だけ。

ベータ募集、TestFlight 招待、リリース予定など。営業メールは送りません。いつでもワンクリックで解除できます。

{ setEmail(e.target.value); if (status === "error") setStatus("idle"); }} placeholder="you@example.com" required disabled={status === "success"} style={{ width: "100%", padding: "14px 0", border: "0", borderBottom: "1px solid var(--line)", background: "transparent", fontSize: 18, fontFamily: "var(--serif)", color: "var(--ink)", outline: "none", marginBottom: 20, }} />

{status === "error" ? "もう一度お試しください。メールアドレスを見直して再送もできます。" : status === "success" ? "ありがとうございます。準備ができたらご連絡します。" : "By submitting, you agree to receive occasional product updates."}

有料プラン予定あり · paid tier coming
); } /* ──────────────────────────────────────────────────────────────── FOOTER ──────────────────────────────────────────────────────────────── */ function Footer() { return ( ); } function FooterCol({ title, items }) { return (
{title}
); } /* ──────────────────────────────────────────────────────────────── HOW IT WORKS — 3 steps with phone mockups ──────────────────────────────────────────────────────────────── */ function HowItWorks() { const steps = [ { n: "01", en: "Open", jp: "起動", title: "アプリを開く。", body: "ホーム画面、ロック画面ウィジェット、ショートカット。最短ルートで、カメラ画面が立ち上がる。", screen: , }, { n: "02", en: "Speak", jp: "話す", title: "長押しで、話す。", body: "「ラーメン二郎ヤサイマシマシ、体重 67.8」。一息でかまわない。リアルタイムに文字起こしされる。", screen: , }, { n: "03", en: "Done", jp: "完了", title: "あとは任せる。", body: "AI が食事 / 体重 / メモに仕訳。Web 検索でカロリーを補完。タップひとつせず、今日のサマリが完成。", screen: , }, ]; return (
04 — How it works

記録に必要なのは3ステップだけ。

開く、話す、終わる。シワケで記録に必要なのは、たった 3 つの動作。あとはアプリが裏で全部やります。

{steps.map((s, i) => (
{s.n}
STEP — {s.en} {s.jp}

{s.title}

{s.body}

{s.screen}
 ))}
); } /* ──────────────────────────────────────────────────────────────── SCREENS — 4-phone editorial gallery ──────────────────────────────────────────────────────────────── */ function Screens() { const items = [ { n: "01", en: "Capture", title: "話す瞬間。", caption: "長押しで話すと、文字起こしと波形がリアルタイムに進む。手元を見ずに記録できる。", screen: , offset: 0, }, { n: "02", en: "Summary", title: "今日を見渡す。", caption: "総カロリー、目標との差、PFC バランス、食事リスト。1 日の輪郭が、開いた瞬間にわかる。", screen: , offset: 56, }, { n: "03", en: "History", title: "仕訳の記録。", caption: "食事・体重・メモが時系列に並ぶ。フィルターで見たいカテゴリだけを残せる。", screen: , offset: 24, }, { n: "04", en: "Weight", title: "ペースを見る。", caption: "実測の線と、目標までの理想ペース（青い点線）。順調か、急ぎすぎか、ひと目でわかる。", screen: , offset: 88, }, ]; return (
09 — Screens / 画面

4 つの画面、
それぞれの仕事。

機能を増やすのではなく、画面を絞る。シワケに用意したのは、撮る・見渡す・遡る・たどる、の 4 つだけ。

{items.map((it, i) => (
{it.n} {it.en}

{it.title}

{it.caption}

{it.screen}
 ))}
); } /* ──────────────────────────────────────────────────────────────── 02 — THE PAIN ──────────────────────────────────────────────────────────────── */ function ThePain() { const items = [ { label: "カロリー記録", per: "1 食", taps: 7, keys: 3, totalDaily: 21 }, { label: "体重入力", per: "1 回", taps: 15, keys: 0, totalDaily: 15 }, { label: "運動記録", per: "1 件", taps: 8, keys: 0, totalDaily: 8 }, ]; const dailyTaps = 44; const dailyKeys = 9; const yearlyTaps = dailyTaps * 365; const threeYearTaps = yearlyTaps * 3; return (
02 — The pain

これを、毎日 365 日...？

時間帯を選んで、メニューを探して、量を入れて、保存ボタン。
記録にかかる長い動線が、あなたのモチベーションを削っていた。。

{/* Tap visualization cards */}
{items.map((it) => (
{it.label}
per {it.per}
{it.totalDaily} /日
{/* dots */}
{Array.from({ length: it.taps }).map((_, i) => ( ))} {it.keys > 0 && ( ＋ {Array.from({ length: it.keys }).map((_, i) => ( ))} )}
{it.keys > 0 ? ( (  {it.taps} タップ 　＋　 キー入力  ) × 3 ) : ( {it.taps} タップ )}
))}
{/* Accumulation */}
ACCUMULATED · 積み上がる負担
 {/* Contrast */}
shiwake なら 話すだけ。 起動 → 話す → 終わり
); } function PainStat({ n, unit, sub, emphasize }) { return (
{n} {unit}
{sub}
); } /* ──────────────────────────────────────────────────────────────── 03 — NO KEYBOARD ──────────────────────────────────────────────────────────────── */ function NoKeyboard() { const modes = [ { tag: "VOICE", sub: "食べながら", mark: "●", score: "BEST", title: "話すだけで、終わる。", lines: [ "「やよい軒の唐揚げ定食、ご飯大盛り」", "「二郎の小ヤサイマシマシニンニク」", "「ドレッシングは大さじ 1 でかけた」", ], verdict: "確認も、訂正も、声で完結。", tier: "best", }, { tag: "PHOTO", sub: "撮影前提", mark: "◐", score: "OK", title: "撮って、保存。", lines: [ "食材や量が、一目でわかる。", "ただし、撮るために手は止まる。", "食べ始めたら、もう撮れない。", ], verdict: "認識はそこそこ。慣れれば許容圏内。", tier: "mid", }, { tag: "KEYBOARD", sub: "戻ってくる地獄", mark: "✕", score: "WORST", title: "結局、これに戻る。", lines: [ "メニュー名を、文字で打つ。", "数字を、文字で打つ。", "「保存」ボタンを、押す。", ], verdict: "1 食ごとに、これ。続くわけがない。", tier: "worst", }, ]; const tierStyle = { best: { bg: "var(--paper)", border: "1px solid var(--accent)", titleColor: "var(--ink)", markColor: "var(--accent)", scoreColor: "var(--accent)", verdictColor: "var(--ink)", verdictBg: "rgba(196,106,78,0.08)", borderLeft: "2px solid var(--accent)", }, mid: { bg: "var(--paper)", border: "1px solid var(--line-2)", titleColor: "var(--ink-2)", markColor: "var(--ink-2)", scoreColor: "var(--ink-2)", verdictColor: "var(--ink-2)", verdictBg: "rgba(0,0,0,0.03)", borderLeft: "2px solid var(--line)", }, worst: { bg: "#f0ece4", border: "1px dashed var(--ink-3)", titleColor: "var(--ink-3)", markColor: "var(--ink-3)", scoreColor: "var(--ink-3)", verdictColor: "var(--ink-2)", verdictBg: "rgba(0,0,0,0.04)", borderLeft: "2px solid var(--ink-3)", textDecoration: "line-through", }, }; return (
03 — Why no keyboard

キーボードを使った記録、
やめませんか？

ストレスの少ない記録方法で。
音声でも、写真でも、ちゃんと作れば「ネイティブ」に終わる。続かない本当の理由は、結局どこかでキーボードに戻ってくることです。

{/* 3-column mode comparison */}
{modes.map((m, i) => { const s = tierStyle[m.tier]; return (
{m.tier === "best" && ( ★ shiwake )} {m.tier === "worst" && ( ✕ 避ける )} {/* Header: mark + tag + score */}
{m.tag} · {m.sub}
{m.mark}
{m.score}
{/* Title */}

{m.title}

{/* Lines */}
    {m.lines.map((t) => (
  • {t}
    • ))}
{/* Verdict */}
{m.verdict}
 ); })}
{/* Bottom note */}

——「音声入力できます」「写真で自動」と書いてあっても、
結局どこかでキーボードに戻ってくる。その瞬間が、続かない理由です。

); } Object.assign(window, { Nav, Hero, Features, HowItWorks, Day, AI, Graph, Screens, Signup, Footer, ThePain, NoKeyboard });