🟨 この記事はClaude Code（AI）と2ヶ月で開発した日本初のWebサイト校正ツール「fuSen」の開発ブログです。登録不要でデモを試せます → https://app.fusen.cloud/demo
第三話：バグ取りという名の消耗戦
開発で一番しんどかったことを聞かれたら、迷わず答える。
それは、バグ取り。
直したら、別のところが壊れる
コードを書いたことがある人なら、きっとわかってもらえると思うが、
「直したら別のところが壊れる」という、あの絶望感・・・
エラーを修正する。動いた。よし、と思ったら別のところでエラーが出る。またそこを直す。また別のところが壊れる。この無限ループが、開発中何度も何度も繰り返された。
Laravelを「それ何？」というところから始めた自分にとって、バグの原因を特定するだけで何時間もかかることがあった。Claudeにエラーメッセージを貼り付けて、「原因はこれです」と教えてもらっても、修正したらまた別のエラーが出る。
それを繰り返す深夜の作業は、正直しんどかった。
競合にはない機能を、なぜ作ったのか
そんな消耗戦の中で、特に大変だったのが2つの機能だ。
ひとつ目は、固定付箋と通常付箋の切り替え機能。
fuSenでは、ピンを画面上の固定位置に置く「固定付箋」と、スクロールに追従する「通常付箋」を切り替えられる。
実はこの機能、競合ツールにはどこにもない。入れなくてもサービスとして成立する。だから「実装しない」という選択肢もあった。
でも、自分には確信があった。
Webサイトにはスクロールしても位置が変わらない固定要素（ヘッダーやナビゲーション）と、スクロールに追従するコンテンツの2種類がある。ヘッダーの修正指示を通常のピンで打つと、スクロールしたときにずれてしまう。固定要素には固定付箋、通常コンテンツには通常付箋、それぞれ使い分けることで、修正指示が正確に伝わる。
だからこそ、何度バグが出ても諦めなかった。
位置がずれる。直す。また別の状況でずれる。また直す。スクロール量の計算、デバイスごとのピクセル比、DOMの構造……原因を一つひとつ潰していく作業は、地味で、しんどくて、でも絶対に必要だと信じていた。
ふたつ目は、デバイスごとにピン位置を変えられる機能。
PCで見たときとスマホで見たときでは、Webサイトのレイアウトが全然違う。PCで「このボタンの位置が変」とコメントしても、スマホ版では別の場所にあることが多い。
だからfuSenでは、PC・スマホ・タブレットそれぞれで別々にピンを刺せる仕組みにした。
これも競合には存在しない機能だ。
実装は地獄だった。デバイスによってピンの座標がズレる。計算式を修正する。別のデバイスでまたズレる。レスポンシブ対応のサイト、固定幅のサイト、ノーコードのサイト、それぞれで挙動が違う。Claudeと二人三脚で、何十回も修正を繰り返した。
経験が、諦めない理由になった
バグと戦いながら気づいたことがある。
自分がこれほど粘れたのは、「この機能が現場で絶対に必要だ」という確信があったから。
20年の経験が、技術的な壁を超える理由になった。「競合にないから入れなくていい」ではなく、「現場を知っているから、絶対に必要だとわかる」。
コードは書けない。でも、何を作るべきかはわかる。
その確信が、深夜のバグ取りを乗り越えさせてくれた。
次回：「技術的に難しい」とAIに言われた機能を、20年の現場経験で実現した話。世界初のノーコードサイト対応が動いた瞬間。
fuSen｜Webサイト上に付箋を貼るように、フィードバックを残せるオンライン校正ツール。ベータ版リリース中、全機能無料。
👉 無料で始める → https://fusen.cloud/
👉 登録不要でデモを試す → https://app.fusen.cloud/demo