/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider */ const { useState, useEffect, useRef, useMemo } = React; /* ========================================================= Tokens ========================================================= */ const TOKENS = { teal: "#0EA5A4", tealDeep: "#0B7C7B", mint: "#D4F1E8", mintSoft: "#E8F6F0", cream: "#FAF6EE", creamDeep: "#F2E9D7", coral: "#F4A89A", coralSoft: "#FDEAE3", ink: "#1F3A3D", inkSoft: "#4F6669", line: "rgba(31,58,61,0.08)", }; /* ========================================================= Reveal-on-scroll hook ========================================================= */ function useReveal() { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.18 } ); io.observe(el); return () => io.disconnect(); }, []); return [ref, shown]; } function Reveal({ children, delay = 0, as: As = "div", className = "", style = {} }) { const [ref, shown] = useReveal(); return ( {children} ); } /* ========================================================= Email signup form (waitlist) ========================================================= */ function WaitlistForm({ variant = "hero", accent = TOKENS.teal }) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); // idle | loading | done | error const [msg, setMsg] = useState(""); const onDark = variant === "cta"; const noteColor = state === "error" ? (onDark ? "#FFB8A8" : "#C24A3A") : (onDark ? "rgba(255,255,255,0.78)" : TOKENS.inkSoft); const submit = async (e) => { e.preventDefault(); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); if (!valid) { setState("error"); setMsg("メールアドレスの形式をご確認ください"); return; } setState("loading"); setMsg(""); try { const res = await fetch("https://formspree.io/f/xqejbazd", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify({ email: email.trim(), source: variant, page: "matomerun-lp", submitted_at: new Date().toISOString(), }), }); if (res.ok) { setState("done"); setMsg("ご登録ありがとうございました。先行案内をお送りします。"); } else { const data = await res.json().catch(() => ({})); setState("error"); setMsg(data?.error || "送信に失敗しました。時間をおいて再度お試しください。"); } } catch (err) { setState("error"); setMsg("通信エラーが発生しました。ネットワークをご確認ください。"); } }; const isDone = state === "done"; return (

{ setEmail(e.target.value); if (state === "error") setState("idle"); }} placeholder="メールアドレスを入力" className="w-full bg-transparent outline-none py-3 text-[15px] placeholder:text-[color:var(--muted)] disabled:opacity-60" style={{ color: TOKENS.ink }} aria-label="メールアドレス" />

