ハコヅミを作る #37：ログインしていない人に見せる、紹介のページを作る
前回（#36）は、利用規約とプライバシーポリシーでした。今回は、公開までに要るものの3つ目です。
今までは、ログインしていない人がハコヅミを開くと、すぐログインの画面に移っていました。何のサービスかが分からないまま、Google のログインを求められます。これでは、テスタを募ることもできません。
- トップページを、ログインしていない人には「紹介」にする
- 紹介に、画面の絵を入れる
- ベータ版のテスタの募集を載せる
URL は1つのまま、出し分ける
紹介のページを、別の URL（/about など）に作る手もありました。そうせず、トップページ（/）で出し分けることにしました。
| トップページに出るもの | |
|---|---|
| ログインしていない人 | サービスの紹介と、ログインのボタン |
| ログインしている人 | 今までどおり、タイトルバナーとメニュー |
URL が1つで済み、ログインしたあとも同じ URL に戻ります。知り合いに送る URL も、https://hakozumi.jiru-labo.com だけです。
ほかの画面は、今までどおり、ログインしていなければログインの画面に移します。「ログインしていなくても開ける場所」は、1つの関数にまとめてあるので（#27）、そこにトップページを足すだけでした。
画面イメージを見てから決める
見た目の変更は、先に画面イメージを見てから決めることにしています（#22）。今回も、文言入りの案を2つ出してもらいました。違いは、テスタの募集の枠を、どこに置くかです。
- 案A：下のほう（料金のあと）。まず何ができるかを読んでから、募集に進む
- 案B：上のほう（ひとことの説明の、すぐ下）
案B を選びました。このページは、テスタを募るために見せるものです。URL を送られた人が、スクロールしなくても「募集している」と分かるほうがよい、と考えました。
紹介のページの上のほう。テスタの募集は、説明のすぐ下に置いた
今回のイメージは、絵ではなく、実際に動く画面を手元で撮ったものです。Claude Code が先に画面を作り、案A と案B を切り替えて撮っています。選んだあとは、使わなかった案を消すだけです。
画面の絵を入れる
「コンテナごと、まとめてチェック」は、ハコヅミのいちばんの売りです。ただ、文だけでは伝わりません。紹介には、画面の絵を入れることにしました。
絵に写るデータは、架空のものです。「みずうみの森」というキャンプ場、「カーゴ 30L（キッチン）」というコンテナ。手元のデータベースに入れて、スマホの幅で撮り、要るところだけを切り出しています。
できることの紹介。広い幅では、文が左、画面の絵が右に並ぶ
「画像」と書いたのに、絵に画像がない
3つ目の紹介は、「ギアとキャンプの記録」です。説明には、「ギアの画像やおすすめ度を残せます」と書きました。
ところが、最初に入れた絵は、ギアの一覧のリスト表示でした。文字が並んでいるだけで、画像は1枚も出ていません。見て、すぐに気づきました。カード表示（#20）の絵に、差し替えることにしました。
困ったのは、カードに入れるギアの写真です。架空のデータなので、写真がありません。
最初に Claude Code が出してきたのは、自分で描いたイラストでした。チェア、テーブル、テント、バーナー。図形を組み合わせた絵で、思ったより、それらしく描けています。
最初の案の、ギアのイラスト（Claude Code が図形で描いたもの）
権利の心配がない、という点では、よい案です。ただ、ハコヅミは、自分のギアの写真を並べて楽しむ場所でもあります。写真のほうが、使っているところを思い描けます。
写真の用意のしかたを聞くと、3つの案が返ってきました。
- 自分のギアを撮る（権利の心配がない）
- フリー素材の写真を使う（1枚ずつ、ライセンスを確かめる）
- 画像生成の AI で作る
今回は、2 にしました。商用で使える写真のサイト（Pexels）で、4枚を選んでいます。
選んだ1枚には、ノートパソコンのロゴが、はっきり写っていました。Claude Code が見つけて、教えてくれたものです。サービスの紹介に、他社のロゴが出るのは避けたいので、別の写真に替えました。使った写真の URL は、あとで分かるように、CLAUDE.md に書き残しています。
「無料で使えます」の落とし穴
テスタの募集の枠には、条件を書きました。最初の文は、こうです。
無料で使えます
公開の直前になって、気になりました。将来、有料のプランを始めたら、テスタも、最後は有料になりうる。この一言で、問題ないのか。
Claude Code の答えは、「少し危ない」でした。いつまでが書かれていないので、「テスタはずっと無料」と読まれる余地がある、というのです。
#34で決めた約束は、「有料プランを始めるときは、テスタは1年間無料」でした。「ずっと無料」とは、約束しないことにしています。文を、こう直しました。
- ベータ版のあいだは、無料で使えます
- 将来、有料のプランを始めることがあります。そのときも、申し込まないかぎり料金はかかりません
- 有料のプランを始めるときは、テスタの方は、始めた日から1年間、無料で使えます
料金のところの「無料で使えます」も、「今は、無料で使えます」に直しています。
短い一言ほど、読む人が、都合よく補って読みます。「無料」と書くときは、いつまでかを書く。これも、決まりとして CLAUDE.md に足しました。
上限の数は、書かない
料金のところには、最初、上限の数を出していました。「ギア 300 点、キャンプ 100 回まで登録できます」という形です。
ここで、2つの決まりがぶつかりました。
- 上限の数は、コードに書かない（#29。データベースに持つ）
- 紹介のページでは、データベースを読まない（速く返すため）
数を出すなら、どちらかを破ることになります。Claude Code は、データベースから1回だけ読む形で作ったうえで、「数を出さない手もある」と聞いてきました。
数は、出さないことにしました。「登録できる数には、上限があります」とだけ書いています。細かい数は、ログインしたあとの画面で分かります。紹介のページで要るのは、「上限がある」と知らせることまでです。
検索と SNS 向けの情報
ログインが要らないページができたので、検索と SNS のことも考えます。
- タイトルと説明：紹介を出すときだけ付ける
- SNS で共有したときの画像：タイトルバナーの左側を切り出して作った
- 検索に載せるページ：トップページと、利用規約・プライバシーポリシーだけ
3つ目は、今まで気にしていなかったところです。robots.txt が、全部のページを開ける設定のままでした。ログインが要る画面は、検索に載っても意味がありません。載せてよい3つだけを開けて、ほかの画面には noindex を付けました。
SNS で共有したときの表示は、まだ確かめていません。本番は、まだ Cloudflare Access の後ろにあり、外からは見えないためです。Access を外したあとに、確かめます。
マージしたあとに、push していた
失敗も、1つ書いておきます。
写真の差し替えを push して、「プルリクエストに入れました」と報告を受けました。ところが、プルリクエストの画面を見ても、何も来ていません。
調べてもらうと、もとのプルリクエストは、もうマージされていました。マージされたあとのブランチに push しても、どこにも載りません。別のプルリクエストを作り直してもらいました。
その少し前にも、似たことがありました。「マージOK」と伝えたつもりが、実際には、まだマージしていなかったのです。Claude Code は、確かめずに後片付けを進めてしまい、コメントとボードを戻すことになりました。
どちらも、原因は同じです。今の状態を確かめずに、思い込みで進めたこと。それ以来、Claude Code は、最初にプルリクエストの状態を確かめてから動くようになりました。人の言葉より、実際の状態を先に見る。当たり前のことですが、抜けるときは抜けます。
おわりに
- 紹介のページは、別の URL にせず、トップページで出し分ける
- 画面イメージは、実際に動く画面を撮ると、そのまま実装になる
- 説明に書いたことが、絵に出ているかを見る
- 写真を使うときは、写っているロゴにも気をつける。どの写真かを書き残す
- 「無料」と書くときは、いつまでかを書く
- 紹介のページで要るのは、知らせることまで。細かい数は、ログインのあとでよい
- 人の言葉より、実際の状態を先に確かめる
次回は、初めてログインした人への案内です。