デザイン・アシスタントとしてのAI

2025年9月5日 Kaz Motoyama / @kudakurage

デザイン・アシスタントとしてのAI

こんにちは、Spinnersの元山@kudakurageです。

生成AIの活用について謳われ始めて、もうだいぶ月日が経ってきました。

ソフトウェア開発業界では特にエンジニアリング分野での生成AI活用が非常に活発ですね。単なるコードの生成というところにとどまらず、その精度をどう上げていくか、メンテナンス可能・持続可能なやり方の模索など、より実戦投入可能な方法を日々模索しているという感じでしょうか。

エンジニアとデザイナーという多職種間での連携においても、デザインシステムやMCPサーバとの連携などを通じて、より正確で実践的なフロントエンドコードの生成が行われつつあるというのが現状かなと感じます。

コード生成という分野ではビジネス的にもうまく回り始めていると感じる生成AIの活用ですが、それ以外の分野に関してはまだまだ模索段階という感じもします。

私の主な業務領域でもあるデザインという分野においても、生成AIの活用は個々人の模索段階といった印象です。

特にソフトウェア・デザインの目に見えてわかりやすい業務であるインターフェース・デザイン。 この分野でも生成AIを活用する方法やツールなど模索されていますが、正直現状はまねごとレベルといった印象です。

これは学習リソースの圧倒的な不足や生成における文脈情報の欠如といったことが主な原因とも考えられるので、数年後には改善されていくだろうとも期待できます。

今回は現時点で私が活用している生成AIの例の一部を書いておこうと思います。

INDEX

調査・書き起こし・分析・アイディア出し

Deep Researchで素早く市場把握

サービスの改善や新規サービス・機能の検討などなどで、競合の調査や市場調査を軽く行うことはよくあると思いますが、その際には ChatGPTやGoogle GeminiのDeep Research を使って最初の取っ掛かりを作るというのが良いですね。

調査のためにDeep Researchを利用するというのは前々から使っているという方も多いと思いますが、それにまつわる機能も日々アップデートされていっているので、1年前と比べればさらに良くなっているように思います。

NotebookLMに壁当て・専門知識を相談

そういった調査内容やユーザーからのインタビュー内容の分析には NotebookLM が機能しています。 Deep Researchの内容をソースとして追加しておけば、業界や競合分析などに活用できます。

またインタビューで聞き取ってAIで書き起こしたドキュメントなどをソースとして追加しておけば、新規サービスのアイディア出しやサービス改善を考える際の壁当てとして非常に有能なユーザーモデルを持つこともできるでしょう。

※ただし、利用にはプライバシー情報への注意やセキュリティのリスク、業務利用における社内規定に応じた使い方などに必ず注意を払う必要があります

ざっくりと概要を掴みたいという場合には、音声概要や動画解説(つい最近になって日本語でも利用できるようになった)も非常に有用ですね。

試しに私の大好きなコメダ珈琲の事業概要と成長戦略についてDeep Researchしてもらって、NotebookLMで動画解説してもらいましたので、参考までに貼っておきます。

NotebookLMも結構な頻度でアップデートがあるので面白いですね。 動画解説機能の日本語対応もつい最近ですが、音声概要のバリエーションや長さを選べる機能も最近追加されています。

「概要」形式で音声解説
「詳細」形式で音声解説

これらの調査・分析を元にアイディア出しにも生成AIを活用します。

と言っても、直接有用なアイディアを出してもらうというよりは、 壁当てやアイディア出しの雑談、取っ掛かりを掴むために利用する(アイディア出しのためのアイディア出し) という方が正しいです。

自分一人で悶々と考えていても新しい発想は出てこないことが多いですから、新しい発想や突飛な文脈との結びつきを創造するためのきっかけ作りとして生成AIを活用しています。

またNotebookLMは自分の知らない特定のドメイン知識をソースとして大量に渡しておき、逐次聞いたり相談相手になってもらうというツールとしても有効ですね。

例えば、詳細なガイドラインとして定められているドキュメントや法律などの難しい分野の内容をNotebookLMにソースとして渡しておき、わからないことを逐次聞いたり相談したりというのは有効な手段だと感じます。

画像の生成・下書き・編集

私の場合、いわゆるサービスデザインの上流工程から下流工程まで幅広い業務範囲を必要に応じてサポートするという仕事をしています。

