「名前が4文字しか見えない」要望。一覧の2行化は撮って比べて戻し、詳細画面に1欄足した
利用者から「誰が買う予定か、名前が4文字ほどしか見えない」と要望が届き、一覧を2行にする案を作ってから戻して、詳細画面に「購入予定の人」の欄を1つ足しました。修正前の画面を撮ったことで、頼まれていない 4.3px のはみ出しも見つかりました。
利用者の要望を、どこまで言われたとおりに直すか迷っている個人開発の方に向けた記事です。
要望は「一覧でも詳細でも、誰が買う予定か確かめられない」だった
Flutter で作っている「おもちゃ帳」には「欲しいもの」のリストがあります。家族の誰かが「購入予定」にすると、ほかの家族にも誰が買う予定かが分かります。おじいちゃん・おばあちゃんとプレゼントがかぶらないようにする、このアプリの中心の機能です。
10月6日の朝に読んだ要望は、次の3点でした。
一覧のカードに誰が買う予定かが出るが、小さくて4文字ほどしか見えない
詳細を開いても、誰が購入予定にしているかは表示されない
ここがしっかり見られたらありがたい
修正前を撮ったら、頼まれていない 4.3px のはみ出しも見つかった
直す前に、今の画面をシミュレータ(iPhone 17)で撮りました。作業は Claude Code に頼んでいて、指示は「今の状況と修正後のどちらもシミュレータで確認して」です。
一覧のカードは3列で、「おかあさんが購入予定」を1行で出し、「おかあさ…」で切れていました。詳細画面には、誰が購入予定かがどこにも出ていません。そして、「購入予定」のバッジ自体がカードの幅から 4.3px はみ出していました。端末の幅によっては、バッジの文字の端が欠けていたことになります。
名前を2行にする案は、2回直して一度コミットした
最初は一覧と詳細の両方を直す案にしました。先に仕様書を直してから実装する決まりなので、その順に進めています。
詳細画面:購入予定のとき、バッジの下に「購入予定の人」の欄を足す
一覧:「が購入予定」をやめて、人のアイコンと名前だけにする。名前は最大2行
バッジ:収まらないときは縮めて表示する
撮ってみると、アイコンの横に字下げしたせいで1行に4文字しか入らず、名前の行が増えた分だけ写真が大きく削られていました。そこで、名前をアイコンの下まで回り込ませ(Text.rich でアイコンを文の先頭に埋め込む)、購入予定の段だけカードを少し縦長にしました(縦横比 0.72 → 0.62)。撮り直すと「おかあさん」が全部読め、テストも通ったので、一度コミットしました。
短い名前と長い名前が並ぶと写真の高さがばらつくので、一覧は戻した
比較の画像を見ながら、Claude に「名前が短い(4文字以下)と余白が生まれるってことですかね?」と聞きました。答えはこうです。
余白はできない。「最大2行」は上限で、短い名前は1行で表示される
ただし、カードの高さは段ごとに固定で、残りを写真が使う
だから同じ段に短い名前と長い名前が並ぶと、カードごとに写真の高さが変わる
あわせて、ここまではコードを読んでの説明で、撮ったのは「おかあさん」の1件だけだとも言われました。
家族の表示名は自由入力なので、「ママ」「じいじ」とフルネームが同じ段に並ぶことは普通にあります。写真が中心の一覧で、写真の高さがばらつくのは避けたいと思い、一覧の改善は戻しました。名前を全部見たいときは、タップして詳細を開けば分かる形です。
バッジの修正は改善ではなく表示崩れの修正なので、一覧を戻しても残す、と Claude が判断し、「これも戻すなら言ってください」と確認してくれました。私も残すことにしました。
詳細画面の欄は、名前を省略せず「さん」も付けない
「購入予定の人」は、状態が購入予定のときだけ出ます。名前は大きめの太字で省略しません。購入予定にした人が家族のメンバーに見つからないときは「ある家族」と出します。
名前に「さん」は付けていません。「おかあさん」のように呼び方そのものを登録する人もいて、機械的に付けると「おかあさんさん」になるからです。
バッジは中身を FittedBox(fit: BoxFit.scaleDown)で包み、幅が足りないときだけ縮めて表示します。テストは、詳細画面に欄が出ること、メンバーが見つからないと「ある家族」が出ること、欲しい状態では出ないことを足しました。一覧は、文字を1.3倍にする設定で長い名前を入れてもはみ出さないことを確かめるテストを残しています。
修正前の画面は、変更前のコードのコピーから撮った
修正前と修正後は、同じ条件で撮って並べました。
一時的な integration_test で、サインイン → 欲しいもの一覧 → 購入予定のカードをタップ、と進め、撮りたいところで合図を出して数秒止める
合図を見て、シミュレータのスクリーンショットを撮るスクリプトを横で動かす
修正前の画面は、変更前のコードを別のフォルダに取り出して(git archive)、同じテストで撮る
作業中の変更を戻さずに、修正前の撮影を並行して進められます。1つ目の案がだめだと分かったのも、短い名前が気になったのも、並べた画像を見たからでした。
要望どおりに直すより、困りごとを解く場所を選ぶ
修正はバージョン 1.0.3 に入れ、10月8日に公開しました。要望をくれた方には、「一覧では途中までの表示になるが、詳細を開けば確認できる」と伝える文面を用意しました。
要望は「一覧で見えない」でも、困りごとは「誰が買う予定か確かめられない」。詳細で確かめられれば、一覧の見た目を崩さずに済んだ
「最大2行」は、短いとき・長いとき・混ざったときを見る。撮ったのは長めの名前1件だけだった
修正前を撮ると、頼まれていない崩れも見つかる
自分が購入予定のときは「自分」と出す、購入予定の段だけ2列にする、といった案も Claude から出ています。今回は入れず、使ってくれている方の声を聞きながら考えるつもりです。
「一覧で見えない」という要望を受けたとき、一覧と詳細のどちらで応えたか、コメントで教えてください。
「おもちゃ帳」は、子どもの持っているおもちゃや服・おむつのサイズを写真で記録し、欲しいものリストで「誰が何を買うか」を家族で共有できるアプリです。誕生日やクリスマスのプレゼントのかぶり防止にどうぞ。
App Store:https://apps.apple.com/jp/app/id6809164293
Google Play:https://play.google.com/store/apps/details?id=com.basewakamaru.omocha_cho
紹介サイト:https://omocha-cho.web.app
