Tobira

思い出の扉をひらく

完全版アプリ実装ガイド

鈴木さん向け設計図

For: 鈴木さま(エンジニア)
From: 中嶋(Tobira運営)
Date: 2026年5月26日
Version: 5.0 Complete

🐾 コヌシと一緒に、素敵なサービスを作りましょう 🚪

📑 目次

  1. はじめに(必ず最初に読んでください)
  2. 【重要】今回の変更点まとめ
  3. Tobiraサービス概要
  4. 商品・料金プラン
  5. 全体機能リスト
  6. アプリの全画面リスト
  7. 各画面の詳細設計
  8. 紐付け画面の詳細仕様
  9. アルバム共有機能(URL + QR)
  10. AR再生画面とコヌシの体験
  11. アニメーション動作指示
  12. サウンド仕様
  13. Stripe決済の実装
  14. テンプレートの技術仕様
  15. Coming Soonモーダル
  16. ヘルプ機能
  17. デザイン仕様(カラー・フォント・ロゴ)
  18. 素材ファイル一覧
  19. 段階的実装計画
  20. 将来計画(Phase 2 / 3)
  21. お問い合わせ

1. はじめに

鈴木さま

お世話になっております、中嶋です。
Tobiraアプリの完全版設計図をお送りいたします。

📌 このドキュメントの読み方
  1. まず 「2. 今回の変更点まとめ」 をご確認ください (前回のやり取りから変わったポイントです)
  2. その後、各セクションを順に確認していただけますと幸いです
  3. 素材ファイルは別フォルダで提供します

💡 開発の考え方

すべてを一度に完璧に作る必要はありません。
以下の3段階で進めていただければと思います。

🥇 Phase 1: MVP(ローンチ用)

基本機能の実装。ARはシンプルな画像切り替えでOK。
まずはローンチを目指します。

🥈 Phase 2: 改善(運用後3〜6ヶ月)

アニメーションの滑らかさ向上、細かい演出の追加。
受信コード機能なども追加します。

🥉 Phase 3: 完全AR化(将来)

ARKit/ARCoreを使った本格AR。
紙の上にコヌシが立体的に表示されます。

まずはPhase 1で動くものを作りましょう。

2. 【重要】今回の変更点まとめ

前回までのやり取りから、以下の点を変更しました。
鈴木さんが「あれ、ここ変わってた?」と混乱しないよう、
すべての変更点をBefore/Afterで明示します。

変更1

料金プランの簡素化

BEFORE

・ライトプラン(3ページセット)
・3ページセット、5ページセット等
・複数のパッケージプラン

AFTER

・Standardプラン1択
・1ページ単位で1〜10ページ自由選択
・¥500/ページ

理由: 「3ページセット」などは一般のお客様に分かりにくいため、1ページ単位のシンプルな価格体系に統一しました。

変更2

Premium/Bridal/Petプランの保留

BEFORE

・全プラン同時実装予定

AFTER

・アプリ上では「Coming Soon」表示
・タップでLINE登録案内モーダル
・ローンチはStandardのみ

理由: アルバム仕様未確定のため、まずはStandardのみでローンチします。

変更3

アプリアイコンの仕様

BEFORE

・透過PNG
・iOS起動時に青色になる問題発生

AFTER

・白背景(透過なし)
・1024 × 1024 ピクセル
・PNG形式

理由: iOSが透過部分を青色化するため、白背景に変更します。

変更4

アプリ内ヘッダーロゴの書体変更

BEFORE

・細めのサンセリフ体

AFTER

・クラシックなセリフ体
(Cormorant Garamond Bold等)
・重みと品のある書体

理由: よりブランドらしい上品な印象に変更します。

変更5

3Dアルバム機能の非搭載

BEFORE

・アプリ内に搭載予定

AFTER

・今回のアプリには非搭載
・HPやBASE等で別途展開

理由: アプリの方向性を統一するため、3Dは別チャネルで展開します。

変更6

アルバム共有方式の変更

BEFORE

・ZIPファイル方式

AFTER

・共有URL方式(LINEで送信用)
・共有QRコード方式(印刷物用)
・両方対応
・Phase 2で受信コード(ABCD-1234)追加

理由: 一般のお客様にとって「ZIP」が分かりにくいため、URL/QR方式に変更しました。

変更7

動画の保存場所

BEFORE

・クラウド前提

AFTER

・お客様のスマホ内(ローカル)が基本
・共有時のみ一時的にクラウド保管
・ダウンロード完了で自動削除

