[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"content-/locksmith-site-content-expansion":3,"all-pages-for-dir":213,"related-/locksmith-site-content-expansion":214,"og-image-/locksmith-site-content-expansion":232},{"id":4,"title":5,"body":6,"category":193,"concepts":194,"description":195,"extension":196,"meta":197,"navigation":198,"ogImage":194,"path":199,"project_name":200,"published":201,"publishedAt":202,"seo":203,"source":204,"stem":205,"tags":206,"todo":194,"unpublished":201,"updatedAt":194,"__hash__":212},"pages/2026-08/2026-08-03/locksmith-site-content-expansion.md","本番に出さない下書きを抱えたまま、家業の鍵屋サイトを育てる",{"type":7,"value":8,"toc":180},"minimark",[9,13,17,20,23,27,30,33,36,40,43,46,49,52,55,58,61,64,67,75,78,81,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,152,155,158,161,177],[10,11,5],"h1",{"id":12},"本番に出さない下書きを抱えたまま家業の鍵屋サイトを育てる",[14,15,16],"p",{},"「これ、今ドラフト段階なんですよ」と自分で言いながら、そのページが本番に出ているのかどうか、自分では答えられなかった。",[14,18,19],{},"家業の鍵屋のサイトに、作りかけのページが溜まっている。\n施工事例が3本、対応エリアの地図が1本。\nどれも中身が半分しか埋まっていない。\n埋まっていないまま検索結果に出るのは困るし、かといって手元にしか無い状態だと、動線の確認もできない。",[14,21,22],{},"この日はまず、その「どっちつかず」に決着をつけるところから始めた。",[24,25,26],"h2",{"id":26},"どこからもリンクされていなかった4ページ",[14,28,29],{},"エリアのページを本番に入れたいと頼んだつもりだった。\nなぜまだ入っていないのか、理由が思い出せない。\nそこで「まだ入れてない理由ってなんかありましたっけ」と聞いてみた。",[14,31,32],{},"返ってきた答えは、想定と違った。\nそのページはとっくにビルド対象に入っていて、sitemap にも載っていた。\n無かったのはトップページからの導線だけだった。",[14,34,35],{},"施工事例の3本も同じ状態だった。\nビルドには乗るのに、どこからもリンクされていない。\n人間には見えないのに、検索エンジンからは見えている。\n公開したつもりが無いまま、この状態を放置していたことになる。",[24,37,39],{"id":38},"下書きを本体に持ったまま本番から外す","下書きを本体に持ったまま、本番から外す",[14,41,42],{},"ほしかったのは、リポジトリ本体に下書きを置きながら、本番の配信物からは落とす仕組みだ。\n書きかけを別ブランチに逃がすと、こちらが確認したいときに毎回ブランチを切り替えることになる。\nそれでは結局見なくなる。",[14,44,45],{},"ビルドスクリプトを拡張して、下書きフラグの付いたページを配信ディレクトリから除外するように変えてもらった。\n検証は数字で見た。\n公開ページ3本は 200、下書きは 404。\nこのとき事例用の空ディレクトリだけが残ってしまったので、後始末も足させた。",[14,47,48],{},"途中、ビルド出力に見覚えのないページが3本現れた。\n別セッションで作らせていた読み物系の記事だった。\nどれも下書きフラグと noindex が付いていたので中身には触らず、こちら側の設定だけ合わせた。",[24,50,51],{"id":51},"ヘッダーの項目を5つに減らす",[14,53,54],{},"「ヘッダーそろそろ整理してほしいんですけど、どういうふうに整理する内容なんでしたっけ」と自分で聞いている。\n自分が出した指示の中身を自分が覚えていない。",[14,56,57],{},"先に他社のサイトをいくつか見ることにした。\n実際に開いて、ヘッダーの構成を数えさせた。\nWebFetch は SSL で落ちたので、ブラウザで直接開かせている。\nどこも項目数は絞られていて、迷うところは無かった。",[14,59,60],{},"ヘッダーは5項目に落とし、外した項目はフッターへ移した。\n消してはいない。\nそのうえで施工事例のセクションを料金表の直後に置いた。\n確定した金額と所要時間が並んでいる事例は、その上にある料金表の裏付けになる。",[24,62,63],{"id":63},"崩れの測り方を3回変えた",[14,65,66],{},"ヘッダーを触ったら、横幅が2px はみ出した。\n調べさせると、769px から 1008px の範囲は以前から崩れていたと分かった。\nハンバーガーメニューが 768px までしか出ないので、その上の帯だけ、詰まったナビが押し合っていたことになる。",[14,68,69,70,74],{},"1回目の測り方は、要素の隙間を見るものだった。\nこれは使えなかった。\n",[71,72,73],"code",{},"justify-content: space-between"," を効かせていると、中身が縮んでいても隙間だけは埋まって見える。",[14,76,77],{},"2回目は、ナビの末尾と電話ボタンの実距離で判定させた。\n全幅クリアと報告が来たので目視したら、1025px で電話ボタンが右へ1px出ていた。\n要素どうしの間隔だけを見て、コンテナからのはみ出しを見ていなかった。",[14,79,80],{},"3回目でようやく、はみ出し量そのものを測る形に変えた。\nすると 390px でも右余白が4pxまで潰れていると分かった。\nさらに小さい幅のために、アイコン表示への切り替え位置を上げた。\n最終的に20通りの幅で通した。",[14,82,83,84,87],{},"もう一つ、幻の崩れも踏んだ。\nモバイルのスクリーンショットで電話番号が切れていたので実測させたら、はみ出しはゼロだった。\n",[71,85,86],{},"scrollWidth"," は固定配置のヘッダーを含まない。\nしかも、このマシンのヘッドレス Chrome は幅を 390px と指定しても実ビューポートが 500px になる。\n崩れて見えていたのは画像の切り取りのほうだった。",[14,89,90],{},"症状と測っている量が噛み合っていないと、「崩れていません」も「崩れています」も同じくらい当てにならない。",[24,92,93],{"id":93},"料金表を1か所で持つ",[14,95,96],{},"事例ページの下部を、料金表への「リンク」から「埋め込み」に変えたくなった。\nクリックを挟むより、そのままスクロールで読ませたほうが離脱しない。",[14,98,99],{},"素直にやるならコピペになる。\nただ、それをやると料金を1円変えるたびに4ファイルを直すことになる。\nページはこれから増える予定なので、いずれ11ファイルまでふくらむ。\nそこで料金表と対応エリアをパーシャルとして1か所に持ち、ビルド時に各ページへ展開する形にした。",[14,101,102],{},"作業中、地図まわりの CSS がエリアページの中にインラインで置かれているのを見つけて、共通のスタイルシートへ移させた。\nパーシャルに切り出したら「主な対応エリア」の見出しが落ちたので、地図と地区一覧の2つに割り直して構造を戻している。",[14,104,105],{},"完了と言えたのは、料金を1か所だけ書き換えて、4ページすべてに反映されるのを見てからだった。",[14,107,108],{},"この作業の途中で一度手を止めている。\n別のセッションが同じ Chrome を掴んでいて、描画の目視ができなくなった。\nCSS が全ルール漏れなく移ったことは HTTP 経由で確認できていたが、見た目は確認できていなかった。\nその状態で実装を進めても、あとで何を疑えばいいか分からなくなる。\n実装は止めて、残りの手順を計画書に書き残した。\n別セッションが終わってから、プロファイルを分けたヘッドレス Chrome で描画を確認して再開している。",[24,110,111],{"id":111},"デプロイで出した2件",[14,113,114],{},"「多分ドラフトだからほとんど変わらないかもしれないですけど」と言い添えてデプロイを頼んだ。\nこれは外れていた。\n下書きの2項目が本番に出ず、3項目をフッターへ移したので、本番のヘッダーは6項目から3項目に減った。",[14,116,117],{},"出荷してから不具合が2件出た。",[14,119,120],{},"1件目は sitemap で、ビルド用パーシャルの4つの URL が載ってしまい、本番では 404 になっていた。\n2件目のほうが重い。\nデプロイツールのアカウントキャッシュの JSON が、配信物に混ざって本番に出た。\n中身はアカウントの ID と名称で、認証トークンではない。\nすぐ消させて確認させたところ、オリジンからは消えていて、残っていたのはエッジキャッシュのほうだった。\n露出していたのは約4分。",[14,122,123],{},"原因を追わせて分かったのは、除外に使っていた設定フィールドがこの配信構成では効かないものだった、ということだ。\nデプロイのたびに警告が出ていた。\nその警告を読んでいなかったので、除外できているつもりのまま出していた。",[24,125,126],{"id":126},"事例を実話に寄せる",[14,128,129],{},"施工事例の3本は、玄関の鍵の紛失、車のインロック、金庫が開かないケースの3つで作ってある。\nどれもモデルケースで、今は金額と所要時間、ビフォーアフター写真の枠だけが入っている。",[14,131,132],{},"写真は、現場に出ている職人に後から撮ってきてもらう。\n文章のほうも、こちらの想像で書いた原稿を実例に寄せていく。\nそのために聞き取りをする。",[14,134,135],{},"昼のうちに、記事の中で黄色く塗ってあるプレースホルダーを全部拾わせて、それが埋まるヒアリング項目に落とし込ませた。\n3ケース分の質問をタブ切り替えの HTML にまとめさせた。\nコピーボタンに加えて、「この質問で記事のどこが埋まるか」の対応表も折りたたみで付いている。\nスマートフォンで開いて使う前提なので、モバイル表示まで確認させた。",[14,137,138],{},"夜、それを持って音声インタビューをした。\n聞き手は Claude Code に務めさせ、自分は録音を回しながら話を引き出す側にいた。",[14,140,141],{},"聞けた話は、想定していた「鍵を落とした」ではなかった。\n実際にあったのは、家族の一人が鍵を持ったまま出かけてしまい、残された人が家に入れなくなったケースだった。\nそこで事例のテーマごと書き換えさせた。\n聞き取れなかった項目は、埋めずに本文から削った。\n別の事例には、昼間でも対応していると伝える一文を足した。",[14,143,144],{},"事例カードは3つのページから参照されているので、そちらも合わせて直させている。\n黄色いプレースホルダーは、この事例から0件になった。",[14,146,147],{},"所要時間だけは、いったん消したものを戻した。\n聞き取りに出てこなかったから消したという判断だったが、元の原稿に書いてあった数字で問題ない。\nカード3枚の表記も、他の2件と同じ「所要時間と金額」の形に揃えた。",[24,149,151],{"id":150},"動画の差し替えと明日の料金表","動画の差し替えと、明日の料金表",[14,153,154],{},"ページの先頭に置いていた動画の素材が手に入ったので、差し替えを頼んだ。\nただ、素材のままではファイルが重い。\nffmpeg で変換させたところ、最初の書き出しは5MBで、まだ重かった。\nフレームレートを確認させてから圧縮を強め、元の41%にあたる2.7MB まで落とした。\n画質を自分の目で見てから配置させ、Cloudflare へデプロイした。\nデプロイツールが PATH に無くて一度止まったが、npx 経由で通っている。",[14,156,157],{},"最後に、料金表を明日のタスクに積んだ。\nサイトに載っている金額は仮のもので、店の正規の料金表が別にある。\n明日それに入れ替える。\nGoogle タスクに2件登録させたところ、登録スクリプトが応答のパースで落ちた。\n登録自体は通っている可能性があったので、一覧を読み直させて、重複が無いことと期日が入っていることを確認した。",[24,159,160],{"id":160},"残ったもの",[162,163,164,168,171,174],"ul",{},[165,166,167],"li",{},"正規の料金表への差し替え（明日）",[165,169,170],{},"金庫の事例に合わせて料金表の粒度を直す（明日）",[165,172,173],{},"ビフォーアフターの写真（現場の職人が撮ってくるのを待つ）",[165,175,176],{},"残り2ケースの聞き取り",[14,178,179],{},"今日いちばん効いたのは、下書きを本体に置いたまま本番から外せるようにしたことだった。\nこれができると、半分しか埋まっていないページを人に見せずに手元で育てられる。\n写真と実話が揃うまで、事例はこの状態で置いておける。",{"title":181,"searchDepth":182,"depth":182,"links":183},"",2,[184,185,186,187,188,189,190,191,192],{"id":26,"depth":182,"text":26},{"id":38,"depth":182,"text":39},{"id":51,"depth":182,"text":51},{"id":63,"depth":182,"text":63},{"id":93,"depth":182,"text":93},{"id":111,"depth":182,"text":111},{"id":126,"depth":182,"text":126},{"id":150,"depth":182,"text":151},{"id":160,"depth":182,"text":160},"dev",null,"作りかけの施工事例とエリアページを本番から外したまま手元で育てる仕組みを入れ、ヘッダーを整理し、職人への聞き取りで事例を実話に寄せた一日の記録。デプロイで出した不具合2件も残しておく。","md",{},true,"/locksmith-site-content-expansion","komatsu-sos",false,"2026-08-03T00:00:00.000Z",{"title":5,"description":195},"make-diary","2026-08/2026-08-03/locksmith-site-content-expansion",[207,208,209,210,211],"静的サイト","Cloudflare","SEO","コンテンツ設計","Claude Code","vQzo-BZjXYs-ANhexHpYUZR3-bcR9492j5hy8zJys-w",[],[215,219,222,226,229],{"title":216,"path":217,"publishedAt":218},"専門書をスキル化するときの線引きと、事業サイトの掲載内容の詰め方","/expert-book-skill-boundary","2026-08-04T00:00:00.000Z",{"title":220,"path":221,"publishedAt":202},"2026年8月3日の開発日記 - 壊れていたのは、思い込みのほうだった","/2026-08-03-diary",{"title":223,"path":224,"publishedAt":225},"2026年8月7日の開発日記 - 緩めたルールを、元に戻した日","/2026-08-07-diary","2026-08-07T00:00:00.000Z",{"title":227,"path":228,"publishedAt":218},"「7月28日のMCP更新でAIの自律SEOが現実になった」は本当か","/mcp-2026-07-28-autonomous-seo-fact-check",{"title":230,"path":231,"publishedAt":202},"Mac にクローンし直したら、Cloudflare への書き込みだけが通らなかった","/cloudflare-r2-write-auth-on-mac","https://log.eurekapu.com/og/blog/locksmith-site-content-expansion.png?v=2026-08-03T00%3A00%3A00.000Z&title=%E6%9C%AC%E7%95%AA%E3%81%AB%E5%87%BA%E3%81%95%E3%81%AA%E3%81%84%E4%B8%8B%E6%9B%B8%E3%81%8D%E3%82%92%E6%8A%B1%E3%81%88%E3%81%9F%E3%81%BE%E3%81%BE%E3%80%81%E5%AE%B6%E6%A5%AD%E3%81%AE%E9%8D%B5%E5%B1%8B%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E8%82%B2%E3%81%A6%E3%82%8B&author=Kei%20Komatsu&sig=182c55a7da6a0c7e",1786233103477]