前日に、料金の見せ方やボタンの位置を、かなり自分好みにしました。
ところが、別の機能をつくり込んでから画面を見直すと、料金の下にも、ボタンの下にも、説明が増えていました。
申し込む人に伝えるべき条件があるのは分かる。でも、僕が見て、ここまででいいと判断した画面が変わると、そこをもう一度確認しなければいけない。
2026年9月14日、AIチャットつくーるの開発5日目。有料プランを一般の会員にも開放し、プラン変更の仕組みや運営画面を整えた日です。その中で何度も考えたのが、必要な機能をつくることと、画面に何を見せるかを決めることでした。
4日目は、動くものを触りながら自分の好みを具体化しました。5日目は、その好みを保ちながら、料金や運営の仕組みをどう組み込むか。前日の続きなのに、また違う判断が出てきました。
1. 機能を頼んだとき、説明の置き場所まで決まっていく
料金一覧でプランを選んだら、そのまま決済画面へ進んでほしい。請求書の宛名や住所は、必要な人が後から設定できればいい。
こうした変更は、僕が頼んだものです。ただ、その実装に伴って、一覧のボタン下へ長い同意文が入り、価格の下へ自動更新の説明が入り、請求書の管理にも補足が増えていました。
そこでCodexに、いつ、何の変更と一緒に加わったのかを調べてもらいました。Gitの差分と開発メモをたどると、依頼した機能に付随して、AIが文面や配置を決めたところが見えてきます。
| 僕が頼んだこと | その変更に伴って増えた表示 |
|---|---|
| プラン一覧から直接決済へ進む | 各ボタンの下の同意文、価格下の自動更新の説明 |
| 請求書の情報を後から入力できるようにする | 管理ボタンの下に、入力時期や反映先の補足 |
| アップグレードの料金計算を変える | 料金カードに、日割り・利用枠・更新日の説明 |
一つずつには、追加した理由がありました。だからこそ、理由を聞くだけでは、僕が見たい画面になるとは限らない。
僕が気にしていたのは、確認したところへ戻るたびに、またレビューが必要になることです。実装のテストが通ったという報告だけでは、見せ方まで僕の意図に合っているかは分かりません。
まずは必要なものを選び、残すところと戻すところを、スクショで並べてもらうことにしました。
2. 説明を減らすときにも、残したい案内がある
できたのは、料金・利用状況・契約管理などを並べた8枚の比較資料です。
全部を昔へ戻す、という話にはしませんでした。新しい料金の仕組みや、頼んで追加した操作は残したい。そのうえで、常に読ませる必要があるのかを、場所ごとに見ていきました。
例えば、無料プランの利用状況に出ていた「初回限定」。短いけれど、それだけでは何が初回限定なのかが分かりません。
残りの利用枠や、あと何個AIをつくれるかは、その場で知りたい。一方、おためしが初回だけで、毎月リセットされないという説明は、利用枠の詳細で読めるようにする。その整理案を、実際の画面で比べました。
| 場所 | 残したいもの・見直したいもの |
|---|---|
| 料金カード | プランの紹介、月額、ボタン、特長が分かる順番を保つ |
| 利用状況 | 残量・残数・リセット日時を見せる。対象が曖昧な短文は見直す |
| 繰り越しの利用枠 | 期限が別なら、その期限を分かるように残す |
| 手続きの途中 | 支払いの確認や、未完了の変更を取り消す操作を残す |
| 申込条件 | 料金の仕組みと整合させ、どこで確認してもらうかを考える |
最初の整理では、繰り越しの期限や、途中の手続きを取り消す操作について、残す理由の説明が足りませんでした。画面の文字を減らすときも、利用者が判断したり操作したりするための情報は見落とせません。
この日は、比較して判断できるところまで。8枚の右側を、そのまま本番に反映したわけではありません。
3. 差額を払ったら、いつから1か月使えるのか
料金の仕組み自体も、見直しました。
これまでは上位プランへ変えると、月額料金の差額を払い、次の更新日はそのまま、という扱いでした。月の途中、それも更新日に近いところで変えたら、差額を払って上位プランを使える期間が短くなる。その点が気になりました。
そこで、変更日から新しい1か月を始める方式を検討し、採用しました。
| 項目 | この日に決めた扱い |
|---|---|
| 今回の支払額 | 新プラン1か月分から、旧プランの残期間に相当する料金を差し引く |
| 新しい期間 | 支払いが成功してから、新しい1か月を始める |
| 当月の利用枠 | 新プランの100%で開始し、旧当月枠は精算する |
| 前月からの繰り越し | 元の有効期限を保つ |
| 下位プランへの変更 | 次回の更新日から切り替える |
流れにすると、こうです。
上位プランを選ぶ
↓
新しい1か月分 − 旧プランの残期間分を確認
↓
決済画面で本人が支払いを確定
↓
支払い成功後、新しい1か月と利用枠が始まるここを変えると、支払額だけでなく、更新日、利用枠、繰り越し、通知メール、規約の説明までつながります。料金の計算だけを入れ替えて終わりにはできませんでした。
Stripeのテスト環境では、通常の支払いに加えて、支払いに失敗した場合や追加の本人認証がある場合、次回の下位変更などを確認しました。画面や規約の本番反映も確認しています。実決済での確認と、テストカードによる検証は区別して記録しています。
ただ、仕組みを変えても、合計金額だけでは、何が差し引かれたのか伝わりません。僕自身、決済画面の「本日が期日の金額」という表記を見て、日割りの内訳をどう見せるかは、もう少し考えたいと思いました。
そこで、新しい月額、残期間分の控除、今回の支払額を3行で示す案も出しています。これはまだ表示案です。料金カードへ説明を増やしすぎないことと、支払う金額に納得できること。その両方を、実物を見て詰めているところです。
4. ボタンを押した人に、結果を見せたい
下位プランへ変える画面では、確認する内容を3つに分けました。
- 利用枠の繰り越し
- 継続するAIの選択
- 資料保存
その中でも、残すAIを選ぶところは、選択できる数が伝わるようにしました。最大3個選べるのに、1個だけ選んで先へ進むなら、まだ選べることを赤字で示す。もう選べるAIが残っていないときには、追加選択を促さないようにしています。
「停止します」という言葉も変えました。使う人が知りたいのは、停止という状態名より、何ができなくなるかです。
上限を超えたAIは削除されませんが、利用者が会話できなくなります。
これは、この日に画面へ採用した案内文です。短く済ませることより、利用者に起きることを、そのまま伝えるようにしました。
さらに、変更を予約した後の表示位置も気になりました。予約はできていても、画面がプラン選択の途中に残っていると、できたのかどうか分かりません。
原因は、成功した後にも、選び直すときと同じ場所へ操作位置を戻していたことでした。そこで、予約情報が更新されてから、現在のプランの下にある予約結果へ移動するように変更しました。
| 操作した後 | 見せる場所 |
|---|---|
| プラン変更を予約できた | 予約結果と、予約を取り消すボタン |
| 予約に失敗した | 入力・選択を続けられる申込画面 |
| プランを選び直す | 元のプラン選択ボタン |
規約へのリンクには、下線も付けました。同意のチェック欄と文章が並んでいると、どこを押すとチェックが付き、どこを押すと規約が開くのかが分かりにくかったからです。
説明を一段落足すよりも、押せるところが見分けられること。押した後、期待した結果が目の前に出ること。そこまで含めて、使いやすさを揃えたいと思っています。
5. 上限の案内は、次の行動につながる場所になる
利用枠やAIの作成数が上限に達したときの案内も見直しました。
使えなくなったことを伝えるだけで終わると、そこで操作が止まります。上位プランにすると解決するなら、その場にプラン比較へのリンクを置けばいい。
僕にとっては、ここも営業の機会です。もっとAIをつくりたい、もっと使いたいと思った場所で、次にできることを伝えたい。
ただし、誰にでも同じ案内を出すわけにはいきません。講師がつくったAIを受け取って使う人と、そのAIをつくった人では、変更できるものが違います。
| 状態 | 案内で考えたこと |
|---|---|
| 作成者がAIの数や利用枠の上限に達した | 上位プランで解決できる場合は、料金比較へつなぐ |
| 共有されたAIを使っている | 作成者側の枠との関係に合わせて案内する |
| すでに最上位プランを使っている | 存在しない上位プランへ誘導しない |
案内文とリンクは、作成画面、チャット、プレビュー、利用状況など、該当する場所へ反映しました。申し込みが増えたという話ではなく、この日はまず、使いたい気持ちがある場所から進める導線をつくったところです。
一方で、いつも出ている説明は減らしています。スマホの添付制限の案内は、入力欄の上から下へ動かしてもらった後、実際に見て、常時表示そのものを外しました。
契約完了メールにあった利用枠の倍率も同じです。メールだけで「3.3倍」と読んでも、何に対する倍率かが分からない。比較の説明をさらに足すのではなく、契約したプラン名や月額が分かる文面に整理しました。
料金を比較するとき、会話を書いているとき、申し込みが終わったとき。それぞれで知りたいことは違います。必要な案内を、その場面に合わせたいと思いました。
6. 運営する自分にも、判断できる画面をつくる
この日は、有料プランの申込みを、僕の検証用に限っていた状態から、一般の会員にも開放しました。ここで記録しているのは受付を開けたことです。契約が増えた、売上が伸びたという結果とは分けています。
それに合わせて、運営側で売上と原価を見られる画面も整えました。
最初に欲しかったのは、OpenAI APIにどのくらい費用がかかっているかを、管理画面の上段で見られること。そこから、決済やアプリを動かすための費用も並べ、人件費を含めない見込み利益を見られるようにしました。
| 運営画面で見たいもの | 見せ方 |
|---|---|
| 売上の目安 | 契約の月額換算として表示する |
| AIや決済などの費用 | 記録額や見込み額の範囲が分かるようにする |
| 利益の目安 | 人件費を除く見込みとして表示する |
| 人数の内訳 | 数字を押したら、同じ条件の一覧へ進む |
ここで見たいのは、細かい数字がたくさん並ぶことより、今どうなっているのかを判断できることです。金額の小数も、画面では1円単位に丸めてもらいました。元の記録や計算の精度は保っています。
この管理画面は、実装・計算・ローカル表示と本番デプロイまで確認した段階です。ログイン後の本番画面確認は、この日の記録では残っていました。見込みの数字を実績扱いしたり、確認途中のものを全部完了と書いたりしないよう、作業の状態も分けて残しています。
7. つくり込むほど、自分が決めたことを保ちたい
5日目は、新しい機能を足しながら、画面に足された説明を見直す日でもありました。
プランの変更では、料金の仕組みを決める。予約の画面では、押した人に何が見えるかを確かめる。運営画面では、数字を見て自分が判断できるかを考える。
それと同時に、前の日に決めた見せ方が、その先の変更でも保たれているかを見ています。
Codexに履歴を調べてもらえたことで、どの機能と一緒に表示が増えたのかを、実物と結び付けて話せました。開発メモにも、変更の理由や、途中で戻したことが残っています。
僕の中で決まっていたことを、その先の開発へどうつないでいくか。 比較資料を見ながら残すものを考えるのも、自分のアプリをつくり込む作業でした。
自分の仕事に合うアプリをつくるときも、普段の仕事で何を見て判断しているか、どんな順番で進みたいかが、画面を決める材料になります。僕が運営するAI Crewでは、受講生がつくったホームページや業務アプリを紹介しています。自分なら何をつくりたいか、制作物から考えてみてください。