AI技術の発展に伴い、デザインの制作プロセスは大きく変化しています。リサーチや情報整理、コーディングといった工程をAIがサポートすることで、デザイン業務の効率化が期待できるようになりました。

しかし、多様なAIツールを効果的に使うには、その特性を理解し、目的に応じて適切に組み合わせることが不可欠です。

本記事では、デザインファームであるNOROSHIの視点で、AI活用の現実的なメリットや注意点を整理し、デザインの各工程で役立つツールと、それらを連携させた実践的な制作フローを紹介します。

※本記事で掲載されている情報は執筆時点での情報となります。

デザインでAIを活用するメリット

まずはデザイナーの視点で、AIをデザイン業務に取り入れることで得られるメリットついて解説します。

作業を効率化しクリエイティブな業務に集中できる

現時点でのAIツールの現実的な活用領域として、リサーチ・分析・コミュニケーションの効率化が挙げられます。ユーザーインタビューをはじめとするユーザー調査や競合調査、ペルソナ作成といったデザインプロセスにおける情報整理作業をAIに支援してもらうことで、従来数時間かかっていた作業を大幅に短縮できます。

また、ディレクターからデザイナーへの要件伝達においても、AIが要件を整理・構造化することで、認識のずれを減らし、プロジェクトの初期段階での方向性を明確化することが可能です。

さらに、デザイン業務においても、AIを活用したUIの量産や簡易なプロトタイプの作成により、アイデアの高速での仮説検証が可能になります。従来であれば1つのデザインパターンを検討するのに数日かかっていた作業が、AIの支援により複数のパターンを短時間で比較検討できるようになります。ただし、現時点のAIによって生成されたデザイン品質にはまだ課題が多く、あくまで検証や作業の効率化のレベルに留まります。

将来的には、より生成されるデザインの品質が上がることで、デザイナーは手を動かす作業時間を大幅に削減し、より上流のコンセプト策定やプロダクトマネジメント、ユーザー体験の設計に、より多くの時間を割けるようになるでしょう。

非デザイナーでも簡易なデザイン制作が可能になる

AIツールの普及により、デザイン経験のないプロダクトマネージャーやエンジニア、営業担当者でも、最低限のデザインやワイヤーフレームを短時間で作成できるようになります。

プレゼンテーション資料や提案書に使用する簡易的なデザイン素材であれば、非デザイナーが、外注やデザイナーに依頼することなくスピーディに作成できるため、業務効率が向上します。

また、従来であれば、「こんな感じのデザインが欲しい」「ユーザーがスムーズに操作できる仕組みにして欲しい」といった曖昧な要望やビジュアル面・機能面の要件をデザイナーに伝えるしかなかった場面でも、AIツールを使って具体的なビジュアルイメージやワイヤーフレームを作成し、それをベースにディスカッションできるようになります。

また、プロダクト開発の領域では、プロダクトマネージャーやエンジニアが、AIが生成したデザインを直接使ってプロトタイプを作成したり、開発を進めたりするケースも増えています。

デザインの壁打ちとして活用できる

「いつものデザインパターンから抜け出せない」「パッとアイデアが思い浮かばない」といった悩みを抱えるデザイナーは少なくありません。AIツールは、こうした場面で新しいアイデアのきっかけを提供してくれます。

特にUIデザインの分野では、例えば「タスクを一覧で表示しつつ、タグと検索で絞り込みができるUIを生成してください」 といった指示を与えるだけで、一般的で汎用的なUIを自動で生成できるようになりました。これにより、リサーチや作業の効率が大幅に向上しています。

▼実際にAIで生成したUI

ただし、現状のAIツールが生成するデザインは、あくまでアイデアの叩き台レベルです。実際のプロジェクトで使用するには、ブランドガイドラインに合わせた調整、ユーザビリティの検証、細部の作り込みなど、デザイナーによる作り込みが必要になります。

デザイナーがソースコードまで生成できる

従来のUIデザインのプロセスでは、デザイナーがFigmaなどのデザインツールでビジュアルを作成し、それをエンジニアがコードに実装するという分業体制が一般的でした。

