デザイナーが3時間でPR作成からマージまで完遂。AIツール「Cursor」で“職種の壁”が溶けた開発ワークショップ

チームでものづくりに取り組むとき「デザイナーとエンジニアの連携がもっとスムーズになれば...」と思ったことはありませんか？これは、プロダクト開発に関わる誰もが一度は直面する課題かもしれません。

私自身、デザイナーとしてWindsurfなどのAI開発ツールやGitを活用し、プロトタイプの作成やバージョン管理を行った経験があります。その中で、「もしこうした開発の手法をデザイナーも使えるようになれば、大幅に開発でチームでできることも増えるのに...」というもどかしさを感じていました。

こうした背景から、デザイナーとエンジニアの間にある職種の壁を乗り越えるべく、社内のデザイナーを対象とした「AI開発ワークショップ」を開催しました。
本記事では、そんなワークショップがなぜ生まれ、どのように行われたのかをお伝えします。

なぜ今、このAI開発ワークショップなのか

スパイスファクトリーでは、「Form a scrum」をコアバリューに掲げ、職種を越えてチームで協働しながら、変化に対応し、目的に向かって最大の成果を目指してきました。

しかし、これまでデザインとエンジニアリングの間には職種による「専門性の壁」が存在し、より深く踏み込んだ協働を阻む要因となっていました。デザイナーが実装の細部まで関与することは難しく、エンジニアもデザインに踏み込むことにも一定のハードルがありました。

この状況が、昨今のAIの進化によって大きく変わりつつあります。これまでエンジニアでなければ修正できなかったデザイン上の細かな調整やアイデアの実現などを、デザイナー自身がAIの力を借りて直接修正や作成できるようになりました。逆に、エンジニアがデザインツールを使いこなす際のハードルも下がっています。

この変化は、より価値の高いプロダクトをつくるための大きな転換点です。デザイナーとエンジニアが互いの領域を理解し、より柔軟に共創していくことで、チームとして最大の成果を発揮できるようになるのでは、と考えています。

つまり、これまで「専門性の壁」によって分断されていた領域が、AIによって互いに行き来しやすくなっています。デザイナーが実装の現場にもう一歩入り込めば、プロダクトの意図がより正確に反映されますし、エンジニアがデザインの視点を持てば、技術的な観点でユーザー体験の最適化を行うことができます。

そこで今回、デザイナーがAIを活用しながらコーディングの領域へ踏み出し、エンジニアとより深く共創していくための第一歩として、このワークショップを企画しました。

AI開発ワークショップの目標

今回のワークショップでは以下を目標に取り組みました。

• 一般的な開発プロセスを理解できること
• AIを活用して開発に参加できるようになること

それをもとに3つのゴールを設定しています。

1. GitHubからclone→ローカルでのReactアプリケーション修正→Pull Request作成（以下、PR）→レビュー→マージまでの一連の流れを体験する
2. Cursorを使って、文言・色・簡単なレイアウトの修正を自分で実施できるようになる
3. 開発で発生する「影響範囲」という重要な概念を理解する

AIツールを活用することにより、エンジニアリングの知識が必須とされていた領域もエンジニアを介さずに対応することができるようになります。また、基本的な開発プロセスを理解することで、チームの動きの解像度が高くなり、よりスムーズなコミュニケーションや共創につながると考えています。

AIを使って実際に開発を体験してみた！

開催概要

• 場所: イベントスペース + オンライン（Gather）によるハイブリッド開催
• サポート体制: エンジニア2名とCTOがメンターとして参加（現地1名、オンライン1名）

使用ツール

• Cursor: AI搭載のコードエディタ
• Git/GitHub: バージョン管理とコードレビュー
• Docker: ローカル開発環境の構築

事前準備として、参加者には GitHubアカウントの作成、Docker Desktopのインストール、Cursorのセットアップをお願いしました。環境構築でつまずく可能性も考慮し、詳細な手順書を用意して臨みました。

※スパイスファクトリーでは、会社で利用許可のあるAIツールは申請すれば誰でも使うことができます。社内の生成AIガイドライン・AI基本方針に基づいて活用しています。

ワークショップの流れ

企画の説明（10分）

ワークショップ冒頭では、企画の背景と目的、特に「なぜ今、デザイナーがコードに触れる必要があるのか」「AIツールが働き方をどう変えるのか」を説明し、参加者の当事者意識を促しました。また、アジャイル開発に触れ、「職種を超えた協働」の重要性を強調しました。

なお、デザイナーとエンジニアの協働の可能性については、動画作成機能を使って話題のNotebookLMに解説してもらいました（思った以上に盛り上がってくれて感心しました。Googleすごい）。

使用したNotebook LMのプレゼンテーション画面

座学（20分）

次に、Gitの基礎知識について説明しました。「Commit」「Branch」「Pull」「Push」「Merge」といった基本用語を、実務での使われ方と紐づけながら解説しました。

デザイナーにとって馴染みの薄い概念も多いため、「なぜこの仕組みが必要なのか」という背景から丁寧に説明することを心がけました。

実習:簡単な修正にチャレンジ（2時間半）

実際にCursorを使って演習を行なっている様子

座学の後は、実際にCursorとGitコマンドを使って開発体験を行う時間です。用意したReactアプリケーションを題材に、3段階の課題に取り組みました。

