AI開発ワークショップの概要
スパイスファクトリーのスパイストーク
皆さんこんにちは、スパイスファクトリーのスパイストーク。
360度デジタルインテグレーターとしてDX支援を事業展開しているスパイスファクトリー株式会社がお送りします。
本日のパーソナリティは、パブリックリレーションズを担当している前田です。
この番組は、DXに関わるあなたにスパイスファクトリーの今とスパイスになるようなトピックを週替わりでお届け、日々のスパイスになるようなお話をテーマにした番組です。
毎週火曜朝10時にスポティファイアップルポッドキャストで配信しています。
第4週目はデザイントークということで、今回もデザイン事業部門である通称IXD
インターフェイス&エクスペリエンスデザインディビジョンのメンバーと一緒にデザインに関するトピックをお話ししていければと思っております。
とはいえですね、ちょっと本日のテーマは、実はAI開発ワークショップデザイナーがエンジニアを理解する3時間というテーマでですね、お話ししていければと思っております。
あれ、なんかちょっと開発の話、エンジニアの話って思っちゃうかもしれないんですけれども、あのちゃんとデザインの話出てきますので、最後までお聞きいただければ嬉しいです。
今日一緒にお話しするのは、UXデザイナーの麻生さんです。よろしくお願いします。
はい、スパイスファクトリーでUXデザインを担当しております麻生です。本日はよろしくお願いします。
よろしくお願いします。麻生さん、ラジオ初出演だと思いますので、皆さんに簡単に自己紹介をお願いしてもよろしいでしょうか。
はい、私はスパイスファクトリーには半年ほど前にUXデザイナーとして入社しまして、実は今は2社目で、前職はデータ分析ですとか可視化を行うような企業に在籍しておりました。
そこではですね、企業がデータを使って意思決定するための支援、いわゆるビジネスインテリジェンスの領域をしていたんですけれども、現在は、要件定義ですとか情報設計の領域でクライアントワークに関わりながら、社内ではAI活用の推進やナレッジを生かす仕組み作りに取り組んでいます。
はい、ありがとうございます。ちょっと緊張してたりします?
かなり緊張してますね。初めてなんて間違ってるかもしれない。
そうですよね、私も初めての時めちゃくちゃ緊張したもんな。あそーさん、ちなみにこれ余談なんですけど、あそーさん最近ハマってるものとかなんかあるんですか?
ハマってるもの、そうですね。つい先日Nintendo Switch 2を手に入れまして。
おー、すごい。
最近やってますね。
Switch 2は何遊んでるんですか、ゲームは?
カービィーのエアライザーというゲームがあって、これも最近発売されたんですけど、小さい頃ゲームキューブでやっていたものなので。
ですよね。古い作品のリメイクっていうか。
一応新しいんですけど、その時のゲームの遊び方とかはかなり踏襲されてて、懐かしくも新しいみたいな感じですね。
いいですね、冬休みがっつりゲームで遊べそうですね、またね。
そうですね、冬休みにはちょっと暇になることはないかもしれない。
ありがとうございます。それではですね、今回のテーマのお話に移っていければと思います。
まず一つ目に伺っていきたいのが、早速なんですけど、今回のAI開発ワークショップって一体どんな内容だったのかっていうところからまず伺えたりしますか?
まず一言で言うと、デザイナーがGitHubとCursorと呼ばれるツールを使って、実際の開発フローを体験しようというようなワークショップになっています。
具体的にはですね、デザイナーが自分のGitHubリポジトリをPCにクローンして、Cursorを使って軽微なデザイン修正をコードで行い、それをGitHubにプッシュして最終的にエンジニアにレビュー依頼を渡すというところまで、一通りの開発プロセスを体験してもらいました。
結構本格的な手順というか、本当に開発体験そのものだなっていうふうに聞くと思うんですけど、それってデザイナー向けなのかって思っちゃうぐらいだなと思ったんですけど、そもそもなんでこのAI開発ワークショップの企画をやろうと思ったんですか?
そうですね。ちょっときっかけの話としてですね、個人的な話ではあるんですけれども、実装に興味があって、いろいろ試した時期があったんですね。その時にWindsurfと呼ばれる、またちょっと違う、Cursorとは違うAIのコーディング支援ツールを使って、簡単なプロットタイプを作ってみました。
そこでGitHubで変更履歴を管理しながら、コードをアップしたら自動でクラウド上にアプリができるというようなところをやっておりまして、そうするとすぐに触って自分でアプリを確認できる状態まで持っていけるというところをやっておりました。
じゃあ、その触っていく中で、そのAIを使ったりとかするところまで体験されてたからこそ、ちょっと興味がどんどん湧いてきて、これって社内でも取り組めないかなみたいなことを思ったって感じなんですかね?
そうですね。その経験が大きくて、それこそこれまではクラウドの知識ですとか、GitHubの使い方、コードの開発知識とか、いろいろ分かってないとそもそも開発プロジェクト経験できなかったんですが、このAI自体になって少し知識をつけるだけで、かなりいろんなことができるようになるということで、実際に体験設計をするのが好きな自分としては、これだけでもかなり面白い経験だったかなと思います。
意外と別にエンジニアじゃなくてもいける範囲もあるのではみたいな、そういった開発体験として現体験があったからっていうきっかけで、今回のAI開発ワークショップの開催のきっかけになったっていうことだったんですけど、今回のテーマって、デザイナーがエンジニアを理解する3時間ということでお話のテーマいただいてるんですけど、
デザイナーはデザインのプロとして皆さん活動されてますけれども、なぜわざわざ実装まで理解していく必要があるのかなみたいな、もちろんいろんな領域を知ることで可能性が広がるっていうのはもちろんだと思うんですけど、ちょっと疑問に思うというか、なんでなんだろうなっていう純粋な疑問を持つ方もいらっしゃるのかなというふうに思ってまして、
実装の理解の必要性
ここってデザイナーが実装に関わるとか、デザイナーが実装のことを知る、エンジニアリングのことを知るってどんないいことがあったりするんですか?
おだしょー そうですね、大きく2つあると思っていまして、その1つ目が体験の新鮮さを保てるということです。これは頭で考えたりですとか、Figmaで美しい場合はフレームを見るというのと、実際にユーザーとして触ってみるのでは感覚が全然違うんですね。
なので、そのデザインを作った感覚が新鮮なうちに動くもので検証できると、また体験に対する解像度が高い状態で検証を回せるので、全然その体験として受け取るときの新鮮さというのが違ってきます。
なるほど。フィグマ上の描いた絵と、実際にスマホとかクラウド上で動かした時の感覚って結構違うかなっていうのは、私も実感するところかなと思うんですけれども、今とはいえフィグマメイクとか生成アイツールである程度動くようなものをノーコードである程度作り上げるっていうところまで結構来てると思うんですけれども、
最近私もとあるイベントで診断ツールを作ってもらったときに、実際の実装環境に置いてみるとあれ?みたいなことが結構起こったりしますしねっていうところありますよね。
そうですね。よくありますね。作ってみて全然違うじゃんみたいなのがあったりするというところと。
二つ目なんですけど、体験に対する責任を手放さなくていいというところがあります。通常の開発だと、画面のプロトタイプっていうのをデザイナーが作って、仕様をエンジニアに渡しますと、そうなると設計の中心がどうしてもエンジニアに出ますよね。
そうなると、エンジニアはより具体的な実装ロジックでいったりとか、リュードの細かい話をハンドリングする必要があるので、そこにデザイナーが介入するのは難しくなってきます。
なので、実装に入ってから起きた仕様変更というのは、デザイナーが深く関与しないまま開発が進んでしまうということもよくあるんですね。
ただ自分で実装まで見ることができると、体験の細部まで引き続き自分でコントロールできるので、デザイナーとしての体験への責任感、つまり圧倒感というところもかなり変わってきます。
いいですね。体験に対する責任というワードは結構いい言葉だなと、UXデザイナーらしい一言を聞いた気がしますということで、
結構プロフェッショナルとしてすごく素敵な考え方なんじゃないかなと、今聞いて思ったんですけれども、
このあたりですね、最近のAIの進化によって開発のスピード感とか、あとはデザイン自体のスピード感なんてのも結構変わってきてるんじゃないかなと思うんですけど、いかがですか?
かなり変わってきていると思います。そのことで今思い出したのは、10月のデザインシップのイベントがありまして、そこでちょっと興味深い話がありました。
その内容というのが、これまで一つの機能を作るのに一日かかっていたのが、タスクによってはもうAIを使って一日でできるようになったというところが語られていました。
5日が一日か。すごいですね。5倍速以上の多分劇的な変化なのかなというふうに思っていますけど、すごいですね。
今後、品質ももちろん大事なんですけど、早いって結構正義だったりするじゃないですか。早く作れますみたいな。なんかそういった売り出す環境も変わってきそうですね。
ただこれ、いいことばかりだけではないと私としては思ってまして、会社としては早く作れますというのが、これまで以上に売りになりにくくなると思っています。
つまりAIを使えば誰でも早く作れてしまうということで。これはビジネス観点で言うと、生産性あたりのコストが下がったという話になるんですが、裏を返すと素早く開発することの価値がAIによってコモディティ化してしまうということでもあります。
なので正直、デジタルインテグレーターとして様々なプロジェクトでものづくりの一環としてシステム開発したりする私たちにとっては、ちょっと怖い話でもあるんです。
一方で、デザイナーにとってはもっと大きな意味があります。これまで一回しか検証のサイクルを回せなかったものが、5回回せるようになるとどうかというところで考えると全然変わってくるんですね。
なるほどですね。単に早く終わらせるんじゃなくて、同じ期間で5回試行錯誤ができて、より品質を上げられたり成功角度を上げられるみたいな、そこのスピード感が上げられるっていう意味で変わってくるってことですかね。
同じリソースで検証のサイクルを5倍にできるということなので、非常に大きな価値が出ると思います。
ツールの分断と組織課題
このことはデザイナーにとっては本当に大きな意味があって、私たちの仕事ってただ画面を作ることじゃなくて、この体験ですとか、この機能が本当にユーザーにとっていいのかを確かめてプロダクトに反映していくことなんですよね。
なので検証の回数が増えるということは、そのままプロダクトの質に直結するということになります。
ありがとうございます。ここまでAI開発ワークショップをなぜやるのかとか、エンジニアリングの領域をなぜ学ぶ必要があるのかみたいなところの頭出しの情報を伺ってきましたけれども、次のテーマに行きたいと思います。
ツールの分断という組織課題があるんじゃないかということで、ちょっと事前に伺っているんですけれども、先ほどの話に戻ると検証回数というのが増えれば、当然クオリティも当然といっていいのかわかんないですけどね、ただ品質を上げる活動はしっかりとできてくる。
それは理想的なお話ではあるんですけれども、実際の現場ではそうスムーズにいかない問題とか、ちょっと壁みたいなのもあるんじゃないかなと思うんですけど、いかがですかね、そのあたり。
まさにおっしゃる通りかなとは思っています。それこそプロトタイプを試すですとか、そうした文脈だと全然AI活用できてるんですけど、私たちの組織が行っている、もしくは多くのプロダクト開発を行っているような開発組織が抱えている問題として、デザイナーとエンジニアの職種の間にある種壁ができているというのがあります。
もちろん壁がなく進行できているプロジェクトというのもあるんですが、多くのプロジェクトでは何かしら壁ですとか、コミュニケーションの難しさというのはあるのではないかなと思っています。これはちょっと規模の問題もあるんですけど、それ以上に職種ならではの文化の違いがありまして、その文化の違いをより大きくしてしまっているのが使用ツールの分断なんじゃないかなと思っています。
いろいろ違いとか壁とか共通言語の話はあると思うんですけど、まずは一つ注目されたのはツールの分断ということで、ツールだけじゃないような気もしてはいるけれども、まず共通言語を持つために、まず初手、そこかなっていうところの話かなと思うんですけれども、具体的にはお互いにどんなツールを使っているんでしょうか、デザイナー、エンジニア、あると思うんですけど。
わかりやすい例で言うと、まずデザイナーはフィギュアまでデザインしますよね。エンジニアはそこからデザインと仕様メモを受け取って、カーサーであったりVS Codeといったツールで実装して、GitHubでコード管理をします。つまり両者の作業環境が完全に分かれてしまっているという状況が生まれているんです。
デザイナーとエンジニアの相互理解
これが結構厄介で、いろんな問題を生んでいます。例えば、デザインを渡してから実装までに時間が空くと、あれここってなんでこうしたんだっけってなったり、レビューの時もFigmaとコードで行ったり来たりしながら話すので、同じ画面を見て会話できない。しかもお互いのツールを使おうとすると、それだけ学習コストがかかります。結果的に分かれて作業した方が早いよねというのが最適化になってしまいます。
じゃあどうやって歩み寄っていくのかっていう話につながってくるのかなと思うんですけれども、分かれてやった方が早いはよくあるパターンなのかなというふうに思ってはいますが、それだと連携できないよねみたいな状態は続いていくのかなというふうに思っているんですけれども、今回のAI開発ワークショップを通してだけでなくても、スパイスファクトリーではそこをどう乗り越えようとしている感じなんですかね。
私たちはエンジニアとデザイナーを始め、同じ活動に取り組むチーム全員が同じ共通言語でコミュニケーションを図れるような環境を目指しています。その取り組みの一環として以前フィグマメイクハッカソンというものを行いました。そこではエンジニアやプロジェクトマネージャーも一緒にフィグマを使って役割を超えてプロトタイプを作ってみたんですね。
そうすると、エンジニアにデザインの文化を体験してもらうというところで非常に好評な結果を得られました。今回はその反対で、デザイナーにエンジニア文化を体験してもらうことを目的にしています。これは双方的に誘うための取り組みの一つということで行っているものです。
今回のテーマは、デザイナーがエンジニアを知るための3時間にするよっていうテーマでお話しさせてもらっていましたけど、実はフィグマメイクハッカソンではその逆だったみたいな。エンジニアがデザイナーを知るみたいなところで、双方向のコミュニケーションとお互いを学び合うみたいなところをやられているということですね。まさに双方向だなって思いましたけれども。
実はフィグマメイクのハッカソンレポートはスパイスファクトリーの公式ノートでも公開されているので概要欄にリンクを貼っておきますので、皆さん見ていただければと思います。実はこのAI開発ワークショップの記事も事前に公式ノートで出ているので、ぜひ両方読んでみていただければと思っております。
ワークショップの参加者の反応
今後、結局その双方向のコミュニケーションをすることでどうなってくるんですかね、麻生さん。
まず相手のツールを理解するというところができると、相手の文化も理解することができると思っています。そのことによってコミュニケーションの質自体が変わってきて、最終的には開発のスピードもより上げられるというところは私たちは信じているところですね。
ありがとうございます。最後の話題になってくるかなと思うんですけれども、実際にこのAI開発ワークショップを今回やってみて、参加したデザイナーたちの反応はいかがでしたかというところを聞いていければと思います。
やっぱり最初は慣れない黒い文字列とかコードの画面とか、結構チンプンカンプンだったんじゃないかなと思うんですけど、どうでしたか皆さんの反応は。
本当に非常にたくさんの反応があったんですが、一番多かったのがエンジニアすごいなというところでしたね。こんなに複雑な開発フローを日々こなしていたのかというところで、相手の仕事への理解とリスペクトが生まれた瞬間だったかなと思います。
一方で、カーサーで自分でもここまで簡単にできるんだ、やったりですとか、経費の修正ですとか、デザイン関連の簡単なレビューはやってみようかなといったポジティブな意見があったりしました。
じゃあ、簡単なレビューはできるかもとか、ここまでできるんだって思ったことで、実際にちょっと業務で試してみようかなっていう声が上がったって感じなんですかね。
はい。
ASOさん自身はどういう感想を持ちましたか。実際に皆さんとやってみて。
そうですね。私としては、確実にデザイナーの実装に対する意識というのは変わってきているなというのを今回見て思いました。
ただ一方で、今回のワークショップというのは本当に最初の一歩に過ぎないと思ってまして、現在Figmaのプロトタイプ作成からカーサーへの実装の橋渡しをエンジニアとデザイナーで共同を行うですとか、実際の開発に近いワークショップも現在企画しています。
また、実際の案件で出たノウハウを領域を超えて活かせるように、ナレッジの仕組み作りも進めています。
次のステップと未来の計画
油断なんですが、ワークショップの取り組みについてはノートの記事でも詳しく紹介しているので、ぜひご覧いただければと思っています。
ありがとうございます。次のアクションもいろいろ企画してるよってことだったんですけど、実際、次企画するとしたらこんなことやるのかもなみたいな具体的なアイディアは出てるんですか、今。これからって感じなんですか。みんなで考えていくみたいな感じなんですか。
具体的なところはまだ全然検討中というか考えているところなんですが、今思っているのは、実際にプロットタイプを作って、それを開発に回して、実際に修正するっていうところまでワークショップの中で回してみるというのは非常にいいのかなと思ってまして、そうするとデザイナーのいいところとエンジニアのいいところをお互いに分担しながら共同して進められるのかなと思っています。
Figmaメイクの発火さんの時も、あれも3時間ぐらいでしたよね、確か。
そうですね、3時間、4時間ぐらいでした。
今回のAI開発ワークショップも3時間ぐらいだったので、けど実際プロトタイプ作って実装までってなると、1日ですか?1日コース?
1日にぎゅっとまとめてやれたら一番いいですよね。
一番いいですよね、流れとしては。けど結構疲れそうだけど。
一連の流れをぎゅっと知れた方が、分断することなく知れた方が、面白いというか学びは深そうだなと思いますが、今後も皆さん続報をお楽しみにということで、そろそろ閉めていきたいと思います。
では最後にリスナーの皆さんにですね、スパイスな一言をいつも皆さんにお願いしておりますので、ちょっと阿蘇さんにもご準備いただこうかなと思いますが、ご準備よろしいでしょうか。
はい。
ありがとうございます。じゃあ今日のスパイスな一言は。
はい、1ピクセルずつデザイナーとエンジニアの競争の世界に踏み出してみようです。
パチパチパチパチいいですね、いいですね。何でこの言葉を選んでいただいたんですか。
はい、そうですね、私自身実際に触ってみるまではGitHubか、何それ、みたいな状態でした。
実際にその小さい修正ですとか、機能追加とか、ちょっとした機能ですとか変更をやってみるだけでも、意外とここまでできるんだとか、ここはまだ難しいんだなみたいなところが見えてくるものがたくさんあります。
なので最初から完璧を目指す必要は全然なくて、1ピクセルずつ少しずつ広げていけばいいというところで、スパイスファクトリーのパーパスでもある1ピクセルずつより良いものを作っていく必要を忘れないようにしようというところで選びました。
はい、ありがとうございます。素敵な話だったので、皆さんノートも合わせて読んでいただけたりとかすると嬉しいです。
皆さん今日のお話はどう感じましたでしょうか。実は今回のスパイストークが今年最後のラジオ放送会となりそうでございます。
皆さん少し早いですが、メリークリスマス&良いお年をお迎えください。
今年もたくさんの皆さんに実は聞いていただいて本当に感謝しかありません。
実は今年は私とPRチームのメンバーだけでなく、本日みたいに麻生さんも初参加ということでラジオに出演していただいたんですけど、実は28人以上のスパイスファクトリーのメンバーがラジオに挑戦してくれたり初挑戦してくれたりしていて、みんなで作ってこれたラジオだったかなと思って最高の1年になったかなというふうに思っております。
来年はどんなラジオにしていこうかなというところで、新しいメンバーも増えてきたのでちょっとさらにパワーアップしてお届けしていきたいと思っております。
ということで最後までお聞きいただきありがとうございました。それではまた次回お楽しみに。
