2026.10.05

AI, Staff Blog, Develop

AIを使って業務効率化してみた

こんにちは！デザイナー兼エンジニアの渡辺清彰(ワタナベキヨアキ)です！

突然ですが、「AIって便利そうだけど、実際どこまで仕事を任せられるの？？」と思ったことはありませんか？

僕も最初はそう思っていたんですが、最近とある案件でコーポレートサイト1本を丸ごとAIと一緒に実装してみました。
結果、思っていた以上に「任せられる」ことが分かったので、今回はそのやり方をまとめてみます。

エンジニアやコーダーに限らず、資料づくりや事務作業など、いろんな職種でそのまま使える考え方なので、ぜひ最後まで読んでみてください！

AIで実装してみた結果

まずは、ざっくり結果からです。

55ページ：コーポレートサイトを丸ごと実装
実稼働20日：約1ヶ月半の期間のうち、実際に手を動かしたのは20日ほど
トップページは4日：自分でやっても4日くらい。ただし、その間僕は指示を出していただけ
1日で19ページ(レスポンシブ)：下層ページを1日で実装した最多記録

数字だけ見ると「速くなった！」と思われがちなんですが、正直一番ありがたかったのは「並行して進められる」ことでした。

AIに実装を任せている間に、手が空いた時間で別の案件を進められる。もう一人の自分がいる感覚です。

AIは「優秀だけど会社のことを何も知らない新人」

AIに仕事を頼むときのイメージは、新しく入った人に仕事をお願いするときとほぼ同じです。

めちゃくちゃ優秀なんだけど、会社のこともプロジェクトのことも何も知らない新人さん。
そう思って接すると、頼み方もイメージしやすいと思います。

流れは次の5つのステップです。

準備する：最初に目的と前提を伝える（新人でいう、オリエンテーション）
材料を渡す：元のデータをそのまま渡す（新人でいう、資料一式を渡す）
指示する：何を・どこを・やらないことまで伝える（新人でいう、仕事の頼み方）
育てる：ミスと手順を覚えさせる（新人でいう、マニュアルを作る）
確認する：最後は自分の目で見る（新人でいう、仕上がりのチェック）

コーディングでも資料づくりでも、この流れは変わりません。

では、ひとつずつ紹介していきますね！

STEP1：準備する

まずは最初に、「何をしたいか」を伝えておきます。個人的には、ここが一番大事だと思っています。

作業するフォルダを用意して、中身を読ませる

いつもの実装テンプレートや、過去に作ったサイトをベースにします。

僕の場合は、デスクトップアプリのClaude Codeを使っています。ターミナルで使うより直感的で分かりやすいので、今はこっちしか使っていません。案件ごとにプロジェクトを作って作業しています。

読んだ内容から、AI用の説明書（CLAUDE.md）を作らせる

Claude Codeは、会話を始めるたびにまずこの説明書を読みます。

作り方は簡単で、

まず構造を理解してCLAUDE.mdを作成してください

これだけです。

説明書には「最終的に何を作りたいか」を書く

例えば「今あるのは旧サイト。これをリニューアルする」と書いておく。これだけで、「今のファイルは古いもの・これから新しくするもの」と理解して進めてくれます。

今回の案件では、静的なHTMLページとWordPressのページが同居していて、しかもWordPressは本番環境から移した直後……という少しややこしい状態でした。その状態そのものを説明書に書いておいたので、毎回説明せずに済みました。

【ほかの仕事なら】 Claudeの「プロジェクト」機能に、目的・誰向けか・守るルールを書いておくと、毎回説明しなくて済みます。

STEP2：材料を渡す

デザインなどの材料は、スクショではなく元のデータのまま渡すのがおすすめです。

Figmaを直接つなぐ（Figma MCP）

Figma MCPは、AIがデザインファイルを直接読めるようになる仕組みです。

デザインのURLを渡すだけで、その画面を読み込んでくれる
スクリーンショットと違って、サイズ・色・文字の間隔が数値で取れるので、仕上がりの精度が上がる

