こんにちは、DIVX デザイナーの櫻井です。
私はこれまで、UI/UXデザインを中心に、Webサイト制作、SaaSプロダクトの改善、PM業務、実装サポートまで幅広い領域を横断しながらプロジェクトに携わってきました。
少人数チームで複数案件を同時に進める環境だったこともあり、限られた工数で成果を出すために、自然と「生成AIをどう活かすか」を日常的に試行錯誤してきました。

本記事では、私が実際に業務の中で使ってきた生成AIの種類と、どのタイミングで使用したのか、その結果どんなアウトプットが得られたのかを、デザイナー目線で具体的に紹介していきます。
単にツールの機能を紹介するだけでなく、「デザインプロセスのどこに効いたのか」「実務でどれだけ時短になったか」「どの領域に特に効果があったか」といったリアルな体験をお伝えします。

本記事は、次のような方に向けて書いています。

• WebやSaaSなど幅広い制作業務に携わっているデザイナーの方

• 日々のデザイン業務を効率化したいと考えている方

• 生成AIを試したいけれど、どのように使えばいいかわからない方

「どのタイミングで生成AIを使えばいいのか？」という実務者ならではの具体像をつかむことで、明日からのワークフローにすぐ取り入れられるヒントを持ち帰っていただけるはずです。

DIVXでは、プロダクト開発とWeb制作が共存する環境で、UI/UX・情報設計から軽い実装支援まで幅広く関わる働き方をしています。

LP・ロゴ・コーポレートサイトからSaaS改善まで案件も多岐にわたり、複数プロジェクトを横断する中で、初動のアウトプットや検証スピードに課題を感じる場面が少なくありません。

「頭の中に案はあるのに形に起こすのが遅い」
「アイデアを深掘りしたいのに作業に追われる」

そんな悩みを抱えていた時、生成AIが実務でも使えるレベルに進化し、デザインプロセスを刷新できる手応えを感じ始めました。

ラフ作成、文言整理、アイデア発散・圧縮、仕様確認など多くの工程と相性が良く、“思考に使うべき時間”を取り戻せる感覚がありました。

本記事で登場するAIツールについて簡単に触れておきます。

• Figma Make
  Figma が提供するAI搭載のデザイン機能で、テキストプロンプトや既存のデザインシステムをもとに UI デザインの初稿を自動生成できる。

• ideogram
  テキストプロンプトからロゴやタイポグラフィ、ポスターなどの画像を生成できる画像生成AI。

• Midjourney
  テキストプロンプトから高解像度の画像を生成できる生成AI

私がこれまで実務で活用してきた生成AIは、大きく 要件整理・UI設計・ビジュアル制作・コピー生成・実装サポート の5つの領域に分かれます。
WebサイトやSaaSプロダクトの開発・改善に携わる中で、以下のような工程で生成AIを取り入れてきました。

① 要件整理

主な生成AI：OpenAI
制作したもの：要件定義書、利用シナリオ、情報構造案

• 抽象度の高い要件を整理し、構造化

• 複数の機能案・シナリオの草案生成

• 議論のたたき台となる文書の作成

② UI設計

主な生成AI：Figma Make / OpenAI
制作したもの：UIラフ、画面遷移案、構成バリエーション

• 要件を渡して複数レイアウト案を生成

• 手書きメモから画面構造の自動提案

• たたき台UIの高速作成

③ ビジュアル制作

主な生成AI：ideogram / Midjourney
制作したもの：ロゴ案、アイコン案、キービジュアル、配色・UIバリエーション

• ロゴや象徴的な図形の方向性探索

• UIカラー・スタイルのバリエーション

• ビジュアルイメージの初期検討素材

④ コピー生成

主な生成AI：OpenAI
制作したもの：UI文言、見出し、説明文、CTA案

• トーンに合わせた複数コピーの生成

• 導線説明・エラー文などの自然な文章化

• 企画書・提案資料の文章調整

⑤ 実装サポート

主な生成AI：OpenAI / GitHub Copilot
制作したもの：HTML/CSS/Reactコード、WordPressのテーマカスタマイズ、技術調査まとめ

• レスポンシブ対応やスタイル調整の修正

• エラー原因の特定と修正

上記のように、初期の構想からUI設計、ビジュアル制作、コピー、さらに実装フェーズまで生成AIを横断的に活用してきました。

次の章では、これらの工程の中から特に効果の大きかった活用例を、実体験ベースで詳しく紹介していきます。

参考：
・Figma Makeについて（Figma AI - Make designs）
・ideogramについて（https://docs.ideogram.ai/）
・Midjourneyについて（https://www.midjourney.com/home）

クライアントからデザインの依頼を受けた際、よくある課題が「提供される素材の情報が不足していること」です。
特に新規サービスやイベント関連の制作では、説明文が数行しかなく、内容の解像度を上げないとレイアウトやコピーの方向性が固まりません。

今回もまさにそのパターンで、与えられた文章だけでは “どの要素を強調すべきか” や “ターゲットがどんな情報を求めているのか” が判断しづらい状況でした。

そこで OpenAI に対して、

• 目的／ターゲット／訴求の整理
• 必要なセクション構成の案出し
• 補足すべき情報の候補出し

を依頼し、元の文章の解像度を一段引き上げてもらいました。

OpenAIが生成した構成案は、実際の制作にそのまま使うというよりも、「人間が考えるべき視点を示す補助輪」のような役割で非常に有効でした。

結果として、初稿の段階からレイアウトの方向性が定まり、コピー検討時に必要な情報も整理され、クライアントとの認識合わせがスムーズになりました。

※イメージ図

