AIにコードを書かせること自体は、もう珍しくありません。
では、実際のWebサイトで、
「既存コードを調べて、必要な修正を判断し、実装して、テストして、GitHubへ反映する」
ところまで任せたら、どこまでできるのでしょうか。
今回はOmochiXの実際の開発環境で、Claude CodeからClaude Fable 5.1を使い、UIのモーション改善を実装しました。
サンプルコードを生成させるだけではありません。
実際に公開しているOmochiXのWordPressテーマを対象に、
調査 → 判断 → 実装 → QA → Git操作
まで一連の開発作業を任せています。
結果として、今回の作業は約7分23秒で完了しました。
ただし、すべてをAIだけで完結できたわけではありません。
実際に使って見えてきた「AIに任せられる部分」と「まだ人間が確認すべき部分」を整理します。
今回Claude Fable 5.1に任せたこと
今回のテーマは、OmochiXのMotion Design v1の実装です。
目的は、派手なアニメーションを増やすことではありません。
ダークモード切り替えや検索、記事カードなどに、海外のAI・SaaSサービスのような、速く控えめな操作感を追加することです。
Claude Codeには、完成形だけを細かく指示するのではなく、
- まず既存実装を調査する
- すでに良いものは再利用する
- 必要な箇所だけ最小変更する
- 不要な機能は無理に追加しない
- 実装後にQAする
- 問題がなければGitの状態まで整理する
という条件を与えました。
つまり今回は、単純な「このCSSを書いて」という依頼ではなく、既存プロジェクトを理解したうえで開発を進められるかを見る検証でもあります。
まずAIが既存コードを調査した
実装を始める前に、Claude CodeはOmochiXの現在の状態を調査しました。
確認したのは、GitのブランチやHEAD、WordPressテーマ構造、CSS・JavaScriptの読み込み方法、ダークモード、記事カード、検索、Loading状態、prefers-reduced-motion、レスポンシブのBreakpointなどです。
ここで重要だったのが、すぐコードを書き始めなかったことです。
調査の結果、OmochiXにはすでに、
- 共通のMotion Token
- 記事カードのHover
- サムネイルのScale
- Arrowの移動
- 検索ダイアログのOpen Animation
- Dark ModeのColor Transition
- Reduced Motion対応
などが存在することを確認しました。
そのためClaudeは、既存の良い実装を作り直さず、必要な部分だけ追加する判断をしています。
これはAIコーディングでかなり重要なポイントだと感じました。
コードを生成できることより、「変更しなくていい場所を変更しない」ことの方が、実務では重要な場合があります。
実際に変更されたのはCSSファイル1つだけ
今回変更されたファイルは、
wp-theme/omochix-theme/style.css
の1ファイルだけでした。
差分は**+38行 / -7行**です。
PHPやJavaScript、画像などには変更を加えていません。
実装された主な内容は、Motion Tokenの追加、Reduced Motion対応の強化、ダークモード切り替えアイコンのアニメーション、タッチ端末向けHover対策、検索フォームのFocus表現、ボタンのPress Feedbackなどです。
たとえばダークモードでは、これまでSun/Moonアイコンが瞬時に切り替わっていました。
今回の変更によって、Opacity・Scale・控えめなRotationを組み合わせた短いTransitionに変更されています。
一方で、テーマ切り替えそのもののロジックには触れていません。
必要な体験だけ改善し、既存機能はなるべく変更しない。
今回の実装では、この判断が一貫していました。
「実装しない」という判断もした
今回、個人的に面白かったのがここです。
Claude Codeは、指示に含まれていた機能をすべて機械的に実装したわけではありません。
たとえば、検索結果のStagger AnimationやLoading Animationは実装しませんでした。
OmochiXの検索はAjaxではなく通常のページ遷移方式だったため、Loading UIを追加するには新しい仕組みを作る必要があったからです。
Skeleton Loadingも同様です。
現在のテーマ内には、それを必要とする非同期処理がありません。
Page Transitionについても、WordPressの通常ページ遷移に無理やり追加すると、LCPやコンテンツ表示に悪影響が出る可能性があるとして見送っています。
Success Animationとして想定していた、
Circle → Check → 小さなSpring
についても、現状のUIには導入する価値のあるSuccess状態がないとして今回は追加していません。
つまり、
「指示されたから全部作る」のではなく、「今のサイトに必要か」を見て実装を止めた
ということです。
実務でAIエージェントを使ううえでは、こうした判断能力の方がコード生成速度以上に重要になってくるかもしれません。
QAもClaude Codeに任せた
実装後は、そのまま終了ではありません。
PHPのSyntax Check、JavaScriptのSyntax Check、CSSの中括弧バランス、Dark Mode、レスポンシブ構造、Keyboard Focus、Reduced Motion、Search、Article Card、Header、Hero、Footerなどを確認しています。
PHPとJavaScriptは構文チェックを通過。
CSSについても中括弧の数が一致し、ローカルWordPressが新しいCSSを配信していることまで確認しました。
また、新しいJavaScriptライブラリは追加していません。
Hero画像や記事本文にも触れず、CLSやLCPへの影響を極力増やさない実装になっています。
最終的には、
MOTION_V1_PASS
という結果になりました。
約7分23秒でGitHubへのPushまで完了
今回Claude Codeが作業した時間は、レポート上で7分23秒でした。
最終的なコミットは、
1507c11
変更内容は、
feat: add OmochiX Motion v1 (tokens, dark mode toggle, search, reduced-motion)
として記録されています。
その後、GitHubのmainブランチへの通常Pushまで完了しました。
つまり今回AIに任せた範囲は、
既存コード調査 → 実装方針判断 → 最小修正 → QA → Commit → Push
までです。
単純にコードを生成するだけの使い方とは、かなり違います。
それでも最後は人間が確認した
一方で、今回AIだけでは完了できなかった部分もあります。
今回の環境ではClaude Code側から実際のブラウザ表示を目視できなかったため、
「本当に気持ちよく動いているか」
という最終的な見た目までは確認できませんでした。
また、OmochiXではGitHubへのPushと本番WordPressへのデプロイが自動連携されていません。
そのため最後は人間が本番サーバーへstyle.cssを反映し、実際のOmochiXを開いて動作を確認しました。
ここはかなり重要です。
AIが、
「コード上では問題ない」
と判断することと、
「ユーザーから見て本当に問題ない」
ことは同じではありません。
今回も最後の本番反映と目視確認は人間が担当しました。
AIコーディングはどこまで任せられる？
今回の検証だけで、すべての開発業務について結論を出すことはできません。
ただ、少なくとも今回のような既存Webサイトの小規模なUI改善では、
かなり広い範囲までAIに任せられる
と感じました。
特に大きかったのは、コードを書く速度だけではありません。
既存実装を調査し、すでにあるものを再利用し、不要な実装を見送り、変更範囲を小さく保ち、最後に検証する。
こうした一連の流れまでAIが担当できたことです。
従来のAIコーディングが、
人間が考える → AIがコードを書く
だったとすれば、これからは、
人間が目的と制約を決める → AIが調査・計画・実装・検証する → 人間が最終判断する
という形に近づいていく可能性があります。
「実装を任せる」と「責任を任せる」は別
今回の検証で最も重要だったのは、ここだと思います。
Claude Fable 5.1とClaude Codeを使えば、実装作業のかなりの部分をAIへ移せます。
しかし、
実装を任せられることと、責任まで任せられることは別です。
本番環境で本当に問題がないか。
ユーザー体験が悪くなっていないか。
その変更を今入れるべきなのか。
事業としてその判断が正しいのか。
最終的な責任は、まだ人間側にあります。
だからこそ、AIにすべての作業を丸投げするのではなく、
AIが高速に実行し、人間が重要な判断と確認を握る
という使い方が、現時点ではかなり現実的だと感じています。
OmochiXの見方
AIコーディングの価値は、「プログラマーがコードを書かなくなる」という単純な話ではないと考えています。
より大きな変化は、1人が動かせる仕事量そのものが増えることです。
今回も、人間がすべてのCSSを確認し、実装し、テストし、Git操作まで手作業で進める代わりに、目的と制約をAIへ渡し、実行部分の多くを任せました。
人間側は、その間に「何を作るべきか」「本当に必要か」「完成したものを採用するか」という判断へ集中できます。
AI時代の開発では、コードを書く能力だけでなく、
AIに何を任せ、どこで人間が介入するかを設計する能力
の重要性がさらに高まっていきそうです。
OmochiXでは今後も、実際の開発や業務でAIを使いながら、「本当に使えるのか」を実測ベースで検証していきます。
