AIチャットつくーるBETA
← 開発日記

アプリは動く。でも、スマホで触ると直すところが止まらない

AI開発日記9日目。「触る。直す。また触る。」の文字と、当日のマイAI一覧を使った表紙
当日の検証用AI一覧の画面を素材に、AIで構成した表紙です。画面内のAIと件数は検証用のサンプルです。

入力すると見えなくなる欄、返信が来ると勝手に切り替わる画面、整えたら逆に詰まった余白。自分でアプリを使いながら、AIと何度も直した一日です。会員登録から会話、プラン変更まで、実際の操作で見つけたことをまとめました。

開発者のみやっち🧑‍💻
みやっち🧑‍💻株式会社AI Orchestra / AIチャットつくーる開発者

今日はめちゃくちゃ頑張ったんじゃないですか?

日記を書く前、Codexにそう話しました。

昨日は「今日って何も開発してないよね?」と聞いていたのに、今日は自分でも、めちゃくちゃやった感覚があります。

2026年9月18日、AIチャットつくーるの開発9日目。日付をまたいで、19日の未明まで作業が続きました。この日記を書いているパソコンではあまり作業していませんが、ほかの2台では、かなり進めています。

今日は、自分で画面を触って、気になるところをAIに渡し、直った画面をまた触る。その繰り返しでした。

入力欄を押す。キーボードが出る。別の会話へ移る。返信が届く。ボタンを押して、その後の表示を見る。

そうやって使っていると、次々に見つかるんですよね。

触っていたところ 気になったこと・変えたこと
スマホの入力 入力欄や項目名が隠れる。長文は広い画面で編集できるようにする
AIと会話の一覧 似た見た目で区別しにくい。AIは相手、会話は話題を見せる
返信と操作の通知 勝手に画面が変わる、押した結果が分からない。通知と未読表示を整える
会員登録・メール メールを開いた先で迷う。確認から利用開始までの流れを直す
プラン変更 操作する順番で表示が食い違う。順番を変えて試し直す
作成したAIの利用状況 どのAIが使われているかを見たい。統計で反応が分かる画面へ

この日の作業ログ

キーボードが出たときの編集、AIと会話の選び分け、返信通知、メール認証を直しました。それぞれ別の画面ですが、利用者から見ると、登録してAIを選び、質問して、続きを読む一本の流れです。その途中で操作や入力が途切れないよう、実際に触りながら整えた日でした。

作業 この日に進めたこと
スマホの入力・編集 キーボードで隠れる入力欄、固定ヘッダーとの重なり、長文編集と保存状態を調整した。
マイAIの分類 作成したAIとゲットしたAIを分け、件数と公開範囲を見せるタブを追加した。
会話と検索の操作 履歴の追加表示、専用検索画面、行ごとの操作メニューを整備。ゲット直後の一覧更新も補った。
返信通知と未読 返信時の強制的な画面移動をやめ、通知と未読の表示へ変更した。
登録メールからの利用開始 別ブラウザーの確認リンク、自動ログイン、受信箱への案内とパスワード再設定を修正した。
メールとプロフィール 通知メールのデザインと署名、メール変更の確認、プロフィール写真の位置・大きさを整えた。
公開とゲットの導線 初回公開の共有設定、ゲット演出から会話へ進む操作を調整した。
読みやすさと余白 トップの文言・スマホ改行、コピーの反応、共有案内の余白を改善。狭めすぎた間隔は戻した。
ガイドと日記の入口 ナレッジ作成ガイドと活用ガイドを整理し、日記一覧のスマホ表示・ページ送りも改善した。
集客と計測の説明 指名検索の広告準備と、効果測定に関する説明・設定の整理を進めた。

元の記事には翌日未明までの作業が含まれます。日をまたぐ作業は翌日の記録にも続きます。

一覧にすると複数の画面にまたがっていますが、実際にはスマホで使う中で一つずつ気づいたことでした。ここからは、その操作の流れです。

1. スマホは、キーボードが出てからが本番だった

スマホでAIの指示文を書こうとすると、入力欄が隠れる。スクロールすると、今どの項目に何を書いているのか分からなくなる。

そこで、こんなことを伝えました。

どの入力窓に何を打っているのかわからない

短い名前を入れる欄と、長い指示文を書く欄では、必要な広さも違います。長文の欄は、タップすると広い編集画面を開くようにしました。編集を閉じても内容が残り、そのまま元の画面で作業を続けられる形です。

ただ、一度直して終わりにはなりませんでした。

