こんにちは！
Webデザイナーのayakaです。
これまで、AIをデザイン業務に取り入れた話をいくつか書いてきました。
最初は「AIに手伝ってもらう」という感覚でしたが、気づけば使い方が変わってきています。
「効率化」から進み、最近では、AIに業務を任せながら、自分は別の業務を進める場面が増えてきました。
空いた時間で新しいことを試したり、アイデアを練ったり。そういう働き方が、少しずつ現実になってきました。
実際に、これまで手で行っていた確認や業務の一部は、AIに自動化で任せられるようになってきています。
この記事では、私が今まさに業務で実践・検証しているAI活用事例を、場面ごとにまとめてみました。
まだ検証中のものも含めて、リアルな現状としてお届けします！
INDEX
①ClaudeやChatGPTでFigmaプラグイン作成
業務中に「もっと時短できないかな」と思う場面があり試してみました。
テーブル（料金表など）の作成がまさにそれで、元々コンポーネントに登録しているパーツ1つ1つにコピペでテキストを入れていく、ほぼ単純作業のような繰り返しをずっと手作業でやっていました。
使用ツール
Claude / ChatGPT
活用方法
やったことはシンプルで、「こういうプラグインを作りたい」とAIに伝えるだけ。
ざっくりした要件でもOKで、会話しながら仕様を整理してくれます。
完成したプラグインは、Figmaの「プラグイン」→「開発」→「マニフェストからインポート」でそのまま使用可能。
エラーが出た場合も、その内容をAIに渡せば修正まで対応してくれます。
実際に作ったFigmaプラグインはこちらです！
| テキスト流し込みプラグイン | メモにまとめたテキストを、指定したパーツに一括で流し込み、量産 |
|---|---|
| デザインシステム構築プラグイン | バリアブルに登録するカラーの整理、コンポーネントを指定して運用ルールのボードを自動作成 |
結果と効果
時間がかかっている工程があれば、まず「プラグインにできないかAIに聞いてみる」という選択肢が増えました。
特にFigma内の作業を直接効率化できる点が大きく、繰り返し発生する作業ほど効果を実感しやすかったです。
今後も業務に合わせて小さな自動化を積み重ねていきたいと思っています。
②ClaudeやChatGPTでブラウザツール作成
HTMLファイルはブラウザでそのまま開けるので、ちょっとしたツールやページをAIに作ってもらい業務で活用しています。
使用ツール
Claude / ChatGPT
活用方法
「こういうツールを作って」と伝えるだけで、HTMLファイルとして出力してもらえます。
Figma内の自動化だけでなく、Figma外の作業も含めてツール化できるのがこの方法の特徴です。
実際に作ったものはこちら！
| バナーサイズチェッカー | 複数サイズのバナーを一括で確認し、制作漏れをチェックできる |
|---|---|
| スクショ連結ツール | ページのスクリーンショットを自動でつなぎ合わせ、長い画像として出力 |
| 改善案ビフォー・アフター画像作成ツール | 修正前後のデザインを並べて比較画像を簡単に作成 |
結果と効果
「あったら便利なのにな」と思っていたツールが、コーディング知識ゼロでも作れるのが一番の発見です。
自分の業務に合わせてカスタマイズできるので、既存ツールでは補えない細かいニーズにも対応できるようになりました。
今後も業務に合わせたツールを増やしていきたいと思っています。
③Figma Makeでデザインシステムの土台作成
デザインシステムは自分以外のデザイナーさんなど複数人が触るものなので、運用効率を考えてきちんと整備したいと思っていました。
ただ手作業だと無限に時間がかかりそうで…せっかくならとFigma Makeに任せてみました。
使用ツール
Figma Make
活用方法
まずテキストで「こういうものをまとめてほしい」と伝えて、色や余白などのスタイルをまとめてもらいました。
色の指定やモジュールの指定もできそうで、更新しやすいプラグインを作って管理する方法も試してみたいと思っています。
結果と効果
あとから色を変えたりサイズを調整したりと手直しはありましたが、大幅に時間を削減できました。
最初に手作業で始めたときと比べると、その差は歴然です。
今後はチームで運用しやすい形に整えながら、デザインシステムとして実業務で活用できる状態まで育てていきたいと思っています。
④デザインデータとページの差分チェック
ページ公開前には、表示崩れや掲載内容の漏れ、リンクの不備などをチェックし、問題なく公開できる状態かを確認する必要があります。
これまでデザインデータとページの表示確認は、目視で見比べたり、テキストをコピペしてページ内を検索したりしていました。
まだ検証段階ではありますが、この業務をAIに任せています。
使用ツール
Claude
活用方法
Figmaのコードと表示確認用ページのURLをClaudeに渡して、デザインデータとページの差分チェックを依頼。
色・テキスト・余白など、細かく見てほしいポイントを伝えることで、チェックの精度を上げることができます。
さらに検証中ではありますが、修正箇所があればそのまま担当コーダーさんへ修正依頼メッセージを自動送信、問題なければ「確認完了」の連絡まで、一連の流れを自動化することも視野に入れています。
結果と効果
目視では気づきにくかった余白のズレや、細かい色の差異まで検出できるようになりました。
実際のページ表示に影響しないレベルのものもありますが、今まで見えていなかった差分が可視化されたのは大きな発見です。
AIが差分チェックを進めている間、私は別の業務を進められるのも嬉しいポイントです。
まだ検証段階ですが、差分チェックの精度はプロンプト次第で大きく伸ばせそうです。
今後は運用に組み込めるレベルまで引き上げていきたいと思っています。
⑤Claudeでサイト分析
サービスサイトの課題洗い出しから改善案の作成まで、Claudeに任せています。
使用ツール
Claude
活用方法
GA4と連携することで数値分析も可能です。
専用のプロジェクトやスキルをあらかじめ作っておくことで、分析結果か課題に対しての改善案をまとめて出力してもらえます。
小さな改善でも都度まとめてもらい、その後の効果検証もさらにClaudeに分析してもらう、という流れで運用しています。
結果と効果
課題や今見るべき数値をClaudeが提示してくれるので、何を確認すべきか迷う時間が少なくなりました。
もちろん自分でも本当にその方向でよいかはサービスページを見ながら確認する必要があります。
分析→改善→検証のサイクルを一人でも回せるようになったのが一番の変化です。
今後は分析〜デザイン案作成まで含めて一貫してAIと進められる可能性が見えてきたので引き続き検証していきたいと思っています。
まとめ
今回は、AIを活用した業務効率化や、実際の活用事例について紹介してきました。
AIに任せることで生まれた時間を、より上流の考える仕事や、デザイナーにしかできない価値を生み出すことに使えたら、という意識で日々試しています。
他にも、資料作成・更新にもAIを活用していて、ベースのレイアウトが決まっている資料であればテキストの更新や整備をAIに任せることができそうで、こちらも引き続き検証中です。
AIをうまく取り入れながら、デザイナーとしての価値も高めていけたらと思っています。
なにから始めたらいいかわからない場合は、まずは小さな業務からAIに任せてみるのがおすすめです！