GitのCUI操作で苦戦があるなど、普段使いこなしているエンジニアが気が付かないつまずきがあり、ここでも様々な気づきがありました。

Lv1. 文言変更・色変更

まずはシンプルなタスクからスタート。プランのタイトルや、ボタンの色を変更してもらいました。Cursorに「このテキストを変更して」と指示を出すだけで、該当箇所を見つけて修正してくれる体験は、多くの参加者にとって新鮮だったようです。

Lv2. 共通コンポーネントの変更（影響が出る修正）

次のステップでは、複数の場所で使われている共通コンポーネントを修正してもらいました。ここで重要なのが「影響範囲」という概念。一見シンプルな変更でも、共通部分を触ることで他のページのデザインが崩れてしまうなど、思わぬ影響を及ぼすことを体験してもらいました。

Lv3. 影響範囲の調査と修正

Lv2で発生した影響を自分で見つけ、修正する課題です。「AIが言ってるから大丈夫」ではなく、人間が影響範囲を理解し、責任を持って修正することの大切さを体感してもらいました。

モブプログラミングで参加者中心のワーク推進

ワークショップでは、擬似的なモブプログラミング形式を採用しました。メンバーの一人が画面を共有し、ファシリテーターの説明を受けながら作業します。同時に、メンバーも一緒に課題に取り組み、わからないことがあればすぐにメンターに質問できる形で進めました。

オンライン参加者はGatherで参加し、質問があった際は別室に移動して画面共有しながらサポート。「ここで詰まってる」という状況をリアルタイムで共有できたことで、スムーズに進行できました。

開催中の様子

イベントスペースには、ノートPCを開いたデザイナーたちが集まり、Cursorを使いながらコードと向き合っていました。最初は戸惑っていたメンバーも、Cursorの補助を受けながら着実に修正を進めることができており、独自の修正に挑戦しているメンバーも出てきました。

「ここを変えたらどうなるんだろう?」

「このエラーメッセージは何を言ってるの?」

そんな会話が飛び交う中、エンジニアのメンターがこまめにサポート。普段は別々のプロジェクトで働くメンバー同士が、AIツールを活用しながら盛り上がっていました。

git操作についてディスカッションする様子

AI開発ワークショップから得られた学びとこれから

開発におけるAIと人間の役割分担

ワークショップでCursorを体験した参加者からは、「雑な指示でも精度高く再現できてすごい！」「これならデザイナーが直接PRをあげられそう」といった声が聞かれました。

一方、実習で「影響範囲」を意識する課題に取り組む中で、「AIは万能ではない」という本質的な気づきも生まれてきました。Cursorは強力なツールですが、間違いを起こすこともあります。生成物や動作の確認などは人間の責任として必ず行う必要があります。

AIで役割を超えたチームワークを発揮する

今回印象的だったのは、「AIに置き換えられてしまうかもしれない」という不安よりも、「AIをうまく使えば自分たちのできることを広げられそう」という前向きな感覚が、参加者のあいだで自然と共有されていたことです。

また、「影響範囲の洗い出しくらいはデザイナーも手伝えたらいいな」「コードのレビューの観点ももっと知りたい」といったアイデアも出てきました。

AIを人間の代わりと捉えるのではなく、それぞれの専門性を保ったまま、AIと共に関わることで共通言語を持ち、役割や関わり方の“幅”を広げていくという意識がしっかりと感じられたことは一つの学びとして体験することができました。

デザイナーの視点から見た新しい気づき

参加したデザイナーからは、こんな声もありました。

「Figmaで作ったデザインが、実際にどうコード化されるのかを見られて勉強になった」

「Cursorはデザインシステム構築の分析だけに使っていたから、コード記述は新鮮でした！」

「エンジニアさんの普段の仕事の一部を実践することで理解度が格段に上がった」

開発の裏側を少しでも知ることで、デザインする際の視点が変わってくる。これはまさに、ワークショップで目指していた「共通言語を持つ」ということの第一歩でした。

今後の展開

スパイスファクトリーは、AIをただの効率化手段と捉えるのではなく、「創造性を引き出すためのパートナー」として位置づけています。

今回のワークショップは、あくまで第一歩。今後はAI開発を身近なものにし、当たり前のように開発を協業していく取り組みを継続的に行っていきます。

• 定期開催: 希望者全員が参加できるよう、継続的に開催
• ワークショップの拡張: デザイナーに限らず全職種へ展開し、チーム全体で共創が行えるようなチーム作りを目指します。
• フォローアップ体制: ワークショップ後も継続的に学べる環境の整備

また、今回はAI開発にフォーカスしていましたが、エンジニアがデザイナーの領域に入り込むためのワークショップも検討しています。

終わりに

今回のワークショップを開催し、改めてデザイナーとエンジニアの間にある境界を取り払い、価値を発揮していくことの重要性を感じることができました。

「エンジニアの開発プロセスを理解したい」

「自分でもコードの修正ができるようになりたい」

「チームの共創をもっとスムーズにしたい」

そんな思いを持つデザイナーたちが、AIというパートナーを使って、開発の世界に一歩踏み出した3時間でした。

この取り組みが、職種の垣根を超えた共創の新しい挑戦の形になるよう、スパイスファクトリーは組織全体にもこの活動を広げていきます！

Writer: [Interface＆Experience Design Div. UX Designer] ASO SHIRO