自動検証を通した後も、手元では入力欄が上下に動くことがありました。僕が送った短い画面録画には、キーボードが同じ位置にあるのに、入力欄だけが行ったり来たりする様子が残っていました。

ビヨンビヨンってよくなります

AIが調べると、入力欄を見える位置へ動かす補正が、別のスクロール処理を呼び、また補正を呼ぶ状態になっていました。見えるようにするための処理が、落ち着かない動きを作っていたんです。

繰り返し動かす補正を見直し、編集画面を閉じた後に公開ボタンへ戻れるところまで修正しました。

プレビュー側では、ページ全体の高さと、キーボードが出たときに実際に見えている高さを分けて扱う必要もありました。単にブラウザーの縦幅を小さくする検証では、同じ状態を再現できていませんでした。

確認する場面 見るところ
キーボードを出す 入力欄と送信ボタンが見えるか
長い文章を書く 編集する場所を確保できるか
入力しながらスクロールする 位置が勝手に往復しないか
編集画面を閉じる 文章が残り、公開操作へ戻れるか

修正後はChromeとWebKitで操作を確認しています。一方、修正後の実機iPhoneでの操作確認は、記録上まだ残っています。自動検証が通ったことと、手元のスマホで気持ちよく使えることは、分けて見ないといけないですね。

2. AIを選ぶのと、会話を選ぶのは違う

ホーム画面も、何度か作り直しました。

まず、マイAIを「すべて」「自分で作ったAI」「ゲットしたAI」に分けました。自分で作ったAIには、「自分だけ」「リンク共有」の状態も表示します。

当日に実装したマイAIの分類タブと公開範囲の表示。検証用のAIを使ったスマホ画面
当日の途中段階を、検証用のAIで撮影した実画面です。AI名と件数はサンプル。この後、一覧の高さや操作の配置も見直しました。

分類できるようになった後も、気になるところがありました。

AIの一覧も、会話の一覧も、写真とAI名が目立つ。同じAIと何回か話していると、どの話題を開くのかが見分けにくいんです。

AIと会話のUIが同じで差別化がなされてない

画像で案を出してもらい、会話のタイトルを主役にする案を選びました。

一覧 最初に見たいもの 開いた先
マイAI 誰と話すか。AIの写真・名前・公開状態 そのAIとの新しい会話
最近の会話・会話履歴 何の話をしていたか。会話タイトル これまでの会話の続き

会話の行は、タイトルを上に、AIの写真・名前・日時を下に。AI一覧の編集・共有などの操作は、右側へまとめました。

さらに、ホームの一覧は最初からずらっと全部を並べず、5件ずつ追加表示する形へ。AI用と最近の会話用には、それぞれ検索窓も付けました。

同じデータが並んでいても、何を大きく見せるかで、選びやすさは変わります。画面の案を見て、選んで、実物を触るところまでやると、また次の違いが見えてきました。

3. 返信は知りたい。でも、画面を勝手に変えないでほしい

AIに質問を送って、待っている間に別の画面へ移る。

そこで返信が終わると、元の会話へ勝手に戻される挙動がありました。

勝手に画面が遷移してしまうのはおかしいです

見ている画面はそのままにして、返信が届いたことを通知する形へ変えました。会話一覧には未読の青い丸を付け、スマホではメニューを閉じていても新着が分かるようにしました。

通知を作ったら、それで完成かというと、そうでもありません。

出たままだと邪魔なので、しばらくしたら消えてほしい。閉じるボタンだけでなく、上へ払っても消したい。「会話を開く」とだけ書くより、返信の冒頭が見えた方が開きたくなる。

そうやって、通知にも何度か手を入れました。

場面 今回の動き
別の画面で返信を待つ 今の画面を保ち、返信の冒頭を通知する
通知を閉じたい ×ボタンか、上へのスワイプで閉じる
通知に触らない 約3秒で自然に消える
まだ会話を読んでいない 通知が消えても未読の印は残す

この「消える」の意味も分けました。通知を消したことと、会話を読んだことは別です。メニューを開いただけでも、読んだ扱いにはしません。

会話をアーカイブしたときや戻したとき、削除したときにも、何が起きたかを上部に表示するようにしました。押した後に何も見えないと、ちゃんとできたか不安になりますからね。

4. 余白を直したら、元より悪くなったところもあった

見出し、説明文、ボタンが隣接しすぎている画面を見つけ、似たところもまとめて直してもらいました。

ところが、変更前と変更後の画像を並べると、もともと空いていた余白まで狭くなっているところがありました。

