機能表

開発スコープ定義用（技術スタックは自由）

デザインガイドライン

1

販売ページ向け

エンドユーザー向け販売サイト。8色テーマ対応。

2

管理画面向け

事務所・運営者向け管理画面。shadcn/ui ベース。

Picture-i

154機能
販売ページユーザー向け（73機能）ガイドライン1

1.フォト商品

ID機能名概要
PI-070写真プリント（L版）89×127mm、光沢/マット選択
PI-071写真プリント（KG版）102×152mm、はがきサイズ
PI-072写真プリント（2L版）127×178mm、大判サイズ
PI-073クリスタルプリント超光沢銀塩プリント（サイズ要調整）
PI-074フォトブックA5/A4/スクエア、ハード/ソフトカバー
PI-075チェキプリントinstax mini/WIDE/SQUARE対応
PI-079写真プリント（A4版）210×297mm、ポスターサイズ
PI-090写真プリント（L版5枚組）L版5枚セット、お得パック
PI-076マグカップ陶器製、フルカラー印刷（Phase 2）
PI-077アクリルキーホルダーカット形状選択可（Phase 2）
PI-078ウォールデコ大判パネル印刷（Phase 2）
PI-091壁紙ダウンロード720×1080、透かし入、L版購入特典（Phase 2）
PI-092カレンダー卓上/壁掛け、写真12枚選択（Phase 2）

2.商品共通機能

ID機能名概要
PI-080画像選択購入済み/ガチャ取得写真から選択
PI-081プレビュー表示商品に合わせた仕上がりイメージ
PI-083数量選択1〜99枚まで選択可能
PI-084カートに追加複数商品をまとめて購入
PI-085お気に入り登録よく注文する商品を保存
PI-086在庫・残数表示限定商品の残り枚数表示
PI-087購入制限1人あたりの購入上限設定

3.認証

ID機能名概要モック
PI-001aApple ログインApple IDでログイン→
PI-001bGoogle ログインGoogle アカウントでログイン→
PI-002メールリンク認証パスワードレス認証（メールリンク）→
PI-002b6桁認証（閲覧コード）イベント・限定販売向け6桁コード認証→
PI-003セッション管理ログイン状態の維持、自動延長
PI-004ログアウトセッション破棄
PI-005パスワードリセットFirebase Authからリセットメール送信

4.マイページ

モック →
ID機能名概要
PI-010注文履歴一覧過去の注文一覧
PI-011注文詳細注文内容、ステータス表示、購入写真サムネイル
PI-012配送状況表示配送ステータス、追跡番号
PI-013コレクション一覧所持カードのセット別グリッド表示
PI-014コレクション詳細カード画像、レアリティ表示
PI-015コンプリート率セット別・メンバー別の所持率表示
PI-016配送先管理住所の登録・編集・削除、複数登録（最大10件）
PI-017お知らせ一覧注文完了・発送通知・キャンペーン等の通知表示
PI-018同意履歴表示利用規約・プライバシーポリシーの同意日時記録
PI-019メール配信設定キャンペーンメールの受信ON/OFF
PI-020退会アカウント削除、データ削除

5.販売サイト

