この記事はLITALICO Engineers Advent Calendar 2025 カレンダー1 の20日目の記事です
はじめに
こんにちは！LITALICOのエンジニア本部ブランドデザイン室児童プラットフォームデザイングループに所属している中島です。
今回は今年のFigmaのカンファレンス「ConFig2025」でリリースが発表され話題になったFigma Makeを使って社内ボドゲをどのようにオンライン化したか、その結果どのような効果があったかについてまとめたいと思います。
Figma Makeとは？
Figma Make（フィグマ メイク）とは、Figmaが提供するAI搭載のプロトタイピング・ツールで、自然言語のプロンプト（指示文）や既存のデザインデータをもとに、コードを書きながらインタラクティブなWebアプリやプロトタイプを自動生成できる機能です。AIチャットを通じて「このボタンを押したら〇〇する」といった指示を追加でき、デザインと機能実装のギャップを埋め、アイデアを素早く形にできるのが最大の特徴です。
デザインツールのFigma社が開発しているプロトタイピングツールのため、デザインに強いイメージがあり、かっちりしたtoBのサービスのプロトタイプだけではなくtoCのサービスにも使いやすそうです。
▼日本人クリエイターのTakizawaさんの作例。3Dのビジュアルなども作ることができます。
URL:https://humid-team-14068564.figma.site/
社内ボドゲ「LITALICO Valueパレットカード（通称：価値観カード）」とは？
さまざまな価値観のキーワードが書かれた90枚のカードです。
一緒に働くメンバーとお互いが大切にしていることを理解したり、チームやサービスとして大切にしたいことを共有したり、チームLITALICOを実現するためのツールとして作成されました。
詳しいルールは省略しますが、山札からカードを引いていき、自分が仕事をする上で大事にしている価値観のカード5枚を手元に残し、それ以外を捨てていくことで、一人一人の価値観を明らかにしていくゲームです。
社内ボドゲをオンライン化したきっかけ
LITALICOには現在社員/業務委託の方を合わせて40名以上のデザイナーがいるのですが、デザイン室としての結束を強め同じ方向を向いて走るために、半年に一度キックオフと称してデザイナーが一同に会す場があります。
今回、デザイン室の下期キックオフをオンライン/オフラインのハイブリッドで実施するにあたり、デザイナー同士の相互理解を深める目的で、オンラインでも価値観カードを実施することになりました。
Figma Makeでオンラインゲームを作る方法
①Geminiにゲームのルールを教え、Figma Make用のプロンプトを書いてもらう
Figma Makeでものづくりをする際には、なるべくFigma MakeにUIデザイン以外の思考をさせない方が早くクオリティの高いアウトプットが出ると感じています。
そのため、いきなりFigma Makeを使うのではなく、最初にGeminiやChatGPTなどを使って作りたいものの要件を整理し、Figma Makeに渡すプロンプトを考えさせると良いです。
▼Geminiに渡したプロンプト
下記のゲームをオンラインで実施するのにFigma Makeを使いたい。どのようなプロンプトを渡すと生成できそうか考えてもらえますか？
＜前提＞
LITALICO value パレットカードとは、さまざまな価値観のキーワード（例：挑戦、理解、協調など）が書かれた90枚のカードです。
一緒に働くメンバーとお互いが大切にしていることを理解したり、チームやサービスとして大切にしたいことを共有するためのツールです。
<ルール>
▼準備
・カードを切って、1人5枚ずつ配る
・残ったカードは伏せて中央に山札として置く
・カードをひく順番を決める
▼ルール
・カードを捨てるときは「〇〇を捨てます！」と言う（捨てる理由は言っても言わなくてもOK）
・カードを捨て札から拾う時は「〇〇を拾います！」と言う
▼進め方
・自分の番になったらAとBを行い、それを順番に繰り返す
A：山札から1枚引く or 捨て札から1枚拾う
B：手元のカードの中から、より自分が大切にしているカードを残し、大切にしていることから遠いカードを1枚捨てる
・全部のカードがなくなるか、事前に設定した時間になったら終了
▼終了したら
・手元に残したカードをオープンし、順番にそのカードを残した理由や大切にしている理由を共有する
・（時間があったら）最後にお互いの選んだカードについて、感想の共有をする
②Figma Makeを3~4つ同時に稼働させ、質の良さそうなアウトプットを選ぶ
ステップ①でAIにプロンプトを考えてもらったら、同時にFigma Makeを3~4つほど立ち上げて、同じプロンプトで生成を開始してみてください。
しばらくすると生成結果が確認できますが、比較するとアウトプットにばらつきが出ると思います。
実際にプロトタイプを触ってみて、大枠の方向性が合っていて修正しやすそうなアウトプットを選んでブラッシュアップしていくと時短になります。
③Figma MakeとSupabaseを連携しバックエンドを構築する
Figma MakeはSupabaseと連携しバックエンドを構築することができるので大変便利です！
この機能がないと価値観カードをFigma Makeでオンライン化することは難しかったと思います。
Supabaseとは：Firebaseのオープンソース代替を目指すBaaS（Backend as a Service）プラットフォームで、データベース（PostgreSQLベース）、認証、ストレージ、リアルタイム機能、サーバーレス関数などをワンストップで提供し、開発者がサーバー構築なしで素早くスケーラブルなアプリを開発・デプロイできる環境を提供します。**「バックエンド機能をまるごと提供」**してくれるサービスで、特にSQLやPostgreSQLの知識を活かしつつ、認証・ストレージといった面倒な裏側開発を自動化したい開発者に人気です。
なお、私はSupabaseを全く触ったことがありませんでしたが、Figma Makeが全ていい感じに設定してくれたので知識不要で始められました！
④ひたすらFigma Makeと対話しゲームをブラッシュアップする
ここまできたら、Figma Makeに指示を出しながら修正を繰り返し、理想のアウトプットに近づける作業を行います。
私は今回約2時間ほどかけてver40くらいまでブラッシュアップを重ねました。
（細かいデザインの調整なども含むため、ゲーム自体を動かすのはもっと回数少なくできました！）
⑤Figma Makeを公開し、他の人にも共有する
Figma Makeで作ったものを他の人に触ってもらう場合には「公開」の作業が必要になります。
ドメインは自動で割り振られますが、自分の好きな文字列に変更することも可能です！
また、Google Analyticsを連携したり、ファビコンやOGP画像の設定なども行えます。
結果
オンライン上でも価値観カードができて大盛況！デザイナー同士の相互理解が深まった
当日は20人以上のデザイナーが4~5人程度のチームに分かれ、オンラインで価値観カードをプレイしました。
「オンラインでも快適にワークができて有意義でした」
「どのカードを残すかによって、お互いの人となりについて認識を深められたのが良かったです」
「自分が目指すべきビジョンの解像度が広がり、言葉で伝え合う重要性を実感しました」
「何度やっても盛り上がるし、自分とチームメイトの価値観がよくわかって楽しいです」
といった声があがり、アンケートでもポジティブな反応がたくさん集まりました🎉
特に今回のキックオフでは、入社間もない方や遠方に住んでいる業務委託の方も参加していたので、より多くのデザイナーが交流し価値を感じてもらえる機会だったと思います。
一部グループでゲームセッションが中断してしまい、ゲーム内容がリセットされてしまった
一方で、一部のグループでゲーム中に画面が真っ白になってしまい動かないというケースが発生し、ゲームのやり直しを行ったため、プレイ・共有の時間が少なくなってしまうというトラブルも起こりました。
改善
セッションが中断しても、ゲームIDを用いてゲームを再開できるようにした
当日の反省を生かし、セッションが中断してもゲームを再開できるような仕組みを構築しました。
ホストがゲームを開始すると固有のゲームIDが発行され、そのIDをキーに再入室することができる機能を追加し、セッションを一度離脱してもゲームを途中から再開できるようになりました。
まとめ
Figma Makeは組織施策にも使える！
プロトタイピングツールとして注目が高いFigma Makeですが、アイデア次第でさまざまな使い方ができると感じたので、どんな使い方ができそうか妄想してみると楽しそうです！
また、デザイナー・エンジニア以外も簡単に使えるので、ぜひ興味のある方は触って遊んでみて欲しいです。