渡し方のコツ

PCとSP、両方渡す 片方だけだと、もう片方は推測で組まれます。SP実装のときに構造が変わってしまうことがあり、二度手間になります。

大きすぎるものはセクションごとに分けて渡す ページ丸ごとのような大きいデータは、読み込めないことがあります。そのときはセクション単位で渡すとうまくいきます。

【ほかの仕事なら】要約や資料づくりも、スクショより元のファイル（PDF・スプレッドシート・議事録の全文）を渡すほうが正確です。

STEP3：指示する

ここが一番差が出るところです。ふわっと頼むと、触ってほしくないところまで変えられてしまいます…。

曖昧な指示と、的確な指示

✕ 曖昧な指示

ヘッダーのメニュー、ホバーしたときの挙動を直して

どこを・どう直すのかが無いので、触ってほしくない所まで書き換えられてしまいます。

◯ 的確な指示（実際に投げたもの）

header_nav_menuItem has-dropdown js-ac のところでホバーした時にメニューが出ると思うんだけど、セーフトライアングルを導入したい。ライブラリは使用しないでください

どこを触るのか、何をしたいのか、何をしてほしくないのかまで書いておくと、だいたい一発で通ります。

【ほかの仕事なら】「この資料、いい感じにして」ではなく、「来週の全体MTG用。5ページ目を、エンジニア以外にも分かる言葉に直して。数字は変えないで」といった感じです。

実際に投げた指示の中身

もうひとつ、実際に使った指示を紹介します。

serviceの下にSolutionセクションを実装して、組み方はaboutやnews同様で使えるところは共通で使ってください。 PC：（PCデザインのFigmaのURL） SP：（SPデザインのFigmaのURL）画像は /_data/ の solution_thumb1〜3 から使用してください。ここは後々CMSで画像を表示させるので img タグだけでOK

この指示で意識しているのは、この4つです。

何を・どこに：「serviceの下にSolutionセクション」
既存に合わせる：「aboutやnews同様、使えるところは共通で」
材料の場所：PCとSPのFigmaを両方
素材と、この先の予定：画像の場所と「後々CMSにするのでimgだけ」

この4つはコーディング以外でも使えるので、何かを頼むときにちょっと意識してみてください。

困ったときに、よく使う聞き方

詰まったとき（うまくいかない・同じミスを繰り返す）

GitHubでベストプラクティスを探してきて

と言えば、だいたい解決します。コード以外なら「〜の定番のやり方を調べて」でも同じです。

初めてのことをやるとき

こういう物を作りたいけど、プロの間ではどういう風に作るのが一般的なんですか？

この手法だとここが手間に見えますが、（自分がやろうとしていた方法）に対する優位性はなんですか？

これが今考えている仕様ですが、コードを書き始める前に他に決めておくべき事はありますか？

言い回しを少し変えれば、企画や資料づくりでもそのまま使えます。

STEP4：育てる

AIはその場で直っても、次の会話（セッション）では忘れています。
なので、教えたことはちゃんと残しておくようにしています。続けたぶんだけ、後半がどんどん楽になりました。

1. ミスは、指摘して終わりにしない

「今後同じミスをしないように記憶して」まで言って、ルールとして残します。

2. 2〜3回やったことは、手順書（スキル）にする

「さっきやった手順をスキル化して」と言うだけで、手順ごと残してくれます。

3. 次からは、自動で使われる

同じ場面になると手順書が読まれるので、毎回説明しなくてよくなります。

STEP5：確認する

実際にあった怖いケース

CASE1：AIのメモ書きが、外から見える
AIは親切なので、コードに説明のメモ（コメント）を書き込みます。これが残ったまま公開すると、ブラウザからそのまま読めてしまいます。実際に、他社さんで出てしまった例もあります。
AIが書いたものは外に出す前に必ず読み返すようにしましょう。

