final.marp

---
marp: true
theme: default
size: 16:9
paginate: false
lang: ja
title: ToDoめる：SNSに、トドメをさす。
description: AIチューターで、やることへ踏み出すきっかけをつくるアプリの紹介
author: チーム「あと1分だけ」
keywords: JPHACKS, AIチューター, リマインダー, SNS
style: |
  section {
    --ink: #4c3223;
    --muted: #80684c;
    --accent: #a86528;
    --yellow: #ffd460;
    width: 1280px;
    height: 720px;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
    background: #fff8e1;
    color: var(--ink);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
    font-size: 24px;
    line-height: 1.65;
    letter-spacing: .015em;
  }
  section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background: #edbd49;
  }
  section h1, section h2, section p, section figure { margin: 0; }
  section h1 { color: var(--ink); font-weight: 800; letter-spacing: -.035em; }
  section h2 { color: var(--ink); font-weight: 700; letter-spacing: -.025em; }
  section strong { font-weight: 800; }
  .eyebrow { position: absolute; left: 64px; top: 44px; font-size: 20px; font-weight: 700; color: var(--accent); }
  .cover-title { position: absolute; left: 60px; top: 88px; font-size: 66px; line-height: 1.28; }
  .highlight { background: linear-gradient(transparent 67%, #ffdf80 67%, #ffdf80 91%, transparent 91%); }
  .problem { position: absolute; left: 64px; top: 300px; width: 755px; }
  .label { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--muted); }
  .problem h2 { font-size: 30px; line-height: 1.5; }
  .problem p { margin-top: 10px; font-size: 22px; line-height: 1.6; }
  .solution { position: absolute; left: 64px; top: 490px; width: 731px; border-top: 2px solid #e5d3aa; padding-top: 18px; }
  .solution .label { color: var(--accent); margin-bottom: 5px; }
  .solution h2 { font-size: 34px; line-height: 1.5; }
  .solution p { margin-top: 8px; font-size: 23px; }
  .mascot { position: absolute; left: 732px; top: 164px; width: 480px; height: 480px; object-fit: contain; }
  .mascot-caption { position: absolute; left: 875px; top: 626px; width: 330px; text-align: center; font-size: 20px; font-weight: 700; }
  .footer { position: absolute; left: 64px; bottom: 22px; right: 64px; font-size: 17px; color: var(--muted); letter-spacing: .035em; }
  .page { float: right; font-size: 16px; }
  section.product { background: linear-gradient(to right, #fff8e1 0%, #fff8e1 67%, #ffe8a6 67%, #ffe8a6 100%); }
  .product .eyebrow { top: 44px; }
  .product-title { position: absolute; left: 60px; top: 89px; width: 770px; font-size: 58px; line-height: 1.32; }
  .lead { position: absolute; left: 64px; top: 276px; width: 735px; font-size: 25px; line-height: 1.8; letter-spacing: 0; }
  .voice-label { position: absolute; left: 188px; top: 387px; color: var(--accent); font-size: 17px; font-weight: 700; }
  .voice-avatar { position: absolute; left: 34px; top: 413px; width: 157px; height: 157px; object-fit: contain; }
  .voice { position: absolute; left: 183px; top: 422px; width: 554px; box-sizing: border-box; padding: 23px 28px; background: #ffffff; border: 1.5px solid #e8c995; border-radius: 25px 25px 25px 5px; font-size: 29px; font-weight: 700; line-height: 1.6; letter-spacing: 0; }
  .benefit { position: absolute; left: 64px; top: 585px; font-size: 31px; font-weight: 800; letter-spacing: -.02em; }
  .consult { position: absolute; left: 64px; top: 633px; font-size: 20px; color: var(--muted); letter-spacing: 0; }
  .phone { position: absolute; left: 922px; top: 52px; width: 264px; margin: 0; }
  .phone img { display: block; width: 264px; height: auto; border: 7px solid #60432e; border-radius: 39px; box-sizing: content-box; box-shadow: 0 16px 28px #7b4b2325; }
---

<p class="eyebrow">SNSを開く、その瞬間に</p>

<h1 class="cover-title">「ToDoめる」<br><span class="highlight">SNSに、トドメをさす。</span></h1>

<div class="problem">
  <div class="label">困った...</div>
  <h2>やることがあるのに、ついついSNS。<br> そんな自分に落ち込んでしまう。</h2>
</div>

<div class="solution">
  <div class="label">私たちの解決策</div>
  <h2>「ついつい開く」を、ポジティブに。</h2>
  <p>対話とアドバイスで、次の小さな一歩を一緒に考える。</p>
</div>

<img class="mascot" src="assets/final/ant-character.png" alt="公式キャラ">
<p class="mascot-caption"> / SNS開く前に、待って！ \ </p>

<div class="footer">チーム「あと1分だけ」&emsp;2026.10.18<span class="page">01 / 02</span></div>

---

<!-- _class: product -->

<p class="eyebrow">あなたの「やること」を知っているAIチューター</p>

<h1 class="product-title">AIと相談して、<br>SNSの前にTODOを消化！</h1>

<p class="lead">いつものリマインダーにある「やること」をもとに、<br>AIが、今のあなたに合う一歩を考えます。</p>

<p class="voice-label">AIチューター「アリ」の声かけ例</p>
<img class="voice-avatar" src="assets/final/ant-character.png" alt="アリ">
<div class="voice">レポート、まず1文だけ<br>書いてみない？</div>

<p class="benefit">どうしてもSNSを使いたいときは、AIを説得します。</p>

<figure class="phone">
  <img src="assets/final/figma-chat.png" alt="デモ">
</figure>

<div class="footer">チーム「あと1分だけ」&emsp;2026.10.18<span class="page">02 / 02</span></div>