AI活用でデザインの言語化〜画面設計書からissueまで爆速プロトに挑戦ハンズオンレポート

はじめに

こんにちは。クライアントサービスデザイン部のUIUXデザイナー篠崎です。

今年6月に実施した「デザイナー中心に22人でFigma×MCP×CursorでUI実装体験レポート」に引き続き、8月にもドキュメント駆動を切り口にしたハンズオンを実施しました。
Figma上のデザインから画面設計書を書き起こし、そこから実装計画としてのGitHub issue、さらに設計書とissueを元にバイブコーディングをしていく流れで、「細かいことはいいからまず1時間やってみよう！」という内容です。

前回の成果として、デザイナー陣は「生成AIとデザインのメンタルモデル」と「手元でCursorとFigmaが連携する環境」が整いました。今回はもう一歩踏み込み、開発やPM領域に広がるドキュメント駆動に挑戦した6名のハンズオン参加者と、ラジオ参加者14名を含む合計20名で盛り上がった内容をレポートします。

デザインの言語化＝ドキュメント駆動に注目した背景

昨今、MCP（Model Context Protocol）が注目を集めている背景には、生成AIをワークフローに柔軟に組み込める点があります。従来のように「ブラックボックス的にAIを使う」のではなく、開発環境やツールに組み込み、必要な文脈をやり取りできる仕組みとして期待されています。

これを後押しするように、7月にAmazonからKIROがリリースされ、大きな話題となりました。KIROは仕様書（ドキュメント）を開発の中心に据え、生きた仕様として設計や実装と常に同期させる仕組みを提供しています。結果として、ドキュメントは「あとから書くもの」ではなく、開発をリードするものへと変わりつつあります。

仕様・設計・実装が一体化することで、デザイナーや企画メンバーも「自分たちの作業を文脈ごとAIに伝え、ドキュメントに基づき支援を受ける」ことが重要なテーマになってきています。

ハンズオン概要

参加人数と体制

参加人数：20名
- ハンズオン参加: 6名（UIUXデザイナー5名、サービスデザイナー1名）
- ラジオ参加者：14名（デザイン職、企画職、エンジニア職、職種は多岐に）
所要時間：1時間（＋0.5〜1時間程度の事前準備）
運営体制：ファシリ1名（デザイナー）
- ハンズオン用ソースコードは有志エンジニアが用意🙏
- 壁打ちやリハの協力者多数🙏

目的・ゴール

ドキュメントを起点に設計・実装できる感覚を持ち帰ってもらう
AIによるデザインの言語化のスピード感を体験する
プロジェクト管理や実装がドキュメントで連動する感覚を体験する

ハンズオンの特徴

実践的なハンズオン形式：実際に手を動かして学べる
ローカルで動く開発PJスターターキットを準備🙏
Cursor（AIエディター）を活用し、デザインからドキュメントを生成
規定フォーマットに基づいた設計書・issueの生成を体験
事前に手順書を配布し、口頭フォローも実施して「すぐ動かせる」状態を準備

当日の流れ

導入：目的・ゴールの説明
環境設定チェックと安全確認
1. PC状況、Cursor動作、スターターキット展開、FigmaとMCP設定
2. ✅️ Privacy Modeの有効チェック（入力情報がAI学習に使われない設定を確認）
本日のドキュメント駆動フローのイメージ共有
フロー実践
1. デザインの言語化：Figmaデータからスタイルガイド・画面設計書を出力
2. 実装計画：設計書からissueを起票、作業タスクごとのプルリクイメージを確認
3. UI実装（高速プロトタイピング）：設計書に基づいてUIを実装
4. 結果確認：人間によるレビュー・承認箇所の共有
質疑応答・交流
アンケート実施

ハンズオンの成果

🌸 参加者全員が設計書・issue生成に成功
- 「これなら仕様を一元管理できそう！」と現場課題の解消に期待の声
🤔 設計書に基づいたUI実装結果はバラつきあり
- ただし継続的な学習意欲が高まり、工夫や改善の余地も確認できた
💡 GitHub issue連携への関心が高く、Confluence/JIRAとの連動イメージも浮かんだ

アンケート結果・参加者の声

回答件数：14件（回答率: 70%）

満足度・理解度・実践感覚（5段階評価）

ハンズオンの満足度：平均4.43点
内容の理解度：平均4.21点
「自分でもできそう」な感覚：平均3.57点⚠️

アンケート結果から見えてきたこと

ハンズオン参加は深い理解と自信につながる
実際に手を動かした参加者は満足度、ドキュメント駆動への期待、デザインと開発・ドキュメントのつながりの明確さ、そして「自分でもできそう」という感覚のすべての項目で高スコア。実は密かに手元で試してました！という方は全項目5.0をだしてくださった結果に。
ノンエンジニアでもドキュメント駆動の直接的な恩恵を感じる
自由回答では「ワイヤーやドキュメントが自動生成されるのは革命的！」という声が多くあり。理解度や実践経験によらず、一様に効率化と品質向上への期待感が強い。
実践へのハードルは事前知識次第*
「できそう」感覚は平均3.57点と一定低い。経験差が顕著に出た結果となり、デザインエンジニアやフロント実装経験者は高評価。前提経験が少ない層では概念理解から具体的な行動への橋渡しに課題がありそう。

実は「難しい」と感じる背景は環境にも？

「生成AIを業務活用する際に困難に感じていることは？」という質問では、次の課題が浮かび上がりました（回答14件）。

情報セキュリティへの懸念（9名）
- 機密情報の漏洩リスクや外部サービスとの連携不安を回答者の6割が感じている
社内ルールの不明確さ（11名）
- 「何が許可され、何が禁止か分からない」と回答の8割が指摘
スキルや理解の不足（4名）
- 「使い方が分からない」「レビュー知識が不足」は回答者の3割程度

先端技術の導入には安心して試せる環境づくりが鍵

上記の結果から、実は環境面でのセキュリティの不透明さが実践への不安につながっている様子が伺えます。
実開発と距離があるノンエンジニアにとってはそもそも不慣れな技術と環境で不安が高い状況です。しかし、「ルールが曖昧で試せない」「どう使えばいいか分からない」といった心理的なハードルのほうがスコアが高い結果になりました。

当社は事業特性上、狭義の法令遵守だけではなく、社会からの要請や期待に答え、誠実に事業活動を行っていくことを最大限に重要視しています。それゆえ開発環境であっても高いコンプライアンス基準と情報リテラシーを前提としているため、社内統制が厳しく、新しい技術を「とりあえず試す」環境を行き渡らせるのは容易ではありません。これは一見ハードルに思えますが、裏を返せばリテラシーが高いからこそ、安心・安全に技術を導入できる基盤があるとも言えます。

今回のハンズオンが高い満足度につながったのは、まさに「安全な実験の場」として機能し、参加者に「自分でもできるかもしれない」という感覚を持ち帰ってもらえたからだと考えています。社内の強い統制とリテラシーを前向きに活かしながら、先端技術を試行できる環境づくりをどう仕組みにしていくかが、次の大きなテーマになりそうです。