え、イベントまで２週間切っているんですか〜〜〜！？
３行まとめ
- Design Ship 2025 でKAGブースでWebアプリを使ったアクティビティを企画
- 企画・開発体制はデザイナー3名＋エンジニア1名（わたし）
- Figma Makeを使ったらUIデザイン→実装がほとんどエンジニアいらずで終わってしまった すごい
アプリの構想
ユーザ（来場者）には弊社マスコットキャラクターであるカグカグ にちなんだお題（テーマ）に沿ったアイデアを考えてもらう
そのアイデアをカグカグ博士（AI）に採点・評価してもらい さらに良いアイデアにするためのヒントをもらう
アプリのイメージ図
技術的要件
- アプリの操作はブースにあるKAG社員のPCを使用し、来場者のPCスマホ等の端末からはアクセスしない→セキュリティのためIPアドレスによるアクセス制限をしたい
ということでインフラはこんな感じ
分担
デザイナー
- 企画
- UIデザイン
- UI実装（９割）
- プロンプト設計
エンジニア
- バックエンド設計・実装
- UI実装（１割）
やったこと
* 今回はUI実装がすごい な話題なのでインフラ・バックエンドの話は割愛
デザイナーの方から「UIこんなイメージです〜」と連絡があり
みてみるとプロトタイプがFigma Make上で作成されていました
思ったよりリッチなUIでこれは実装大変そうだぞ⭐︎
（ちなみにFigma Makeはコンポーネントライブラリとして radix uiを使用します）
...
と思ったら何やら "Code" タブが
押してみると
な なんだって〜〜〜
出来ていました
実際に表示されているコードをZipでダウンロードしてローカルで起動も問題なし
S3にアップロードしCloudfrontでの配信まで5分かからずDone
流石にAPIとの接続部分は実装されていなかったので（でもMock実装はされていました）
APIリクエスト部分を実装はしたものの 他はFigma Makeのコードそのまま採用しイベント当日を迎えました
私のフロント実装は1時間かかっていないです
で、あとは申し訳程度にLambda実装してterraform書いてデプロイして完成でした
開発中にAmazon BedrockでClaude Sonnet4.5 が利用可能になっていたので使用モデルを切り替えたり...
当日の様子
当日の盛り上がりは[デザイナー目線でのレポート](記事が公開されたらURLを更新する）を是非見てください
ログ的には2日間のべ406回も利用していただき、かつエラーなし
という上々の結果となりました v
まとめというか感想(エンジニア目線）
Figma Makeめっちゃええやん!!
今までデザイナーさんが作ったUIデザインを参考にして実装するも
コンポーネントライブラリ等とのズレをなくせず”デザインに寄せる”フェーズが存在しました
デザインが複雑になるほどサイズや色などのカスタマイズ(微調整)が多くなります
（もしくはデザイナーがライブラリに合わせたUIデザインを作成する）
今回のFigma Makeではデザイナー→エンジニアにデザインが渡ってくる時点で
全てコード化された状態になっているので デザインと実装されたアプリとの差分がなく
エンジニアとしては基本UIはノータッチでいられる
デザイナーとしてはデザインフェーズで常に実装可能な状態かを確認できる
もう喧嘩しなくてもええんやなって
とはいえ
なら全部デザイナーに任せちゃえとはならなくて
今回は２週間の短期開発かつ３画面という小規模なアプリ開発だったのですが
これが数年継続開発するとか画面数が二桁あるとか複雑な業務ロジックが多分に含まれるとかになってくると
エンジニアがちゃんと面倒を見てあげる必要があるかなと
(Figma Makeに限らず AIコーディングツールでも同じことだと思います）
Figma MakeのGUI上でもできない事はないでしょうが より適した環境(VSCodeとか各種IDEとか)で作業した方が効率良いしエラーも少ないと思います
（APIリクエスト等外部と通信が発生する箇所は特に）
ちょっとネガティブなことも書きましたが
体験としては 個人的には今までにない新しい可能性を感じました
デザイナーがコンセプトや初めの数画面をFigma Makeで作り 以降の拡張はエンジニアが引き継いで面倒を見ていく
というのがうまく使う１つのパターンなのかも？
例えばね