エンジニアとデザイナーって近いの？遠いの？
そんな問いから生まれた、お互いの領域に関心のあるエンジニアとデザイナーのためのイベントを、エンジニア向けの勉強会を日々開催するYUMEMI.growさんと一緒に企画・開催しています。
今回はエンジニアとデザイナーのオフ会 vol.6「UIデザインの再発明〜ウチは生成AIしか使わないから〜」を開催しました。
イベントページ：https://yumemi.connpass.com/event/353473/
これまで下記のようなイベントを経て、6度目の開催となります。
- vol.1 へっぽこUIハッカソン
- vol.2 デザイナーとエンジニアのぶっちゃけNight
- vol.3 デザイナーとエンジニアの語りあわNight!
- vol.4 デザイナーとエンジニアのハロウィントークNight！
- vol.5 この1年はどうだった！？デザイナーとエンジニアの全力振り返りNight！
前回のオフラインイベントの様子はこちら：https://sun-asterisk.com/service/development/culture/event20250314/
目次
「生成AIはどこまでイメージ通りにアプリデザインをしてくれるのか？」からはじまったイベント企画
生成AIを取り巻く環境は毎日のように変化しています。情報をキャッチアップすることだけでも、正直いっぱいいっぱいという方もいるはず。
そんな生成AIは、私たちエンジニア・デザイナーの業務の仕方を大きく変えつつあります。
AIと共創する開発手法へと変わりつつある今だからこそ、まずは生成AIの“現在地”をきちんと知ることが大事だと感じています。
そこで今回は生成AIだけを使用して、どれだけ要求・要件に沿ったアウトプットをつくれるのか、参加者の方々の知恵と工夫を持ち寄りながら実際にひとつのアプリのデザインに挑戦するイベントを企画しました！
イベント概要〜少し変わったアプリをデザインしてみる〜
皆さんは「デザイナーがデザインツールでUIデザインをしない未来」を考えたことはありますか？
それは、生成AIを動かすための「ことば（=プロンプト）」です。（知ってるよ！というツッコミが聞こえてきそうですね）
今回、ある架空のクライアントから持ち込まれた、ちょっと風変わりなアプリの制作依頼に対し、参加者で結成されたチームで社内コンペに参加する設定でイベントを設計しました。
今回のお題はユニークなものばかり！各チームで好きなお題を選択し、その要求・要件を満たしたデザインを生成AIを使って出力してもらいました。
今回提示したお題は、こちらの個性溢れる4つです！
A 「言い間違い」コレクションアプリ
B ペット本人が選ぶペット保険アプリ
C 怒りをラップに変換するアプリ
D 「頭の中にいる人」交流アプリ
また今回使用できる生成AIツールには「Figma AI」「v0」「Claude」「create」「bolt」をセレクトしました。
仕様が変わる!?生成AIをつかったデザインワーク
各チーム取り組むお題や、使用するツールが決まったところで、いよいよワークの開始です。
参加チームの進め方はさまざまで、静かにAIとの対話を重ねながら試行錯誤するチームもあれば、熱い議論を交わしながら方向性を模索するチームも。ツールの使い方ひとつ取ってもアプローチは多様で、イベント企画チームも興味深い発見の連続でした。
そんな中、「そろそろ完成のイメージが見えてきたかな…」というタイミングで、まさかの仕様変更アナウンスが。
会場には「えっ！？」とざわめく声が広がります。
そう、今回の企画のポイントは、”突然の仕様変更にも AI で作ったデザインは対応できますか”というもの。実際のデザイン業務でもよくある “予期せぬ自体”があらかじめ仕込まれていたのです。
新たに課された条件は、
「ライトモードとダークモードを切り替え可能にしてください」
「想定ユーザーを変更してください」
「toC向けアプリを、toB向けアプリとして再設計してください」
など、デザインする前に先に知っておきたかった！という内容ばかりでした。
そのため各チーム、想定していたユーザー体験やデザイン方針を見直さなければならず、どのチームも頭を抱える場面もありました。それでも諦めず、それぞれが最善を尽くしたアウトプットを仕上げてくれました。
成果物の発表
生成AIでの出力とフィードバックを繰り返した約90分間の中で、各チームとても完成度の高いプロンプトを作成してくださいました。提出していただいたプロンプトを生成AIで出力して、発表スタートです！
ここでは、その中から厳選した出力結果を皆さんにご紹介します。
「ち。」チーム
使用ツール：Figma AI
「ち。」チームは「言い間違い」コレクションアプリをテーマに、人間の“うっかり”が愛おしい文化を広めるアプリとして、“愛すべき言い間違い”を記録・共有・再発見するコンセプトでUIデザインに取り組みました。
シンプルな構成で必要な情報が明確に配置されていますね！アイコンとテキストのバランスも良く、視認性が高いです。
カード形式でコンテンツが整理されており、ユーザーが情報を素早く把握できるよう工夫されています。
「ち。」チーム参加者、ayato（株式会社Sun Asterisk）のコメント
「初対面の4人チームで協力し、限られた時間の中で試行錯誤を重ねながら、仕様に沿ってプロンプトを作成しました。発表ではFigma Makeで生成結果を確認し、アプリの骨組みは意図通りだったものの、見た目の表現には悔しさが残りました。デザインツールに頼らず、プロンプト作成に注力する点が、新しい開発の在り方やその糸口を経験できたと感じています！」
そして、その他のチームが作成した出力結果もご紹介します。
「牛丼Z」チーム
使用ツール：Figma AI
「牛丼Z」チームのテーマは、「頭の中にいる人」交流アプリ。他ユーザーの脳内メンバーとも交流し、多様な内面との出会いを楽しめるというコンセプトでデザインを進めました。
この後登場する「origami」と同じテーマでありながらも、複数の異なるアプローチを試みた点が特徴的です。
マイアバターを新規作成
対話システム、みんなの内面アバター
「origami」チーム
使用ツール：V0
「origami」もまた、「頭の中にいる人」交流アプリをテーマにデザインに挑戦しました。そのデザインは、その名の通り「折り紙」を思わせるようなシャープで洗練された印象を受けました。
クリーンな背景に要素が整然と配置されています。ミニマルながらも情報が際立つデザインです。アニメーションも実装されており、生成AIの可能性を改めて実感しました。
カード形式で各要素が美しく配置されています。余白の使い方が巧みで、洗練された印象を与えます。
優勝したのはorigamiチームでした！審査員のゆめゆめさんから記念品が贈呈され、参加者はケータリングを楽しみながら、リラックスした雰囲気で発表を見守りました。
さらに、審査員の方々から愛の溢れるコメントが届いています！
審査員からの総評
ザッキーさん（株式会社Sun Asterisk）
ゆめゆめさん（株式会社ゆめみ）
最後に
第6回となる今回のイベントでは、「UIデザインの再発明〜ウチは生成AIしか使わないから〜」と題して、生成AIツールのみを活用したUIデザイン制作のワークショップを行いました。デザインツールを一切使わず、プロンプトだけでUIを作成するというユニークな課題に取り組む中で、突発的な仕様変更といった実務さながら（？）の場面に直面しつつも、どのチームも見事に乗り越えていきました。
エンジニアやデザイナーといった職種の垣根を越え、互いの視点を持ち寄ることで「自分たちが実現したいUIとは何か」を言語化しながら形にしていくプロセスは、非常に学びが多かったです。
完成したUIはいずれも個性豊かで、たった90分で作られたとは思えないほどの高いクオリティでした！
次回イベントも企画中
vol.7となる次回イベントを2025/9/3(水) 19:30 ~ @Sun*大手町オフィスで開催することが決定しました！イベント詳細やお申し込みについては近日中にconnpassで公開予定です。ぜひお見逃しなく。
イベント概要
テーマ：生成AIを活用したデザイン・エンジニア業務に関するLT大会！(仮)
日時：2024/9/3(水) 19:30 ~ 21:00
形式：オフライン＠Sun*大手町オフィス
connpass：近日公開予定