PROJECT MEMO · 2026-04-30

ぷくぷくシール帳
プロジェクトメモ

PNG等のシール画像をアップロードして、自由に貼り付け・保存できるWebアプリ。ゆくゆくはLINEコミュニティ（500人規模）向けに「みんなでシールを作ってシェア」する企画アプリへ発展させたい。

このメモを読む前に

現在はローカルHTMLで動く単体アプリ。Phase 2でCloudflareによるクロスデバイス化、Phase 3でLINEコミュニティ（500人）向け共有プラットフォームへ展開する3段階の計画を整理したメモです。

PHASE 01

現状と設計

今何ができるか・次のフェーズをどう設計するか

1
概要と現在の実装
単一HTMLファイル、バックエンドなし

ファイル：Tools/sticker-book/index.html（単一ファイル、依存なし）

技術：バニラHTML + CSS + JS。外部ライブラリ不使用。

現在できること

  • ✓シール画像のアップロード（PNG推奨・複数対応）
  • ✓ボードへの貼り付け・移動・リサイズ・回転
  • ✓シールライブラリをlocalStorageに自動保存（ブラウザごと）
  • ✓ボードをPNG画像としてダウンロード
  • ✓スクラップブック風デザイン（スパイラルバインダー・クラフト紙）

現在の制約

できないこと
localStorageは同一ブラウザのみ有効。別デバイスや別ブラウザでは引き継がれない
解決策
Cloudflare R2 + Workersでクロスデバイス対応（Phase 2）
2
ロードマップ（3フェーズ）
ローカル → クロスデバイス → LINEコミュニティ
1
Phase 1 — 現状（完了）
ローカルHTMLで動作。localStorageで同一ブラウザのみ保存。
2
Phase 2 — クロスデバイス化
Cloudflare Pages + Workers + R2 + KVにデプロイ。どのブラウザからでも同じライブラリが使える。個人利用想定。
3
Phase 3 — LINEコミュニティ企画
500人規模のLINEアカウント向け。ユーザーがシールを投稿・共有。LINE Login / LIFFで認証。管理者によるシール承認フロー。
実装順序の方針

Phase 2（クロスデバイス化）→ Phase 3（LINE連携）の順で進める。Phase 2が土台になるのでスキップ不可。

3
Cloudflare構成と費用感
バックエンドも全部Cloudflare内で完結できる

「クロスデバイスにするには外部バックエンドが必要」ではなく、Cloudflare内で全部完結できる。

アーキテクチャ
ブラウザ（どのデバイスでも） ↕ fetch API Cloudflare Workers（API） ├── R2（シール画像ファイル本体） └── KV または D1（ライブラリ一覧・メタデータ）

無料枠の目安（500人規模）

サービス無料枠500人での消費目安判定
Pages（ホスティング）リクエスト無制限余裕✅ OK
Workers（API）10万req/日5万req/日想定✅ OK
R2 ストレージ10GB500人×10枚×200KB≒1GB✅ OK
R2 読み取り1000万回/月余裕✅ OK
KV 書き込み1,000回/日同日大量投稿で超える可能性⚠️ 注意

R2が特に優秀。画像の読み書きが実質タダ（AWSのS3は転送量課金なので真逆）。

KV書き込みがボトルネック候補。回避策：KVを使わずR2またはD1（SQLite）だけで管理する設計に変える。有料にしても Workers Paid $5/月 で大幅解消。

PHASE 02

展開戦略

500人LINE企画・LINE認証・User IDの活用

4
500人LINEコミュニティへの展開判断
Cloudflareで問題ない？有料プランが必要？
Q. 500人のLINEコミュニティ向けアプリとして使うとき、Cloudflareで問題ある？有料プランが必要？
→ 基本的に無料枠で動く。有料でも月$5。
KV書き込みのみ注意が必要だが、D1またはR2のみの設計で回避可能。

LINEコミュニティ企画として作る場合の追加要件

