話題のFigma Makeを使った社内ハッカソンを開催しました！
エンジニアとデザイナーが一緒になって、わずか2時間でプロトタイプを作り上げる挑戦。そこで見えてきたのは、生成AIがもたらす新しい共創の可能性でした。

Figma Makeの登場により、デザインと開発が共通言語を持てるポテンシャルが見えてきた！

社内でも注目されていたFigma Makeの実用検証

Figma Makeは、自然言語でプロンプトを入力するだけで、UIデザインとコードを同時に生成してくれる革新的なツールです。（※詳しい機能については、Figma Makeファーストインプレッションnote記事でもご紹介しています）

開発×デザインで一気通貫するのが強みのスパイスファクトリーとしては、このツールがエンジニアとデザイナーの共通言語になる可能性に注目しました。

なぜ注目したのか？

• 自然言語でプロンプトを入力できるので、エンジニアとデザイナー間で共通の言語で共創ができる
• デザインの作成と同時に自動でコードも作成してくれる
• 自然言語でスピーディにモノを作れるなら、DX案をより素早く具体化できるポテンシャルがあるかもしれない

そこで今回のハッカソンを通じて、「Figma Makeの可能性」と「共創プロセスの進化」を検証することにしました。

ハッカソン概要：生成AIを使って爆速でプロトタイピング！

ハッカソン開催時の様子

開催概要

• 日時: 2025年7月18日（金）
• チーム構成: エンジニア×デザイナーの混合チーム、計4組
• 参加者: 東京オフィスメンバー12名＋リモートメンバー3名

今回のお題：「資材のレンタルシステム画面を作ってください」

今回のお題提供元となった物流DXチームが発足したばかりということもあり、物流DXチーム内で話題に上がることの多かったリアルな物流業界のビジネス課題を題材にしました。（※物流DXチームの発足についてはこちらの記事をご覧ください）
参加者には、以下の材料を提供しました

• ペルソナ設定

どういう人がこのシステムを求めているのか、ペルソナを設定

• エレベーターピッチ

ペルソナに向けたどのようなシステムなのかを定義

• ユーザーストーリーマップ

ユーザーストーリーマップで場面ごとの行動と機能について検討

ルール：Figma Makeを活用して2時間で画面を作成

シンプルですが、制約があるからこそ創造性が発揮されるもの。各チームがどんなアプローチを取るかが楽しみでした。

評価基準

• 操作性
• ユーザーニーズ理解
• 機能の網羅性
• プロンプトの工夫

審査員

• CTO
• デザイン部門グループリーダー（UXデザイナー）
• 物流DXチーム（ドメインエキスパート）

開催中は、エンジニアとデザイナーのチームワーキングが炸裂

ハッカソン中は、「わいわい」という言葉がぴったりの活気に満ちた雰囲気でした。AI生成待ちの間に、他チームのアウトプットを偵察しに行く人も...（笑）

印象的だった場面：

• Figma Makeの使い方を、デザイナーがエンジニアにレクチャー
• Figma Makeから出力されたコードを、エンジニアがサクッと直で手直し
• 新しく追加できそうな要件を、デザイナーとエンジニアで一緒にアイディエーション

普段は別々のプロジェクトで働くメンバー同士が、AIツールを介して自然にコラボレーションしている姿が印象的でした。

そして出来上がった成果物...最後に、コンセプトをショートピッチしました

同じお題と素材にも関わらず、当初想像していた以上にそれぞれのグループで違った成果物が出てきて、ピッチの度に感嘆の声が漏れ聞こえてきました。
どういう設計思想で作ったか、プロンプトでどんな創意工夫をしたかなど、各チーム毎の個性を味わいながら、実践的な相互の学びを得ることができました！

チームA：ユーザーストーリーマップ活用戦略

アプローチ：

• ユーザーストーリーマップのスクリーンショットを読み込ませ、スピーディに要件を入力
• UXライティングにもこだわり、デザイナーとエンジニアの協業ならではの成果を実現

チームB：デザインテンプレート活用戦略

アプローチ：

• Figmaのデザインテンプレートを読み込ませることで、手間なく一定のクオリティのデザインや希望するトンマナを担保
• 顧客マスタ、商品マスタ、レポート機能などユーザーニーズを考慮して必要な機能を追加

チームC：AI×人力のハイブリッド戦略

アプローチ：

• メンバーに弊社でもトップスピードのエンジニアがいたため、エンジニアが手打ちする方が早いものは人力で対応
• AIと人力をうまく使い分けた効率的なアプローチ

チームD：外部AI併用戦略

アプローチ：

• まだそこまで高速ではないFigma Makeの処理スピードを考慮し、ワイヤーフレームを文字ベース（ASCIIのように）でClaudeで高速作成してからプロンプトに入力
• ユーザーの手入力を極限まで省くため、写真で在庫管理ができるシステムを考案するなどユニークなアイディアも実現

今回得られたラーニング

共通言語としてのポテンシャル

Figma Makeは自然言語で処理できるので、当初の期待通り、エンジニアとデザイナーで共通言語を持って共創できることを確認できたのが最も大きな収穫でした。

工数削減の可能性

作業時間1.5時間という制約の中、主要画面を完成させることができ、ワイヤーフレーム作成にかかる工数の大幅カットが可能なことが分かりました。

処理速度の課題と対策

生成処理に時間がかかるため、まずはClaudeなど別のツールで機能のイメージを整理してからFigma Makeでプロンプトを入力するなどの工夫があった方が良さそうです。

デザインの多様性を担保するコツ

毎回似たようなデザインパターンを出されてしまうので、事前に使いたいデザインテンプレートを読み込ませるのがおすすめです。

チームの多様性によるイノベーション創出

エンジニアとデザイナー、異なるバックグランド同士で共創できることでこんなにもたくさんの違いがサービスに体現でき、イノベーションを生み出せることがわかりました。

参加者の声

「AIと人類の協働が楽しかったです。また普段仕事では関わりのないプロジェクトチーム外メンバーの考えや価値観を知ることができ、貴重な機会だったと思います！」

「ハンズオンで会話しながら実際に手を動かして物を作る、というやり方がスパイスメンバーに特にフィットしているように感じました」

「他のグループの発表で自分たちにはない目線（他のAIツールとの併用など）を知ることができました」

「UIデザイナーの視点、エンジニアの視点を統合することで都度やり方を最適化できました」

終わりに

スパイスファクトリーは、これからもAIを異なる立場の人々を繋げるツールとして研究・活用を進めていきます。
今回は初回だったので、オンサイトをベースとした開催にしましたが、次回はリモート開催で全国の猛者メンバーと一緒にトライしてみたいと思います！

デザインの力で、「1ピクセルずつ、世界をより良いものにする。」ことに一緒に挑戦できる仲間をお待ちしています。もしこの記事を読んで興味を持ってくださった方がいれば、ぜひスパイスファクトリーの採用情報をご覧ください！