理由: お客様のプライバシー優先、サーバーコスト最小化のため。

変更8

マスコットキャラクター「コヌシ」の確定

BEFORE

・概念のみ存在

AFTER

・キャラデザイン確定
・全ポーズ画像準備済み
・アニメーション動作指示書あり
・効果音準備済み

理由: ブランドキャラクターとして確立しました。

3. Tobiraサービス概要

サービスとは?

Tobiraは、紙のフォトアルバムに動画と写真を紐付け、
スマホでかざすと動画が再生される「魔法のアルバム」サービスです。

体験の流れ

1. お客様が写真と動画を選ぶ
2. 8種類のテンプレートから1つ選ぶ
3. Stripeで決済
4. アルバムが届く(or データのみ)
5. スマホで紙にかざす
6. マスコット「コヌシ」が扉を開ける
7. 動画が再生される

ブランドの世界観

4. 商品・料金プラン

⭐ Standardプラン(初期リリース)

ページ数 価格 配送オプション
1ページ¥500データのみ無料 / 印刷+¥800
3ページ¥1,500データのみ無料 / 印刷+¥800
5ページ¥2,500★印刷&発送 無料
10ページ¥5,000★印刷&発送 無料

配送オプション(2択フラット型)

オプション説明
データのみ無料・即時配信(PDFダウンロード)
印刷&発送1〜3ページ +¥800 / 5ページ以上無料

Coming Soonプラン

これらはアプリ内で「Coming Soon」として表示し、タップでLINE登録誘導します。

5. 全体機能リスト

Phase 1で実装する機能

カテゴリ機能優先度
認証不要(Stripeで住所自動取得)Phase 1
アルバム作成テンプレート選択、写真・動画選択、メッセージPhase 1
決済Stripe Checkout(3パターン)Phase 1
マイアルバム一覧、編集、削除Phase 1
AR再生QR読み取り、コヌシ表示(2D)、動画再生Phase 1
共有機能URL/QRで友達に動画を渡すPhase 1
動画差し替えアプリ内でいつでも変更可能Phase 1
ヘルプ?ボタン、LINE問い合わせPhase 1
Coming SoonPremium等を「準備中」表示Phase 1
受信コード8文字コードで受け取りPhase 2
多言語5言語完全対応Phase 2
完全ARARKit/ARCore実装Phase 3

6. アプリの全画面リスト

Tobiraアプリは全20画面で構成されます。
画面イメージは別途お送りする画像ファイルをご参照ください。

#画面名機能
01ホーム画面マイアルバム一覧 + 新規作成ボタン
02どちらから始めますか?自分のスマホ / 共有受信の分岐
03写真選択画面スマホから写真を選ぶ
04動画選択画面スマホから動画を選ぶ(最大5分)
05メッセージ入力タイトル・メッセージ(任意)
06テンプレート選択8種類から選ぶ
07プレビュー画面完成イメージの確認
08料金確認・配送選択データのみ / 印刷&発送の選択
09決済画面Stripe Checkoutへ遷移
10注文完了画面注文番号表示、コヌシ初登場
11共有受信画面URL / QR の選択
12共有QRスキャン共有QRをカメラで読む
13アルバムQRスキャン紙のアルバムQRを読む
14ダウンロード中コヌシが待ってくれる
15紐付け完了「今すぐ見る」CTA
16アルバム詳細AR再生、共有、編集
17AR再生画面コヌシ登場、動画再生
18共有方法選択URL生成 / QR生成の選択
19設定画面言語、音声、ヘルプ等
20ヘルプ画面?ボタン、コヌシ解説

7. 各画面の詳細設計

主要画面の詳細設計を記載します。
全画面の詳細は、別添の画面イメージ画像と合わせてご確認ください。

画面01: ホーム画面

📁 ファイル: app_screen_01_home.png

目的: アプリ起動後のメイン画面。マイアルバム一覧と新規作成ボタン。

レイアウト:

機能:

画面02: どちらから始めますか?

📁 ファイル: app_screen_02_choose_start.png

目的: 2つの入口を提示(自分用 / 共有受信)。

レイアウト:

機能:

画面17: AR再生画面(コヌシ登場)

📁 ファイル: app_screen_17_ar_playback.png

目的: アルバムにかざしたQR/写真を認識し、コヌシのアニメーションと動画再生を行う。

レイアウト:

動作の流れ:

  1. QR/写真を認識(0-2秒)
  2. コヌシ登場(2-5秒)
  3. ドアの前でやれやれ(5-8秒)
  4. 鍵を回す(8-12秒)
  5. ドアが開く(12-15秒)
  6. 動画再生開始(15秒〜)
  7. 動画終了後、コヌシ退場

※詳細は 「11. アニメーション動作指示」 参照

※ 他17画面の詳細は、別添画像ファイルと同じテンプレートで記述します。
本ドキュメントでは紙幅の都合上、主要画面のみ記載しています。
全画面の細かい仕様は、添付の画面イメージ画像と各セクション(8-15)をあわせて確認してください。

8. 紐付け画面の詳細仕様

動画の仕様

項目仕様
最大長さ5分(300秒)
最大ファイルサイズ100MB
形式MP4
向き縦・横どちらもOK
必須動画なしでは作成不可

写真の仕様

項目仕様
最大サイズ20MB
形式JPG / PNG
枚数1ページに1枚
必須写真なしでは作成不可

保存・差し替え

9. アルバム共有機能(URL + QR)

Phase 1で実装する2方式

方式1: 共有URL

方式2: 共有QRコード

🔮 Phase 2で追加予定
方式3: 受信コード(ABCD-1234 など8文字)
口頭で伝えられる短いコード

プレゼントする側の操作

1. マイアルバムからアルバムを選択
2. 「アルバムを共有」ボタン
3. 動画がクラウドに一時保管される
4. 共有方法を選択(URL or QR)
5. LINE で送る、または印刷して渡す

受け取る側の操作

1. アプリをダウンロード
2. 「共有から受け取る」を選択
3. 受け取り方法を選択(URL or QR)
4. 動画ダウンロード
5. アルバムQR読み込み
6. AR体験開始

動画の保管(セキュリティ)

10. AR再生画面とコヌシの体験

マスコット「コヌシ」とは

Tobiraの世界の番人。小さくてふわふわの白い猫風の生物。
ちょっとめんどくさそうな性格が魅力。

コヌシのキャラクター仕様

項目仕様
体型小さく、ふわふわの白い毛
眠そうな半目
ピンクの小さな鼻
足元グレーのブーツ
洋服なし(自然な毛並みのみ)
ネックレスなし(鍵は首にかけない)
鍵の扱い引きずる or 足元に転がす
性格めんどくさそう、眠そう

コヌシのポーズ

  1. 歩く(横向き): 鍵を引きずって登場・退場
  2. 立ちあくび(前向き): ドアの前で「ふぁ〜」
  3. 座って見守る: 動画再生中
  4. 鍵を拾う: 中間ポーズ
  5. 鍵を回す: 中間ポーズ
  6. 伸びをする: 動画終了時

11. アニメーション動作指示

※詳細は別添 tobira_animation_spec.txt をご参照ください。

全12シーンのタイミング表

シーン時間内容効果音
10-2秒待機・QR認識ピン
22-5秒コヌシ登場・歩くぺたぺた
35-8秒ドア前であくびふぁ〜
48-10秒鍵を拾うシャラン
510-12秒鍵を回すカチャッ
612-15秒ドアが開くキィー
715-17秒動画拡大シャラララ
817秒〜動画再生中動画音
9END動画終了-
10END+1秒コヌシ立ち上がりふぁ〜
11END+3秒ドアを閉めるガチャッ
12END+5秒コヌシ退場ぺたぺた

12. サウンド仕様

効果音ファイル

ファイル名用途
konushi_footsteps.mp3歩く足音(ループ)
konushi_yawn.mp3あくび
key_pickup.mp3鍵を拾う
key_insert.mp3鍵を差し込む
key_turn.mp3鍵を回す
door_open.mp3ドアを開ける
door_close.mp3ドアを閉める
magical_glow.mp3魔法的な光

音量設定

13. Stripe決済の実装

※詳細は tobira_stripe_spec_v3_final.txt をご参照ください。

採用方式

Stripe Checkout(ホスト型)

3パターンのCheckout Session

パターン金額送料
データのみ¥500/ページ無料
印刷&発送(1-3P)¥500/ページ + ¥800+¥800
印刷&発送(5-10P)¥500/ページ無料

明細表記

TOBIRA ALBUM

APIキー

セキュリティのため、Stripeキーは別途LINEで個別にお送りします。
・テストキー: pk_test_xxx, sk_test_xxx, whsec_xxx
・本番キー: Stripe審査通過後にお送りします

14. テンプレートの技術仕様

印刷サイズ