しかし、AIは直接ソースコードをベースにデザインを生成できるため、デザイナーが直接コードベースでデザインを出力できる可能性が出てきています。現在でも、プロトタイプや簡易なWebページ程度であれば、AIツールを使ってデザイナーがコードベースでの制作を行うことができます。

これにより、デザインから実装までの引き継ぎ作業を省略でき、より迅速なプロダクト開発が実現できる場面が増えてきています。

ただし、商用利用を前提とした高いクオリティが求められる場合は、現時点のAIのクオリティでは実現が難しいため、従来通りデザイナーとエンジニアの協業プロセスが必要になります。

デザインでAIを活用する際の注意点

次に、AIをデザイン業務に取り入れる際の注意点ついて解説します。

著作権・知的財産権のリスク管理

AIが生成するデザインは、学習データに含まれる既存作品の要素を統合・変形して作成されるため、既存の著作物と類似するリスクが内在しています。AI生成物の著作権の帰属先が不明確なケースが多く、商用利用時の責任の所在が曖昧になる可能性があります。

また、学習データに含まれていた作品の権利者からの異議申し立てや、意図しない模倣による信頼性の損失といったビジネスリスクも考慮が必要です。

対策として、AIツールの利用規約の確認、デザイナーによる確認と調整が必要になります。

デザインのクオリティはまだ低い

現状のAIツールでは、一発で商用レベルの高品質なデザインが出てくることは期待できません。AIが生成するデザインは、レイアウトのバランス、タイポグラフィの細かな調整、ブランドトーンとの整合性など、実用レベルに達するまでには多くの調整が必要です。

そのため、AIツールは「デザイナーの業務効率化をサポートするツール」として活用するにとどまり、デザイナーの専門スキルをすぐに代替するものではないことを理解しておく必要があります。

AIが生成したコンテンツの最終確認が必要

AIが生成したテキストや画像などのコンテンツをそのまま使用すると、事実と異なる内容や問題のある表現が含まれる可能性があります。

特にテキストコンテンツでは、統計データの間違い、企業情報の誤記載、法的に問題のある表現などが含まれる場合があり、画像においても権利関係が不明確な要素が混入する可能性があります。

そのため、AIが生成したコンテンツを実際のプロジェクトで使用する前には、必ず人間による事実確認や法的チェックを行い、必要に応じて修正を加えることが重要です。特に企業の公式サイトやマーケティング資料で使用する場合は、より慎重な確認が求められます。

デザインにおけるAIツールの選び方

AIツールを効果的に活用するためには、以下の3つのポイントを意識して選ぶことが重要です。

利用目的ごとに最適なツールを選ぶ

AIツールはそれぞれ得意分野が異なります。たとえば、ロゴデザインに特化したもの、Webサイトのレイアウト作成が得意なもの、イラスト生成に強みを持つものなど、多種多様です。

ツールを選ぶ際は、「アイデア出しを効率化したい」「簡単なプロトタイプを素早く作りたい」といった自分の利用目的を明確にし、その目的に合った機能が備わっているかを確認しましょう。

商用利用の可否と著作権リスクを把握する

AIが生成したデザインを仕事で使う場合は、必ずそのツールの利用規約を確認し、商用利用が許可されているかをチェックしてください。

また、AIツールは膨大なデータを学習してデザインを生成するため、意図せず既存のデザインと似たものが生まれるなど、著作権侵害のリスクもゼロではありません。トラブルを避けるためにも、ツールの学習データや生成物の権利関係について事前に調べておくことが重要です。

出力形式を確認する

現状のAIが生成するデザインにはまだ限界があるため、生成したデザインをデザインツールで編集できるかが非常に重要になります。特に、Figmaファイルでの書き出しに対応したツールを使えば、デザイナーが直接修正や調整を行えるため、作業効率が大幅に向上します。

デザインプロセスで活用できるAIツール紹介

ここからは、デザインプロセスの中で、具体的に活用できるAIツールを紹介します。

1.デザインリサーチに活用できるAIツール

① LLM（ChatGPT/Gemini/Claude）

ChatGPT、Gemini、Claudeといった大規模言語モデル（LLM）は、デザインプロジェクトにおける調査・分析作業を効率化に役立ちます。

