ハコヅミを作る #31：気づいた点を1つの Issue にためて、まとめて直す
前回（#30）までで、公開に向けた大きな機能がそろいました。使っていると、小さな気になる点が出てきます。
今回は、その小さな直しの話です。
- 気づいた点を、1つの Issue にためる（#143・#154）
- ヘッダーに、ログインしている人の表示名を出す（#152）
「気づいた点をためる Issue」を作る
「管理のリンクの見た目が、となりのボタンとそろっていない」「画像の中の文字の色が、少し違う」。こういう直しは、1つずつ Issue にするほどではありません。かといって、気づいたときに伝えないと、忘れます。
そこで、気づいた点をためておく Issue を1つ作りました。本文に「直すこと」の一覧を置き、気づくたびに、Claude Code に「あの Issue に足して」と頼みます。足したら、末尾の変更履歴に1行残します。
決まりは3つです。
- 足すのは、小さな直しだけ。大きいものや、仕様の相談が要るものは、別の Issue に分ける（「確認の画面の見た目を変える」は、足したあとに規模が大きいと分かり、別の Issue にしました）
- 取りかかるときに、一覧を締める。その時点の項目で AC を書き、それ以上は足さない
- 見た目で判断が要るものは、先に画面イメージを選ぶ
1つ目の Issue を締めたあと、すぐに「その2」を作りました。締めないと、いつまでも終わらない Issue になるためです。
画像の中の文字の色を、測ってみた
トップページの画像には、「ハコヅミ」の文字が描かれています。この色が、ヘッダーの緑と少し違って見えるのが気になっていました。
Claude Code に画像を調べてもらうと、文字は緑ではなく、濃い紺でした。少し違う、どころではありません。
上が直す前（濃い紺）、下が直した後（ヘッダーと同じ緑）
文字は、画像の中に描かれています。色を変えるには、画像を加工します。文字の線の色と、まわりの空の色から、点ごとに「どのくらい線か」を出して、その分だけ緑に置き換える、というやり方です。ふちのにじみも、そのまま緑になります。
画面イメージより、濃くなった
先に、2つの案の画面イメージを見て、「下の一文も緑にする」ほうを選びました。ところが、実装の途中で、Claude Code が色を測り直して、こう言ってきました。
画面イメージの緑は、ヘッダーの緑より少し明るい色になっていました。
原因は、塗り方の基準でした。「線の色」として、文字の中でいちばん暗い1点を使っていたのです。文字の線の大部分は、それより少し明るい色です。そのため、ふつうの線が「少し薄い線」と見なされて、緑も薄く乗っていました。
基準を、線の色のまん中の値に変えると、ヘッダーとまったく同じ緑になりました。目的は「ヘッダーの緑にそろえる」ことなので、選んだ画面イメージとは少し違いますが、こちらを採りました。PR には、「イメージより少し濃く見えます」と書いてもらっています。
色を変える前の画像は、別の名前で残してあります。戻したくなったとき、また色を変えたくなったときの、もとになります。
広い画面での、画像の出し方
トップページの画像は、幅 1440px までにして、中央に置いていました。それより広い画面では、左右に余白が出ます。
幅 2200px の画面。画像は 1760px までで、それより広いと、左右に余白が出る
これは、2回に分けて直しました。
1回目：余白をなくしたい、と考えて、3つの案の画面イメージを見ました。「上下を切る」「切らずに広げる」「端をぼかす」。選んだのは、「切らずに、幅いっぱいに広げる」です。
2回目：広げてみると、とても広い画面では、画像が縦にも大きくなり、下のメニューが最初の画面に入りません。高さに上限を付けることにしました。
ここで、Claude Code が調べて分かったことがあります。メニューが入らなくなるのは、「幅が広い」ときではなく、幅のわりに高さが低いときでした。ふつうの比の画面なら、幅が広くても入ります。
最初の案は、「メニューが入る高さまでにして、はみ出す分を切る」でした。ただ、トップページには、あとでお知らせなどを足すつもりです。そうなると、「メニューが入る高さ」を基準にしても、意味がありません。
結局、高さは 640px まで、それより広い画面では、切らずに余白を出すことにしました。640px という高さは、幅にすると 1760px です。自分は、横長のモニターを3つに分けて使っています。その幅（いちばん広い設定で約 1707px）では、余白が出ません。
1回目で「余白をなくす」と決めて、2回目で「広すぎるときは余白を出す」に戻ったことになります。遠回りですが、上限の幅を 1440px から 1760px に広げた、というのが、落ち着いたところです。
登録がないときの表示を、そろえる
一覧にまだ何も登録していないとき、「まだ〜が登録されていません。」と出します。消耗品の一覧だけは、この文が白いカードの中に出ていました。コンテナ・プラン・キャンプは、ページの背景の上に、文がそのまま置かれていました。
登録がないときの文も、白いカードの中に出す
4つとも、白いカードの中に出すようにそろえました。キャンプだけ「まだキャンプがありません。」と、文も少し違っていたので、ほかと同じ言い方に直しています。
作った時期が違うと、こういう小さなずれが残ります。自分のデータが入っている画面では、空の状態を見ることがないので、気づきにくいところです。
見出しが、言葉の途中で折り返す
キャンプの画面の見出しは、「2026/9/23(水)・日帰り ファミリー・日帰り」のように、期間とプランの名前を並べています。スマホの幅では、これが「日帰」と「り」の間で折り返していました。
左が直す前（「日帰」「り」に分かれる）、右が直した後（まとまりの切れ目で折り返す）
一覧やキャンプ情報の期間は、前に、まとまりごとに折り返す部品（PeriodText）にしていました（#25）。見出しだけが、ただの文字のままでした。同じ部品を使うようにしています。
直してみると、もう1つ分かったことがあります。「・日帰り」の前で折り返すはずが、折り返しませんでした。「・」は、行の頭に来ない文字として扱われるためです。ブラウザに「ここで折り返してよい」と伝える印（<wbr>）を足して、直しました。
行は3行に増えましたが、言葉の途中では切れなくなりました。
ログインに失敗した理由を出す
#27で、本番のログインに失敗したとき、画面には「ログインできませんでした」としか出ませんでした。URL に付いていた invalid_code を見て、やっと原因が分かりました。
失敗の種類に合わせて、出すものを変えました。
左：失敗したとき（コードを小さく出す）。右：Google の画面で取り消したとき
- Google の画面で取り消したとき：失敗ではないので、赤くしない
- それ以外：今までの文の下に、小さくコードを出す。問い合わせを受けたときの、手がかりにする
気をつけたのは、URL の値を、そのまま画面に出さないことです。コードは URL から読みます。URL は、誰でも書き換えられます。何でも出してしまうと、「サポートに電話してください」のような文を仕込んだ URL を、人に踏ませることができます。
出すのは、英小文字・数字・_ だけでできた、短い文字に限りました。それ以外の形の値は、コードを出さずに、今までの文だけを出します。
ヘッダーに、表示名を出す
受入確認では、もう1つの Google アカウントをよく使います。ヘッダーの右上は、どのアカウントでも「アカウント」と出るだけでした。今どちらでログインしているかは、アカウントの画面を開かないと分かりません。
#30で作った表示名を、ヘッダーに出すことにしました。
右上の「アカウント」が、表示名に変わる。管理者には「管理」も並ぶ
決めたことは、次のとおりです。
- 表示名が未設定なら、今までどおり「アカウント」。Google の名前やメールアドレスは、代わりに出さない（#30 で決めた、本名を勝手に出さない、を守る）
- 長い表示名は、1行のまま「…」にする
- 読み上げでは、「アカウント：たろキャン」と伝える。表示名だけだと、何のリンクかが分からないため
#30 では、「表示名は、アカウントの画面のほかには出さない」と決めていました。使ってみて、変えたことになります。Issue と CLAUDE.md の記述も、合わせて直しました。
長い表示名を試すと、広い幅で、ヘッダーが2行に崩れました。メニューの5つが場所を取るので、入りきらない名前が、次の行に落ちていたのです。広い幅では折り返さないようにして、名前のほうを縮めています。
おわりに
- 小さな直しは、1つの Issue にためる。取りかかるときに締めて、次を作る
- 「少し違う色」は、測ってみる。まったく違う色だった
- 加工の基準は、いちばん端の値ではなく、まん中の値にする
- 見た目は、画面イメージで選んでも、実物で考えが変わることがある。2回に分けて直してよい
- URL から読んだ値は、そのまま画面に出さない
- 一度決めたこと（表示名を出さない）も、使ってみて変えてよい。変えたら、書いてあるところも直す
次回は、キャンプの期間を、カレンダーで選べるようにした話です。