先程書いた調査・分析を行うことや、そこから体験設計を考えたり、それを実際のカタチに落とし込んでみるということなど、チームに足りていない部分を広範囲にカバーするというのが私の得意なスタイルです。

生成画像はデモ・イメージ画像として活用

最初にも書いた通り、現状インターフェース・デザインにはなかなか活用しづらい生成AIですが、いわゆるグラフィックの生成には大いに活用しています。

例えば、Webサイトやサービス内で使用する画像のサンプルの作成にはぴったりですね。

そのまま本番使用するわけにはいきませんが、ざっくりこんなイメージにしたいという仮のイメージをAIに作ってもらって、それをベースに検討・本画像の参考にするというのには非常に有効で活用しています。

生成イラストでアイディアをもらいつつ下書きとして利用

Whiskを使ったイラストの下書き生成

またWebサイトやサービス内で使用するイラストの作成にも生成AIの力を借りています。

単純にどんな感じのイラストにするのが良いか?というアイディア出しの部分はもちろん、それを実際にどんな感じで表現するのが良さそうかというのもAIに描いてもらって参考にしています。

ここでも、生成した画像をそのまま使用すると言うよりは、 生成した画像を下書きとして 改めて自分でイラストを書き起こすという使い方が良いです。

その際に私がよく利用しているサービスはGoogle Labs.が提供している Whisk という画像生成サービスです。

Whiskではテキストプロンプトとともに、画像の主体となる「モデル」、その「背景」、画像全体のタッチや雰囲気を決める「スタイル」を参照画像として渡すことができます。

Webサイトやサービス全体で一貫したトーンのイラストを使いたい場合には「スタイル」の参照画像を使うと良いです。

もちろん思った通りの完璧なイラストを生成するというのは難しいかもしれませんが、下書きとしては十分なイラスト画像を生成してくれます。

NanoBananaで同じスタイルのイラストを生成

先程のやり方はアイディア出しの部分も含めて生成AIを活用するという文脈がありましたが、どんな感じのイラストにしたいのかという明確なイメージがあって、その元となる画像もあるという場合にはGoogleの Nano Banana (Gemini 2.5 Flash Image) がワークします。

参照画像のイメージ・コンテキストを細部まで保ったままプロンプトにあわせた画像を生成するので、新規で新しく生成するというよりも、元となる画像をベースに編集したり、改変するというイメージのほうが近いと思います。

Whiskではなかなか理想的な画像は生成できませんでしたが、Nano Bananaであればイメージに近いイラストを生成して本使用するというのもかなりできる印象です。

イラストをスタイルを保ったまま編集1 イラストをスタイルを保ったまま編集2

今回のようなシンプルなイラストであれば、生成した画像をIllustratorなどでベクター化して使っていくとかもできそうです。

ちょっとした生成AI編集はAdobe Fireflyが便利

Adobe Firefly

自分で撮影した写真や生成したイラストの編集という部分でも生成AIが活用できます。

画像生成AIは大手のAIモデルで提供されているものだけでなく、ComfyUIなどを用いてかなりいろんなAIモデルをローカルマシンで試したりしています。

それぞれに良し悪しはありますが、Adobeが提供しているAI機能は精度が良い以上にツールとしての使いやすさがやはり一番良いですね。

Adobe製品を普段から使っている人にとってはかなり強力な機能になると言えると思います。

Fireflyは細かく画像を修正するのに便利

よく使うAdobeの生成AI塗りつぶしは、選択範囲をいい感じに塗りつぶして補完したり、意図した別物に変えるといったことが細かくやりやすいので便利ですね。

(数年前から提供され始めていたAdobe Fireflyですが、画像編集だけにとどまらず動画や音声など最近ではかなり使えるツールが増えてきている印象です)

オリジナルグッズの製品化イメージを生成する

また、画像の編集という意味では最近リリースされたGoogleの Nano Banana (Gemini 2.5 Flash Image) もかなり有用ですね。

参照画像の基本的なイメージ(コンテキスト)を保ったまま一部を変更するといったことが非常に得意で、意図通りの編集・変更というのができやすいというイメージです。

例えば、2枚の画像を用意してそれを組み合わせた画像(合成画像)を作りたいと思ったとき、多くの生成AIツールでは画像を一度抽象的に解釈したうえで画像を生成しているようなところがあります。