これ、隣接してなかったものを逆に隣接させちゃってませんか?変更前の方がいいじゃん

間隔を共通の値へそろえたことで、元の方が見やすかった場所まで変わっていたんです。

その箇所は余白を戻し、詰まっていた箇所には必要な間隔を残すよう、やり直しました。

共有終了の案内画面。左は当初、右は再修正後で、見出し・説明・ボタンの間に余白がある
詰まっていた共有終了画面の改善例。当時のコードを同じサンプル条件で再描画し、左に当初の状態、右に再修正後を並べた加工済み比較画像です。

最初の検証では、新しく決めた間隔になっているかは確認していました。でも、変更前よりよくなったかという比較が抜けていました。

同じようなことは、ピン留めの表示でもありました。選択中だとピンが分かりにくいので目立たせてもらったら、行全体の背景色が強くなりすぎた。そこは戻して、アイコンの色で分かるようにしました。

目立てばいい、そろえばいい、というわけでもない。 こういうところは、変更前後を見比べて決めています。

5. 会員登録もプラン変更も、実際の順番で試す

画面の見た目だけでなく、利用を始めるところも触りました。

登録確認のメールを開いたのに、うまく先へ進めない。確認できた後にも、もう一度ボタンを押す画面が出る。パスワード再設定のメールを送った後、次にどこへ行けばいいのか分かりにくい。

メールのリンクを別のブラウザーで開く場合も含めて直し、登録確認後はそのままログインして利用を始められる流れにしました。再設定メールの送信後には、受信トレイを開く導線も整えました。

プラン変更では、操作の順番を変えたときの問題も見つかりました。

下のプランへの変更を予約した後に、解約する。別の変更を取り消した後に、もう一度予約する。単独では動いていても、続けて操作すると、古い結果が画面に残ることがありました。

試した流れ 確認・修正したこと
登録メールを別のブラウザーで開く メール確認から利用開始まで進めるか
パスワード再設定を申し込む メール確認、入力、完了まで迷わず進めるか
プラン変更を予約してから解約する 契約と予約の状態が食い違わないか
変更を取り消してから次の予約をする 前の操作結果が残っていないか

課金を伴う検証にはテスト環境を使い、本番では表示や保存された状態を照合しました。

ボタンが一つずつ動くだけでは、利用者が続けて操作したときの確認にはならない。今日は、そういう順番まで戻って試す日でもありました。

6. 自分が作ったAIの活躍が見えるように

作成したAIの利用状況も、見直しました。

どのAIがゲットされているのか。会話に使われているのか。AIごとの反応をグラフで比べ、選んだAIの詳しい状況へ進める画面にしました。

作った後に、どんな反応があるのかが分かるといいですよね。

一方で、誰が使ったのかを個人ごとに見せたいわけではありません。

基本的に統計データしか作成者には渡したくないので、『ゲットした人を見る』は丸ごと削除しましょうか

作成者向けの個別利用者一覧は外し、人数や回答数などの統計で反応を見られる形にしました。画面から隠すだけでなく、その一覧を取得する処理も合わせて撤去しています。

ほかにも、トップページの言葉やスマホの改行、メールのデザインと署名、活用ガイドを直しました。ナレッジの作成ガイドでは、利用者に資料の分割や修正を手作業で頑張ってもらう説明を見直し、AIに作成・修正を頼んで、本人が内容を確かめる流れにしています。

昨日からの集客準備では、アプリ名で検索する人に向けた広告の入稿も進めました。こちらは準備の話で、配信の成果はこれからです。

今日は、書くことがないとは言えない

入力欄を直して、一覧を直して、通知を直す。メールから入り直し、プラン変更の順番も変えてみる。直したつもりのところを、もう一度戻すこともありました。

一つずつは小さな違いでも、実際に使うと、何度も触るところばかりです。

今日はめちゃくちゃ頑張った、という感覚は、こういう往復の積み重ねでした。

AIにアプリを作ってもらえるようになっても、自分で使って「ここが気になる」と伝えることは、まだまだあります。その指摘が次の画面になるので、触っているとまた直したくなるんですよね。

まずは、自分がよく答えている質問や、仕事で使っている資料を一つ選んで、AIにしてみてください。自分の資料から返事が返ってくると、次はどんな質問にも答えられるようにしたいか、試したくなるはずです。

すでに作ったAIがある方は、スマホからもう一度話しかけてみてください。今日は、その「また使う」までのあちこちに手を入れました。

← 開発日記の一覧へ