こんにちは、ASUE株式会社 広報のN村です。
さて、今皆さんにご覧いただいているこのASUE通信(※ブログのタイトル)。実は、大きな変化を遂げたのですがお分かりでしょうか?
……わからないですよね。見た目はほぼほぼそのまま、変わっていません。でも変わったんです。
このASUE通信はわたしが入社した当初からあり、入社して少し経った頃に当時Webコーダーだったわたしが社内のデザイナーさんのデザインを元にリニューアルを行いました。
が、自社サイトだという気の緩みと当時実務を始めて2年以内のわたし。コードを書き切ることはできましたが、保守性などがあまり考えられておらず……。
その後さまざまな改修や修正、(ブログ記事で変な記事を書くための)機能追加などを「エラーがなければまあいっか」という最低精神で継ぎ足しに継ぎ足しを重ねました。さらには社内で手が回らず外部パートナーさんが修正に入ったり、本サイトをリニューアルした際にそれに合わせたデザインリニューアルなども行われ、結果全体的にカオスな状況と相成りました。
うちはね、代々受け継いできた継ぎ足しの秘伝の"ソース"でやらせてもらってますんで……。
最悪な秘伝だ……。
6割くらいは書いたのがわたしで大変恐縮なんですが、これ直したい!とはずっと思いつつ、重要ではありながら緊急ではないタスクとして、何もできないままわたしの心の奥底に眠っていました。
ところが昨今登場したのが生成AI。
試しにGeminiを使って作ったおみくじツールは、以前よりもかなりパワーアップさせることができました。

