SEN PRODUCT BLOG

千株式会社のエンジニアによるブログ

【プロンプトで差をつけろ!】生成AI×UIデザイン勉強会をやってみた

こんにちは!ICTチームのデザイナー、moco(@moco_megane)です。

みなさんは生成AIをUIデザインに活用できていますか?

私は日々濁流のように流れてくる最新情報をキャッチアップしつつ、どうワークフローの中に組み込むかを試行錯誤している最中です。

とはいえ、ツールや手段があまりに多すぎて、一人でのキャッチアップには限界があります。

すでにエンジニアやPdMはなんだかいい感じに使いこなしているのに、このままではデザイナーがボトルネックになってしまう…!

そんな危機感から、まずはデザイナーメンバーがさまざまなツールに触れて感覚を掴むこと、そしてデザイナー以外の人がデザインに興味を持ち、デザイナーと連携しやすくなることを目標に社内勉強会を開催しました🪄

参加者の半数以上がデザイナー以外の人!

当日の参加者は15名。内訳は以下の通りです。

  • デザイナー:4名
  • エンジニア:5名
  • それ以外(PdM、カスタマーサポート、人事、広報etc):6名

社内Slackで募集したところ、デザイナー以外の人にも興味を持ってもらえて嬉しい限りでした!

Slackで参加者募集

開始前のみなさんの激アツな意気込み

部署や職能を垣根を越えて学び合えるのが、千のいいところだと思います🤝

全体の流れ

勉強会はこちらのスライドを元に進めました。

speakerdeck.com

タイムスケジュールはこちら。

タイムスケジュール

前半で知識を身につけて、後半はその知識を早速活かせるようなワークとしました。

1:ツールの紹介とデモ

最新のAIツールを実演形式で紹介しました。

ツールの種類はざっくり3つに分類。

ツールの種類

Stitchやv0も画像からUIに変換できるじゃん!等、ややMECEじゃない分類になっていますが、とっつきやすくするためです。許してください😇

いずれも「名前は知っていたが使うのは初めて」という参加者が多かったので、デモを見ながらカメラ越しに驚く姿を複数確認しました!

v0のデモの様子

それぞれのツールの説明は、冒頭のスライドに入っているのでぜひ見てみてください。

2:ミニワーク「テーマ:○○のお役立ちアプリ」

さて、ツールの特徴や使い方は理解できたところで実際に手を動かします!

スライド資料は事前に展開していましたが、ワークのテーマは当日に発表。

気になるお題は…………

宇宙旅行のお役立ちアプリでした🚀

おそらく今のところ世界に存在しない(あっても一般には公開されていない…!?)ということで、ユーザーのニーズや課題をどう捉え、どうデザインで解決するかが試されます。

また、トンマナも社内で普段作るデザインとは全く異なって面白いはず!と考え、このテーマにしました。

3:アウトプット発表

20分という限られた時間で、しかも初めて使うツールを駆使してのデザイン作業。

みなさんの真剣な眼差しが画面を行き来するのを見ながら、「時間足りるかな?無茶振りだったかも…」と心配していましたが……最終的には私の予想を遥かに超えるアウトプットたちが一堂に会しました!!

アウトプット発表エリア

  • ツールと壁打ちしながらデザインをブラッシュアップしていく方法
  • 先に別のツールで要件を固めてからデザインを生成する方法
  • 複数のツールを同時に走らせてアウトプットを比較・取捨選択する方法

などなど、自分のやったことがない方法をお互いに共有できて、とても勉強になりました。

ツールごとの傾向も掴むことができ「これはClaudeみがあるね」などのやりとりが繰り広げられました。


すばらしいアウトプットが集まりましたが、その中の一部を紹介します!

(PdM)Sさんの「子ども向けトレーニングアプリ」
(エンジニア)Sさんの「宇宙での生活・安全情報などが確認できるアプリ」
(デザイナー)Kさんの「宇宙旅行をトータルにサポートするアプリ」

うーん、どれもクリエイティビティが爆発していますね…!今後のコラボレーションがますます楽しみになりました!

4:ふりかえり・アンケート

最後にKPTのフレームワークでふりかえりを行い、終了後にはアンケートを実施しました。

アンケート結果

🎤今回の勉強会の内容は、あなたの期待に沿っていましたか?

期待以上・期待通りが100%!

🎤(デザイナー向け)生成AIツールへの抵抗感はなくなりましたか?

ある程度なくなったが100%!

🎤(非デザイナー向け)今回の勉強会を通して、UIデザインに興味が湧きましたか?

とても興味が湧いた・少し興味が湧いたが100%!

もらった感想たち

  • AIとアイデアを壁打ちするとか、プロンプトをAIに書いてもらうとか、自分では思いつかなかったAIの使い方を知れてとても勉強になりました。これは、デザイン生成以外にも役立つことだと思うので今後試してみたい

  • 1人だったら後回しにしてしまっていたと思うのでみんなでできる機会がありがたかったです!

  • 「デザインはデザイナーさんしか作れない!」の意識を捨てて、もっと歩み寄っていきたいなと思いました!エンジニアでも叩き台作れる時代ですし、丸投げするのではなくてコミュニケーションとって一緒にやっていけると良いですよね〜! 

  • なんでも生成AIで作成していたらプロダクトごとデザインが変わってしまうので統一性がなくなる…?
最終的にはしっかり管理してくれるデザイナーさんが絶対必要!

  • 基礎がなってない状態でAI慣れするのは怖いとやっぱり思ってしまう。正しいのか悪いのか判断できなさそう。

生成AIを活用することで、デザイナー以外の人でもたたきを早く作れたり、デザイナーとのコミュニケーションがよりスムーズにとれたりするのは利点ですね。

一方で、デザインの専門知識がない状態で良し悪しを見極めたり、プロダクト全体を俯瞰したりするのは難しそう。こういう部分にこそデザイナーの専門性を発揮していきたいですね。

学びを深め続けたい

部署を跨いでの勉強会の主催は初めてだったのでそれなりに緊張しました。 が、多くの人に「期待通り」「期待以上」と言ってもらえてとても嬉しかったです。

生成AIツールが主題ではありましたが、UIデザインの難しさ・それゆえの面白さを何より自分が実感できたなと思います。

義務感で情報をキャッチアップし続けるのは、なかなか厳しいものがあります。

「どうしたら“遊び”の要素を取り入れられるか?」を考えながら、引き続きデザイナー発信でもりもり学びを深めていきたいです💪


ちなみにスライドはFigmaで作成しました。

もし「うちでも同じ内容でやってみたい!」という会社さんがあればデータを提供します。

お気軽にお声がけください〜!


この記事を読んで、千のプロダクトデザインやデザインシステムに興味を持っていただけた方はぜひお気軽にカジュアル面談いたしましょう!

お待ちしてます👋