ワイヤーフレームからコーディングまで3時間｜Claudeで変えた工程と単価の話

毎日、営業メールが届く

「コーディングをお手伝いします」「デザインのリソース不足を解決します」——こういうメールが、ほぼ毎日届きます。料金表が添えられていることも多い。1ページ数万円。相場としては、間違っていない金額です。

ただ、その見積もりを送る前に、一度考えてほしいことがあります。

私はいま、Claudeの月200ドル（3〜3.5万円）のプランで、ワイヤーフレームから全ページのコーディング完了までを自分で完結させています。「あなたが1ページに提示している金額と、ほぼ同じ額です。」

これは「だから外注はいらない」という話ではありません。実際、私も記事の執筆は外部の方にお願いしています。書きたいのは、「その金額を提示するなら、仕事の作り方も一緒に変わっていないと説明がつかなくなる」、ということです。

実際にかかった時間

先日、動物病院のサイトリニューアルを担当しました。TOPページと、下層15ページ。

ヒアリングに1時間。そのあと、クライアントに見せられる初稿ができるまでが「3時間」でした。

前提を書いておきます。「これはリニューアルで、文言と画像は既存サイトにありました。」3時間のうち、原稿を考えた時間はゼロです。新規サイトで文章から作るなら、この時間では終わりません。ヒアリングの1時間、写真素材の整理、公開後の修正対応も、この3時間の外にあります。

そのうえで、比較してほしいのは次の数字です。

以前は、同じものに1〜2週間かかっていた

しかも「デザインを作るだけ」で、です。実作業に直せば3〜4日ぶん。コーディングはそのあとから始まります。

同じページ数、同じ内容です。工程を変えただけで、ここが3時間になりました。

Figmaを飛ばした理由は、速さではありません

いまはFigmaを作らず、いきなりコーディングしたものをクライアントに見せています。速いからではありません。「確認用と実装がズレるからです。」

Figmaで見せる場合、プレビュー用のURLを送るか、PDFにする必要があります。そのうえで、あれはあくまで確認用なので、実装すると必ず違う点が出てきます。スマホでの見え方は特にそうです。

コーディングしたものをそのまま見せれば、クライアントは「SP版も実機で完成形のまま確認できます。」認識のズレが、はっきり減りました。速さは、その結果として付いてきただけです。

「AIではまともなコーディングはできない」と言う人が、つまずいている場所

再現率が低い、と言われることがあります。実際にやってみると、原因はだいたい次の3つです。

「① Figmaがフレームで分かれていない／マスクでトリミングしているだけ」

人の目には切れて見えていても、AIが読むのはマスクをかける前の元画像です。切れていない画像がそのまま出てきます。これは指示の問題ではなく、渡すデータの問題です。

「② スクリーンショットやPDFで渡している」

余白が再現されません。適当な数値で埋められます。「MCP経由でFigmaを直接読ませるのが確実です。」

「③ ページを丸ごと投げている」

一番多いのがこれです。MCP経由で正しく読ませていても、「このページをコーディングして」と1回で投げると崩れます。

細かく分ける

②と③の対処は同じです。「セクション単位、さらに要素単位、文章単位まで分けて指示すること。」分ければ分けるほど、やり直しが減ります。

これはコーディングに限った話ではありません。AIに何かをさせるとき、うまくいかない原因のかなりの部分が「一度に頼みすぎている」ことです。

指示の粒度

私は、こういう指示を出しています。

• font-size を14pxに
• margin-top を32pxに
• この見出しの下だけ余白を詰めて、セクション間は据え置きで

「いい感じにして」ではありません。「CSSが自分で書けるから、この粒度で言えます。」そして、この粒度で言えるからやり直しが起きません。

ここが、Claudeを契約しただけでは同じ結果にならない理由の1つ目です。

実は、速さより効いたのは「要望の受け取り方」でした

工程を変えて一番効果があったのは、コーディングそのものではなく、その手前です。