このときはGeminiで挑戦しましたが、なかなか手を出せていなかったClaudeはすごいらしいと噂に聞きました。
もしかして、今ならASUE通信のテーマの改修が簡単にできるのでは……?
ということで、今回はASUE通信のソースコードをClaudeを使って改善してみたので、その流れについてご紹介します!!
目次
Claudeと一緒にWordPressブログのテーマ修正をしてみた
さて、ASUE通信を触っていて長年気になっていたのが以下のポイント。
- SCSS
- 明らかに使われていないクラスの記述が残っているし、多分他にもある
- 継ぎ足しの結果、重複などもありそう
- 現在非推奨の記述が残っているが、上手く直せずそのままになっている
- 改修を進めてファイルが増えているが、構造が雑でわかりにくい
- PHP
- 明らかに使われていないテンプレートファイルが残っているし、多分他にもある
- 戻すかもしれない……と思ってコメントアウトで削除したコンテンツが放置
- 改修を進めてファイルが増えたが、構造が雑でわかりにくい
……と、とにかくカオスな状態。
これらをClaudeで改修してもらうことにしました。
実践編①:Claudeを使ったSCSSの整理と修正
最初はいまいち勝手がわかっていなかったため、微妙に紆余曲折ありながら修正を行いました。
最初にやったこと:Claude.aiにファイルを読み込ませる
とりあえず、一度Claude.aiにファイルを読み込ませました。
間違いなくBad Solution……
SCSSの修正点の探索
以前SNSで「Claudeは探索→計画→実装の順に進めると良い」と見かけたため、まずSCSSフォルダの修正点の洗い出しをすることにしました。
修正以前に、今ある記述の整理もしたかったので、記述をカテゴライズしてコメントを入れてという指示をまず実施。ここはコードの修正自体は行っていないので、コメントしか追加されていないことを確認の上、すぐ実装しました。
続いて、修正点の洗い出しを指示。チャット上で洗い出された修正点の内容を一度個別に確認しました。
この時点で、_mixin.scssや_settings.scssの不要な変数やmixinなどを整理。
他にも修正点がいくつも出てきましたが、ここで、「そもそもこれらの記述、今使われているのか?」という疑問に衝突。
Claude.ai上では、チャットで20ファイルまでしか読み込めないので、各種PHPのテンプレートファイルから出力されるhtmlの記述との突合までチャット上で処理するのは不可能と判断して、断念しました。
VS Code公式拡張機能「Claude Code」の導入
VS CodeでClaude Codeの公式アドオンがあったので、そちらをインストール。
なかなかこれをやらなかったのは、初期設定を調べてもいまいちわからなかったことと、自動で動き出すという話を聞いて怯えていたためです。
これによって、VS Code上でファイルを読み込みながらの修正が可能になりました。普通にとても楽だし、差分管理もしやすくなり、勝手に変なことをやることもなかったのでとりあえずは良かったです。
まだあんたのこと完全に信用した訳じゃないんだからね。
注意点としては、configファイル等の重要ファイルは読み込ませないように気をつけましょう。
再び、SCSSの探索
不要なクラスがないかの確認ほか、必要な修正点がSCSSファイルにないかの探索を指示。
今使われていないクラスが大量に発掘されたので、念の為テーマ内を検索しつつ削除しました。
また、探索指示時に「修正はせず、どのような優先順位で対応すべきかをレポート形式で出力」と指示していたため、その他の修正点がClaude Codeから以下のような形式で出力されました。
| ファイル | 行数 | 役割 |
|---|---|---|
| style.scss | 3,146行 | 記事ページ・ショートコードなど |
| common.scss | 1,504行 | サイト共通 |
| index.scss | 768行 | トップ・一覧ページ用 |
| _editors.scss | 768行 | 記事内のスタイル |
| ……ほか(割愛) | - | - |
優先度 高(リスク低・効果大):
優先度 中(効果中・やや注意):
(以下略)
・
・
・
SCSSの修正内容を計画と実行
出力されたレポートから、個別に内容を吟味の上、不明点は質問しながら修正指示を出して修正は完了です。一度テスト環境で確認の上、本番に反映しました。
文章にすると短いですが、(Claude Codeが)長時間かけて修正をしていました。
追加の修正依頼
また、長すぎるファイルがあったため、分離を検討。
継ぎ足し継ぎ足しの修正の中でscssフォルダ内のファイル数が増え、管理しにくいと感じていたため、フォルダ構造もいくつか提案してもらい、その中の一つを実装しました。
SCSSの修正でやったことまとめ
- 未使用クラスの削除
- @importから移行できずに残っていた箇所の修正
- 混在していたカラーシステムの統合
- ファイル構造の再定義(フォルダ分けとファイルの分離提案を承認)
本当はもっと無駄な記述とかがあってコードががっと減るのでは!?と期待していましたが、コードの記述減量は少しだけにとどまりました。
ですが、重複した部分や煩雑だった部分、古い記述などが整理できたと思います。
実践編②:PHPテンプレートファイルの整理
SCSSが一段落したところで、続いてPHPのテンプレートファイル群に着手。SCSSの整理で勝手がわかってきたため、こちらは比較的すいすい進められたので、細かい部分は割愛します。
SCSSと同様、まずは「探索→計画→実装」の流れで進めていきました。PHPはSCSSよりファイル数も多いため、まず「PHPの記述を整理・修正するために、重複した記述・必要ない記述など、改善できる点を洗い出してレポートを出して」と指示。
すると出てきたのがこちら。

