🟨 この記事はClaude Code（AI）と2ヶ月で開発した日本初のWebサイト校正ツール「fuSen」の開発ブログです。登録不要でデモを試せます → https://app.fusen.cloud/demo
第一話：FAXから始まった、終わらない戦い
Webの仕事を始めて、もうずいぶん経つ。
その間ずっと、同じ問題と戦い続けている。クライアントからの修正指示が、うまく伝わらない。
FAX、という時代があった
大昔の話をしよう。
Webサイトの修正確認は、プリントアウトから始まっていた。制作したページを紙に印刷して、クライアントに送る。クライアントは赤ペンで修正箇所に丸をつけて、メモを書き込んで、それをFAXで返してくる。
受け取った紙を見ながら、「この矢印はどこを指してるんだろう」と首をかしげる。文字が潰れていて読めない。電話で確認する。また修正する。また送る。
これが現実だった。そしてこの構造——「伝えたいことが正確に伝わらない」という本質的な問題は、ツールが進化しても、驚くほど変わっていない。
令和になっても、本質は同じ
FAXがなくなっても、やっていることは変わらなかった。
Webサイトを紙に印刷して、赤ペンで修正を書き込む。ここまではFAX時代と同じだ。違うのは、それをスマホのカメラで撮影して、LINEで送ってくること。
令和である。
Adobe AcrobatのPDFコメント機能を使ってくれるクライアントは最先端笑 現実は、印刷→赤入れ→スマホ撮影→LINEだ。しかも修正テキストも手書きで書いてある。「ここの文字をこれに変更」と走り書きされた文字を解読して、自分でキーボードで打ち直す。今ならスマホOCRで読んでくれるが、当時そんな便利なものはなかった。
画像は斜めに傾いていることもある。ペンがかすれて読めないこともある。それでも「たぶんこう書いてあるんだろう」と推理しながら修正を進める日々だった。
この「伝言ゲーム」は、ツールが進化しても、本質的には解消されていなかった。
Markupとの出会い
そんな状況に嫌気が差していた頃、Markupというツールを知った。
WebサイトのURLを入力すると、実際のサイト上にコメントを貼り付けられる。「このボタンの色を変えて」と、ボタンの上に直接コメントを置ける。スクリーンショットも赤ペンも不要。これだ、と思った。
実際、使い始めてから確認フローはかなりスムーズになった。制作側としては画期的だった。
ただ、問題が二つあった。
Markupの限界——値上げと、UXの壁
一つ目は、無料プランの廃止と値上げだ。
気づけば無料プランがなくなり、月80ドルになっていた。円安が進むなか、これは痛い。80ドルが1万円を超える水準になってくると、「便利だけど、この金額を毎月払い続けるか」という判断になる。泣く泣く解約を検討するWeb制作者が、日本中にいたはずだ。
二つ目は、クライアント側のUXだ。
Markupは優れたツールだけど、英語ベースで、UIが日本人には少しわかりにくい。制作側の自分は慣れればいいが、問題はクライアントだ。「これ使って確認してください」とURLを送っても、使い方がわからないと連絡が来る。
結果、何をしたか。
Markupの使い方を説明するために、Markupの画面をスクリーンショットして、そこに赤でコメントを入れて、マニュアルを作った。
校正ツールを使うために、マニュアルを作るという、なんだかなぁ、という気持ち、、、、
「じゃあ、自分で作ればいい」
ここまで来て、ようやく思った。
必要なのは、こういうツールだ。
- 日本語で、日本のクライアントが直感的に使える
- サイト上に直接、付箋を貼るように指示できる
- 制作会社もクライアントも、同じ画面を見ながら話せる
- 月80ドルじゃなく、日本の中小制作会社が継続して払える価格
探したけど、ちょうどいいものがなかった。海外製ツールはUXが合わない。国内製はどれもPDFか画像対応のみで、ライブサイトにコメントできるツールが1つもない。
だったら作ればいい。
Webディレクター兼デザイナーとして現場を長年見てきた自分が、「現場が本当に使えるもの」を作る。コードはほぼ書けない状態だったが、今はAIという強力な相棒がいる。
こうして、fuSenの開発が始まった。
次回：コードが書けないWebディレクターが、どうやってLaravelでSaaSを作り始めたのか。Claude Codeとの出会い。
fuSen｜Webサイト上に付箋を貼るように、フィードバックを残せるオンライン校正ツール。ベータ版リリース中、全機能無料。
👉 無料で始める → https://fusen.cloud/
👉 登録不要でデモを試す → https://app.fusen.cloud/demo