ロゴ制作では「自分の案の良し悪しが判断しにくい」という課題があります。
特に抽象度の高いロゴや、コンセプトワークが複雑な案件では、デザインの意図・形状・一貫性について第三者視点が欲しくなります。

最近行なったロゴ制作では、初稿を作った段階で OpenAIにロゴ画像を見せ、

• 形状の一貫性

• 方向性の解釈

• SaaSロゴのトレンドとの整合性

• 改善ポイントの洗い出し

• 抽象度の調整提案

をフィードバックしてもらいました。

フィードバックの結果は以下の通り。（フィードバックは「厳しめで」と依頼しました）

「ビジュアルは派手だが“意味が薄い”。SaaSロゴとしての完成度は低め。」
「フォントはニュートラルなのにアイコンだけ時代が古くポップよりでブランドの一貫性が保てていない。」
「構成要素が多く、アイコン全体が “意味の読み取りにくい複雑記号” になっている」
etc.

※実際のFBの様子

自分だけでは気づかなかった“外の目” を簡単に取り入れられます。

もちろん、OpenAIのフィードバックをそのまま採用したわけではありませんが、
改善サイクルが圧倒的に短縮され、複数案の精度アップにもつながった点は大きな成果でした。

AIは「代わりに作ってくれる存在」というより
“デザインレビューをしてくれる同僚”のように使うと価値が高いことを実感した事例です。

実際に業務へ生成AIを導入してみて感じたのは、「使っている最中は効率化を実感しにくい」 ということでした。

生成AIに投げた瞬間は便利でも、体感的には“作業している感覚”がまだ大きく、 「本当に時短になっているのか？」と疑う場面もありました。

しかし、制作が終わってから振り返ると明らかに作業時間が短縮され、アウトプットの質も安定していたという結果が見えてきました。

特に先ほど紹介した事例①・②では、以下の通り効果が大きく表れています。

※導入前の工数は、これまでの制作経験や一般的な工数相場をもとに出しています。

ここまでは生成AI活用によって得られた効率化の話でしたが、実務ではもちろん良いことばかりではありません。

生成AIを取り入れることで効率化が進んだ一方で、当然ながら万能ではないと感じる場面や、むしろ効率が落ちてしまった経験もあります。

ここでは、実際に自分が経験した「つまずきポイント」を共有します。

Figma Make はUIラフの生成など初期工程ではとても便利ですが、既存サービスのスクリーンショットやアイコンを“精密にトレースする”用途では、現状まだ人の手のほうが早い場面があります。

例えば、

• スクリーンショットをほぼそのまま再現したい

• 図形の比率を保ったまま整えたい

• 細部の形状を忠実に描き起こしたい

といった作業では、”要素の形や位置がスクリーンショットと異なる” “比率がわずか崩れる” “意図しない配色になっている”といった誤差が入りやすく、最終的に自分で描き直したほうが効率が良いケースもあります。

そのため現状は、初動で生成AIに大まかな構造を作ってもらい、仕上げを人が行うという分業がもっともスムーズだと感じています。

左：スクリーンショットした画像　右：Figma Makeで生成されたフレーム

生成AIを使い慣れてくると、「せっかくなら生成AIにもっとやらせてみたい」という欲が出てきます。何度もプロンプトを調整したり、別の生成AIツールにも試して比較する等が発生した結果、生成AIとの対話に時間を取られてしまう という落とし穴がありました。

これは完全に“AI活用あるある”で、 AIで素早く進めるつもりが、気づけばAI実験で半日近く使っていた…という経験、デザイナーだけでなく日頃からAIを活用している方なら一度は通る道だと思います。

今は、 「AIに任せる範囲」と「自分でやる範囲」を明確に決め、AI沼にハマらないための制御を意識しています。

以上の内容からも分かるように、生成AIは決して万能ではありません。どのタイミングで使うべきか、その判断はあくまで人に委ねられます。

私自身まだ試行錯誤の段階ではありますが、現時点でハッキリしていることは2つあります。

1つ目は、どの生成AIであっても“最初から完成された制作物”を生成することはできないということ。ただし、既存のアウトプットの質を高めるサポートは非常に優秀です。

2つ目は、デザインのフィードバック、要件整理、誤字脱字チェックなど、1人では見落としがちな作業を補填してくれる存在であるということ。

つまり生成AIは、「ゼロから完璧なものを作るツール」ではなく、「人間の視点を広げてくれるパートナー」
という位置づけで使うのが最も効果的だと感じています。

生成AIを使ってみて感じたのは、「思っていたよりずっとデザインが楽になる」ということでした。
情報が足りない時の整理や、アイデアの広げ方、ラフ案の方向性チェックまで、ひとりで抱えがちな作業を手伝ってくれる存在です。

チラシやロゴ制作では工数が大きく下がり、作業のスタートがとても軽くなりました。
一方で、生成AIに任せすぎて逆に時間を使ってしまったり、文脈を理解しないままチェックを頼んでミスが出ることもあります。
万能ではないけれど、「うまく使えばかなり心強いパートナー」なのは間違いありません。これからも、自分のやり方に合った使い方を少しずつ育てていきたいと思います。

最近は、デザインを実装に落とし込むまでのプロセスをどう短縮できるかにも興味があります。特に、Figmaの開発モードからMCPサーバー経由で Claude や VS Code と連携し、コードを自動生成する仕組みにはかなり期待しています。

これまでは「デザインを作る」「仕様を整理する」「それをもとに実装する」という流れにどうしても時間がかかっていました。しかし、このあたりがシームレスにつながれば、デザインと実装の距離が一気に縮まり、より短いサイクルで“試す・直す”ができる時代が来るのではないかと感じています。

AIがデザインの補助だけでなく、実装プロセスそのものを変えていく未来にも関わっていけたら面白いなと思っています。