【社内勉強会】制作課のAI活用事例まとめ｜Chrome DevTools MCP・Claude Code・Lovart

はじめに

毎月、デザインファミリーではゆるっとした社内勉強会をやっていて、
なんでもいいので30分程度発表します。

私は普段、Webデザイナー兼コーダーとして制作業務に関わっているのですが、
最近はAIツールを触る機会がグッと増えてきました。
「これ、普通の制作にも活かせるかも？」と思うことが多かったので、
今回は “制作フロー × AI” の最新実例 をまとめて発表しました。

内容としては、

• Chrome DevTools MCP を使った “その場プレビュー” の話
• Claude Code による WordPress 修正の自動化
• Lovart を使ったデザイン生成・編集
• 今後やってみたいAI検証

などなど、日頃の業務でもすぐ使えそうなネタを中心にしています。

スライドも載せているので、
「なんとなく気になる！」くらいのテンションで読んでもらえたら嬉しいです。

ケーススタディ1：Chrome DevTools MCP

検証ツール（DevTools）とAIを連携させるMCPです。

今まではAIにコードを書いてもらっても、それをエディタに貼って反映して…という手間がありましたが、これはAIに頼むだけで、今開いているブラウザ上の表示がサクッと変わります 。

「実装してみたらなんか違った」を未然に防げるのがめちゃくちゃ便利です 。

やったこと

自社サイトでヘッダーに固定でお問い合わせボタンを実装する際、コード生成だけでなく、実際の導入後のイメージをChromeで表示してもらいました。

推しポイント

個人的なお気に入りポイントは、「コード修正後のイメージを、実際のChrome上でそのまま確認できる」ところ 。

ケーススタディ2：Claude CodeとWordPress改修の自動化

二つ目のテーマは、生成AIを用いてWordPressの改修作業を自動化する「Claude Code」の活用事例です。

概要

コマンドラインAI 「Claude Code」は、ターミナル（コマンドライン）から操作するエージェント型のAIツールです 。 私が思う最大の特徴は、AIが対象のファイルを直接編集してくれる点。これまでのようにChatGPTからコードをコピーしてエディタに貼り付ける…という作業が不要になります。

やったこと

WordPressの改修案件で、修正指示ツール「AUN」から書き出したPDF（画像ベースの指示書）と、ソースコードを同じフォルダに格納してAIに一括で渡しました。 すると、AIが修正内容を理解し、該当するコードを勝手に書き換えてくれます。

推しポイント

AUNをPDF化して渡すことで、指示をわざわざテキストに書き起こす必要がなくなりました！

ケーススタディ3：Lovart

Lovartは、「世界初のデザインエージェント（The World’s First Design Agent）」 と呼ばれています。

単なる画像生成AIではなく、対話を通じてデザインの全プロセス（発想から完成品の生成・編集まで）を担うパートナーだそうです。

画像生成AIで作った画像って、あとから「ここの文字だけ変えたい」といった微調整が難しいですが、Lovartはそこも解決してくれる、「痒い所に手が届く」AIです。

推しポイント

画像内のアイテムを分解して編集できるところ。

Nano Bananaで生成した画像を編集する事例を紹介しています。

まとめ

今回の勉強会では、制作まわりで実際に使えるAIツールを3つ紹介しました。
Chrome DevTools MCP では、検証ツールの内容をAIがそのまま読んでUI調整までやってくれるので、細かいデザイン修正がすごく楽になります。
Claude Code では、AUNの修正指示を読み取ってコードを直接直してくれるので、手作業の修正がぐっと減りそうでした。
Lovart は画像の編集ができちゃいます。もっと試していきたいAIの一つです。

ちなみに今回のスライドは Genspark で作ったんですが、ざっくり「ここ直したい」と場所を指定するとAIが調整してくれる「AI編集」や、テキストや位置も自由に編集できる「高度な編集」もあって、AIと手作業のいいとこ取りができてとても使いやすかったです。

全体を通して、「AIに任せられるところはどんどん任せて、私たちはもっとクリエイティブな部分に集中できるようにしていこう」という方向性が見えてきた回でした。