ハコヅミを作る #71：課金の前に、小さな直しを2つ（数と一覧を合わせる、入口をまとめる）
#70 の最後に、「課金に進む前に、小さな直しを、いくつか挟みます」と書きました。その直しです。2つあります。
どちらも、わたしが画面を触っていて、気づいたものです。
- フォローしている数と、一覧が合わない
- 3つの案
- 見えない人を、数えない
- 文字のリンクが、ゴチャついてきた
- アイコンだけか、札か、タイルか
- 「メンバー」では、伝わらない
- テストで作った500人が、ほかのテストを落とす
フォローしている数と、一覧が合わない
わたしが気づいたのは、こういう場面でした。
フォローした後にその人が共有をOFFにした場合、自分のアカウントではフォローしたメンバが1人となっていて、フォロー中のリンクをクリックすると誰もいない状態になる
アカウントの画面には、「フォローしているメンバー 1 人」。でも、「フォロー中」を開くと、だれもいません。
原因は、#70 で決めた数え方でした。フォローできるのは 1人 500 人までで、その上限は、「共有をやめた人へのフォローも数える」と決めていました。アカウントの画面の数も、同じ数え方をしていました。一覧のほうは、今見える人だけを出します。数と一覧で、数え方が違っていたのです。
3つの案
直し方を、Claude Code と考えました。
| 案 | 中身 | 気になるところ |
|---|---|---|
| A | 数は、今見える人だけで数える | 見えない人の分は、こちらからは分からない |
| B | 「うち N 人は、今は共有していません」と添える | だれかが共有をやめたことが、伝わってしまう |
| C | 共有をやめたら、その人へのフォローを消す | うっかりオフにしただけで、フォローが全部消える |
B は、親切そうに見えます。でも、フォローしている人が少ないと、だれが共有をやめたかの見当がつきます。共有をやめるのは、本人が「もう見せない」と決めたことです。それを、ほかの人に知らせることになります。
C は、すっきりしています。ただ、共有のスイッチを試しにオフにしただけで、自分をフォローしてくれていた人が、全員いなくなります。オンに戻しても、戻りません。
見えない人を、数えない
A にしました。
2人フォローしていて、1人が共有をやめたとき（架空のデータ）
「フォロー中」のメンバーも、1人
フォローの行は、消していません。相手が共有を始めれば、フォローし直さなくても、また数に入ります。
一緒に決めたことが、2つあります。
1つ目は、500 人の上限も、同じ数え方にすること。上限だけを「見えない人も数える」にしておくと、「480 人なのに、もうフォローできない」という、別のずれが残ります。行が 500 を少し超えることはありますが、1行は小さいので、困りません。
2つ目は、フォローされている数（本人にだけ見せる数）から、凍結された人を外すこと。共有していない人からのフォローは、数えます。フォローするのに、共有は要らないからです。
数が合わない、というのは小さなことです。でも、「1 人」と書いてあるのに、開くとだれもいない画面は、壊れているように見えます。数と一覧は、同じ数え方でそろえておきます。
文字のリンクが、ゴチャついてきた
もう1つの直しは、見た目です。
トップページのお知らせの下に、文字のリンクを並べていました。共有を作るたびに、1つずつ足してきたものです。
直す前。長さがそろわず、2行に折り返している
トップページのお知らせの下にあるリンクがちょっとゴチャついてきたと思う ここを文字のリンクではなく、小さいアイコンとかにしたほうがすっきりするかな？
1つ足すたびには、気になりませんでした。4つ並んで、はじめて、ゴチャついていると分かりました。
アイコンだけか、札か、タイルか
Claude Code が出した案は、3つでした。
| 案 | 形 | 気になるところ |
|---|---|---|
| A | アイコンだけ | 「みんなの共有」「フォロー中」は、絵だけでは分かりにくい |
| B | 文字の札（バッジ） | 文字が多いままで、まだ少しうるさい |
| C | 小さなアイコン＋短い名前のタイル | アイコンを用意する |
C にしました。トップページの上には、もう「キャンプ」「ギア」…と、アイコンの下に名前を置いたメニューがあります。それを小さくした形なら、見た目も、押し方も、そろいます。
アイコンは、ヘッダーのメニューと同じく、Lucide の線画を写して置きました。人の集まり、人にチェック、ハートです。パッケージは、足していません。
もう1つ、Claude Code が足した提案がありました。「使い方」は、共有の入口とは性格が違うので、タイルに入れずに、文字のリンクで1つだけ残す、というものです。そうしました。
「メンバー」では、伝わらない
最初の案では、タイルの名前を「メンバー」「フォロー中」「いいね」にしていました。見出しが「みんなの共有」だったので、その中の「メンバー」です。
わたしが止めました。
「メンバー」はちょっと意図が伝わりづらく感じた 「みんなの共有」だと長過ぎる？
見出しの中で読めば、「みんなの共有のメンバー」と分かります。でも、タイルは、見出しと一緒に読むとは限りません。「メンバー」だけを見て、何が開くかは、分かりにくい。
幅 320px でも、6文字の「みんなの共有」は入りました。そのかわり、見出しも「みんなの共有」のままだと、同じ言葉が2回並びます。見出しのほうを、「共有」にしました。
最初の形。見出しの線と、タイルがくっついている
画面の絵を見て、もう1つ直しました。見出しの線のすぐ下に、タイルがくっついていました。ほかのまとまりは、白いカードが線につながる形なので、気になりませんでした。タイルは、1つずつが白いカードなので、すき間がないと窮屈に見えます。
直したあと（幅 320px）。3つが1行に収まる
テストで作った500人が、ほかのテストを落とす
フォローの数え方を変えたので、500 人の上限のテストも、作り直しました。前は、いない人の id を 499 個並べて、フォローの行を作っていました。今は、見えない人を数えないので、それでは上限に届きません。共有が見えるメンバーを 500 人、本当に作ることにしました。
それで、関係するテストを流したら、前からある別のテストが1つ、落ちました。「みんなの共有」の一覧に、そのテストで作った人が出てこない、というものです。
「みんなの共有」は、共有をオンにした日時の新しい順に、上から 100 人を並べます。テストで作った 500 人は、共有をオンにした日時を「今」にしていました。一覧の上位 100 人が、その人たちで埋まり、あとから流れたテストの人が、101 人目より下に押し出されていました。
テストで作る 500 人は、共有をオンにした日時を、ずっと昔にしました。
テストは、手元でも CI でも、同じデータベースを、順番に使い回しています。あるテストが作ったものが、ほかのテストの見ている画面に出ることがあります。今回は、「並べて上位を出す」画面に、たくさん作ったものが入り込みました。たくさん作るテストは、ほかの画面にどう出るかまで、考えておく必要があります。
おわりに
- 数と一覧は、同じ数え方でそろえる。「1 人」なのに、開くとだれもいない画面は、壊れて見える
- 親切な注記が、だれかの事情を知らせてしまうことがある
- 消せば、ずれは起きない。でも、消したものは戻らない
- 1つずつ足したものは、並んではじめて、ゴチャついていると分かる
- アイコンだけでは、伝わらないものがある。名前を添える
- 見出しと一緒に読まれるとは限らない。タイルの名前は、それだけで分かる言葉にする
- 同じ言葉が2回並ぶなら、片方を変える
- たくさん作るテストは、「並べて上位を出す」画面を埋めないようにする
テスタを募集しています。キャンプに行く方、よければ、触ってみてください。