プロダクトデザイナーのAI活用事例4選

こんにちは!High Linkで、香水のサブスク「カラリア」のプロダクトデザイナーをしているsaoriです。
この数ヶ月間で、AIツールを業務に取り入れ、デザイン業務の効率化を図ってきました。

今回は、AIを業務に活用してみてどうだったか、事例と共に紹介しようと思います!

1. 生成AIによる画像生成

ユーザーさんがどんな商品を求めているかを把握するため、商品アイデアの画像を生成してアンケート調査を実施しました。その際、12個ほどの商品イメージをChatGPT Plusを用いて作成しました。

🎨実現不可な画像をAIで作れた

画像の合成は難易度が高く、専門スキルがないと制作が難しかったのですが、AIによってプロンプトを書けばリアルな商品イメージを生成することができました🎉
(今はNano bananaも登場してるのでさらに効率的にできる可能性がありそうです)

生成した画像イメージ

生成した画像の一部。よりカラリアらしさを出すために、一部の画像はトーンや要素をPhotoshopで調整しています。

アンケート内容の一部紹介

アンケート内容の一部。想定価格やイメージ、説明を添え、どのくらい欲しいかなどを聞いてみました。

📊ユーザーの回答の質を上げられた

リアルな商品イメージと説明をセットにすることで、「もっとこうして欲しい」といった具体的なユーザーの声や、人気の傾向がはっきりと分かり、とても参考になるデータが得られました。

その結果、アンケートで好評だった商品を実際にリリースしたところ、オプション商品としてユーザーの選択肢が広がり、ユーザー単価の向上にもつながりました。

2. AIエディタを使ったFigmaプラグイン作成

ちょうどAIが普及してきたタイミングで、社内でも「もっと爆速でデザイン・実装するためにComponentをちゃんと整理しよう!」と動きが生まれ、エンジニアの協力も得ながらComponent整理を進めることになりました。

⚡️チェックの効率化を実現できた

開発効率化のため、ComponentはのちにAIと連携することを見据えていて、Variable、TextStyle、ColorStyleの値を適用して作られているかが重要でした。
目視チェックは時間もかかるし漏れが発生するため、自動チェックできるプラグインをCursorで作成
これによりチェック作業が体感で倍以上早く進められるようになりました🎉🎉

プラグインでチェックしてる時の様子

Componentチェックの結果を表示してくれる

CursorはGPTやClaudeが標準搭載されてるコードエディタのため、チャット内で作りたい機能を会話するだけであっという間に完成しました。

Figmaプラグイン作成の方法は以下の記事を参考にさせていただきました!

3. MCP連携による自動ドキュメント生成

今までComponentの存在はあるものの、「どんな時にどのように使ったら良いのか?」「使い方のルールはあるのか?」など使用方法が明文化されていませんでした。
そこで、Componentガイドラインの作成をCursor × Figma MCP × Notion MCPで自動生成にチャレンジしてみることに。

🚀ドキュメントのたたきが爆速で出来上がった

MCP連携によるドキュメント自動生成によって、31個のComponentドキュメントのたたきが、約12時間で完成させることができました🎉
本来はデザイナー2人で約24時間かかる見積もりだったため、作業コストを約50%削減できた計算です。
ただし、プロダクト独自のルールについては個別にチェック・修正が必要でした。

31個のComponentドキュメントのたたき

31個のComponentドキュメントのたたきが完成!

ドキュメントの作成方法は以下の記事を参考にさせていただきました!

今回試した連携フロー

今回はFigma MCPのほかにNotion MCPを活用し、Cursorが生成したドキュメントを直接Notionに出力できるようにしてみました。
全体像としてはこんな感じ。

MCP連携のフロー

試してみて良かったとこと

指示を出すだけでたたきが用意されるので、「優秀な後輩が下準備をしてくれた」ような感覚でした。さらに、Notion上で他のデザイナーと分担してチェック・追記できたことで、チーム全体で効率的に仕上げられたのも良かった点です。

Notionで分担してる様子

4. AIライティングチェックツールの作成と配布

ライティングガイドラインは既にNotionにドキュメントとしてまとめられており、社内メンバーがいつでも参照できるようになっていましたが、すべてのルールを覚えてライティングするのは大変です。レビューする側もチェック事項を覚えている必要があります。
そこで、カスタムGPTを作成し、メルマガやLINE担当者が一次レビューとして使えるように配布しました。

カスタムGPT作成の概要

複数のガイドラインとプロンプトを読み込んでカスタムGPTを作成、関係者にURL共有

✂️レビュー時間が今までの半分以下に短縮した

二次レビューする側もGPTに入れてみて問題ないかチェック。一言一句すべて目視で確認する手間が省けたことで、レビューの効率化ができました🎉

AIを活用するための土台作り

そもそもライティングガイドラインのNG表現が更新されていなかったり、メルマガなどで香水を紹介する際に気をつけなければならない薬機法・景表法の観点が抜けていたため、これらも更新してAIに読み込ませるようにしていきました。

各種ガイドライン

最適なツールは模索中

最近までGPT-5を利用していましたが、ガイドラインに文書を追加してアップデートを行なったところレビュー観点の漏れが増え始めてしまいました…。
GPT・Claude・Geminiを比較してみたところ、レビュー観点の網羅性や厳密さに違いがあり、それぞれ得意分野がある印象でした。どのツールを本格採用するかは引き続き検討中です。

感想:AIは良き相棒

これらの取り組みを通じて、AIツールは作業をより効率的にしてくれる良い壁打ち相手であり、良き相棒だと実感💪
適当なことを言ったりする時もあるので、プロンプトの工夫や最終的な品質チェックは人間の役割ですね…!
AIツールも進化したり多様化してるので、色々試して柔軟に対応していこうと思います!

High Linkでは、AIを積極的に活用し、プロダクト改善の効率化と進化に取り組んでいます。
興味のある方は、ぜひ募集職種一覧をチェックしてみてください!