チャプロAI ストア構想 / 画面

画面一覧

デザインする単位=1画面ごとに、「何を載せるか・どこから来てどこへ行くか・状態をいくつ描くか」をまとめたもの。フェーズ1・2 は画面ごとのカード、フェーズ3 は表で簡潔に。上のバーでフェーズを選ぶと、後のフェーズの画面が薄くなる。

出典 00_全体仕様2026-08-28 の打合せ フェーズ1 9月中に実装 フェーズ2 10月目安 フェーズ3 追って実装 つながり flows.html 状態の詳細 work-states.html

01数でつかむ

URLを持って単独で開けるものだけを「画面」として数えた。確認ダイアログや設定パネルは各画面のカードの中に書いてある。

29 画面 新しく作る画面。ほかに、AIスタジオ側の既存4画面(ログイン・クレジット管理・AIサービス設定・データ使用量)を使う
12 フェーズ1の画面 9月中/公開・閲覧が7、自分のことが5。+ログインのモーダル
12 フェーズ2の画面 10月目安/売買が9(うち1は作品ページへの追加)・運営が3
5 フェーズ3の画面 追って/サブスク・審査・依頼・コンテスト・その他

02画面ごとの中身

デザインする単位で1枚ずつ。ルートは既存の /v/[slug] の付け方に合わせた提案。チップは 1 フェーズ1(9月中)/2 フェーズ2(10月目安)/3 フェーズ3(追って)。フェーズ1・2 は画面ごとのカード、フェーズ3 は表で簡潔に。

1公開・閲覧アカウント無しで開ける/7画面
01
ストアトップ/store
1ストア

載せるもの

  • 新着の作品一覧(一般公開された作品)
  • 種類ごとの一覧(ミニアプリ・映像・図解本・マンガ・パンフレット・スライド)
  • カテゴリ・タグの入口
  • 共通ヘッダーの検索窓
  • カードの中身=サムネイル・種類・タイトル・作者
  • 価格・ランキングは載せない(フェーズ2・3で足す)

入ってくる

  • chapro.jp からのリンク
  • サイドバーのモード切替「ストア」
  • ロゴ

出ていく

  • 作品ページ
  • カテゴリ一覧・検索結果
  • 作者ページ

状態

  • 未ログイン(右上は「ログイン」)
  • ログイン済み(右上はアバター・通知)
02
検索結果/store/search
1ストア

載せるもの

  • 検索欄(語が入ったまま編集できる。画面の一番上)
  • 条件の行=検索語・種類・価格を外せるチップで並べる+件数
  • 作品の一覧(トップと同じカード。種類で分けず1本)
  • 並び替え(新着順。フェーズ2で価格・取得数、3で評価)
  • 一番下に「カテゴリから探す」(言葉が思いつかない人の出口)

