この記事の要点
事務所のホームページを作り直したとき、トップページのデザインとコーディングは外部に頼み、サービス紹介などの下層ページはAIで作りました。
AIにデザイナーのデザインを再現させる試みは、方法を3つ変えて丸1日やっても崩れました。一方で、完成したトップページを土台に、同じ色・文字の大きさでページを増やす作業は任せられました。
外注するのは「サイト全体の見た目の基準を決める部分」、AIに任せるのは「その基準をなぞって増やす部分」。2026年夏の時点で、代表がAIを使いながら決めた分担です。正解というより試行錯誤の記録で、もっと良い進め方があった可能性もあります。
AIでデザイナーのデザインを再現できなかったのはなぜか？
当時の見立てでは、AIが数値を写し取らず、見た目を「作り直して」しまったからです。
当事務所は2026年4月の事務所名の変更に合わせて、ホームページを作り直しました。トップページのデザインは、ロゴを作ったデザイン会社に依頼しています。
デザインが届いたあと、コーディング（デザインをWebページとして動く形にする作業）もAIでできないかと考え、Claude Code（AIにコードを書かせ、手元のファイルを直接変更させる開発ツール）で試しました。
最初はデザインソフトのファイルを渡しましたが、AIは画像として読み取るしかなく、細部が合いません。構造を読み取りやすいFigma（Webデザインの共同編集ツール）での納品はデザイン会社が対応していなかったため、SVG（拡大しても劣化しない図形データの形式）で書き出してもらいました。
| 試した方法 | 結果 |
| SVGをそのままページに埋め込む | 見た目は合うが、文字が検索エンジンに読まれない「絵」になる |
| HTMLに組み直させる | デザインが変わった |
| SVGから文字・色・大きさの数値を機械的に抜き出し、「転記だけ。判断・推定は禁止」と指示して流し込む | それでも崩れた |
2つ目の失敗について、指示を作っていた側のAIは「数値を実測せず、記憶で再設計した」と見立てています。ほかにも試す手はあったかもしれませんが、丸1日かけたところで、コーディングは知人のエンジニアに任せると判断しました。
それでも下層ページをAIで作れたのはなぜか？
代表の見立てでは、「再現」ではなく「決まった基準で増やす」作業だったからです。
コーディングを任せると決めた直後、AIに下層ページを作らせました。渡したのは、トップのデザインと、事務所のブランドガイドライン（ロゴの使い方や色、書体を定めた社内ルール集）です。
進め方は次のとおりです。
- まず1ページだけ作る。 問い合わせに一番近いサービス紹介のページを選んだ
- トップから測った値を使う。 見出しや数字の文字の大きさ、ブランドの3色をそのまま当てはめた
- 方向性が合ったら、残りのページに広げる。 事務所紹介、コラム、お知らせ、お問い合わせまで作った
トップのコーディングが終わると、それを土台にした下層ページの実装も社内で進められました。問い合わせ後のお礼ページや、面談前に読んでもらう資料のページも、既存のページの部品に合わせてClaude Codeで実装しています。
再現では、AIが元のデザインを「解釈」する余地が残ります。土台があって、その部品と色をなぞるだけなら、解釈の余地がほとんどありません。今回の作業では、AIが崩したのは前者で、こなせたのは後者でした。
外注する範囲は、どう決めたか？
サイト全体の見た目の基準になる部分だけを外に出す、と判断しました。
| 作業 | 担当 |
| ロゴ、トップページのデザイン、写真撮影 | デザイン会社 |
| トップページのコーディング、WordPressの仕組み、サーバー設定 | 知人のエンジニア |
| 検索対策の助言 | 外部のマーケター |
| 全ページの原稿、下層ページのデザインと実装、料金ページの見せ方 | 代表とAI |
デザイン会社からは、下層ページのデザインを5万円で追加できると聞いていました。迷いましたが、AIの下層ページで方向性が合ったため、追加の発注は見送っています。デザイン会社からも「下層ページは社内で対応できるので、新しいデザインは不要という認識」と返ってきました。
作業の途中で、AIからの注意も受けています。
- 任せる範囲を先に決める。「トップと下層ページのコーディング。デザインの正はSVG、原稿は確定済み」のように書けば、見積もりも下がりやすい
- 下層ページのデザインが存在しないまま任せると、同じ崩れが起きる
- 公開後に自社で更新できる仕組みを、受け入れの条件に入れる
浮いた予算の使い道は、数字で決められたか？
決められませんでした。この規模のサイトでは、効果を測る方法が見つからなかったからです。
下層ページの予算を、トップページの最初に表示される大きな領域（ファーストビュー）の演出に回す相談をしました。ロゴが動くアニメーションや動画の案です。ただ、見積もりは下層ページの追加費用を大きく上回りました。
AIは最初、「公開は静止画で、演出は公開後の数字を見て判断」と提案しました。そこで代表が「それで効果が分かるのか」と聞き返すと、AIは「この規模のサイトでは、ファーストビューだけを切り出した比較は現実的に不可能」と訂正しています。
最終的には、デザイナーと検索対策の担当者を交えた打ち合わせで、演出は保留にしました。
- 検索や記事から来る初めての訪問者は1〜2秒しか待たず、動きのある演出は離脱の原因になりうる
- まだブランドを強める段階ではなく、まず公開後の運用を見る
当面は市販の動画素材を使っています。測れないものを「後で数字で判断する」ことにしないというのが、この時点での代表の判断です。
振り返って、先に決めておけばよかったことは？
代表の振り返りでは、デザインの受け取り方、任せる範囲、公開後に誰が直すか、の3つです。
| 決めておけばよかったこと | 確かめ方 |
| デザインをどの形式で受け取るか | デザイン会社に「Figmaで納品できるか。できなければSVGで書き出せるか」を発注前に聞く |
| どこまでを外に出すか | トップだけか、下層ページまでかを決める。下層ページをAIで作るなら、トップのデザインが確定してから始める |
| 公開後に誰が直すか | 制作が終わったあとの修正を、誰がどの手順で本番に反映するかを、受け入れの条件に書く |
3つ目は、公開後に効いてきます。今回は公開の約3週間後にエンジニアが離れ、以後の修正は代表が行っています。
画像選びは、AIに候補を選ばせるより、検索に使う言葉をAIに作らせるほうがうまくいきました。AIが挙げた候補は海外の人物写真が多く、2回目も似た画像ばかりでした。電卓や帳簿のような業種の言葉をやめ、「建築」「モノクロ」「光と影」のようなブランドの雰囲気を表す言葉で探す形に落ち着いています。
いつ、どのAIでやった話か？
2026年6月〜7月に、AnthropicのClaudeで行った話です。
| 時期 | 作業 | 使ったモデル |
| 2026年6月11日〜16日 | トップの再現の試行、下層ページのデザイン | Claude Fable 5で開始 |
| 2026年7月上旬 | デザイナーへの相談文、画像の検索語 | Claude Opus 4.7 |
Claude Fable 5は2026年6月9日の公開で、同じ月の12日から7月1日まで提供が止まっていました。再現の試行の途中からどのモデルで動いていたかは、記録していません。
モデルが変われば、デザインの再現の精度は変わりえます。 今なら同じ作業がうまくいく可能性もあります。一方で、次の点はモデルが変わっても残ると考えています。
- 基準がない状態でAIに「似せて」と頼むと、解釈の余地が残る
- 基準が決まっていれば、それをなぞって増やす作業は任せやすい
- 効果を測れない施策は、数字を待っても判断できない
NOMERAは、受託開発・SES・広告・ECなどデジタル領域の企業に特化した、東京・西新宿の会計事務所です。オンラインで全国対応しています。
顧問契約の範囲内で、経理まわりの手作業を減らす仕組みづくりのご相談も承っています。業種や規模によってできることは変わりますが、同じ業種の顧問先が複数いる領域では、専用の台帳をお渡しできる場合があります。
この記事の内容が自社に当てはまるかを確かめたい方は、お問い合わせフォームからご相談ください。現在の税理士がいる場合の、セカンドオピニオンとしてのご相談にも対応しています。
参考文献
- Claude Fable 5 and Claude Mythos 5（Anthropic） —— Claude Fable 5の公開日（2026年6月9日）
- Redeploying Claude Fable 5（Anthropic） —— Claude Fable 5の提供停止（2026年6月12日）と再開（同年7月1日）
- Introducing Claude Opus 4.7（Anthropic） —— Claude Opus 4.7の公開日（2026年4月16日）
（2026年9月17日に原典で確認）
よくあるご質問
Q. トップページもAIだけで作れませんか？
A. 今回はできませんでした。ただし試したのは、デザイナーのデザインを「そっくり再現する」作業です。見た目の基準を自社で決めてしまい、AIにゼロから作らせる進め方なら結果は変わりえます。その場合も、ブランドの基準をどこで決めるかは残ります。
Q. 下層ページをAIで作ると、見た目の質は落ちませんか？
A. トップと同じ色・文字の大きさ・部品を使うため、ずれは小さく済みました。気になる点は公開後に直す前提で、デザイン会社にも「公開後に下層ページの細部を改めて相談する」と伝えています。
Q. コーディングもAIでできないのですか？
A. トップは知人のエンジニアに任せました。一方、既存のページの部品に沿ったお礼ページや資料ページは、Claude Codeで実装しています。今回は、土台があるかどうかで分けました。
Q. 外注費はどのくらい抑えられましたか？
A. 見送ったのは、下層ページの追加デザイン（5万円）と、ファーストビューの演出一式です。すべてを外注した場合の見積もりは取っていないため、全体でいくら下がったかは比べられません。