ID機能名概要モック
PI-021特設LPZIPアップロード、Tailwind CDN対応HTML→
PI-022ショップトップ（LPなし）横ナビ付き写真一覧、戻るリンクなし→
PI-022aショップトップ（LPあり）横ナビ付き写真一覧、戻るリンクでLPに戻る→
PI-022b5枚セット販売メンバー別シークレットセット（10パターン）A: ミニマルB: シルエットC: ブラーD: ストライプE: グリッチF: ホログラムG: モザイクI: トランプJ: ゴールドK: ネオン
PI-023タグフィルターメンバー/カテゴリをチップで選択ブラックピンクブルーパープルグリーンオレンジホワイトグレー
PI-024写真一覧販売中写真のグリッド表示→
PI-025写真詳細写真プレビュー、商品選択へ→
PI-026新着表示新しく追加された写真を表示→
PI-027残数表示限定商品の残り点数、残り僅か警告→
PI-028サイズ選択Lサイズ/2Lサイズ切替、価格連動→
PI-029SOLD OUT表示売切れ写真のグレーアウト、選択不可→
PI-030カート追加写真をカートに追加、フローティングUI→
PI-031複数枚選択まとめて選択・購入、合計金額表示→
PI-032ヒーローバナー（テーマカラー）アイドル写真アップ→テーマカラー自動オーバーレイ、簡単作成ブラックピンクブルーパープルグリーンオレンジホワイトグレー
PI-033ヒーローバナー（カスタム）デザイナー作成画像をそのまま表示、高品質バナーブラックピンクパープルオレンジグレー
PI-035ゼッケン番号検索番号入力で写真検索、前方一致・範囲検索対応（管理画面でON/OFF）OFFON
PI-034カウントダウングラスモーフィズム、テーマカラー連動、カレンダー登録30分枠（8色対応、デフォルト：ブラック）ブラック(default)ピンクブルーパープルグリーンオレンジホワイトグレー
PI-036学校写真販売幼稚園・学校向け写真販売（イベント別写真選択、L版/2L版）イベント選択写真一覧配布チラシ

6.ガチャ

モック →
ID機能名概要
PI-040シングルガチャ1回抽選
PI-0415連ガチャ5回抽選、UC以上1枚確定
PI-04210連ガチャ10回抽選、R以上1枚確定
PI-043プレミアムBOXSR以上1枚確定
PI-044推しメンガチャ指定メンバーのカードのみ抽選
PI-045抽選処理確率計算、サーバーサイド乱数生成
PI-046天井システムN連でSR以上確定、カウンター管理
PI-047開封演出レアリティ別アニメーション
PI-048確率表示レアリティ別排出確率の明示
PI-049ガチャ履歴過去の抽選結果一覧

7.カート

ID機能名概要モック
PI-050カート一覧サイズ別グループ表示、数量変更、削除、送料無料バー空デモデータ
PI-051カート小計サイズ別内訳・送料・合計表示→
PI-052カート編集モーダル写真タップで数量変更・削除→

8.決済

ID機能名概要モック
PI-060カード決済クレジットカード決済（Stripe）→
PI-062PayPay決済PayPay決済（Stripe）→
PI-064後払い決済Paidy（銀行振込/コンビニ後払い）→
PI-063購入確認金額・内容の最終確認画面→
テナント管理画面事務所/CP向け（36機能）ガイドライン2
ローカルで開くDEV

localhost:3000（モックデータ）

本番デモを開くLIVE

D1 + R2 で動作 ・ 認証: ffis / iyasaka

8.認証

ID機能名概要
PI-150MicrosoftログインMicrosoft Entra ID（Azure AD）認証
PI-151GoogleログインGoogleアカウントでログイン

9.販売サイト設定

ID機能名概要モック
PI-148販売サイト一覧サイト作成・管理・統計（マルチサイト対応）→
PI-149クイックスタート3ステップで写真販売開始（D1/R2フル実装）→
PI-152サイト基本設定サイト名、URL、販売期間、ロゴ画像→
PI-153デザイン設定テーマカラー選択（8色）→
PI-154決済方法設定カード/PayPay/後払いのON/OFF→
PI-155文言設定このサイトについて、利用規約、プライバシーポリシー→
PI-156商品紹介ページHTMLアップロード（商品説明ページ）
PI-157検索条件設定フィルター項目のカスタマイズ
PI-158ログイン認証設定会員限定サイトのアクセス制限→

10.販売画像管理

ID機能名概要モック
PI-160画像アップロード販売用画像の一括アップロード→
PI-161画像一覧アップロード画像のサムネイル一覧→
PI-162画像情報設定タイトル、作者名、説明、属性（一括更新対応）→
PI-163画像並び替え表示順序の変更→
PI-164新着・限定設定新着フラグ、限定商品設定→
PI-165公開期間設定画像ごとの公開開始/終了日時→
PI-166商品紐付け（画像単位）画像ごとに販売商品を設定（Phase 2）→
PI-167商品紐付け（商品単位）商品種別ごとに一括設定（Phase 2）→