1
認証 — LINE Loginで「LINE IDでサインイン」が自然。LIFFにすればLINEアプリ内で開ける
2
モデレーション — 誰でも投稿できると不適切画像のリスクあり。「投稿 → 管理者承認 → 公開」フローがほぼ必須
3
ライブラリの分離 — 自分だけのシール（個人）とみんなに公開するシール（共有）を分けるか決める必要あり
5
LINE認証・LIFFの仕組みとコスト
ユーザーは追加アカウント不要、開発者側も無料
Q. LINE Loginで認証アカウントが別途いる？
ユーザー側は不要。LINEアカウントがそのまま使える。「LINEでログイン」ボタンをタップするだけ。500人のフォロワーは全員すでにLINEアカウントを持っているので、追加で何かアカウントを作ってもらう必要はゼロ。
ユーザーがやること： 「LINEでログイン」ボタンをタップするだけ ↓ LINEアプリ内ブラウザで開く（LIFF） ↓ 自動でLINE IDを取得 「〇〇さんとしてログイン」状態になる

費用（LINE Login / LIFF）

機能料金備考
LINE Developers登録無料LINEアカウントでそのまま登録
LINE Loginチャネル作成無料
LIFF（アプリ内ブラウザ）無料LINE Loginに付属

注意点1つだけ：LINE公式アカウント自体の月額は別途かかる（500人いるアカウントなら契約済みのはず）。でもLIFF/LINE Loginの認証機能は、公式アカウントプランに関係なく無料で使える。

LIFFとLINEミニアプリの違い

LIFFLINEミニアプリ
開き方トークのURLをタップLINEの「サービス」タブ
審査不要LINEの審査が必要
実装難度低い高い
LINE Pay連携不可可能
向いてる用途コミュニティ内の限定機能一般公開サービス
結論

シール帳企画はLIFFで十分。審査なし・実装も簡単・LINEアプリ内で開ける。LINEミニアプリは一般公開のサービスに使うもの。

6
User IDタグ付けと次のTODO
投稿者に通知・クレジット・ランキングが実現できる

LINEログインで取得できるLINE User ID（ユーザーごとの固有ID）をシールに紐づけて保存することで以下が実現できる：

✉️ DM通知
シール承認時に投稿者本人にだけ「公開されました！」
🏷 作者クレジット
シールに作者名（LINE表示名）を表示
🏆 ランキング
投稿枚数・人気度ランキング
🎁 特典付与
人気シール作者へ特典DM
🔑 権限管理
特定ユーザーへの管理者権限付与
重要な条件

LINE LoginチャネルとLINE公式アカウントが同じLINE Developersプロバイダー配下にあること。同プロバイダーで作ればUser IDが一致し、アプリユーザー＝公式アカウントフォロワーとして紐づけできる。

残りのTODO

  • □LINE Login / LIFF でユーザー認証（同プロバイダー設定）
  • □シール投稿 → 管理者承認 → 公開ライブラリに反映フロー
  • □共有ライブラリ ＋ 個人ライブラリの分離設計
  • □シール作者のクレジット表示
  • □不適切画像の報告機能
  • □Phase 2: Cloudflareへのデプロイ実施

まとめ — 決まったこと全リスト

PHASE 01 — 現状と設計
単一HTMLファイルで完成済み localStorageで自動保存 PNG画像としてダウンロード可 クロスデバイスはPhase 2で対応 Cloudflare内で全完結できる 500人規模でも基本無料枠で動く KV書き込みはD1またはR2のみで回避 有料でも月$5
PHASE 02 — 展開戦略
LINE Login / LIFFで認証 ユーザー追加アカウント不要 LIFF = 審査不要・LINEアプリ内で開く 同プロバイダーでUser IDを統一 投稿承認フローが必要 承認時にDM通知できる 実装順: Phase 2→3
本質

Cloudflare単体でホスティング・API・ストレージ・DBが全部揃う。LINE認証も追加コストゼロ。技術的ハードルは低く、あとは「モデレーションをどう設計するか」が肝。