そのため、参照画像の詳細なイメージをそのまま当てはめてくれないところがあります。

生成AIで合成画像を作成する

生成AIで合成画像のいまいちな例 ↑イラストを正確に反映していない

その点、Googleの Nano Banana (Gemini 2.5 Flash Image) では参照画像のイメージ・コンテキストを細部まで保ったまま新たな画像を生成してくれるので、再現度が高く生成されて良いです。

これにより、例えば新しい商品デザインのイメージといった画像がかなり作りやすいですね。

Nano Bananaでオリジナルグッズの製品化イメージを生成 ↑イラストが正確に反映されている

インタラクションやサービスのプロトタイピング

プロトタイピングへの生成AI活用はコード生成の文脈ではありますが、サービスデザインなどの体験をデザインしていく過程において効率よくエンパワーメントしてくれるツールですね。

インターフェースにおける細かなインタラクション表現のプロトタイピングから、ちょっとした機能・サービスのデモ・テスト用のプロトタイピングまで、目に見えて触れるカタチに落とし込むという部分でやはり強力に機能してくれますね。

私自身これまでも過去に 様々なプロトタイピング方法 を試してきました。

簡単な動作イメージのデモから実際にコードを書いて簡易的に動くプロトタイプまで様々作ってきましたが、プロダクトレベルの品質のプロトタイプがすぐに簡単に生成されるというはかなり強力ですね。

プロトタイプの作り方はいろいろです。

エンジニアなら Claude CodeGoogle AI Studio を用いてガッツリコード生成というやり方もあるでしょうし、デザイナーでもっとライトにという方なら Figma Make を利用して、Figmaのデザインデータも活用しながら実際に動くデモ用プロトタイプを作るというのもいいでしょう。

Figma MakeならFigmaを使っている文脈で気軽に使えて、そのままWebにPublishして触ってもらうというのも簡単にできるので便利ですね。

世界の時差を確認するアプリ

いろんな国の人と仕事していると「あの国だと今何時だろ?」とか「みんなが都合の良さそうなMTG時間いつがいいかな?」とかざっと並べて各国の時間を見たいことが多々あるので作ったアプリです。 こんな感じのアプリっていうのをイメージできるモノをサクッと作れるのは便利。

World Clock - Migrantory 世界の時差を確認するアプリ

落ちてくる動物たちを避け続けるゲーム

ゲームは「本当に面白いのか?」みたいなのをプリミティブなところから検証するのが大事だったりするので、サクッとプロトタイプできて簡単に試せると便利。

Dodge the Animals 落ちてくる動物たちを避け続けるゲーム

ドラッグ&ドロップ並び替えのデモ・イメージ

アプリやサービス内の細かいインタラクションのデモをサクッと作るのも便利。

ドラッグ&ドロップ並び替えのデモ ドラッグ&ドロップ並び替えのデモ・イメージ

AIはアシスタントとして利用する

全体を通して一つ重要なこととしては、「AIはアシスタントとして利用する」ということです。

現状はあくまで「アシスタント」という立場であり、メインの職を任せるというよりも補佐的な仕事をお願いするというのが、特に私のデザイン分野においてはあっているように思います。

また、デザイナーにかかわらずどのような職種・利用でも言えることだと思いますが、生成AIはあくまで助言や壁当てのようなものだと考えます。

AIによるアウトプットを鵜呑みにして進めるのではなく、ときにはファクトチェックをするなど、自分の作業や思考の取っ掛かりとして利用するというのが効率よく利用するポイントだと思います。

現状ではUIデザインという文脈ではまだまだ活用できていない生成AIですが、「アシスタントとして利用する」と考えればUIデザインという文脈でも十分に活用できています。

また以前書いた記事(AIとUIデザイン デザインツールの変遷〜Config2025〜その先)のように、UIデザインという文脈でもアシスタントとしてのAIができることはまだまだあるので、そのあたりはFigmaにも期待しつつ、自分としても模索してきたいですね。

こういった様々なツールを実際の業務に取り入れていくためにも、実際に触ったり、試したり、使い込んでみるというのは大事だと思うので、AIに限らず引き続き取り組んでいきたいと考えています。

Related Entries
designの記事一覧をみる
Latest Entries
すべての記事一覧をみる