11.商品管理

ID機能名概要モック
PI-170商品種別登録サイズ、用紙、価格の登録→
PI-171商品種別一覧商品種別の検索・編集・削除→
PI-172在庫設定限定商品の在庫数設定→
PI-173価格設定商品ごとの販売価格→

12.受注管理

ID機能名概要モック
PI-175受注一覧注文の検索・フィルタリング→
PI-176受注詳細注文内容、配送先、ステータス表示→
PI-177顧客情報更新配送先情報の修正→
PI-178送り状CSV出力配送業者向けCSVエクスポート→
PI-179納品書出力納品書PDF/HTML生成→
PI-180製作用データCSV印刷工場向け受注データ出力→

13.顧客管理

ID機能名概要モック
PI-182顧客一覧購入者の検索・一覧表示→
PI-183顧客詳細購入履歴、連絡先情報→

14.レポート・分析

ID機能名概要モック
PI-185画像販売数サマリ画像別の販売数集計（CSV出力）→
PI-186商品販売数サマリ商品種別の販売数集計（CSV出力）→
PI-187日別受注サマリ日別の注文件数・売上集計→
PI-188アクセス数サマリページビュー・訪問者数→
PI-189売上分配レポート利益分配の計算・一覧→
サービスオーナー管理画面FUJIFILM向け（35機能）ガイドライン2

15.認証

ID機能名概要モック
PI-190MicrosoftログインMicrosoft Entra ID（Azure AD）認証→
PI-191GoogleログインGoogleアカウントでログイン→

16.テナント管理

ID機能名概要モック
PI-200テナント一覧登録事務所の一覧・検索→
PI-201テナント登録新規事務所アカウント作成→
PI-202テナント詳細事務所情報・契約内容表示→
PI-203テナント編集事務所情報・プラン変更→
PI-204テナント停止/再開アカウントの一時停止・再開→
PI-205管理者招待事務所管理者への招待メール送信→
PI-206権限設定事務所ごとの利用可能機能設定→

17.プラン・課金管理

ID機能名概要モック
PI-210プラン一覧料金プランのCRUD→
PI-211プラン作成新規プラン登録（機能制限・料金設定）→
PI-212テナント別プラン事務所ごとのプラン割当→
PI-213請求一覧月次請求データの一覧→
PI-214請求詳細請求明細（印刷枚数・手数料等）→
PI-215請求書発行PDF請求書の生成・送付→
PI-216入金管理入金確認・消込処理→
PI-217売上レポート全テナント売上の集計・分析→

18.プラットフォーム設定

ID機能名概要
PI-220商品マスタ管理プラットフォーム共通の商品種別設定
PI-221価格マスタ管理印刷料金・手数料の設定
PI-222配送設定配送業者・料金テーブルの設定
PI-223決済設定Stripe/Paidy接続設定
PI-224メールテンプレートシステムメールの文面管理
PI-225利用規約管理共通利用規約・特商法表示の管理
PI-226お知らせ管理全テナント向けのお知らせ配信

19.システム監視

ID機能名概要モック
PI-230ダッシュボード全体KPI（売上・注文数・アクティブテナント）→
PI-231リアルタイム監視現在の注文・決済状況→
PI-232エラーログシステムエラーの一覧・詳細→
PI-233APIログ外部API連携のログ表示→
PI-234ジョブ監視バッチ処理の実行状況→
PI-235アラート設定異常検知時の通知設定→

20.サポート管理

ID機能名概要モック
PI-240問い合わせ一覧全テナントからの問い合わせ→
PI-241問い合わせ対応返信・ステータス管理→
PI-242FAQ管理よくある質問のCRUD→
PI-243マニュアル管理管理者向けマニュアルの管理→
PI-244操作ログテナント管理者の操作履歴→
バックエンドシステム処理（10機能）