入ってくる

  • ホームの検索欄
  • ホームのタグ(?q=
  • この画面の検索欄(語を入れ直す)

出ていく

  • 作品ページ
  • 作者ページ
  • カテゴリ一覧(画面03)

状態

  • 結果あり
  • 0件(近いカテゴリを勧める)
03
カテゴリ・タグ一覧/store/c/[category]
1ストア

載せるもの

  • カテゴリの見出し=アイコン・名前・一言・件数(運営が用意した棚)
  • タグの行=この棚の中の細目。運営が決めた固定の並び。件数0のタグは薄くして押せなくする
  • そのカテゴリの作品一覧
  • 並び替え(検索結果と同じ)
  • 隣の棚へ移るセレクト(見出しの右)と、一番下の「ほかのカテゴリ」

入ってくる

  • ストアトップのカテゴリ
  • 作品ページのタグ・カテゴリ
  • 検索結果の0件・一番下

出ていく

  • 作品ページ
  • ほかのカテゴリ

状態

  • 作品あり
  • 0件
04
作品ページ(公開ページ)/v/[slug]
1公開

載せるもの(note のような構成)

  • 作品本体(種類ごとのビューワ/ミニアプリは実行画面への入口)
  • タイトル・種類・カテゴリ・タグ
  • 作者(アイコン・名前・フォローボタン)
  • 説明文(見出し・画像を含む本文)
  • コメント欄(投稿はログイン中の人だけ。閲覧は誰でも)
  • 更新履歴(作者の更新コメント)
  • 同じ作者のほかの作品
  • フッター広告(ログインしていない人に見せるときは必ず表示)
  • 通報の入口(対応画面はフェーズ2)

入ってくる

  • ストアトップ・検索・カテゴリ
  • 作者ページ
  • 共有された URL
  • パスワードの入口(限定公開)
  • フォローの新着通知

出ていく

  • 作者ページ
  • ミニアプリ実行
  • ログイン(コメント・フォローを押したとき)

状態

  • 未ログイン(見られる・押すとログイン)
  • ログイン済み(コメント・フォローができる)
  • 自分の作品(公開設定への導線)
  • 非公開にされた/作者が「自分のみ」に戻した(404 ではなく「公開されていません」)

フェーズ2で足すもの

  • 価格・取得/購入ボタン・無料サンプルの導線(画面12)
作品詳細と公開ページを分けず、1枚の「作品ページ」にする。フェーズ1は無料の公開ページとして完成させ、フェーズ2で同じページに売り場が付く。
05
作者ページ/store/u/[author] ※画面では「プロフィール」
1ストア

載せるもの(note のように作り込める)

  • ヘッダー画像・アイコン・表示名
  • 自己紹介(見出し・画像・リンクを含む本文)
  • 外部リンク/おすすめ作品
  • 作品一覧(一般公開している作品)
  • フォローボタンとフォロワー数

入ってくる

  • 作品ページの作者名
  • ストアトップ・検索
  • フォロー中の作者

出ていく

  • 作品ページ
  • 外部リンク

状態

  • 未ログイン(フォローは押せる→ログイン)
  • フォロー済み
  • 退会済み/ページは閉じ、作者名は「退会済み」
  • 自分のページ(編集への導線)
06
限定公開の入口(パスワード)/v/[slug](鍵つき)
1公開

載せるもの

  • 作品のタイトルと作者(中身は見せない)
  • パスワードの入力欄
  • フェーズ2=メールアドレス指定なら、指定されたアドレスでログイン済みの人はそのまま本体
  • ストアの導線は出さない(限定公開はストアを通さない)

入ってくる

  • 作者から渡された URL+パスワード

出ていく

  • 作品ページ(通ったあと。同じ URL のまま本体が出る)

状態

  • パスワード入力前
  • パスワードが違う
  • 通った(しばらく再入力なしで開ける)
  • 作者がパスワードを変えた・自分のみに戻した/再入力または閉じる
07
ミニアプリ実行別ドメイン(サンドボックス)
1要決定

載せるもの

  • ヘッダー=タイトル・作者
  • アプリ本体(実行画面)
  • 作品ページへ戻る導線
  • フッター広告(ログインしていない人に見せるときは必ず表示)
  • AI機能/画像の表示

入ってくる

  • 作品ページ
  • 限定公開の入口(通ったあと)

出ていく

  • 作品ページ
  • ログイン(AI を使うとき)

状態

  • アカウント無し/動くがAIは押せない・保存領域なし
  • ログイン済み/AIが動く(本人のクレジット)
  • クレジット不足/AIだけエラー、アプリは動き続ける
別ホストで動くため、ログイン状態とクレジットの残り数の受け渡し方が未決(06 の1番)。この画面のデザインより先に方式を決める必要がある。利用者ごとのデータ領域・出品前の安全チェックはフェーズ2・3。
1自分のことログインが要る/5画面
08
公開設定プロジェクトの設定(制作モード・全種共通)
1制作モード

載せるもの

  • 公開状態=自分のみ/限定公開/一般公開(この3つ。有料かどうかはここでは決めない)
  • 一般公開のとき=必ずストアに表示される旨と、検索エンジンに載る旨の案内
  • 限定公開のとき=パスワード設定(フェーズ2 でメールアドレス指定も)、URL のコピー
  • 作品ページに載せる説明・サムネイル・カテゴリ・タグ
  • 更新コメント(更新履歴に残る)
  • 公開ページのプレビュー(別タブ)

入ってくる

  • プロジェクト一覧・詳細の「公開」
  • 作品ページ(自分の作品)

出ていく

  • 作品ページ(プレビュー)
  • フェーズ2=商品登録(「有料販売」を選んだとき)

状態

  • 自分のみ(既定)
  • 限定公開(URL のみ/パスワードあり)
  • 一般公開(ストア表示・検索インデックスあり)
  • フェーズ2=限定公開・メールアドレス指定
  • フェーズ2=有料販売(商品登録へ)
既存の「公開ページの編集」(#546・スライドで先行)を土台に、映像・図解本・マンガ・パンフレット・スライド・ミニアプリの全種へ同じ形で付ける。フェーズ1の中でいちばん範囲が広い。公開状態の一覧は 開発者ドキュメント「公開設定と公開ページ」。
09
プロフィール編集/store/profile ※画面05 を自分で編集する側
1ストア

載せるもの

  • ヘッダー画像・アイコン・表示名
  • 自己紹介(見出し・画像・リンク)
  • 外部リンク
  • おすすめ作品の選択
  • SNSリンク(X・Instagram・YouTube・ブログ)
  • 作品の並び順(種類ごとのまとまり・並び替え)

入ってくる

  • ストアモードのメニュー
  • 作者ページ(自分のページ)

出ていく

  • 作者ページ(プレビュー)

状態

  • 未設定(初期状態の見せ方)
  • 設定済み
10
フォロー中の作者・新着通知/store/following + 通知
1ストア

載せるもの

  • フォローした作者の一覧(アイコン・名前・作品数)
  • フォローの解除
  • 新着の通知=フォロー中の作者が一般公開した作品(ヘッダーのベルと、この画面の一覧)

入ってくる

  • ストアモードのメニュー
  • ヘッダーの通知

出ていく

  • 作者ページ
  • 作品ページ(新着から)

状態

  • 0人/ストアへの導線を出す
  • 新着あり(未読)
  • 作者が退会した(一覧から消える)
11
運営への報告/store/report ・ /store/report?work=[id]
1ストア

載せるもの

  • 対象(作品ページから来たら作品名が埋まっている。直接来たら作品を選ぶか、作品によらない報告として送る)
  • 種類=動かない/内容が説明と違う/規約に反している/不適切な内容/その他
  • 内容(自由記述・必須)
  • 画面の写しを添える(任意)
  • 返信が要るならメールアドレス(任意)。ログインの有無で変わらない
  • 送ったあとの控え(受付番号と送った内容)

入ってくる

  • 作品ページの「運営に報告する」
  • 作者ページの「報告する」
  • フッター(作品によらない報告)

出ていく

  • 送信後の控え
  • 運営の対応画面(画面22・フェーズ2)

状態

  • 未ログインでも送れる(メールアドレスは任意)
  • 作品ページから来た(対象が埋まっている)
  • 直接来た(対象を選ぶ)
  • 送信済み(同じ作品への二重報告は受付番号を出して止める)
作品ページにはモーダルで出してよいが、URL を持つページも要る。作品によらない報告(アカウント・決済・チャットの相手)はモーダルの置き場が無く、外部から報告先として案内するにも URL が要るため。対応する側は画面22(トラブル報告の対応・フェーズ2)。報告は運営だけが見る。作者には報告した人が分からない。
ログインは要らない。公開ページは誰でも見られるので、問題も誰からでも届くようにする。権利侵害の申し立てはチャプロを使っていない権利者から来る。荒らし対策は別に決める。
29
ブックマーク/store/wishlist ※仕様の言葉は「気になる」
1ストア

載せるもの

  • ブックマークした作品の一覧(トップと同じカード)
  • 種類での絞り込み
  • 並び替え(ブックマークした順・新着順)
  • 一覧からブックマークを外せる

入ってくる

  • ストアモードのメニュー
  • 作品ページでブックマークした直後の案内

出ていく

  • 作品ページ

状態

  • 未ログイン(ログインが要る。押した時点でモーダルを挟む)
  • 0件(ストアへの導線を出す
  • 作品が非公開・削除された(一覧から消える)
あとで見るための自分用の印。他人には見えない。いいねのような「人に見せる数」ではないので、件数も出さない(PUB-P43)。フェーズ3 から前倒しした。
1すでにある画面をそのまま使う・手を入れる4画面
画面ルート足すこと
登録・ログイン/login ・ /signup画面はあるが、いまはページ遷移が前提。作品ページの上にモーダルで重ねて出す形は新しく作る。押した用事(コメント・フォロー、フェーズ2では購入)を覚えて、ログイン後にそこへ戻す仕組みも要る
クレジット管理/settings/credits一般公開ミニアプリの AI を使った分の内訳(どのアプリで使ったか)を足す。AI の料金は使った本人のクレジットから引く
AIサービス設定/settings/ai-servicesそのまま使う。ストア側のアカウントメニューから開けるようにするだけ
データ使用量/storageそのまま使う。同上。公開した作品が使う容量もここに出る
2売買10月目安/9画面(うち1は作品ページへの追加)
12
作品ページの売り場/v/[slug](画面04に足す)
2公開

足すもの

  • 価格(税込・上限11万円)または「0円」
  • 取得する/購入するボタン(買い切り)
  • 無料サンプルへの導線(有料作品のとき)
  • 購入後=「開く」に変わる・購入日
  • 販売停止のときの帯(新しく買えない・買った人は使える)
  • 「作者に問い合わせ」(個人チャットへ)

モーダル

  • 取得の確認
  • 購入の確認(カードで支払い
  • 使える売上があれば、その分を差し引いて残りをカードで(併用できる
  • ログイン(未ログインで押したとき)

入ってくる

  • 画面04と同じ

出ていく

  • 取得・購入した作品(完了後)
  • 個人チャット

状態

  • 未ログイン・未購入
  • ログイン済み・未購入(使える売上がある/ない
  • 取得・購入済み
  • 販売停止中
  • 自分の商品
プロトタイプの detail.html は、この「売り場つき」の状態を描いたもの。確認用パネルの「フェーズ」を1にすると売り場が消え、画面04の姿になる。
13
入出金履歴/settings/transactions
2設定

載せるもの

  • 使える売上(作品が売れて入ったお金。買い物に充てられる)
  • 載るのは3つ=売上が入った売上を買い物に使った出金した
  • カードだけで払った買い物は載せない(カード会社の明細に出るので二重に持たない)
  • 期間での絞り込み
  • クレジット(AIの利用)とは別物という説明。売上でクレジットは買えない

入ってくる

  • アカウントメニュー
  • 売上・アクセス(画面19)

出ていく

  • 出金(画面20)

状態

  • 売上あり/0円(0円のときはストアへの導線を出す)
  • 出金の処理中
14
ライブラリ(取得・購入した作品)/store/library
2ストア

載せるもの

  • 1行1作品のリスト(自分の作品とは別に並ぶ)
  • 種類ごとのメタ=進捗「3/12章」/読了率/最終起動日
  • 各行に「開く」(編集はできない)
  • 更新履歴への導線
  • 種類での絞り込み

入ってくる

  • ストアの左カラム「ライブラリ」(フェーズ2から)
  • 制作モードの2列目メニュー
  • 購入・取得の完了後

出ていく

  • 作品ページ/ミニアプリ実行(開く)

状態

  • 0件/ストアへの導線を出す
  • 販売停止だが買い切りで使える
  • フェーズ3=サブスク切れ(使えない表示)
15
販売商品一覧/store/products
2ストア

載せるもの

  • 商品のリスト=サムネイル・タイトル・種類・価格
  • 状態バッジ=掲載中/販売停止/強制非公開
  • 販売数・0円取得数
  • 停止・再開/編集への導線
  • 新規登録ボタン

入ってくる

  • ストアモードのメニュー「売る」
  • 公開設定の「販売する」

出ていく

  • 商品登録・編集
  • 作品ページ(公開状態を見る)
  • 売上・アクセス

モーダル

  • 販売の停止・再開の確認

状態

  • 0件/公開設定への導線
  • 強制非公開にされた
  • フェーズ3=審査待ち・差し戻し
16
商品登録・編集/store/products/new ・ /[id]
2ストア

入力項目

  • 必須/販売対象=一般公開ずみのプロジェクト(映像はフォルダも=まとめ売り)
  • 必須/出し方=0円で出すか、価格をつけるか
  • 有料のみ/価格。税込・上限11万円・買い切り(サブスクはフェーズ3)
  • 必須/カテゴリ(運営が用意したものから選ぶ)・任意/タグ
  • 必須/スクリーンショット・PR素材
  • 任意/無料サンプルの紐づけ(別プロジェクト)
  • 映像・図解本・マンガ/ダウンロード可否
  • 自動/AI利用の有無(表示のみ)と消費の目安

入ってくる

  • 公開設定の「販売する」(対象を選択済みで開く)
  • 販売商品一覧の新規登録・編集

出ていく

  • 販売商品一覧(保存後)
  • フェーズ3=ミニアプリは審査へ

状態

  • 新規
  • 編集(掲載中の商品を直す)
  • フォルダを選んだとき(映像のみ・まとめ売り)
17
個人チャット/messages ・ /messages/[user]
2ストア

載せるもの

  • 相手ごとのスレッド一覧(未読数)
  • メッセージのやり取り(本文・画像・作品へのリンク)
  • どの作品についての話かの表示(作品ページから来たとき)
  • 相手との関係(作者・購入者・それ以外)の表示
  • 通報・ブロック

入ってくる

  • 作品ページの「作者に問い合わせ」
  • 作者ページ
  • ヘッダーの通知

出ていく

  • 作品ページ
  • 作者ページ

状態

  • 0件
  • 未読あり
  • 相手が退会した
  • ブロック中
相手の組み合わせは購入者と作者に限らない(ランサーズのメッセージに近い)。履歴はプラットフォームの中に残す。
画面ルート(案)載せるものフェーズ
無料サンプル
18
/v/[slug](サンプル版)有料作品のお試し版。別プロジェクトとして作り、商品登録で紐づける。サンプル版の作品ページには「有料版を見る」、有料版には「無料サンプルを見る」の導線2
売上・アクセス
19
/store/sales販売数・0円取得数・売上・アクセス数・手数料30%の内訳(70%が作者)2
出金
20
/store/payout売上・出金申請・履歴。ルールは ExPA に合わせる(プラットフォームからお金が出ていく最初の機能)2
2運営管理パネル/3画面
画面載せるもの状態
作品管理
21 / /admin-panel/works
検索/販売停止・強制非公開・削除/作者への連絡/権利者だけがアクセスできる状態への切替 通常/強制非公開中/削除済み(権利者のみ閲覧可)
トラブル報告の対応
22 / /admin-panel/reports
報告の一覧/対象作品・種別・内容/対応(作者連絡・強制非公開・返金の判断)。フェーズ1の作品ページから来る通報もここに溜める 未対応/対応中/完了
売上・出金の管理
23 / /admin-panel/payouts
手数料・出金申請の処理 申請あり/処理中/完了
3追って実装売り方と関わり方を増やす/5画面
画面ルート(案)載せるものフェーズ
サブスク出品
24
商品登録・作品ページ・取得した作品に足すミニアプリ・映像の月額。商品登録の「出し方」に月額を足し、作品ページに「加入する」、取得した作品に加入中・解約・次回の課金日、カードから毎月引き落とす3
出品審査
25
/admin-panel/reviewsミニアプリの公開前 AI チェック。待ち行列/判定結果と理由(コンテンツ・コード・なりすまし)/承認・差し戻し/更新の差分の再審査。作者側は販売商品一覧に「審査中」「差し戻し」の状態が増える3
直接依頼
26
/store/requests作者に仕事を頼む。依頼の作成・見積・受注・納品・検収3
コンテスト形式
27
/store/contestsお題を出して作品を募る(ランサーズのコンペに近い)。募集・応募・選定・報酬3
その他
28
/store/ranking ・ /store/share ほか作者ランキングと還元(広告経由の登録→操作アカウント数が指標)/拡散用の画面/不正検知/作品の評価(★)/気になる(あとで見る)/メンバーシップ/SNS プロモーション3

ルート・画面への割り付け・状態の洗い出しは、仕様に書かれていない部分についての提案。画面の番号は 01〜29 で、決まった順に振っているので band の中で連続しないことがある。フェーズをまたいで通し番号。