デザインの現場でもAIを活用することが当たり前になりつつあり、新しいAIツールの登場によってプロセス自体が大きく変わりはじめています。
グッドパッチのUIデザイナーチームでは、AIをただ使うだけではなく、「AIとどう向き合うのか」「向き合った上でどう業務に生かすのか」を考える必要性を感じていました。
そこで私たちは、AI活用の知見をチーム全体で共有・蓄積するために「はとゆさラボ」をスタート。さらにラボで高い関心を集めたテーマは、実際の業務に落とし込む「UI×AI業務実装検証」にもつなげています。本記事では、この取り組みから見えてきたことや具体的な実践事例を紹介します。
目次
「はとゆさラボ」とは？
「はとゆさラボ」は、グッドパッチのビジョンである 「ハートを揺さぶるデザインで世界を前進させる」 から着想を得て名付けられました。
“ハートを揺さぶる（＝はとゆさ）”と、AIを実験的に試す“ラボ”的な立ち位置を掛け合わせていて、メンバーがAIを活用または試してみた知見を共有していく場として生まれました。
AI活用で得た知見をシェア、ハートを揺さぶる新たなデザインにつなげる場
「はとゆさラボ」では、AIで効率化できる仕事と、人がじっくり時間をかけて磨くべき仕事を見極めながら、AIを“味方”にしていくことを目指しています。
ラボではメンバーが定期的に集まり、日々の業務で試したAI活用の事例やツールをLT形式で共有しています。肩肘張らずに「ちょっと試してみた」を持ち寄るのが特徴です。
はとゆさラボで共有する事例やチャレンジは「完璧な成功例」である必要はありません。むしろ、うまくいかなかった試みや、思わぬ偶然から得た発見を学びにしています。試行錯誤そのものをシェアすることで、チーム全体の学びが広がっていくからです。
こうした取り組みを続けてきたことで、メンバーのAIリテラシーは自然と底上げされ、同時に「AIとどう向き合うか」という考え方や価値観を語り合う貴重な時間にもなりました。ここからは、実際にはとゆさラボで共有されたAI活用の事例を少しだけ紹介していこうと思います。
はとゆさラボで共有されたAI活用事例
Figma Makeを活用したUIパターン生成
まずはUIパターンの洗い出しが必要な場面でFigma Makeを活用してみた事例です。出力例は粗さもありますが、どんな情報が表示されがちかを理解するには十分で、想定外のケースが広がるのも面白いポイント。最初から完璧を狙うというより、パターンを素早く洗い出して検討材料にできるのが利点だと感じました。
これをベースにしつつ、自分たちのプロジェクトに合わせたブラッシュアップを進めるのが現実的な活用方法になりそうです。
未経験領域の業務サービスを短期間で学習からラフデザイン提案までやってみた
プロジェクトで新しい業務サービス領域に取り組む際、「NotebookLM」と「ChatGPT」を組み合わせて資料を自動で読み込み、要点を抽出しました。従来は数日かかっていた情報整理を短時間でこなし、リサーチからラフデザイン提案まで一気に進めることができています。
複数サービスの情報も自動で整理・比較レポート化され、一定のフォーマットにまとめられるようになりました。まだアウトプットの精度や表現力には伸びしろがありますが、すでに実務で活用できるレベルに近づいています。
AIが提示する情報を基盤にデザイナーが解釈を加えることで、効率化だけでなくアウトプットの質も高まり、一歩先のデザイン検討と意思決定を実現しています。
2時間で0からLPのワイヤーフレームを作ってみた
精度の高さではなく、チームで認識を合わせるためのラフなワイヤーフレームを短時間で作ることに挑戦しました。まずはGeminiで要件整理を壁打ちし、その後に複数ツールにてワイヤーフレーム生成を検証しました。各ツールを使ってみた所感は以下の通り。
- v0：構成はプロンプト通りだが、グラフィック要素が多く論点がぶれやすい
- Figma Make：WFとして出力可能だが、Figma上で編集できない
- Relume：WFをFigmaにインポート可能。オートレイアウトも保持され編集しやすい
AIは要件整理や思考の可視化には大きく役立ちますが、用途に応じたツール選びと最終的な人の手による調整は、現状では不可欠であることを実感しました。
AIブラインドネスに気をつけよう
AI活用にも「バナーブラインドネス（※）」に似た現象があると感じています。皆さんも「これ、AIが作ったっぽいな……」と感じた経験は一度はあるのでは。
※バナーブラインドネス…ユーザーが広告などのバナーを意識せず無視してしまう心理的現象
AIの出力をそのまま渡すと「自分で考えてない」と思われ、正確さより“どう見えるか”が大事になる場面も多いです。実際のプロジェクトでは、AIに実行プロセスの壁打ちや改善案のパターン出しを任せつつ、UI/UXのフィードバックや提案のまとめは人間が実施しました（案件でのAI活用は、クライアントとの合意の下に実施しています）。
目指すのは早く・正確で・信頼できるアウトプット。そして「ちゃんと向き合ってくれた」という人間味です。重要なのはAIを含めたアウトプットをどう体験設計し、クライアントやユーザーと信頼関係を築けるか。自分がどこで手を動かすべきかを意識して使うことが鍵になります。
実験から業務実装へ。UI×AIで「ハートを揺さぶるデザイン」を目指す
先ほども紹介しましたが、はとゆさラボで共有されたテーマの中から、特に需要や関心が高いテーマについては、「業務実装検証」として、実業務で使える状態まで精度を高める取り組みを進めています。
業務実装は、以下のようなステップで進めています。
- 実際の業務フローをアウトプットベースで細かく可視化し、AIで置き換えられる業務を検討
- はとゆさラボで関心の高かったLTからテーマを選定
- AIツールを使って、実際の業務に適用できるか検証
- 業務利用時のセキュリティリスクやコスト面での懸念点を調査
- 精度や成果物の品質を検証・改善
- 実務での活用を前提にナレッジとして蓄積
このプロセスを通じて、単なる実験で終わらせず、 実際の業務で使えるAI活用手法を確立することができました。
一例ですがデザインレビューのプロセスを、AIを活用して一部自動化できるようになりました。
デザイン原則をAIに読み込ませ、そこを基準に画面をチェックできる仕組みをつくりました。「一貫性が保たれているか」「ユーザーが状況を理解しやすいか」といった観点でAIが指摘を返してくれます。
従来はデザイナーが経験や知識を基にレビューしていた内容を、AIが同じ観点で補助的に担ってくれるため、レビューの抜け漏れを防ぐだけでなく、非デザイナーでもスピーディにデザイン改善のヒントを得られるようになりました。結果として、チーム全体でデザインを共通言語として扱いやすくなり、議論や改善のスピードが大きく高まっています。
とはいえ、全ての検証がうまくいったわけではありません。例えば、バナー生成など細かな構成の調整や情報の強弱の選定については、現在のAIツールの技術では再現性が難しいことから、業務実装を見送ったものもありました。
このように成功と失敗の両方を積み重ねながら、AIを業務にどう生かせるかを模索していくこと自体が「はとゆさラボ」の価値であり、これからのデザインの可能性を広げる第一歩になると考えています。
はとゆさラボの今後の展望
はとゆさラボでは単なるツールや業務効率化の検証と合わせて、「AIとどう向き合うか」という根本的な問いも議論されています。
- 人間ならではの創造性とAIの有用性をどう組み合わせるか
- AIが生み出したアウトプットをどう評価し、生かすか
こうした対話を通じて、メンバー一人ひとりがAI導入の考え方を整理でき、結果として 「知識共有の場」かつ「AI文化を育む場」 となっています。
UIデザイナーチームでは、グッドパッチ社外取締役でもある広木大地さんが提案するAI活用レベルを参考に、AIを業務に取り入れ、メンバーのレベルアップを目指しており、今後は、メンバーがAIに触れる機会を意識的につくり出すこと、社内ナレッジをAIに接続し必要な知識を即時に引き出せる仕組みを整えることで、日々の仕事を効率化していくことをゴールに活動を続けていきます。
成功や失敗を問わず試した知見を共有しながら、チーム全体でAI活用の解像度を高め、より「ハートを揺さぶるデザイン」に近づけるよう挑戦を続けていきたいと思います。
AI活用に興味のあるデザイナーの方、はとゆさラボで一緒にデザインの可能性を広げていきませんか？
UIデザイナーの募集要項はこちら
グッドパッチのデザイナーとPdMが、AIを業務に取り入れるプロセスや活用事例をお話しするオンラインイベントも開催します。AIスキルを高めたいデザイナーの皆さん、ぜひご参加ください！
イベントお申し込みはこちら