以前は、クライアントからの要望や修正がLINEとスプレッドシートで届いていました。そこで起きていたことは、こうです。

• スプレッドシートには画像が貼りにくく、貼っても拡大できないので見づらい
• 結果、画像だけLINEで送られてくる
• こちらは「どの画像が、どの項目のことか」を確認するところから始まる
• スプレッドシートは履歴を遡らないと相手が編集したか分からず、「双方に確認漏れが出る」

そこで、案件ごとに専用のフォームを作りました。項目ごとにスレッド形式でやりとりでき、画像も動画も枚数の制限なく添付できて、「それをダウンロードせずにClaudeがそのまま読めます。」

2件で作りましたが、同じものではありません。

ひとつのフォームで両方をやろうとすると、どちらも中途半端になります。「聞く側と、上がってくる側は、別の道具です。」

これを入れてから、「クライアントの要望と修正を確認して」とClaudeに一言伝えるだけで、整理が終わります。自分がLINEとスプレッドシートを見て、内容を整理してClaudeに渡していた時間が、まるごと無くなりました。

配色の全面変更が、2〜3分

先日、院長のご希望でサイト全体をグリーンベースからブルーベースに変更しました。「2〜3分で終わりました。」

外注に投げれば数日、しかも一度で決まらず差し戻しが起きる作業です。初稿が3時間という数字よりも、実務ではこちらの差の方が効きます。

それでも、人がやるしかないこと

全部が置き換わるわけではありません。残っているのは、この2つです。

• 「デザイン全体のバランスの最終確認」
• 「スマホ・タブレットの実機での操作確認、表示崩れの確認」

Claudeができるのはプレビュー上の検証までです。実機で触って確かめる工程は、いまのところ人がやるしかありません。

それで、値段はどうしたか

ここが一番聞かれるところだと思います。

まず、「クライアントにはAIを使っていることを伝えています。」隠していません。ただし「AIで作っているから安くします」とは言いません。「あくまで作業の効率化だと説明します。」

クライアントは、AIが作ったか人が作ったかを見ていません。「良いものができるかどうかを見ています。」人が作っても、スキルが足りなければ良いものにはなりません。原稿から流し込む工程にすれば、人が手で転記するより表記のミスも起きません。

そのうえで、こう伝えます。

「AIを使うことで、今の金額のままできることが増えます」

これを言うと、だいたい喜んでもらえます。

「見積もり金額は変えていません。」代わりに、これまで工数の都合で入れられなかった機能を提案します。1つの作業が短くなったぶん、全体の作業時間に余りが出るので、そこを使って「これもやりますよ」と提案する。クライアントは同じ金額で機能が増えて嬉しい。こちらは金額を保ったまま、稼働時間はほとんど変わらない。

言い方も決めています。「楽になった」ではなく「できることが増えた」。同じ事実ですが、相手に届く意味がまったく違います。

それで、最初の話に戻ります

ここまで読んで、「じゃあClaudeを契約すればいい、この人に頼む必要はない」と思う人もいると思います。それはそれで構いません。そう判断する人は、依頼してこなくていい。

ただ、「契約しただけで同じ結果にはなりません。」ここまでの工程は、こういうものの上に乗っています。

• 何度もやり直して、自分のやり方を固めたこと
• 「実際に業務委託を出して、上がってくるものと自分の結果を比べたこと」
• CSSが書けるので、具体的な数値で指示できること
• 要望を受け取るための道具を、自分で作ったこと

道具は誰でも買えます。「買っただけの人と、そうでない人の差は、むしろ広がっていると思います。」

1ページ数万円という金額そのものは、間違っていません。ただ、「その金額でクライアントから直接仕事を取れるのは、実績とスキルがある人です。」金額を相場に合わせる前に、仕事の作り方の方を合わせた方がいいと思います。

制作のご相談はお問い合わせフォームから。