決済処理

ID機能名概要
PI-064決済完了処理Webhook受信、注文確定
PI-065入金確認処理コンビニ決済の入金反映

通知

ID機能名概要
PI-080購入完了メール注文確定時にメール送信
PI-081発送完了メール発送時にメール送信

画像処理

ID機能名概要
PI-090サムネイル生成一覧表示用の縮小画像生成
PI-091プレビュー生成透かし入りプレビュー画像生成
PI-092シルエット生成未所持用のシルエット画像生成
PI-093原本暗号化印刷用原本の暗号化保存

印刷連携

ID機能名概要
PI-100印刷発注PrintGate APIへ発注送信
PI-101出荷WebhookPrintGateからの出荷通知受信

Print Gate

38機能
事務所入稿画面テナント事務所向け（10機能）ガイドライン2

1.認証

ID機能名概要モック
PG-001GoogleログインGoogleアカウントでログイン→
PG-002メールリンクログインパスワードレス認証→
PG-003ログアウトセッション破棄

2.入稿

ID機能名概要モック
PG-010案件作成案件名、商品タイプ、納期、備考→
PG-011案件編集下書き状態の案件を編集→
PG-012画像アップロードドラッグ＆ドロップ、一括対応→
PG-013プレビュー確認アップロード画像のプレビュー→
PG-014入稿確定入稿完了、ステータス変更→
PG-015進捗確認リアルタイムステータス表示→
PG-016入稿履歴過去案件の一覧・検索→
営業管理画面FUJIFILM営業向け（11機能）ガイドライン2

3.認証

ID機能名概要モック
PG-100MicrosoftログインMicrosoft Entra ID（Azure AD）認証→
PG-101ログアウトセッション破棄

4.加工処理

ID機能名概要モック
PG-020加工依頼一覧新着・処理中の依頼一覧→
PG-021原本確認原本プレビュー、ダウンロード→
PG-022加工済みアップロード加工後ファイルのアップロード→
PG-023加工パラメータ記録加工内容の記録→
PG-024加工前後比較原本と加工後の比較表示→
PG-025工場引渡し加工完了、工場へ送信→

5.テナント管理

ID機能名概要モック
PG-050テナント管理事務所アカウントのCRUD→
PG-051ユーザー管理権限設定、アクセス制御→
PG-052招待メール新規ユーザーへの招待送信
工場管理画面FUJIFILM工場向け（11機能）ガイドライン2

6.認証

ID機能名概要モック
PG-200MicrosoftログインMicrosoft Entra ID（Azure AD）認証→
PG-201ログアウトセッション破棄

7.入稿処理

ID機能名概要モック
PG-030入稿一覧新着・処理中の入稿一覧→
PG-031画像プレビューフルサイズ画像表示→
PG-032一括ダウンロードZIP形式でダウンロード→
PG-033個別ダウンロード個別画像のダウンロード→
PG-034印刷進捗更新ステータス変更→
PG-035出荷登録配送業者、追跡番号の登録→
PG-036差し戻し理由付きで事務所へ差し戻し→

8.管理・統計

ID機能名概要モック
PG-053ダッシュボード入稿数、事務所別統計→
PG-054請求管理月次請求データ生成
バックエンドシステム処理（6機能）

工場連携

ID機能名概要
PG-040SFTP配信印刷用データを工場へ送信
PG-041SFTP受信工場から出荷データを取得
PG-042画像形式変換工場指定形式への変換

通知

ID機能名概要
PG-060入稿通知新規入稿時に工場へメール
PG-061出荷通知出荷時に事務所へメール
PG-062差し戻し通知差し戻し時に事務所へメール

凡例

Picture-i

販売ページユーザー向けUI
テナント管理画面事務所/CP向けUI
サービスオーナー管理画面FUJIFILM向けUI
バックエンドシステム処理

PrintGate

事務所入稿画面テナント事務所向けUI
営業管理画面FUJIFILM営業向けUI
工場管理画面FUJIFILM工場向けUI
バックエンドシステム処理