アプリ開発って、やっぱり80点から100点に持っていくところが一番難しい。
2026年9月16日、AIチャットつくーるの開発7日目。今日はそれを、かなり感じた一日でした。
ひととおり動くものはできている。ところが、いろいろな使い方を試していくと、イレギュラーへの対策に追われる。そのたびに、詰め切れていなかった仕様が次々と分かってくる。
ここを直したら、あっちはどうなるんだっけ。作った本人にはこの表示でいいけれど、受け取った人にも同じ案内を出していいんだっけ。
かなり、こんがらがります。
そんなときにめっちゃ使えるのが、Codexにスクショを出させて、横に並べて比較することでした。
1. 「使えない」にも、いくつも理由がある
今日、特に整理が必要だったのが、AIを使えなくなったときの表示です。
このアプリでは、自分で作ったAIを、ほかの人に共有できます。だから、同じAIでも「作成者として見ている」のか「受け取った利用者として見ている」のかで、必要な案内が変わります。
さらに、使えない理由も一つではありません。
| 状態 | 考える必要があったこと |
|---|---|
| 共有範囲を「自分だけ」にした | 作った本人は使える。受け取った人には、共有されていないことを伝える |
| 作成者の会話用の利用枠が足りない | 作成者と利用者の両方が会話できなくても、対応を案内する相手は違う |
| 契約プランで使うAIの対象から外れた | 会話の残量とは別に、利用できるAIの個数と、復帰できるかを確認する |
見た目を直しているつもりが、途中で「そもそも、この状態は何を意味しているんだっけ？」という話になる。
実際、今日は「共有されていない」と「プランの都合で使えない」が混ざっていたので、そこから分け直しました。
さらに、プランの対象外でも、AIの個数枠に空きがあれば復帰できる。上限まで使っていたら、案内する内容が変わる。条件を一つ確認すると、次の条件が出てきます。
こういうところが、僕の感じる「残り20点」の難しさです。点数は測定したものではなく、開発しているときの実感ですが。
2. 変更前と変更後を、同じ画面で比べる
文章で「この説明を削ります」「この表示を整理します」と言われても、実際にどう見えるのかは、なかなか頭に入りません。
そこで、変更前と変更後をスクショで並べてもらいます。実装する前なら、今の表示と、変更した場合の案を並べる。
今日も、説明文などの整理案を7項目並べて確認しました。そのうち、実際に変更したのは4項目。並んだ画面を見ながら、変えるところを選びました。
例えば、AIの画像を選ぶところにあった説明文です。
左と右を見れば、何が消えて、その下の項目がどう動くのかが分かります。「説明を減らす」という文章だけより、判断しやすい。
このとき、変更した部分だけでなく、残したいボタンや案内も一緒に写してもらうのがよかったです。すっきりしたかどうかと、必要なものが残っているかを、同じ画像で見られます。
3. ユーザーの状態の違いも、横に並べる
もう一つ便利だったのが、ユーザーの立場や状態によって変わる画面の比較です。
今日は最初に、作成者・利用者・まだAIを受け取っていない人など、表示が変わる場所を洗い出してもらいました。ここでいう「状態」は、無料・有料というプランの違いだけではありません。
| 比べる軸 | 画面で確認すること |
|---|---|
| 作成者か、受け取った利用者か | 編集や設定を変える操作が必要か。誰に対応を案内するか |
| 通常か、利用できない状態か | 理由が分かるか。入力欄や送信ボタンが使えそうに見えないか |
| 共有中か、「自分だけ」か | 本人と共有先で、使える範囲が正しく分かれているか |
一人のユーザーが、自分のAIでは作成者、誰かから受け取ったAIでは利用者になることもあります。人を分類するだけでは足りなくて、そのAIを、誰の立場で開いているのかまで見ないといけない。
例えば、共有範囲を「自分だけ」に変えた同じAIを、作成者と利用者が開くとこうなります。
左の本人は、そのまま使える。右の利用者は、過去の会話を確認できるけれど、新しいメッセージは送れない。入力欄もグレーになっています。
同じAIでも、ここまで違います。
途中で出てきた比較が利用者側だけだったときには、作成者側も必要だと伝えました。最終的には、3つの状態×作成者・利用者の2つの立場で、6パターンを並べて確認しています。
一画面ずつ見ていたときは頭の中で覚えておく必要があった違いを、目の前に置いて比べられる。これが、かなり助かりました。
4. Codexには、比較する条件まで伝える
今日やったことを、次も頼みやすい指示にまとめるなら、こんな感じです。実際の会話の引用ではなく、今回の進め方を整理した例です。
この画面を、スクリーンショットで比較したいです。
1. 変更前と変更後を、同じ表示幅・同じデータ・同じ位置で並べてください。
まだ実装していない場合は、「現在」と「変更案」と明記してください。
2. 作成者と利用者で表示が変わる箇所も、横に並べてください。
利用枠不足や共有範囲の変更など、条件ごとの違いも見せてください。
3. 各画像に「誰の画面か」「どういう状態か」を書き、
文言・ボタン・入力できるかどうかの違いを説明してください。
4. 架空の確認用データを使い、実画面と再現した案を区別してください。比べる条件をそろえるのも大事でした。片方だけ画面幅やプランが違うと、何によって表示が変わったのか分からなくなります。
また、スクショで分かるのは、そのときの見た目です。グレーになっている入力欄が本当に送信できないか、共有を戻したら元の会話を続けられるかは、操作して確かめる必要があります。今日も、画面の比較と動作の確認を両方行いました。
5. こんがらがったら、一度、画面に出す
80点から先では、細かいところを見ているうちに、決め切れていなかった仕様が出てきます。
その全部を、文章のやり取りと頭の中だけで追いかけるのは、なかなかしんどい。
変更前と変更後。作成者と利用者。普通に使えるときと、使えないとき。
一度スクショにして、横に並べる。
それだけで、「ここが違う」「ここは同じでいい」「この案内はこっちの人には要らない」と、話を進めやすくなりました。
今日は、こんがらがった仕様を何度もほどく一日でした。AIとアプリをつくっている人には、このスクショ比較、めっちゃ使ってみてほしいです。