스크립트
00:00:00皆さんこんにちは。カンファレンスを楽しんでおられることと思います。始める前に、
00:00:19実際にデザイナーの方、プロダクトデザインなどをされている方はどれくらいいますか？おっ、
00:00:24手が挙がりましたね。ほかに…なるほど。では残りの皆さんはエンジニアということになりますが、
00:00:32合っていますか？はい、大体そんな感じですね。わかりました。今日のトークは技術的なものではなく、
00:00:40もっと現実的な経験についてです。AI Engineerのこのカンファレンスや、
00:00:46過去の他のカンファレンスのデザインをどうやって作成したか、そしてAIがどのように助けてくれたかをお話しします。今日のテーマは、
00:00:54「1人のデザイナーとAI」、つまりデザイナーである私と、何百もの成果物についてです。さあ、
00:01:00始めましょう。私の名前はヴィンセント・ウェンディ、AI Engineerでシニアクリエイティブデザイナーを務めています。
00:01:07AI Engineerはとても小さなチームで、現在のメンバーは12人から15人ほどしかいません。
00:01:15誰もが自分の担当業務に取り組んでおり、AIは全員があらゆることをこなす上で、
00:01:24本当に役立つ手段になってきたと感じています。この規模のイベントともなれば、当然ながら問題が生じます。
00:01:33その問題とは、スケールの問題、あるいは私が言うところの「課題」です。これをどう克服するか？
00:01:40それは基本的に「自動化」です。これについてはこの後の後半でお話ししますが、このトークの準備をした時点では、参加者は6,000人を予定していましたが、
00:01:53現在は7,000人になりました。ありがたいことです。さらに、140社以上のスポンサー、300人以上のスピーカー、600以上のセッションがあり、そしてデザイナーは1人です。
00:02:10誰もがあらゆるデザインを必要としています。例えば、あらゆるものにデザインが必要です。スポンサーにはアセットが、スピーカーにはグラフィックが、
00:02:19迷わないための案内板が必要です。これが、私が行っている業務の基本です。ステッカーから――皆様はお土産のステッカーを気に入っていただけましたか？
00:02:31気に入っていただけていれば幸いですが、そのデザインも私が作成しました――ランディングページ、スピーカーの告知、トラックのマスコットまで、
00:02:41ご覧になるすべてのもの、ここで目にするほとんどのもの、案内板からデジタルサイネージ、ランディングページに至るまで、すべてが
00:02:51成果物です。1,000個の詳細があれば、1,000通りの失敗の仕方があるということです。なぜなら、スポンサーのロゴの欠落は大問題になりますし、
00:03:04スピーカーのスケジュール間違いも甚大な問題を引き起こすからです。これほど多くの種類の成果物を扱うのは不可能に思えますが、私のデザインチームをご紹介しましょう。
00:03:16メンバーは私と、Devin、GPT、そしてFigmaです。現在、ツール自体はもはや問題ではなくなりましたが、
00:03:31実際の課題を抱えていることこそが私たちの強みとなっています。例えば、誰かに「AI Engineerのデザインをする際、何にインスピレーションを受けましたか？」と聞かれたとき、
00:03:41当時は答えがわかりませんでしたが、よく考えてみると、実際に私にAI Engineerでのデザインのインスピレーションを与えてくれたのは、
00:03:46その「問題」そのものでした。これについてはこのトークの後半でお伝えします。
00:03:53ところで、2025年に行われたサイモン・ウィルソンのトークをご覧になった方はいますか？
00:04:00はい。
00:04:01そう、かなり面白いですよね。彼はあらゆるLLMにベクターファイルの作成を依頼しました。
00:04:11それは基本的に「ペリカンが自転車に乗っている姿」というもので、テストを目的としたものです。
00:04:16私も改めて試してみましたが、基本モデルでは相変わらず同じような結果になり、
00:04:20デザイナーである私には使い物になりません。しかしデザイナーとしては、枠にとらわれずに考える必要があります。
00:04:26つまり、GPTにペリカンが自転車に乗っている静止画像、例えばPNGを作成してもらい、
00:04:33それをFigmaでベクター化すれば、すぐに納品することができます。
00:04:37したがって、LLMの能力に関わらず、私たちは型に囚われず柔軟に考える必要があるのです。
00:04:44それでは、このスケールの問題をどのように解決するのでしょうか？
00:04:52基本的には5つの要素です。基盤の構築、再利用可能なデザイン、
00:04:56自動化されたワークフロー、検証された出力、そして摩擦の排除です。
00:05:00基盤は間違いなく、私たちが最初に正しく整えるべきコアの部分です。
00:05:06例えば、デザインシステム、タイポグラフィ、カラー、コンポーネントなどの要素ですね。
00:05:11これが一旦整えば、例えばウェブサイトを作成する際にも、
00:05:17すべてこの中で設定されます。これはあくまで一例に過ぎません。
00:05:22プライマリカラーやアクセントカラーがあり、
00:05:26タイポグラフィ、テキスト、その他の要素も同様に定義されます。
00:05:31それから皆さん、「アトミックデザイン」をご存知でしょうか？
00:05:37私の前職の背景としてプロダクトデザイナーをやっていたので、
00:05:41ユーザー中心のデザインを作成することや、
00:05:46アトミックデザインのように、可能な限り最小のパーツを作成し、
00:05:50それをレゴブロックのように組み合わせていき、
00:05:53最終的な成果物に仕上げるという手法にはかなり慣れています。これは現在の私の業務でも非常に役立っています。
00:06:02こうした基礎をすべて固めたら、次に私たちがしなければならないのは――
00:06:09例えば、私たちはDevinをとてもよく使っています。オフィスでは、誰もがDevinを使っています。
00:06:14誰もが、言わばDevinを使い倒しているような状態ですね。はい。
00:06:18そのため、このケースでは「デスクトップ用のタイポグラフィと
00:06:25モバイル用のタイポグラフィを使います」と指示するだけで済みます。
00:06:29なぜなら、Claudeや他のLLMは適当なフォントサイズを勝手に入れたがる傾向があるからです。
00:06:35こちらで定義しておかないと、先ほどのような雑な仕上がりになってしまいます。
00:06:41このようにタイポグラフィやカラーなどを指定した上で、再利用可能なデザインの話題に移ります。
00:06:50適切にセットアップを済ませ、ウェブサイトにブランドのトーンが反映されると、
00:06:57AI Engineerの他のチーム、例えばマーケティングチームなども、
00:07:02基本的にあらゆるものを自分たちで作成できるようになります。例えば、それをベースにしてメールのデザインを作成したりできます。
00:07:08ウェブサイトを基準にして、チラシやドキュメントを作成することも可能です。
00:07:13あらかじめ定義されているからです。
00:07:18そして一度デザインができあがれば、あとは同じことの繰り返しで量産できます。
00:07:24例えばマスコットについても、ほぼ同じデザインを使用しており、
00:07:28パターンを繰り返すだけです。事前にそのような要素を定義しておけば、
00:07:34あらゆる場面で通用するデザインを1つ作成することができます。
00:07:38そしてここからが、私が最もお話ししたい部分である
00:07:41「自動化されたワークフロー」です。
00:07:43以前は、例えば部屋の外を見ていただくと分かりますが、
00:07:48スケジュール表がありますよね。一人ひとりのスケジュールです。
00:07:52以前はこれをFigmaで手作業で行っていましたが、現在はDevinを使用しています。
00:07:58実際にお見せしましょう。
00:08:02どうぞ。
00:08:04現在、私たちは最新のデータを取得し、
00:08:08Devinに「この部屋で、このベースのスケジュールが欲しい」と伝えるだけで処理させています。
00:08:14その後、それをエクスポートしてPNG形式でダウンロードすれば、
00:08:18データも正確なものが得られるので、フラッシュドライブに入れて
00:08:22画面に映し出すことができます。
00:08:25以前はこのようなやり方は不可能でした。
00:08:28デザイナーとエンジニアの間の
00:08:31摩擦が大きすぎたからです。
00:08:33ピクセルパーフェクトなものを作ることはできませんでした。
00:08:35デザイナーがエンジニアに対して
00:08:38「これがデザインです」と伝えても――
00:08:40失礼、デザインを作成するエンジニア、例えばですね。
00:08:44「これをこう実装してほしい」と伝えた際、
00:08:46彼らがピクセルパーフェクトに作ってくれないのです。
00:08:49フィードバックのやり取りが膨大になってしまいますよね。
00:08:52しかしDevinを使えば、「おい、
00:08:54ここをもっと正確にしてくれ」と指示するだけで済みます。
00:08:58MCPに接続することもできますし、
00:09:00もしうまくいかない場合でも、
00:09:02仕様書などを渡すことで、
00:09:06余白やフォントサイズなどを明確に定義することができます。
00:09:11そしてこれが、スピーカーの告知で行っていることです。
00:09:14私たちが300人以上のスピーカーを抱えている中、
00:09:201人ずつ手作業で対応するのは不可能ですよね？
00:09:22そのため、私たちはこのようなシステムを作成しました。
00:09:26スピーカー告知のツールにアクセスすることも可能で、
00:09:29この例のように、ご自身で試してみることもできます。
00:09:32ここで選択を行えば、
00:09:38自分の名前を変更することもできます。
00:09:40まあ、そうですね。
00:09:42このように、名前を好きなように変更できます。
00:09:44また、ランドスケープ（横長）モードもあり、
00:09:48こちらも読み込むことができます。
00:09:51スピーカーが顔写真や詳細な情報を持っている場合、
00:09:53自動的にエクスポートされます。
00:09:56さらに、トレーディングカードも用意しており、
00:09:59これが驚くほど好評です。
00:10:01異なるテーマも用意されています。
00:10:05そしてこれらはすべてピクセルパーフェクトで作られています。
00:10:07例えばこのカードですね。
00:10:11これはTBPNにインスパイアされたものです。
00:10:14それでは、これをどのようにピクセルパーフェクトで納品しているのか、
00:10:19その詳細を見ていきましょう。
00:10:23プロセスについてですが、以前、
00:10:25プロダクトデザイナーとしてのキャリアをスタートした頃は、
00:10:34まずはリサーチを行って、
00:10:37プロダクトを構築するという、一般的なデザイン思考のプロセスを踏んでいました。
00:10:39そしてフィードバックループを回す、といった具合です。
00:10:42しかし現在では、そうした手法は時代遅れとなっています。
00:10:45私の場合は、SlackやFigmaを使い、
00:10:49Slackへと送り返すという流れです。なぜなら私たちのDevinはSlackに常駐しているからです。
00:10:54そして彼が必要とするすべてのものを出力させます。
00:10:58例えば、MCPや仕様書を連携させることができます。
00:11:01仕様書といえば、例えばこのようなものですね。
00:11:07これはFigmaのプラグインで、興味があれば使ってみてください。
00:11:10無料のプラグインです。
00:11:15PDFに注釈を自動で付与してくれる機能を持っています。
00:11:15デザイナーというのは、レイヤーに名前を付けないことが多いものです。
00:11:20そのため、「フレーム3」や「フレーム4」といった適当な名前が並びがちですが、
00:11:24LLMならその意図をしっかりと理解してくれます。
00:11:29余白やフォントサイズ、
00:11:31そしてカラーなどをすべて定義してくれるため、
00:11:37ピクセルパーフェクトなプロダクトを開発する上で間違いなく大きな助けとなります。
00:11:40ピクセル単位で完璧なプロダクトの開発に間違いなく役立ちます。
00:11:44また、ちょうど最近、まさに今日あったことですが、写真があってですね、
00:11:51登壇者のサムネイルを作らなければならなかったんです。
00:11:55それでDevinに「ねえ、この人誰？」と尋ねてみたところ、
00:11:58まあ、何というかやってくれたわけです。
00:12:01Tinderのような感じで、何というか、
00:12:06これが同一人物かどうかを検出してくれるんです。
00:12:09そして、かなり正確だと思います。
00:12:11Jason Liuです。
00:12:12その通り。
00:12:13そして、これをコンテキストとして利用できるわけです。
00:12:18以前なら、サムネイルを作る際、
00:12:19カメラマンが撮影したすべてのコードを探して、
00:12:231つずつ、可能であれば時間順に探す必要がありました。
00:12:27でも今は、「あ、これはJason Liuだ」となって、
00:12:30その写真をダウンロードして、
00:12:31サムネイルに貼り付ければいいわけです。
00:12:34本当にすごいことですよね。
00:12:36つまり、私たちが今生きている世界というのは実際、
00:12:40デザイナーとしての私にとって、すでに絶頂期なんです。
00:12:43これ以上何を求めるというのでしょうか？
00:12:48自動化できるものはすでに揃っています。
00:12:50デザインを素早く作成する手段もすでにあります。
00:12:54要するに、必要なのは「課題」だけです。
00:12:56解決する価値のある課題さえあれば、
00:12:59基本的に何でも解決できるからです。
00:13:03話をもとに戻しましょう。
00:13:04こんな風に脱線してしまいました。
00:13:06ええ。
00:13:07それから——そう。
00:13:09これは私たちがテストした素晴らしいことの1つでもあります。
00:13:11ご存知の通り、私たちには何百ものスポンサーがいますよね？
00:13:16140社以上です。
00:13:18そしてロビーをご覧いただくとわかるように、
00:13:21すべてのスポンサーが載ったバナーがあります。
00:13:24私は基本的にDevinにこう伝えました——
00:13:29このグラフィックに抜け落ちているロゴがないか確認してくれないか、と。
00:13:33私の行ったテストでは、その精度は100%でした。
00:13:38だから——本当にすごいことです。
00:13:40そして、皆様がグッズとして受け取ったTシャツでも同じこと行いました。
00:13:48そして、ええ、驚いたことに、Devinは物事を視覚化する方法をちゃんと知っているんです。
00:13:54つまり、視覚的に物事を検出する方法ですね。
00:13:56これは非常に驚きでした。
00:13:58なぜなら、人間である私たちには見落としがあり得るからです。
00:14:02あ、小さなサービスが1つ抜けていた、ということが起こります。
00:14:05でも、こういった仕組みがあればダブルチェックができます。
00:14:09つまり、人間とAIを組み合わせるのです。
00:14:13そうすれば、自分専用のQAチームが手に入ります。
00:14:15そして摩擦をなくす。
00:14:17これが思考のプロセスなのです。
00:14:21ですから、デザイナーとしてではなく、ユーザーとして考える必要があります。
00:14:26違いますか？
00:14:27すべてのユーザーにはそれぞれのニーズがあるからです。
00:14:29例えば、ここのフロアマップを歩いてみるとします。
00:14:33つまり、私は自分が参加者になって受付に行き、
00:14:39——に行くところを想像しています。
00:14:41案内表示やQRコードを見て、それから諸々を確認するわけです。
00:14:46皆さんが迷子にならず、部屋やその他の場所を
00:14:50ちゃんと見つけられるよう、すべてが繋がっている必要があります。
00:14:55そして実際の仕事とは、例外処理の対応です。
00:15:00例えば——ああ、私には——そう。
00:15:03例えば、スケジュールの更新があるとしますよね。
00:15:09これを作成した当初、編集ボタンがついていませんでした。
00:15:13そしてある朝、突然「このスケジュールを更新する必要がある」となったのです。
00:15:19しかし私たちには編集ボタンがありません。
00:15:21そこでDevinに「ねえ、編集ボタンを追加してくれない？」と頼むことができます。
00:15:25すると、やってくれました。
00:15:26だから今はすべてを変更し、PNG形式で書き出して画面に再表示させることができます。
00:15:32とても便利ですよね？
00:15:34かつて手動でやらなければならなかったような例外対応も、今では——不可能ではありませんが——
00:15:41現在ではずっと簡単になりました。
00:15:43ここでの教訓は、スケールの問題を解決するには、実際に「小さく」考えなければならないということです。
00:15:51可能な限り最も小さなことについて考える。
00:15:53起こりうるすべての問題や失敗を想定し、事前にそれを解決しようと努めるのです。
00:15:59それに、ええ、現在は基本的に何でも自動化できます。
00:16:04そして今この瞬間においては、課題が存在すること自体が実際にあなたに利益をもたらします。
00:16:11なぜなら、それがより良いプロダクトのリリースや、優れたものを世に出す助けとなるからです。
00:16:18ええ、私が共有できるのはこれくらいです。
00:16:20私の話が少しでもお役に立てば幸いです。
00:16:23それでは、以上です。
00:16:26皆さん、ありがとうございました。
00:16:29本当にありがとうございました。
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기