本番に出さない下書きを抱えたまま、家業の鍵屋サイトを育てる
本番に出さない下書きを抱えたまま、家業の鍵屋サイトを育てる
「これ、今ドラフト段階なんですよ」と自分で言いながら、そのページが本番に出ているのかどうか、自分では答えられなかった。
家業の鍵屋のサイトに、作りかけのページが溜まっている。 施工事例が3本、対応エリアの地図が1本。 どれも中身が半分しか埋まっていない。 埋まっていないまま検索結果に出るのは困るし、かといって手元にしか無い状態だと、動線の確認もできない。
この日はまず、その「どっちつかず」に決着をつけるところから始めた。
どこからもリンクされていなかった4ページ
エリアのページを本番に入れたいと頼んだつもりだった。 なぜまだ入っていないのか、理由が思い出せない。 そこで「まだ入れてない理由ってなんかありましたっけ」と聞いてみた。
返ってきた答えは、想定と違った。 そのページはとっくにビルド対象に入っていて、sitemap にも載っていた。 無かったのはトップページからの導線だけだった。
施工事例の3本も同じ状態だった。 ビルドには乗るのに、どこからもリンクされていない。 人間には見えないのに、検索エンジンからは見えている。 公開したつもりが無いまま、この状態を放置していたことになる。
下書きを本体に持ったまま、本番から外す
ほしかったのは、リポジトリ本体に下書きを置きながら、本番の配信物からは落とす仕組みだ。 書きかけを別ブランチに逃がすと、こちらが確認したいときに毎回ブランチを切り替えることになる。 それでは結局見なくなる。
ビルドスクリプトを拡張して、下書きフラグの付いたページを配信ディレクトリから除外するように変えてもらった。 検証は数字で見た。 公開ページ3本は 200、下書きは 404。 このとき事例用の空ディレクトリだけが残ってしまったので、後始末も足させた。
途中、ビルド出力に見覚えのないページが3本現れた。 別セッションで作らせていた読み物系の記事だった。 どれも下書きフラグと noindex が付いていたので中身には触らず、こちら側の設定だけ合わせた。
ヘッダーの項目を5つに減らす
「ヘッダーそろそろ整理してほしいんですけど、どういうふうに整理する内容なんでしたっけ」と自分で聞いている。 自分が出した指示の中身を自分が覚えていない。
先に他社のサイトをいくつか見ることにした。 実際に開いて、ヘッダーの構成を数えさせた。 WebFetch は SSL で落ちたので、ブラウザで直接開かせている。 どこも項目数は絞られていて、迷うところは無かった。
ヘッダーは5項目に落とし、外した項目はフッターへ移した。 消してはいない。 そのうえで施工事例のセクションを料金表の直後に置いた。 確定した金額と所要時間が並んでいる事例は、その上にある料金表の裏付けになる。
崩れの測り方を3回変えた
ヘッダーを触ったら、横幅が2px はみ出した。 調べさせると、769px から 1008px の範囲は以前から崩れていたと分かった。 ハンバーガーメニューが 768px までしか出ないので、その上の帯だけ、詰まったナビが押し合っていたことになる。
1回目の測り方は、要素の隙間を見るものだった。
これは使えなかった。
justify-content: space-between を効かせていると、中身が縮んでいても隙間だけは埋まって見える。
2回目は、ナビの末尾と電話ボタンの実距離で判定させた。 全幅クリアと報告が来たので目視したら、1025px で電話ボタンが右へ1px出ていた。 要素どうしの間隔だけを見て、コンテナからのはみ出しを見ていなかった。
3回目でようやく、はみ出し量そのものを測る形に変えた。 すると 390px でも右余白が4pxまで潰れていると分かった。 さらに小さい幅のために、アイコン表示への切り替え位置を上げた。 最終的に20通りの幅で通した。
もう一つ、幻の崩れも踏んだ。
モバイルのスクリーンショットで電話番号が切れていたので実測させたら、はみ出しはゼロだった。
scrollWidth は固定配置のヘッダーを含まない。
しかも、このマシンのヘッドレス Chrome は幅を 390px と指定しても実ビューポートが 500px になる。
崩れて見えていたのは画像の切り取りのほうだった。
症状と測っている量が噛み合っていないと、「崩れていません」も「崩れています」も同じくらい当てにならない。
料金表を1か所で持つ
事例ページの下部を、料金表への「リンク」から「埋め込み」に変えたくなった。 クリックを挟むより、そのままスクロールで読ませたほうが離脱しない。
素直にやるならコピペになる。 ただ、それをやると料金を1円変えるたびに4ファイルを直すことになる。 ページはこれから増える予定なので、いずれ11ファイルまでふくらむ。 そこで料金表と対応エリアをパーシャルとして1か所に持ち、ビルド時に各ページへ展開する形にした。
作業中、地図まわりの CSS がエリアページの中にインラインで置かれているのを見つけて、共通のスタイルシートへ移させた。 パーシャルに切り出したら「主な対応エリア」の見出しが落ちたので、地図と地区一覧の2つに割り直して構造を戻している。
完了と言えたのは、料金を1か所だけ書き換えて、4ページすべてに反映されるのを見てからだった。
この作業の途中で一度手を止めている。 別のセッションが同じ Chrome を掴んでいて、描画の目視ができなくなった。 CSS が全ルール漏れなく移ったことは HTTP 経由で確認できていたが、見た目は確認できていなかった。 その状態で実装を進めても、あとで何を疑えばいいか分からなくなる。 実装は止めて、残りの手順を計画書に書き残した。 別セッションが終わってから、プロファイルを分けたヘッドレス Chrome で描画を確認して再開している。
デプロイで出した2件
「多分ドラフトだからほとんど変わらないかもしれないですけど」と言い添えてデプロイを頼んだ。 これは外れていた。 下書きの2項目が本番に出ず、3項目をフッターへ移したので、本番のヘッダーは6項目から3項目に減った。
出荷してから不具合が2件出た。
1件目は sitemap で、ビルド用パーシャルの4つの URL が載ってしまい、本番では 404 になっていた。 2件目のほうが重い。 デプロイツールのアカウントキャッシュの JSON が、配信物に混ざって本番に出た。 中身はアカウントの ID と名称で、認証トークンではない。 すぐ消させて確認させたところ、オリジンからは消えていて、残っていたのはエッジキャッシュのほうだった。 露出していたのは約4分。
原因を追わせて分かったのは、除外に使っていた設定フィールドがこの配信構成では効かないものだった、ということだ。 デプロイのたびに警告が出ていた。 その警告を読んでいなかったので、除外できているつもりのまま出していた。
事例を実話に寄せる
施工事例の3本は、玄関の鍵の紛失、車のインロック、金庫が開かないケースの3つで作ってある。 どれもモデルケースで、今は金額と所要時間、ビフォーアフター写真の枠だけが入っている。
写真は、現場に出ている職人に後から撮ってきてもらう。 文章のほうも、こちらの想像で書いた原稿を実例に寄せていく。 そのために聞き取りをする。
昼のうちに、記事の中で黄色く塗ってあるプレースホルダーを全部拾わせて、それが埋まるヒアリング項目に落とし込ませた。 3ケース分の質問をタブ切り替えの HTML にまとめさせた。 コピーボタンに加えて、「この質問で記事のどこが埋まるか」の対応表も折りたたみで付いている。 スマートフォンで開いて使う前提なので、モバイル表示まで確認させた。
夜、それを持って音声インタビューをした。 聞き手は Claude Code に務めさせ、自分は録音を回しながら話を引き出す側にいた。
聞けた話は、想定していた「鍵を落とした」ではなかった。 実際にあったのは、家族の一人が鍵を持ったまま出かけてしまい、残された人が家に入れなくなったケースだった。 そこで事例のテーマごと書き換えさせた。 聞き取れなかった項目は、埋めずに本文から削った。 別の事例には、昼間でも対応していると伝える一文を足した。
事例カードは3つのページから参照されているので、そちらも合わせて直させている。 黄色いプレースホルダーは、この事例から0件になった。
所要時間だけは、いったん消したものを戻した。 聞き取りに出てこなかったから消したという判断だったが、元の原稿に書いてあった数字で問題ない。 カード3枚の表記も、他の2件と同じ「所要時間と金額」の形に揃えた。
動画の差し替えと、明日の料金表
ページの先頭に置いていた動画の素材が手に入ったので、差し替えを頼んだ。 ただ、素材のままではファイルが重い。 ffmpeg で変換させたところ、最初の書き出しは5MBで、まだ重かった。 フレームレートを確認させてから圧縮を強め、元の41%にあたる2.7MB まで落とした。 画質を自分の目で見てから配置させ、Cloudflare へデプロイした。 デプロイツールが PATH に無くて一度止まったが、npx 経由で通っている。
最後に、料金表を明日のタスクに積んだ。 サイトに載っている金額は仮のもので、店の正規の料金表が別にある。 明日それに入れ替える。 Google タスクに2件登録させたところ、登録スクリプトが応答のパースで落ちた。 登録自体は通っている可能性があったので、一覧を読み直させて、重複が無いことと期日が入っていることを確認した。
残ったもの
- 正規の料金表への差し替え（明日）
- 金庫の事例に合わせて料金表の粒度を直す（明日）
- ビフォーアフターの写真（現場の職人が撮ってくるのを待つ）
- 残り2ケースの聞き取り
今日いちばん効いたのは、下書きを本体に置いたまま本番から外せるようにしたことだった。 これができると、半分しか埋まっていないページを人に見せずに手元で育てられる。 写真と実話が揃うまで、事例はこの状態で置いておける。