CASE2：ソースがごそっと消えた
気づかずに進めてしまい、「これ消した？」と聞いたら「消してしまいました」。「戻して」と言ったら「コミットの履歴がないので戻せません」。結局、手で戻しました笑
それ以来、一つ終わるたびにこまめにコミットするようにしています。

最後は、必ず自分の目で

見た目が合っていても、中身が合っているとは限りません。作る時間が減ったぶん、チェックする時間が増えた感じです。

よくあるのはこんなパターンです。

PCではOKでも、SPで崩れている
余白の数値を小数点第3〜4位まで書いてくる
見た目はきれいでも、中身の構造がちぐはぐ（インラインCSSで書いていたり）
画像はファイル名でしか判断していない（画像は自分で書き出して、使うフォルダまで指定すると迷いません）

【ほかの仕事なら】 数字・名前・日付・リンク先は必ず自分で確認してください。 AIは自信満々に間違えることがあります。リンク先はデザインに載っていないことが多いので、指示しないと入れてくれません。

実際に、AIに任せたこと

実装以外にも、調べものや整理、トラブルの原因探しまで、結構色々任せていました。

実装を任せている間、別のタスクができる

Claudeに実装を投げている間は、別案件のデザインや実装を進めていました。

別サイトの保守運用（2件）
別サイトの更新作業
今回の案件のデザイン
別案件のデザイン（タイミングによっては、その実装も並行して走らせていました）

正直なところ、Claudeに実装を頼んでいなかったら、おそらく公開日に間に合っていません。工数が減ったというより、同じ時間でできることが増えた感じです。

コードを書く以外にもできること

データベースも操作できる WordPressのDBを直接見て、カスタム投稿の記事の統合やACFカスタムフィールドの設置までやってくれます。

コミットもプッシュもできる Gitに繋がっているので、作業の区切りで「コミットして」と言うだけ。メッセージも書いてくれます。何より早い！

一覧や資料をすぐ作れる 確認用のページ一覧のようなものが、頼めば数分で出てきます。

ソースは触らず、CSSだけで新デザインに

旧サイトに、投稿の中にHTMLが直書きされたCMS管理のページがありました。そこに「デザインは変えたいけど、ソースはいじらないでほしい」という要望が。

いつもなら、ソースを確認して、そこに当たっているCSSを1つずつ探しながら、新しいCSSを当てていく。かなり大変で、時間がかかる作業です。

AIなら、適用されているCSSだけを抜き出して、そのCSSに新しいデザインを当てることができました。

大量のリダイレクトも、連携中のフォームも

結構な数のリダイレクトがありましたが、指示したら .htaccess に綺麗にまとめてくれました。設計のドキュメントまで作成してくれました。

Contact Form 7 × kintone の連携フォーム 旧サイトではContact Form 7とkintoneを連携していて、下手に触ると連携できなくなる状況でした。「連携はしたままで、ソースとCSSだけ変更して」と頼んだら、見た目も連携もちゃんと動いていて、正直驚きました。

ログインできない原因を、すぐに特定

システム周りのログイン画面などで、何が原因でログインできないのかがすぐに分かる
IDやパスワードを渡す必要がない
仕様が分からなくても、原因を特定できる

実際に、担当の方でも分からない、サーバー担当の方にしか分からないような原因まで特定できました。原因は、新しいサーバーのIPアドレスが登録されていなかったことでした。

ほかにも

プロジェクトを跨いだ実装：関連サイトのヘッダーも、別プロジェクトから実装しました
旧URL・外部リンクの整理：旧サイトのURLや外部リンクなどを、まとめて設置しました
構造化データの整理：そのページに合った構造に整理してくれました

まとめ

AIに仕事を任せるときは、「優秀だけど何も知らない新人」に頼むつもりで。

準備する
材料を渡す
指示する
育てる
確認する

この5つを意識するだけで、AIは「ちょっと便利な道具」から「頼れるもう一人の自分」に変わります。

業務効率化に悩んでいる人の、少しでも役に立てたら幸いです。最後まで読んでいただきありがとうございました！