LLMにユーザーインタビューやユーザーテストの結果、議事録などを渡せば、レポートの作成、ユーザーインタビューの内容整理、ペルソナ設定の叩き台作成など、デザインの上流工程で必要な情報整理作業を大幅に効率化できます。これにより、デザイナーのリサーチ作業にかかる時間を大幅に短縮できます。

② NotebookLM

公式サイト：https://notebooklm.google/

NotebookLMは、複数の資料を一元管理し、アップロードした情報だけをベースにAIが回答を生成してくれるGoogleのノートツールです。一般的な大規模言語モデル（LLM）と違い、外部の情報を参照しないため、プロジェクト固有の情報を基にした正確な分析が可能です。

デザインプロセスでは、競合調査資料、ユーザーインタビューの記録、市場調査データ、過去のプロジェクト資料など、大量のドキュメントをまとめて入力します。そして、「このターゲット層に最適なUIパターンは？」「競合と差別化できるデザイン要素は？」といった質問を投げかけることで、プロダクトマネジメントやユーザー体験設計における壁打ち相手として活用できます。入力した資料の範囲内で具体的な回答が得られるため、プロジェクトの文脈に沿った提案を得られるのが特徴です。

③ Obsidian 

公式サイト：https://obsidian.md/

デザインリサーチとは少し文脈が異なりますが、エンジニアとの協業をよりスムーズにするツールとしてObsidianについてご紹介します。

Obsidianは、ノート同士を相互にリンクできるドキュメント管理ツールです。Markdown形式でローカルに保存できる点が特徴となっています。

Obsidian自体はAIツールではありませんが、後述するAIエディタ「Cursor」などと組み合わせることで、さらにその真価を発揮します。

Cursorを活用することで、ローカルに保存されたナレッジベース（Markdownファイル群）にAIが直接アクセスし、文脈を理解した上で、情報の整理・要約・新規コンテンツの生成が可能になります。

これにより、たとえばエンジニアとの連携をスムーズにするために、プロジェクトの仕様書や設計ドキュメントをMarkdown形式で管理し、コードベースと同じ環境で作業するケースにも効果的です。

Cursorと組み合わせることで、AIの支援を受けながら、技術文書の作成や開発チームとの情報共有をより効率的に行えるようになります。

2.ワイヤーフレーム/プロトタイピング/デザイン生成に利用できるAIツール

① Relume

公式サイト：https://www.relume.io/ja

Relumeは、作成したいサイトの情報や要件を入力するだけで、「サイトマップ作成」→「ワイヤーフレーム作成」→「スタイルガイド作成」→「デザイン作成」まで一貫してAIが自動で生成してくれるツールです。サイト制作のプロセス全体を包括的に効率化できます。

生成されたデザインはFigma形式で書き出しができるため、デザイナーによる編集も可能です。たとえば、ディレクターがRelumeを使ってワイヤーフレームやデザインの叩き台を作成し、Figmaファイル形式でデザイナーに共有すれば、意図や目的の齟齬を減らし、サイト制作業務を効率化できます。

② v0

公式サイト：https://v0.dev/

V0は、Vercel Labsが提供するAIプロトタイピングツールです。自然言語で指示するだけで、モダンなUIコンポーネントを自動で生成してくれます。

リアルタイムプレビュー機能で、修正や変更内容をすぐに確認できるため、手軽にプロトタイプを作成できます。さらに、修正したいUIコンポーネントを選択し、自然言語で直接修正を指示することも可能です。作成したデザインはそのまま公開することもできますが、バックエンド機能は別途構築する必要があります。

③ Bolt.new

公式サイト：https://bolt.new/

Bolt.newは、AIを活用し、ブラウザ上でフロントエンドからバックエンドまでフルスタックのWebアプリケーションを開発できるツールです。自然言語で指示するだけでコードが生成され、ワンクリックで公開まで行えます。

v0と同様、修正したいUIコンポーネントを選択すれば、レイアウトから細かい部分まで自然言語で直接修正できるのが特徴です。

④ Framer Wireframer

公式サイト：https://www.framer.com/wireframer/

