回すたび、友だちのノートが少し近くなる。
KizunaNote is a mobile exchange-diary app for friend groups that recreates the feeling of passing around one shared notebook. Each group owns one notebook, and only the current holder can read or write the active page, keeping the experience intimate, nostalgic, and distinctly non-social-feed. It is designed for friends who want a cute, retro, low-pressure way to leave short updates, rankings, doodles, and reminders for the next person.
High School Friend Group Leader, 17 - Keeps a small friend group active after school and wants a fun ritual everyone can participate in. They care about aesthetic, simplicity, and making sure the notebook actually gets passed around.
University Friend Member, 21 - Uses group chat constantly but wants something more thoughtful than ephemeral messaging. They need a place to leave short updates and see a record only when it is their turn.
Design-Minded Friend, 26 - Cares about visual expression and wants each notebook to feel customized to the group. They are likely to pay for themes and long-term archive access later.
Mika is in two friend groups and normally loses track of who should post what. In chat, reminders feel noisy, and a standard diary app feels too private and static to share with friends.
With KizunaNote, Mika opens the home screen and instantly sees that one notebook is her turn. She taps the cover, writes a short note, adds a ranking and a few doodles, then hands it to the next friend with a single action. The notebook now feels like a shared ritual instead of another app notification.
A week later, the group is still active because every turn feels intentional and easy. For the product, that means higher retention, more handoffs completed, and a stronger chance of premium conversion when the group wants themes, archive access, or PDF keepsakes.
Team & resourcing - Small product team - 2 mobile/full-stack engineers, 1 product designer, part-time PM, and QA support as needed.
Paste this into Cursor, Bolt, Lovable, or v0 to start building.
Build a mobile-first app called KizunaNote, a nostalgic exchange-diary product where each group owns exactly one shared notebook. Use a modern stack such as Next.js or React Native with TypeScript, PostgreSQL, and a Node.js API. Create a polished prototype with realistic data and working navigation. Core product rules: Each group has one notebook. One user can belong to multiple groups. Only the current holder can read/edit the active page. The notebook rotates by fixed or editable turn order. The handoff deadline is 3 days. When handed off, the previous holder loses access to the active page content. Group chat exists separately from the notebook. Primary screens: Login and signup Home dashboard showing all joined notebooks with turn status, next holder, due date, and a prominent your turn state Notebook cover screen Notebook page reader with swipe/page-flip interaction Current holder editor with short text, custom ranking, and doodle layer Ranking entry screen Doodle/canvas entry screen Group member list Group chat screen Profile screen with avatar, bio, group list, and text color Settings screen Theme selection screen for notebook designs UX requirements: Use a cute Heisei-era retro style with notebook paper texture, pastel colors, stickers, hearts, stars, and hand-written cues, while keeping it readable and mobile-friendly. The notebook reading experience must feel like opening a physical notebook, not a feed. Add cover-open animation, page numbers, metadata for author/date/next holder/due date, and reduced-motion fallback. Data model: Users, groups, group_memberships, notebooks, notebook_pages, page_rankings, page_doodles, turn_order, handoff_events, chat_messages, themes, user_color_preferences, notifications, and reminder_jobs. Enforce authorization on the server so only the current holder can edit the active page. Build details: Use REST or GraphQL APIs, a relational schema in PostgreSQL, realtime updates for chat and handoff status, and push notification-ready hooks. Include seed data for at least three groups and realistic notebook pages. Make the prototype interactive enough to demonstrate flows from home to notebook open to page browse to edit to handoff to chat.
# 交換日記アプリ UI / UX プロトタイプ仕様書 ## 1. アプリ概要 複数人で1冊の交換日記を順番に回していくスマートフォン向けアプリ。 「実際の交換日記を回している感覚」をデジタル上で再現することを重視する。 コンセプトは、 * 平成っぽい * かわいい * 懐かしい * ノート・手帳感がある * 友達同士で使いたくなる という雰囲気。 単なるSNSや日記アプリではなく、「みんなで1冊のノートを回す」という体験を中心にする。 --- # 2. 基本構造 ## グループ 1グループにつき1冊の交換日記を持つ。 * 1グループ = 1冊の交換日記 * 1ユーザーは複数グループに所属可能 * ノートのメンバー = グループのメンバー * グループチャットは交換日記本体とは別機能 例: 「高校の友達」というグループ ↓ 「高校の友達ノート」という1冊の交換日記 「大学の友達」という別グループ ↓ 別の交換日記 --- # 3. 交換日記の基本ルール ## ノートを回す 1冊のノートをメンバー間で順番に回す。 例: A → B → C → D → A 順番は固定ではなく、グループ内で変更できる。 ### 現在の持ち主 現在ノートを持っているユーザーだけが、そのページを閲覧・編集できる。 自分の番になったら日記を書く。 日記を書き終えたら次のメンバーへ渡す。 ### 引き渡し 次の担当者への引き渡し期限は「3日以内」。 期限が近づいた場合や期限を過ぎた場合はリマインダーを表示する。 ノートを次の人へ渡した瞬間、前の持ち主はその本文を閲覧できなくなる。 「自分の番だけ書ける」という交換日記らしさを重視する。 --- # 4. 日記ページ 1人につき1ページ。 ページは紙のノートのようなデザインにする。 ## 基本文 短い自由記述。 文字数は100〜200文字程度を想定。 長文ブログのようにはせず、手書きの日記に近い短さにする。 ## ランキング ユーザー自身がテーマを決めてランキングを作れる。 例: 「今週好きだった曲BEST3」 1位:○○ 2位:○○ 3位:○○ ランキング項目・タイトルはユーザーが自由に設定できる。 ## 手書き・落書き ページ上に手書きの落書きを追加できる。 文章を手書き入力する機能ではなく、 「落書き・イラスト・ちょっとした装飾」 として使う。 例: * ハート * 星 * 顔 * 矢印 * 簡単なイラスト --- # 5. メンバーごとの文字色 メンバーごとに自分の文字色を設定できる。 文字色はRGB / HEX等で設定可能。 誰が書いたページなのか、色でも分かるようにする。 ただし、色は読みやすさを損なわないようにする。 --- # 6. ノート閲覧画面 交換日記を「普通のSNS投稿一覧」のようには見せない。 実際のノートを開いてページをめくっているようなUIにする。 ## ノートを開く ホーム画面からノートを選択 ↓ ノートの表紙を表示 ↓ タップしてノートを開く ↓ 日記ページを表示 ## ページめくり 左右スワイプでページをめくる。 紙のノートのようなページめくりアニメーションを使用する。 可能であれば、 * ページ番号 * ノートの表紙 * 紙の質感 * ページの余白 * 手書き感 などを表現する。 --- # 7. ノートを開いた後の画面 現在表示しているページを中心にする。 ページ上部などに、 * 現在のページを書いたユーザー * 日付 * 次の担当者 * 引き渡し期限 などを表示できる。 自分の番の場合のみ、 「日記を書く」 ボタンを表示する。 自分の番ではない場合は閲覧専用。 --- # 8. 自分の番の画面 現在の担当者が「日記を書く」を押すと編集画面へ移動。 編集できる内容: ### 本文 100〜200文字程度の自由記述。 ### ランキング ユーザーが自由にテーマを設定。 ### 落書き 手書きで自由に描ける。 ### 装飾 平成っぽいかわいい雰囲気を作れる装飾を想定。 ただし、MVPでは必要最低限の機能でもよい。 --- # 9. ホーム画面 ログイン後、最初に表示するメイン画面。 自分が参加している交換日記を一覧表示する。 例: 「参加中のノート」 ┌─────────────┐ │ 🌸 放課後メンバー │ │ 次は あいちゃん │ │ あと2日 │ └─────────────┘ ┌─────────────┐ │ 💙 大学メンバー │ │ あなたの番! │ │ 日記を書こう │ └─────────────┘ ノートごとに、 * ノート名 * 表紙 * 現在の担当者 * 次の担当者 * 引き渡し期限 * 自分の番かどうか などを分かりやすく表示。 「自分の番」のノートは特に目立たせる。 --- # 10. 下部ナビゲーション 基本構成: * ホーム * プロフィール * 設定 グループチャット機能も存在する。 チャットを独立した下部ナビゲーションにするか、グループ/ノート画面からアクセスするかはUI上で検討する。 現時点では「ホーム・プロフィール・設定」を基本ナビゲーションとして扱う。 --- # 11. グループチャット 交換日記とは別に、グループメンバー同士で会話できる機能。 目的: * 「次の人、早く回して〜!」 * 「今回のお題どうする?」 * 普通の雑談 など。 交換日記のページそのものとは分離する。 グループ単位でチャットを持つ。 --- # 12. プロフィール画面 ユーザー自身のプロフィールを表示。 想定項目: * プロフィール画像 * ユーザー名 * 自己紹介 * 所属しているグループ / ノート * 自分の文字色 平成っぽいプリクラ・プロフィール帳のような可愛い雰囲気を取り入れる。 --- # 13. 設定画面 基本的なアプリ設定をまとめる。 想定項目: * アカウント設定 * 通知設定 * リマインダー設定 * デザイン設定 * プライバシー設定 * その他設定 --- # 14. デザインコンセプト 全体的に「平成のかわいい交換日記」をイメージ。 方向性: * ノート * 手帳 * プリクラ * シール * 落書き * キラキラ * ハート * 星 * 手書き文字 * カラフル * 友達同士 ただし、現在のスマートフォンアプリとして使いやすいUIにする。 「平成レトロ」だけに寄せすぎて操作性が悪くならないようにする。 --- # 15. デザインテーマ機能 将来的に、ノートのデザインテーマを選択できるようにする。 例: * ピンク系 * ブルー系 * ハート * 星 * シンプル * 平成ギャル風 * ゆめかわ系 * 手帳風 など。 ユーザーが自分の好みに合わせてノートのデザインを変更できる。 テーマは複数用意する想定。 --- # 16. 過去の日記 過去のページをノートとして振り返れる。 ページをめくる感覚で過去の日記を閲覧する。 無料ユーザー: 直近2か月程度まで閲覧可能。 有料プラン: 過去ログをより長期間閲覧可能、または無制限を想定。 ※料金・具体的な期間は未確定。 --- # 17. PDF化 将来的な機能として、交換日記をPDF化できるようにする。 例えば、 「2026年 春〜夏の交換日記」 のように、一定期間のページをまとめて保存できる。 実際の交換日記を卒業アルバムのように残せる体験を想定。 これはMVPでは必須ではない。 --- # 18. 収益化 基本的な交換日記機能は無料で利用できる形を想定。 有料機能の候補: * 過去ログの無制限閲覧 * デザインテーマ追加 * 特別なノートデザイン * PDF化 * その他プレミアム装飾 MVP完成後に収益化機能を追加する想定。 料金は未確定。 --- # 19. 主要画面 まず以下の画面をプロトタイプとして作成する。 1. ログイン / 新規登録 2. ホーム 3. ノート選択 4. ノート表紙 5. 日記ページ閲覧 6. 自分の番の日記ページ 7. 日記作成・編集 8. ランキング入力 9. 落書き入力 10. ノートメンバー一覧 11. グループチャット 12. プロフィール 13. 設定 14. デザインテーマ選択 --- # 20. 重要なUX 最も重要なのは「アプリを開いた瞬間に、交換日記を回している感覚が分かること」。 一般的な日記アプリやSNSのように、 「投稿を作る → タイムラインに投稿する」 という構造にはしない。 以下の体験を優先する。 ホーム ↓ 参加中のノートを見る ↓ ノートを選ぶ ↓ 表紙を開く ↓ ページをめくる ↓ 自分の番なら日記を書く ↓ 次の人へ渡す ↓ 次の担当者に通知 --- # 21. Figmaプロトタイプで重視すること スマートフォン画面としてデザインする。 特に以下を実際に操作できるプロトタイプにする。 ### フロー1:通常閲覧 ホーム → ノート選択 → 表紙 → ページを開く → 左右スワイプでページ移動 ### フロー2:自分の番 ホーム → 「あなたの番」と表示されたノート → ノートを開く → 「日記を書く」 → 編集画面 → 本文入力 → ランキング → 落書き → 保存 → 次の担当者へ渡す ### フロー3:グループチャット ホーム → ノート / グループ → チャット → メッセージ送信 --- # 22. Figmaに求める成果物 この仕様をもとに、以下を作成する。 * スマートフォン向けUI * 画面一覧 * 画面遷移 * 主要画面の高精度プロトタイプ * ノートを開くアニメーション * ページめくりのインタラクション * 自分の番 / 他人の番の状態差 * 平成っぽい可愛いデザイン * ホーム画面 * ノート閲覧画面 * 日記作成画面 * グループチャット * プロフィール * 設定 デザインだけでなく、実際にアプリを操作しているように感じられるプロトタイプにする。 --- # 23. Figma側で勝手に変更しないこと 以下の基本仕様は変更しない。 * 1グループにつき1冊のノート * 1ユーザーは複数グループに所属可能 * 現在の持ち主だけが現在ページを閲覧・編集できる * ノートはメンバー間で順番に回す * 引き渡し期限は3日以内 * 順番は変更可能 * 100〜200文字程度の短文 * ユーザー定義ランキング * 手書きは主に落書き用途 * メンバーごとの文字色 * ノートはページをめくるUI * ホームには参加中のノートを表示 * グループチャットは交換日記とは別機能 * 平成っぽいかわいいデザイン 未確定の仕様については、勝手に決定せず「要検討」として扱う。
Design by The Resonance | Powered by GPC – The AI Transformation Company