レイヤー構造

  1. 最前面: テンプレートPNG(透過済み)
  2. テキスト(タイトル・メッセージ)
  3. QRコード
  4. 最背面: 写真

8種類のテンプレート

#名前テーマ
01Signature Pink桜・ピンク
02Memory Light朝の光・ベージュ
03Night Memory夜空・ネイビー
04Ocean Dream海・水彩
05Botanical植物・セージ
06Classic Frameゴールド額縁
07Minimal Archモダン
08Pet Warmペット・クリーム

15. Coming Soonモーダル

表示タイミング

Premium / Bridal / Pet プランをタップした時

デザイン

┌──────────────────────────────┐
│           [✕]                │
│                              │
│   [konushi_yawning画像]      │
│                              │
│   コヌシ「準備中だよ...」      │
│                              │
│     Premium Plan は          │
│       現在準備中             │
│                              │
│  リリース時にLINEで         │
│   お知らせします             │
│                              │
│ [LINEで通知を受け取る]      │
│      [また今度]              │
└──────────────────────────────┘

使用画像

konushi_yawning_standing.png

LINEボタンの遷移先

https://lin.ee/RciJwfc

16. ヘルプ機能(?ボタン)

?ボタンの配置

含めるコンテンツ

  1. Tobiraって何ができるの?
  2. アルバムの作り方
  3. アルバムの見方
  4. 大切な人にプレゼントする方法
  5. もらった動画を紐づける方法
  6. よくある質問
  7. コヌシって何?

問い合わせ

LINEに飛ばす: @258adwsx

17. デザイン仕様

カラーパレット

名前HEX用途
ネイビー#1A2B4Aメインカラー・文字
ウォームゴールド#C9A66Bアクセント・装飾
ライトゴールド#E8B86F暗背景での文字
クリーム#FBF8F0背景
ダークブラウン#5C4A3Aサブテキスト
ピュアホワイト#FFFFFFカード背景

フォント

用途フォント
日本語UIHiragino Sans, Yu Gothic
英語UISF Pro, Helvetica Neue
TobiraロゴCormorant Garamond Bold(クラシックセリフ)

ロゴの使い分け

用途使うロゴ
アプリアイコン白背景・1024×1024・透過なし
アプリ内ヘッダーマスターロゴ(透過・横長)
テンプレート上部「Tobira」文字のみ(イタリック)
HP・LINEマスターロゴ

18. 素材ファイル一覧

📁 logo/
├ tobira_master_logo.png(マスター)
├ tobira_app_icon.png(アプリアイコン用・白背景)
└ tobira_header_logo.png(アプリ内ヘッダー用・透過)

📁 templates/(8枚・透過処理済み)
├ template_01_signature_pink.png
├ template_02_memory_light.png
├ template_03_night_memory.png
├ template_04_ocean_dream.png
├ template_05_botanical.png
├ template_06_classic_frame.png
├ template_07_minimal_arch.png
└ template_08_pet_warm.png

📁 konushi/(マスコット・全ポーズ)
├ konushi_walking_left.png
├ konushi_walking_right.png
├ konushi_yawning_standing.png
├ konushi_sitting_watching.png
├ konushi_picking_key.png
├ konushi_turning_key.png
└ konushi_stretching.png

📁 doors/(ドア4状態)
├ door_01_closed.png
├ door_02_key_inserted.png
├ door_03_slightly_open.png
└ door_04_fully_open.png

📁 effects/(エフェクト)
├ sparkles.png
└ glow_halo.png

📁 sounds/(効果音・全種類)

📁 screens/(画面イメージ・全20枚)
└ app_screen_01_home.png 〜 app_screen_20_help.png

19. 段階的実装計画

🥇 Phase 1: MVP(ローンチ用)

目標: 動くものをまず作る

🥈 Phase 2: 改善(運用後3〜6ヶ月)

🥉 Phase 3: 完全AR化(将来)

20. 将来計画(Phase 2 / 3)

※詳細は tobira_roadmap.txt をご参照ください。

商品ライン拡張

コヌシのブランド展開

21. お問い合わせ

ご相談・ご質問はお気軽に

中嶋(Tobira運営)

相談したいこと

  1. 開発期間の目安(Phase 1まで)
  2. 技術選定(フレームワーク・DB等)
  3. 既存ARアプリとの統合方針
  4. 不明点・疑問点なんでも

長くなりましたが、よろしくお願いいたします。

コヌシと一緒に、素敵なTobiraを作りましょう 🚪🐾

中嶋
2026年5月26日