※これは出力されたレポートをGoogleドキュメントにコピーしたもの(読みやすいので……)
SCSS同様、高優先度から低優先度まで、優先度をつけた形でレポートを出してもらいました。手をつけるべき順番がわかりやすくてよかったです。基本的に指定せずとも改善点の洗い出しでは優先度をつけてくれる気がします。
ふる〜いパーツ用のファイル(例:サイト内の各所で読み込ませていたCTA用のファイルなど)が、現在どこからも呼び出されておらず使用されていない状態で放置されていたのがこちらのレポートから判明。
また、PHPファイルでは記述の状態によってはセキュリティ上の問題にもつながる可能性がありますが、その辺りの問題点も見つけてもらいました。
WPのテーマファイルは、静的htmlで作られたサイトと違ってファイル同士のリンクが見つけにくく、自分でやろうとすると、各ファイルが実際にどこで使われているのか・いないのかを追うのがなかなか大変な作業になるので、ここを整理してもらえたのはありがたかったです。
あとはSCSSの巻と同じく、個別に内容を確認しながら修正を進め、テスト→本番反映で完了です。
Claude Codeを実務で使ってみたリアルな所感
当然、全部自動でやれるわけではない
Claude Codeには、個人プランだと[許可を確認]・[編集を自動承認]・planという3つのモードがあります。プランモードはファイル編集をしないモードになるのでこちらについては後述しますが、[許可を確認]モードと[編集を自動承認]モードではファイルの編集をClaude Codeが実行します。
二つのモードの挙動の仕様は以下のとおりです。
- [許可を確認]モード
- デフォルトのモード
- ファイル等の編集が実行可能
- 以下のすべてに対して毎回確認が入る
- ファイル編集
- シェルコマンド
- ネットワーク通信
- [編集を自動承認]モード
- ファイルの読み書きを自動で承認するモード
npm installやシェルコマンドは確認が入る
ここからもわかる通り、Claude Codeを使ったからと言っても全て自動で動くわけではなく、ある程度承認ステップを挟んでいく必要があります。
AIの便利さはありつつ、全てを自動で許可できるほどの肝も座ってないので、このくらいがありがたいと言えばありがたいですね。
できるだけ何をやってるかを理解しながら進めていけるように使いたいと思いました。
AIも自分も信じすぎない方がいい。
AIの出力は、時に間違っていることがある
自動実行の話を先ほど紹介しましたが、AIの立てた修正案を何も確認せず実行すると間違った結果となる可能性があります。
今回の修正の中で、Claudeが出してくれたレポートの中に、(WordPressにおいて)「関数get_the_category_by_ID()は非推奨、get_cat_name()に変更推奨」という記述がありました。推奨された関数get_cat_name()を調べたところ、これ自体は存在していたため、修正後の内容自体は問題ない状態でした。
ですが、「関数get_the_category_by_ID()は度々使っているし、非推奨だったらもう知っているのでは?」と公式ドキュメントを確認したところ、get_the_category_by_ID()は現役で使われている関数でした。
非推奨になった関数として、少し似ているthe_category_ID()を見つけたので、恐らく勘違いからこんな修正指示が出たのだろうと考えられます。
今回は変更後の記述も正しく書き換えても問題ないものでしたが、こういう誤りによる改善案を出してくることも当然起こり得るので、AIの出力が本当に正しいかどうかを確認・吟味するのは必須だと改めて実感しました。
Claudeを使い倒すために知っておきたい制限回避のコツ
Claudeには使用量の制限があります。各プランごとに設定された1ヶ月全体の上限に加えて、5時間ごと・1週間での利用上限も設けられています。残りの使用可能量については、[設定]>[使用量]から確認できます。
また、同じアカウントを利用するclaude.ai・Claude Code・Claude Desktopはすべて同じ利用枠を共有しているため、ブラウザで使いながらClaude Codeも動かすと、どちらの使用もカウントされます。
有料プランであってもプランによってはかなり制限が厳しいので、制限を圧迫しないためのポイントを6つ紹介します。
その1:無駄打ちを防ぐ「探索・計画・実行」の3ステップ
むやみに指示を出すとあっという間に上限に達してしまいます。今回の記事で取り組んだWPテーマ修正でも軽く触れましたが、これを回避するためには「探索(リサーチ)→計画(プランニング)→実行」の順で進めるのが基本なようです。
まずは現状のコードを読み込ませて課題を洗い出し(探索)、次にどう修正するかの方針を決定し(計画)、最後に実際のコード変更を指示します(実行)。段階を踏むことで、AIの出力のブレや手戻りを防ぎ、結果的にメッセージの消費量を節約できます。
その2:安全に計画を立てる「Plan Mode」の活用
その1でお話しした「探索・計画」のフェーズで非常に便利なのが、Claude Codeに搭載されている「Plan Mode(プランモード)」です。
通常のモードと違い、Plan Modeはプロジェクト内のファイルを直接編集しません。コードの読み込みや質問への回答、修正計画の立案のみを行ってくれます。「勝手にコードを書き換えられるかもしれない」という不安なしに事前調査を任せられるため、まずはPlan Modeで方針を固めてから、実際の修正モードに切り替える使い方がおすすめです。
モードの切り替えは、Shift+Tab を押すか(変更前のモードによって1回or2回)、/plan コマンドで行えます。
その3:作業ごとに会話を分ける
関係のないタスクを同じ会話で続けると、過去のやり取りがすべてコンテキスト(文脈の記憶)として蓄積され、処理量が増えます。作業の区切りで新しい会話を始めるのが基本です。
その4:/clear で会話をリセットする(Claude Code)
その3と同じ話ですが、Claude Code上では /clear コマンドで会話履歴をリセットできます。別のタスクに切り替えるタイミングで実行すると、不要なコンテキストを持ち越さずに済みます。
その5:/compact で会話を圧縮する(Claude Code)
/compact コマンドは、長くなった会話履歴を要約して圧縮します。同じ作業を続けながら処理量を抑えたい場合に使えます。「ここまでの内容を保持してほしい」という指示を添えることも可能です。
その6:モデルを使い分ける
Claudeには、大きく分けてOpus, Sonnet, Haikuという3つのモデルがあります。OpusはSonnetより高性能ですが、消費量も大きくなります。複雑な設計や判断が必要な場面にはOpus、通常のコーディングや修正作業にはSonnetで十分なことが多いです。
なお、Sonnetはバージョンを重ねるごとに性能が大幅に向上しており、コーディング用途では以前にも増してSonnetで対応できる場面が増えています。
Claude Codeでは /model コマンドでモデルを切り替えられます。
まとめ
コードを全部覚えていなくていい。
やりたいことを調べてコーディングして実装する、というプロセスを自分でやらなくていい。
ファイルの探索や修正点の洗い出しもやってくれる。
……Claude Codeを使ってみて、この辺りは純粋に楽で、はじめてみて良かった点でした。
一方で、「ほかのことをやっていたらアプリができていた」「たった三行の指示でうんたらかんたら!」みたいなSNS与太話は、大げさなトークかな〜という感想です。ある程度定型に近い処理などはいろいろ自動化も試していますが、それ以外は結局何かしら確認しているか、文章で追加の指示を書いているかをするので、完全に手が離れている感覚は特にありません。
Claudeに限らず、AIの登場でコードなどを書く量は確実に減りました。楽にもなりました。でも「何もしなくてよくなった」というよりは、考える内容と書くものが変わったという感覚の方が近いです。人間相手よりも気兼ねなく、何度でも修正指示を出せるので、アシスタント代わりに指示を出しながら業務に取り組めるのがいい点だなと思います。
また、「〇〇ができる最強プロンプト!」のような強い言葉もSNSなどでよく見かけますが、結局は自分がやりたいことにベストなAIの使い方を自分で触って自分で見つけていくことが必要だと感じました。他人の作ったプロンプトを小手先で調整するよりも、自分で最適化していったほうが個人的にはしっくりとくる出力ができます。他人と全く同じことをやりたいケースは稀だから当然ですよね。
要するに、自分の業務の中でAIを使って何を効率化できるか、アップデートできるか、そこを見出して自分の実務に落とし込むことが重要なんだろうと改めて感じました。
コーディング以外にも、ライティングなど様々な分野でAIの活用法を検証しているので、今後も実務に役立つ使い方を模索していきたいと思います。
ASUEでは、今回のような社内でのリアルなAI検証結果や、Web広告運用の成果を伸ばすための実践的なノウハウを、無料のメールマガジンで定期的に配信しています。
ゆる〜くお届けしておりますので、ぜひ日々の情報収集にお役立てください!
この記事を書いた人
2016年入社。ASUE株式会社広報を担当。メールマガジン「ほぼ週刊ASUE通信」もお送りしています。ほぼ週刊なので週刊ではない。月初に公開するWebマーケティング情報をまとめたツキイチシリーズはちゃんと月刊です。
趣味はミュージカル観劇。おすすめ作品を知りたい方はN村のTwitterまでお問い合わせください。パーソナルカラーはイエベ春。
得意なこと
文章を書きます。
ひとこと
メルマガにご登録いただけると泣いて喜ぶかもしれません。