{msg || (variant === "hero" ? "ベータ版を若干名募集中です。先着順でご案内します。" : "登録は無料・1分で完了します。配信解除はいつでも可能。")}

); } /* ========================================================= Phone frame for synthetic mockup (matches screenshot bezel) ========================================================= */ function PhoneFrame({ children, style = {} }) { return (

{children}

); } /* Synthetic "write summary" mockup */ function WriteSummaryMock() { return ( {/* status bar */}

9:41

●●●●

{/* header */}

要約を書く

下書き

{/* article hint card */}

もとの記事

クジラたちは「歌」と呼ばれる音を出して仲間とコミュニケーションを…

{/* mode toggles */}

テキスト

手書き撮影

{/* char limit */}

40字 80字 120字

{/* writing area */}

クジラの歌は仲間と話すためだけ
でなく、海の生き物を守る大切な
役割もあると分かってきた

54 / 80字

{/* submit */}

採点する

); } /* ========================================================= Top navigation ========================================================= */ 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({ accent }) { return (

{/* soft gradient blobs */}

{/* Left */}

読む力は、
一生の武器になる。

ニュースを読み、自分の言葉でまとめる。
AIが先生のようにやさしくフィードバックして、小学生から大人まで、読解力と表現力を育てます。

中学受験・適性検査対策

1日5分から

手書きOK

{/* Right: phone collage */}

※ 画面は開発途中のイメージです。変更となる場合があります。

); } function Check({ c }) { return ( ); } function PhoneCollage() { return (

{/* Main phone — 記事を読む */} {/* Secondary phone — AIフィードバック */}

); } function FloatPhone({ img, synthetic, style, label, featured }) { const { left, right, top, rotate = "0deg", z = 1, delay = 0, scale = 0.92 } = style || {}; return (

{synthetic ? ( synthetic ) : ( {label}

)} {featured && (

✏️ {label}

)}

); } /* ========================================================= Problem section ========================================================= */ function ProblemSection() { const stroke = (props) => ({ width: 26, height: 26, viewBox: "0 0 24 24", fill: "none", stroke: TOKENS.tealDeep, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", ...props }); const items = [ { icon: ( ), title: "要約の丸付けが難しい", body: "「合っているのか分からない」毎回の添削で親も子も疲れてしまう。", }, { icon: ( ), title: "記述の添削ができない", body: "塾でも記述問題は点数だけ。具体的なアドバイスが届きにくい。", }, { icon: ( ), title: "なんとなく読んでいる", body: "読めているつもりでも、要点がつかめているかは見えにくい。", }, { icon: ( ), title: "毎日少しずつ続けたい", body: "短時間で習慣化できる、ちょうどよい教材がなかなか無い。", }, ]; return (

Problem

こんな悩みは、ありませんか？

{items.map((it, i) => (

{it.icon}

{it.title}

{it.body}

))}

); } /* ========================================================= How it works (3 steps) ========================================================= */ function HowSection({ accent }) { const steps = [ { n: "01", title: "記事を読む", body: "科学・環境・社会・AI・文化など、考える力が育つ短い記事を毎日お届け。", tone: TOKENS.mintSoft, img: "assets/screen-read.webp", }, { n: "02", title: "要約を書く", body: "テキスト入力か、手書きをカメラで撮影。40・80・120字から挑戦できます。", tone: TOKENS.cream, img: "assets/screen-write.webp", }, { n: "03", title: "AIからフィードバック", body: "点数だけでなく、良かった点・改善点を先生のようにやさしく伝えます。", tone: TOKENS.coralSoft, img: "assets/screen-feedback.webp", }, ]; return (

How it works

使い方は、たった3ステップ

1日5分から。読む→書く→添削まで、迷わず続けられます。

{steps.map((s, i) => (

STEP {s.n}

{s.title}

{s.body}

))}

); } /* ========================================================= AI Feedback section ========================================================= */ function FeedbackSection({ accent }) { const [tab, setTab] = useState(0); const tabs = [ {label:"褒める", body:"重要なポイントをしっかり整理できています。「クジラの歌が海の生態系を守る」という核を外さずに書けていますね。"}, {label:"気づき", body:"理由をもう少し加えると説得力が増します。例えば「なぜ守る役割があるのか」を一文添えてみましょう。"}, {label:"次の一歩", body:"結論を先に書くと読みやすくなります。次回は「最も伝えたいこと」を冒頭に置く構成を試してみてください。"}, {label:"言い換え", body:"同じ表現が続いています。「大切」「重要」「役立つ」など、言い換えのバリエーションを増やしましょう。"}, ]; return (

{/* Left copy */}

AI feedback

AIが、先生のように
やさしく添削します。

冷たい減点方式ではなく、褒めながら伸ばす。
スコア・良かった点・改善ポイント・次に意識することを、わかりやすい言葉で届けます。

{tabs.map((t, i) => ( ))}

{tabs[tab].body}

{/* Right phone */}

{/* annotation chips */} }>85点 / 100点 }>評価のポイント 5項目 }>次に意識すること

); } function Chip({ children, style, color, icon }) { return (

{icon && {icon}} {children}

); } /* ========================================================= Growth / record teaser (uses progress screenshot) ========================================================= */ function GrowthSection({ accent }) { return (

Growth

「読めている」を、
見える形にする。

要約力、語彙力、論理性、継続日数。やわらかいUIで成長を可視化。親子で進捗を共有でき、毎日少しずつ続けたくなります。

{[ {k:"要点のまとめ方", v:"強み", tone: accent}, {k:"理由・根拠の説明", v:"やや弱い", tone: TOKENS.coral}, {k:"表現の工夫", v:"強み", tone: accent}, {k:"字数の調整", v:"やや弱い", tone: TOKENS.coral}, ].map((s,i)=>(

{s.k} {s.v}

))}

); } /* ========================================================= Final CTA ========================================================= */ function CTASection({ accent }) { return (

{/* decorative */}

ベータ版・若干名募集

一緒に試してくれる方を、
募集しています。

中学受験・読解力トレーニング向けのAI要約アプリを開発予定です。
先行案内を受け取りたい方は、メールアドレスをご登録ください。

); } /* ========================================================= Footer ========================================================= */ function Footer() { return ( ); } /* ========================================================= Root ========================================================= */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#0EA5A4", "headline": "読む力は、一生の武器になる。", "density": "comfortable", "showBetaBadge": true }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // inject CSS vars useEffect(() => { const root = document.documentElement; root.style.setProperty("--ink", TOKENS.ink); root.style.setProperty("--muted", TOKENS.inkSoft); root.style.setProperty("--accent", tweaks.accent); }, [tweaks.accent]); return (

); } ReactDOM.createRoot(document.getElementById("root")).render();

読む力は、 一生の武器になる。

こんな悩みは、ありませんか？

使い方は、たった3ステップ

AIが、先生のようにやさしく添削します。

「読めている」を、見える形にする。

一緒に試してくれる方を、募集しています。

読む力は、
一生の武器になる。

AIが、先生のように
やさしく添削します。

「読めている」を、
見える形にする。

一緒に試してくれる方を、
募集しています。