Wireframerは、ノーコードWebサイト作成プラットフォーム「Framer」の機能の一つです。自然言語で指示し、「Personal Page」や「Landing Page」といった形式を指定するだけで、Framer上にワイヤーフレームを自動で生成してくれます。

生成されたワイヤーフレームは、AIに自然言語で修正指示を出すことでリアルタイムに調整できます。レイアウトの構造をゼロから手動で構築する手間と時間を削減できるため、Framerを使ってサイト制作を行う際には、ワイヤーフレーム制作からデザインまで一気通貫で行うことができます。

⑤ Figma Make

公式サイト：https://www.figma.com/ja-jp/make/

Figma Makeは、2025年に発表されたFigmaの新しいAI機能で、自然言語でReactコードベースのUIを作成できます。

v0やBolt.newと同様、修正したいUIコンポーネントを選択し、自然言語で指示すれば、レイアウトから細かい部分まで直接修正できます。また、リアルタイムでプレビューを確認することも可能です。

既存のFigmaフレームをインポートできるため、すでに作成済みのUIをAIでブラッシュアップしたり、フロントエンドの実装を自動化したりといった使い方もできます。さらに、簡単にバックエンドを構築できるSupabaseとの連携も近日中に予定されており、より実用的な活用が期待されます。

注意点として、現状ではFigma Makeで作成したデザインを直接Figmaのデザインファイルとして編集することはできません。Figmaファイルで編集したい場合には、一度HTMLファイルを介し、「Html to Figma」のようなプラグインを使ってファイルを変換する必要があります。

Figma Makeで生成したデザイン

3.デザイン〜コード生成に利用できるAIツール

① Cursor

公式サイト：https://cursor.com/ja

Cursorは、多くの開発者に支持される「VS Code」をベースにしたAIコードエディタです。エディタ内にClaudeやGeminiなど複数のAIモデルが搭載されており、シーンや規模に応じて使い分けられます。

これまで、デザイナーがFigmaで作成したデザインをWebサイトやアプリとして実装するには、エンジニアへの依頼が必要でした。しかし、Cursorを使えば、デザイナー自身がAIを活用し、自然言語の指示だけで簡易なプロトタイプを作成できるようになりつつあります。

将来的には、デザイナーがソースコードをベースにプロダクトをデザインする可能性もありそうです。

② Kiro

公式サイト：https://kiro.dev/

Kiroは、2025年1月にAmazon Web Services（AWS）がプレビュー版として公開した、AI搭載のエディタです。Cursorと同様に「VS Code」をベースとしていますが、AIがプロジェクトマネージャーや設計者のように振る舞い、開発プロセス全体を主導するという思想で作られています。

Kiroは、「○○を作って」といった曖昧な指示（Vibe）に対して、いきなりコードを書き始めることはありません。まずAIとの対話を通じて、以下の3つのドキュメント（仕様書）を自動生成します。

1. requirements.md（要件定義書）：「何を」作るのか、ユーザー視点での機能や目的を定義。

2. design.md（設計書）：「どのように」作るのか、技術的な構成やデータの流れ、API設計などを定義。

3. tasks.md（タスクリスト）：上記のドキュメントを基に、実装に必要なタスクを細分化し、実行計画を作成。

このように、あらかじめMarkdownファイルで仕様をまとめることで、AIはこれらの仕様書を横断的に確認し、プロジェクトの目標と文脈を深く理解しながらコードを書き進めます。そのため、より高品質で意図に沿ったアウトプットが期待できます。

現在（2025年1月時点）、Kiroは初期のプレビュー版の提供を終了しており、公式サイトから順番待ちリストへ登録することで、利用可能になった際の通知を受け取ることができます。

【実践編】AI×ノーコードを活用したLP制作フローの一例

最後に、実際に弊社で実践しているLPの制作フローを一例として紹介します。単純作業をAIで効率化しつつ、デザイナーがより本質的な作業に集中できることを目指しています。

以下は流れの一覧です

1. NotebookLMでワイヤーフレーム指示書(プロンプト)を作成

2. Figma Makeでワイヤーフレームを作成

3. コードをHTML形式に変換しFigmaファイルで編集

4. Figmaでデザイナーがデザイン

5. プラグインを使用し、StudioやFramerにインポートし実装・公開

