はじめに
enechainプロダクトデザインデスクのマネージャーの近藤（@add_kk）です。
enechainのテクノロジー本部では、今年8月に、AIを使ったデザインハッカソンを企画・実施しました。テーマはずばり「プロンプトのみでどこまでデザインやプロトタイプが作れるかみんなで試してみる」。
AIでのUIデザインやプロトタイピングの領域は今年に入り一気に進化。新しいツールも次々に登場しています。enechainでは日頃からAI活用を積極的に進めていますが、その一環として、デザイン領域での現在地を確認するための企画です。デザイナーだけでなくPdMやエンジニアも巻き込み、ツールの特性や、実際の開発での使いどころを探るのが狙いです。
また「AIをどう活かせるか」という視点を超えて、「よいデザイン」「よいプロトタイプ」「よいプレゼンテーション」とは何かを改めて考えるきっかけにもなりました。
今回の記事では、ハッカソンを実施して得られたAIとデザインに関しての気づきはもちろん、どのようにこの企画を進めたかについても誰かの役に立つのではないかというのを期待してご紹介していきます。
もしあなたのチームが同じテーマに挑戦するとしたら、どんな成果が出るでしょうか？
開催までの準備
お題の選定
まず決めたのは、「事業内容と関係ないお題にする」こと。
理由はシンプルで、ドメイン知識や実現可能性に引っ張られず、純粋に楽しみ、アイデアやアウトプットを評価したかったからです。
お題は当日までは非公開とし、事前準備無し、即興での勝負にすることも決めていました。当初はAIにその場で決めてもらおうと思いました。ただ、絶妙にちょうどよいお題を出すのは難しい…。そこでAI案＋運営の人力案を用意し、当日に抽選で決定する方式を取りました。
AIツールの選定
利用可能なAIツールは社内AI推進チームと一緒に整理。主な観点は次の3つです。
- すでに調査済みで社内利用がOKか
- セキュリティ面に懸念はないか
- 新しいツールの場合、無料利用の範囲内で使えるか
この条件を満たしたツールから、各チームが自由に選べるようにしました。
社外のイベントや他のチームでAI活用を試す場合も、この観点はそのまま活かせます。特に セキュリティや社内利用可否を最初にクリアにすること が、安心して実験を進めるための前提になると感じました。
参加者募集と反応
「enechainのAIデザイン王を決めよう！」と社内Slackで呼びかけたところ、予想以上に盛り上がり、あっという間に参加者が集まりました。
こちらで特に求めたわけではないのですが、AIで作った「参戦画像」を添付して名乗りを上げる文化が自然発生したのも面白い瞬間でした。実は「誰も来なかったらどうしよう」と不安だったので、みんなのノリの良さに救われました。
ハッカソンの形式
- 制作時間：50分
- 1チーム3人×5チームでのチーム戦
- お題は当日発表
- 各チーム約5分間のプレゼンテーション＋質疑応答
運営もできるだけAIに頼るスタイルとし、チーム分けやチーム名の決定、評価もAIに任せてみることにしました。
評価方法
AIデザイン王は2冠形式としました。
- 人間AIデザイン王：ハッカソン参加者とプレゼン視聴者による投票で決定
- AIAIデザイン王：プレゼン動画をAIに解析させ、採点と講評
当日は「人間AIデザイン王」を決定し、「AIAIデザイン王」は後日に発表しました。
開催！
お題発表
ルーレットで決まったのは——
「行かない旅行を楽しむエア旅アプリ」。
「えっどういうこと！？」というどよめきからスタートしました。
デザイン制作プロセス
私が参加したチームを例に制作の流れを紹介します。
- まずはChatGPTと一緒にお題の解釈・ラフアイデアのブレスト
- 良さそうな案をPRDにまとめる
- Figma Makeで初期デザインを生成
- ChatGPTにレビューを依頼して改善点を抽出 → 再度Figma Makeへ（ここまで2案を同時並行で進める）
- 2案の生成結果からよい機能などをマージしてブラッシュアップ
- アプリ名やスプラッシュスクリーンもAIに相談・依頼
- 仕上がってきたところでタイムアップ！
短時間でもAIをうまく繋げていくことで、当初考えていた以上にゼロからちゃんとしたプロトタイプまでまとめていけることを実感しました。
ChatGPT → Figma Make → ChatGPTレビュー → Figma Makeという往復サイクルは、人間のレビューよりも格段に短いサイクルで改善を回せる ことを実感しました。これは「アイデアを粗く試し、早めに方向性を見極める」実務プロセスにも応用できそうです。
途中でジョナサン・アイブ（？）に頂いたレビューも載せておきます。
各チームの発表
「行かない旅行」の解釈はチームごとにユニーク。
- バーチャル旅行
- 旅行シミュレーション
- 過去の時点へのタイムトラベル
- 推しキャラとの旅体験
最終的に多くのチームがFigma Makeを活用しましたが、一部エンジニアは生成コードを直接編集するアプローチも。
特に印象的だったのは、「レスポンシブやインタラクションを組み込んだチームほど評価が高かった」 こと。AIツールで作ると静的な画面になりがちですが、動きや文脈を少し足すだけで説得力が大きく変わります。これは通常のプロトタイプ評価にも通じる気づきでした。
AIデザイン王の決定
人間AIデザイン王
人間の投票によりAIデザイン王に輝いたアプリはこちら。実際に試していただけます。
- 「こんな経験ありませんか？」とスライドで導入し、観客を惹き込む
- Netflix風のUIトンマナで完成度の高いアプリ
- QRコードを表示して観客自身がその場で操作できる演出
- レスポンシブ対応まで用意するこだわり
AIAIデザイン王
こちらがAIの解析により選ばれたアプリです。こちらも試していただけます。
具体的な評価方法としては、Geminiにプレゼンテーションの録画ファイルと評価基準をプロンプトで渡し、各チームの採点・講評と全体総括まで任せました。
実際のプロンプト
# 命令書 あなたは、UI/UXデザイン、プロダクトマネジメント、そして最新のAI技術に精通した専門家です。あなたの役割は、開催された「AIデザインハッカソン」の成果物である発表動画を評価し、最も優れたアウトプットを作成したチームを順位付けし、各チームに建設的なフィードバックを提供することです。 ## ハッカソンの概要 - **目的:** AIデザインツールのみを使い、短時間でどこまで質の高いプロトタイプを制作できるかを探求する。参加者が互いのテクニックから学び、AIデザインの可能性と課題を理解することを目的とする。 - **成果物:** 3人1チームで制作した、5〜6分間程度の発表動画。 - **制作ツール:** プロンプトベースのAIデザインツール（Google Stitch, v0, Relume, Figma Makeなど）のみ。従来のデザインツール（Figma等）は使用禁止。 - **評価対象:** 以下の発表動画 ## 各チームとプレゼンテーション動画 - チーム1 - チーム2 - チーム3 - チーム4 - チーム5 チーム名がファイルに入った動画を添付します ## 評価基準 以下の5つの観点から、各チームの発表動画を評価してください。各観点は10点満点とし、合計50点満点で評価してください。評価の際には、必ずその点数を付けた具体的な理由と、動画のどの部分からそう判断したかを明記してください。 1. **課題解決・ユーザー価値 ($UserValue$)** (10点) - 提案されたプロダクトは、誰の、どのような課題を解決しようとしているか？ - その解決策は、ユーザーにとってどれだけ価値があるか？ - ターゲットユーザーへの共感が伝わるか？ 2. **UI/UXの質 ($UIUXQuality$)** (10点) - UIは直感的で分かりやすく、操作に迷わないか？ - ユーザーが目的を達成するまでの体験はスムーズで心地よいか？ - 配色、レイアウト、タイポグラフィなど、基本的なデザイン原則が守られており、視覚的に魅力的か？ 3. **AI活用の巧みさ ($AIUtilization$)** (10点) - AIツールの特性をうまく活かし、独創的なアウトプットを生み出せているか？ - 制作プロセスにおいて、AIをどのように活用したかの工夫が見られるか？（例：優れたプロンプト、複数AIの連携など） - 人間だけでは生まれにくかった、AIならではの発想や効率化が実現できているか？ 4. **プロトタイプの完成度 ($PrototypeFidelity$)** (10点) - コンセプトやコアとなる価値が、デモンストレーションを通じて明確に伝わるか？ - 短時間で制作したことを考慮した上で、アイデアを表現するのに十分な品質か？ 5. **プレゼンテーション ($PresentationClarity$)** (10点) - 5分という限られた時間の中で、プロダクトの魅力と価値を効果的に伝えられているか？ - ストーリーは分かりやすく、説得力があるか？ ## アウトプット形式 以下の形式に従って、評価結果を生成してください。 ### 1. 総合ランキング | 順位 | チーム名 | 総合点 | | :--- | :--- | :--- | | 1位 | | | | 2位 | | | | 3位 | | | | ... | | | ### 2. 各チームへの詳細フィードバック --- **チーム名: [チームA]** **総合点: XX/50点** | 評価基準 | スコア | 評価理由 | | :--- | :--- | :--- | | 課題解決・ユーザー価値 | X/10 | [具体的な評価理由を記述] | | UI/UXの質 | X/10 | [具体的な評価理由を記述] | | AI活用の巧みさ | X/10 | [具体的な評価理由を記述] | | プロトタイプの完成度 | X/10 | [具体的な評価理由を記述] | | プレゼンテーション | X/10 | [具体的な評価理由を記述] | **良かった点 (Praise):** - [チームの特に優れていた点を箇条書きで記述] **今後の改善点 (Suggestion):** - [チームがさらに良くなるための具体的な改善案を箇条書きで記述] --- (これを全チーム分、生成する) ### 3. 総評 ハッカソン全体を通して見られた傾向、特に印象的だった点、そしてAIデザインの今後の可能性について、あなたの専門家としての見解をまとめてください。
AIの実際の評価の出力結果はこんな感じです。
AIによる評価の精度
AIレビューは予想以上に「的を射ている」ものでした。動画内の投影スクリーンの様子やプレゼンテーションの流れを正確に認識し、具体的なコメントを返してくれました。順位付けも評価基準に沿って相対的な差をつけており、十分実用的に感じました。
また、興味深いことに、人間とAIでは評価基準が異なるにもかかわらず、最終順位は1位と2位が入れ替わっただけで一致していました。
まとめ
- AIによるプロトタイピング
- アイデアを素早く形にするのには十分使える
- 粗いアイデアの壁打ちや要件整理にも有効
- ただしリリース品質まで持っていくにはまだ人間の力が必要
- AIによるレビュー
- 「あなたは〇〇の専門家です」と設定すると、それらしい視点で返してくれる
- 動画解析能力も思った以上に高く、前段階レビューとして有効
- AI時代のデザインの役割
- 「誰の、どんな欲求に応えるのか」という根本は人間の領域
- 自分で「描く」から「AIに描かせるための設計をする」へ役割がシフトしつつある
ネクストステップ
- デザインシステムとAIの連携
- デザインデータをAIが扱いやすい形に整理する
- 実装コードとの連携で開発効率アップ
- レビュー効率化
- コンテキストが必要なレビューは人間、基準が明確なレビューはAI
- ガイドライン整備の重要性が増す
- より本質的なプロダクト検討に集中
- プロトタイプを早く回し、検証サイクルを加速
- デザインと開発の効率化で「体験づくり」に集中
今回、AIとプロンプトだけでどこまでデザインできるか挑戦した結果、現状の実力と可能性を肌で感じることができました。特に「アイデア → ラフプロトタイピング → レビュー」を小さく早く回すサイクルはAI活用で大きく効率化できそうです。
一方で、コンテキストを深く理解した上で「何をどう作るべきか」を判断する部分や、リリース品質のデザインを仕上げる部分はまだ人間の役割です。
enechainのデザインシステムでは、現在FigmaのCode ConnectやMCPサーバ、Claude Codeの連携のテスト中です。安定して「デザインシステムに沿ったアウトプット」が生成できれば、開発効率化をさらに後押しできます。その結果、各プロダクトはより「本質的にどうあるべきか」に集中できるはずです。
今回の経験から、AIは「最終アウトプットを代替する存在」ではなく、「プロセスを加速させる存在」だと再認識しました。
もしあなたのチームが次にプロトタイプを作るとき、どこまでをAIに任せ、どこからを人間が担うべきか──その境界線を探ってみるのも面白いかもしれません。
enechainでは、一緒にプロダクトを成長させ、信頼できるブランドを育てていける仲間を募集中です。興味のある方はぜひTech Recruit Portalをご覧ください。