AIで生成したデザインをそのまま公開できるのが理想ではありますが、現時点ではデザイン品質は低いため、主に設計フェーズでAIを活用し、デザインや実装はノーコードツールを活用するというワークフローを弊社ではよく採用します。将来的にはAIツールの進化に伴い、ワークフローもアップデートしていくことを前提としています。

※具体的な内容はサンプルです。

1. NotebookLMでワイヤーフレーム指示書(プロンプト)を作成

まず、ワイヤーフレームをAIに作成してもらうための「指示書（プロンプト）」を作成します。議事録や競合情報などをNotebookLMに読み込ませ、AIとの対話を通じてLPのコンセプト、構成、キャッチコピーを固めます。

2.Figma Makeでワイヤーフレームを作成

完成した指示書をFigma Makeに渡し、Reactコードで構成されたワイヤーフレームを迅速に生成し、デザイナーが自然言語で調整を行い、ワイヤーフレームを制作します。

最終的にFigmaで編集するため、制作したワイヤーフレームはHTML形式で出力してもらいます。

3.ワイヤーフレームをデザイナーが最終調整

Figmaのhtml.to.designプラグインを使用し、AIが生成したHTML/CSSをFigma上にインポートし、デザイナーが生成したワイヤーフレームの最終調整を行います。

4.デザイナーがデザイン制作

現在、AIが生成するWebサイトのデザインクオリティはまだ低いため、ワイヤーフレームをデザイナーに引き継ぎ、デザインを制作します。将来的には、AIがデザインの叩き台を制作できるようになれば、より効率的に制作を進められるでしょう。

5.プラグインを活用しながら、ノーコードツールで実装

最後に、完成したFigmaデザインをプラグインを活用してStudioやFramerといったノーコードツールにインポートします。最後にノーコードツール上でデザイン調整とレスポンシブ対応などを行い、そのまま公開します。

似た方法により、スマホアプリやプロダクトのプロトタイピングも効率化が期待できます。

将来的にデザイナーの仕事はどうなるのか？

ここまでデザインプロセスに活用できるAIツールを紹介してきました。現時点ではAIを活用できる業務はまだ限定的ですが、時間の問題でAIを活用できる領域は今後さらに広がっていくでしょう。

AI技術の進化は、デザイナーの働き方を大きく変える可能性があります。特に、表層的なデザインなどAIが得意とする単純作業は効率化が進み、デザイナーの業務はより戦略的な領域へとシフトしていくはずです。

そんな時代に求められるのは、ビジネスに貢献できるデザイナーです。単に見た目を整えるだけでなく、企画や要件定義といったビジネスの上流工程から関わり、事業の成果に直結するデザインを生み出す力が重要になります。

また、AIによって業務の垣根が低くなり、デザイナーがエンジニアやプロダクトマネージャーの領域に踏み込む（その逆も然り）など、専門領域は曖昧になっていくことが予想されます。このような時代には、AIをフル活用しながら新しい領域にも積極的に越境していくデザイナーが、より活躍の幅を広げていくでしょう。

詳しくは、弊社の代表の菊池が執筆したnote記事にて、AI時代に求められるデザイナー像やデザインコンサルティングファームとしての今後の方針を紹介しています。ぜひ合わせてご覧ください。

参考記事：AI時代のデザイナーの在り方

まとめ

本記事では、AIをデザインプロセスに導入するメリット・デメリットから、ツールの選定方法、そして複数のAIを連携させた具体的な制作フローまでを解説しました。

AIは、もはや単なる作業効率化ツールではなく、リサーチ、情報設計、デザイン、実装といった制作プロセス全体を再構築し、私たち人間がより本質的で創造的な判断に集中するための強力な「パートナー」です。

もちろん、現時点のAIのアウトプットには限界があり、最終的なアウトプットの責任は人間にあります。しかし、本記事で紹介したようなワークフローのように、その特性を正しく理解し、その時の環境に合わせて適切なツールを選び積極的に活用することで、デザイン業務の生産性を向上させることが可能です。

AIは進化が早くどんどん新たなツールが出てくるため、キャッチアップが大変ですが、ぜひ積極的に活用してみてください。