Pencil、AIエージェント、そしてデザインの未来 | Better Stack Podcast Ep. 13

BBetter Stack
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술

Transcript

00:00:00バイブ・デザインやバイブ・コーディングは、私にとってここ20年ほどで最もFlashに近い存在に感じられます。
00:00:07こちらはPencilのCEO、トム・クラッカー氏です。
00:00:10Pencil.devですね。
00:00:11それがPencilと呼ばれています。
00:00:13Pencilという新しいアプリです。
00:00:14Pencil.devです。
00:00:15AIと対話するための、これまでに見たことのないような新しいユーザー体験を発見しつつあると感じています。
00:00:22カーソルやスキャンといったものは、氷山の一角に過ぎず、これからもっと多くのものが登場するでしょう。
00:00:29Bananaのような画像生成AIは素晴らしい写真を生成しますが、イラストはどうでしょうか?
00:00:342026年後半には、イラストが非常に重要になると考えています。
00:00:39デザインにおいて、他よりも圧倒的に優れた特定のモデルはありますか?
00:00:45私のお気に入りは……
00:00:48まずはアイスブレイク的な質問をさせてください。
00:00:51かつて、あなたはAdobe Flashに非常に詳しかったですよね。
00:00:54今でもActionScriptを覚えていますか?
00:00:56ええ、もちろんです。私はFlashで育ちましたから。
00:00:59それがテック業界に入るきっかけで、Photoshopは7歳の時から使い始めました。
00:01:09両親がデザイン会社を経営していたので、放課後はいつもデザイナーたちと過ごし、PhotoshopやIllustrator、当時はCorelDRAWなど、あらゆる印刷デザインのツールを教わりました。
00:01:2690年代後半にインターネットが登場して、インタラクティブなものに興味を持ち、HTMLやDHTMLなどを掘り下げ始めました。かなり昔の話ですが、そこにFlashのバージョン3が登場したんです。
00:01:45それを見て「ワオ、これは何だ?」と驚きました。
00:01:48動きがあって、アニメーションして、オーディオまで入っているんですから。
00:01:55すぐにFlashに夢中になり、ウェブサイトを作り始め、最終的にプラハで開催された「Junior Internet」という会議で賞をいただきました。
00:02:07プラハでJunior Internetを覚えている人に聞けば、それが多くの人のキャリアの出発点だったと分かるはずです。当時、オンラインで動画をストリーミングする唯一の方法はFlashでした。
00:02:25そこで、あらゆるニュース媒体などのためにビデオプレーヤーを構築し始めました。
00:02:29Flash Media Serverなどを多用していたことがAdobeの目に留まり、最終的にAdobeのFlashエバンジェリストとしての仕事をオファーされました。
00:02:44それがすべての始まりです。それからデザインツールを構築したり、デザイン会議で登壇して多くのデザイナーと対話したりするようになりました。
00:02:55ええ、それが私の物語の原点です。
00:02:59ゲームイベントなどのカンファレンスに登壇している動画もいくつか拝見しました。
00:03:06Adobe時代にはゲームも制作していたのですか?
00:03:09ええ、もちろんです。
00:03:10Flashはゲームを含む多くのインタラクティブなコンテンツに使われていました。最終的に私はAdobeのゲームエバンジェリストになり、様々な企業がアプリやゲームをFlashに移行するのを支援しました。
00:03:26様々なゲームカンファレンスで登壇し、多くの開発者と話し、Flashへの移植をサポートしました。有名な例では「Machinarium」があります。
00:03:40これはAdobe Airを通じてFlashからiOSへ移植された初期のゲームの一つで、iPadで動作するFlashゲームとして画期的な瞬間でした。
00:03:55本当に大きな出来事でした。
00:03:56App Storeで「今月のゲーム」に選ばれ、爆発的な人気を博しました。
00:04:04当時、Newgroundsコミュニティの一員でもあったのですか?
00:04:08いいえ、それは何ですか?
00:04:11Newgroundsは、すべてのFlashゲームやアニメーションが掲載されていたサイトです。
00:04:18YouTube以前は非常に人気がありました。
00:04:21私はMiniclipだと思っていました。
00:04:23ああ、Miniclipなら覚えています。
00:04:24私にとってはMiniclipでしたね。
00:04:28でも、私は「FWA」などのお気に入りサイトで毎日を過ごしていました。
00:04:35インターネットやインタラクティブ・ウェブの歴史をかなり遡っていますね。
00:04:43それが最終的にPencilに繋がる初期の構成要素だったのでしょう。
00:04:49その後、Illustrator用の「DrawScript」というツールも作成されましたよね。
00:04:55それについてお話しいただけますか?
00:04:56もちろんです。DrawScriptはIllustratorのプラグインで、図面を基本的にJavaScriptに変換できるものでした。それをコードとして実行すれば、描いたものを再描画できるというアイデアです。
00:05:18それがコンセプトでした。
00:05:19あなたの「デザインからコードへ」という歩みをリサーチしてきましたが、なぜデザインをコード化したいと思ったのでしょうか?
00:05:35その欲求のきっかけは何だったのですか?
00:05:37当時は、図面をコードに取り込むための解決策が全くなかったからです。
00:05:45アイコンなどが必要でしたが、当時のSVGは非常に制限的で、サポートも十分ではありませんでした。でも、HTMLのCanvas上に特定のものを描画したかったんです。
00:06:04コード化すれば、それをインタラクティブにしたり、ゲームに活用したりできました。
00:06:15コードとして扱えれば、動かしたりアニメーションさせたりすることも可能になります。
00:06:23そう、それがその扉を開くきっかけでした。
00:06:29Adobe在籍中、Adobe XDにも携わっていましたね。
00:06:34その当初のビジョンは何だったのですか?
00:06:36Dreamweaverの代わりだったのか、あるいはどのように誕生したのでしょうか?
00:06:42当時はSketchが登場し、Photoshopもウェブサイト制作などに多用されていた時期でした。
00:06:54しかし、ウェブサイトやアプリのデザイン、特に誰もがモバイルアプリを作っていた時代に合わせた、全く新しい特化型のツールが必要だと気づいたんです。
00:07:12そこで、既成概念にとらわれず、第一原理から見直したいと考えました。
00:07:18「もしゼロから始められるとしたら?」と考え、軽量で親しみやすく、高速であるといった原則を掲げ、大量のアートボードを描けるようにしました。
00:07:35Photoshopでは一度に一つのことしかできませんでしたが、本当に必要だったのは、複数の画面にわたるフロー全体を表示することでした。
00:07:49Adobe XDはまさにその目的のために設計されたツールだったのです。
00:07:54プロトタイピング機能も含まれていました。
00:07:57画面同士を繋いだり、スクロールエリアを追加したりできました。
00:08:03ええ、そうです。
00:08:05話を飛ばしてPencilに移りましょう。Adobeから、AIを駆使するXDのようなこのツールを構築するに至った経緯は興味深いです。
00:08:17どの時点でLLMやエージェントの力を確信したのですか?
00:08:24その間にいくつかスタートアップを経て、最終的にCursorやClaude Codeなどを掘り下げ始めました。別のものを作っていたのですが、Cursorを使っている時に「頭の中にあるボタンの見た目をどうやってLLMに伝えればいいんだ?」と思ったんです。
00:08:52「上部に固定されたナビゲーションバーがあって、その中にボタンがあって……」といった具合に。
00:09:00視覚的なイメージを伝えるために、LLMに対してまるで小論文のようなプロンプトを書いていました。
00:09:09周りを見渡しても、解決策はありませんでした。
00:09:11VS Codeのマーケットプレイスなどを探しても、簡単に図を描いてLLMに「これをやって」と伝えられるものは存在しなかったんです。
00:09:23当時はまだMCP(Model Context Protocol)などが普及する前でした。初期のアイデアは、LLMは構造化データの読み取りが得意なので、JSON形式を使って任意のコードに変換させるというものでした。
00:09:38プロトタイプを作って公開しました。
00:09:412025年5月のことでしたが、それがバイラルしました。
00:09:45SNS全体で100万回再生され、Xで85万回、LinkedInで40万回ほどだったと思います。
00:09:53「これは私だけの悩みではなく、他の多くの人も同じような助けを求めているんだ」と実感しました。
00:10:03素早いビジュアルからコードへと橋渡しをしてくれる存在は誰もいなかったのです。
00:10:10実際に構築してみると、次々とアイデアが湧いてきました。例えば、自分で描くだけでなく、デザインそのものを生成させることもできると気づいたんです。
00:10:23LLMに「これを描いて」「これを生成して」と指示できるわけですから。
00:10:30そこで「バイブ・デザイン」の時代の幕開けを感じました。
00:10:39その話題になったデモは、Cursor用のデザインモードのデモでしたか?
00:10:42はい、Cursor用のデザインモードと呼ばれていました。
00:10:45ええ、それは今でも基本的には引き継がれています。
00:10:49Cursor、Windsurf、DigravityといったVS CodeベースのIDE内で動作するキャンバスです。
00:10:59基本的には、IDE内に統合されたビジュアルなカスタムエディタです。
00:11:07キャンバス上で自由に操作でき、何かを選択してチャットにペーストしたり、あるいはポイントするだけでエージェントが選択内容を認識します。
00:11:21そこから情報を引き出し、望み通りのものに変換し始めます。
00:11:28Reactであろうと他のライブラリであろうと関係ありません。プラットフォームやフレームワークに依存しない表現形式なので、素早くアイデアを練り、好きな形式に出力できます。
00:11:45それはプレーンなCSSを使うのですか? それともTailwindやshadcnなどのライブラリを統合しているのですか?
00:11:52正直なところ、何でも選べます。内部的には、デザインの見た目を定義する構造化されたJSONに過ぎません。Tailwindなどへの変換ルールはあらかじめ組み込まれています。
00:12:10しかし、自身のコードベースに合わせた独自のルールを書くこともできます。私たちが「penファイル」と呼んでいるこのファイルは、Gitリポジトリ内に保存されます。
00:12:23エンジニアもAIエージェントも直接アクセスでき、好きなものに変換可能です。
00:12:32独自のルールを設定して、完全に自分たちのものにできるのです。
00:12:39そこが重要なポイントだと思います。
00:12:41初めてPencilを使った時、魔法のようだと思いました。技術的な裏側はどうなっているのか気になります。
00:12:49penファイル内のJSONは見ましたが、どうやってそれをボックスをドラッグしたり色を変えたりできる対話的なUIに変換しているのでしょうか。
00:13:01そして、エージェントもそれを理解して同じように操作できるのはなぜですか?
00:13:05人間とエージェントが同じファイルをデザインするという融合は、どのようにして思いついたのですか?
00:13:12複数の要素がありますが、まず、使い始めたその瞬間から直感的に操作できる、極めて馴染みのある環境を作りたかったんです。
00:13:23開いた瞬間に「よし、ズームイン・アウトができるキャンバスだな」と状況が把握できるように。
00:13:29片側にプロパティ、反対側にレイヤーパネルを配置し、徹底的に使い慣れた形にしました。
00:13:36同時に、これまで誰も解決できなかった「デザインとの対話」という新たな可能性も開けました。
00:13:47それが多くの革新の機会を与えてくれました。最新の動画で見せたのは、複数のエージェントがまるでオーケストラのように連携してデザインを作り上げる様子です。
00:14:02正直なところ、まだまだできることは山ほどあります。
00:14:10新しいモデルが登場するたびに、以前は不可能だったことが可能になり、毎日新しい発見があります。
00:14:24また、ユーザーと対話する中で、彼らの使い勝手を見て新しいアイデアが次々と生まれてきます。
00:14:32今ではリモート制御を望む声などもあり、可能性は無限大です。
00:14:39本当に驚くべき状況です。
00:14:40どのモデルから始めたのか気になります。初期のモデルはデザインが苦手でしたが、どの時点でモデルがデザインに使えると確信しましたか?
00:14:50学習データにデザイン要素が追加され始めたあたりでしょうか。
00:14:54ええ、まだ課題はありますが、モデルが更新されるたびに改善されています。
00:14:57着実に良くなっていますね。
00:15:01私たちが始めたのは、Claude 3.5 Sonnetか、あるいは3.7あたりだったと思います。
00:15:10最初は、見た目をどうすべきか細かく指示する必要がありました。
00:15:18しかし進歩に伴い、今では「ウェブサイトをデザインして」と言うだけで済む段階に来ています。
00:15:27それだけで、かなりのクオリティのものを仕上げてくれます。
00:15:31そして、モデルとエージェントの進化におけるもう一つの大きな転換点は、エージェントが「具体的に何を求めているのか?」と質問を返してくる「エリシテーション(聞き出し)」です。
00:15:46これは、エージェンシーのクライアントになるのと非常によく似ています。デザイナーやプロジェクトマネージャーは、最適なものを作るために、まずヒアリングを行って情報を引き出しますよね。
00:16:10現在のモデルは非常に強力ですが、この対話こそが大きな突破口(アンロック)になると考えています。
00:16:22以前は「何かデザインして」と言っても、全く意図しないものが出てくることがありました。
00:16:29しかし今では対話を通じて、ユーザーが真に求めているものやスタイルを抽出できるようになりました。
00:16:34その結果、正解にどんどん近づいています。
00:16:40それが大きな違いです。
00:16:43Pencilで多くのモデルをテストされたことでしょう。
00:16:48デザインにおいて、他よりも際立って優れた特定のモデルはありますか?
00:16:54私のお気に入りはClaude 4.6 Opusです。コミュニティの動向を見ても、現在のデザインにおける最高峰(SOTA)としての地位を確立しています。
00:17:10本当によく動きますし、構造化データの扱いも非常に優れています。
00:17:15レイアウトのミスも最小限に抑えられています。
00:17:22他の多くのモデルでは、動作を修正したり調整したりする必要があります。
00:17:28それ自体は問題ありません。ニュアンスを発見し、エージェントに「ここが違う、もう一度やって」とフィードバックすれば、大抵はうまくいきます。
00:17:42Opusの唯一の課題は、素晴らしい一方で動作がやや遅いことです。
00:17:54初めて「本当の魔法」を感じたのは、CursorのComposerが登場した時でした。その速さに驚きました。
00:18:04考えているそばからデザインが出来上がっていくようでした。
00:18:08今後の進展として、クオリティのさらなる向上はもちろん期待していますが、
00:18:19各研究機関にはぜひ「速度」に注力してほしいと切に願っています。
00:18:24CerebrasやSparkモデルなどでその兆しは見え始めていますね。
00:18:30次のイノベーションの段階は速度に焦点を当てるべきです。デザイナーとしてフロー状態を維持するためには不可欠だからです。
00:18:42最初から完璧なものを出すことよりも、何度も素早く試行錯誤を繰り返すことの方が重要な場合が多いのです。
00:18:51そのプロセスに関与し続けるためには、高速なモデルが必要です。
00:18:58ツールを構築する際、ユーザーをフローの中に留めておくことは私たちにとっても非常に重要な原則です。
00:19:06バイブ・コーディング・ツールでプロンプトを書き、10分間コーヒーを飲みに行って戻ってきたら、全く違うものができていた……というのとは対照的です。
00:19:19バイブ・デザインはそれとは違います。
00:19:21リアルタイムで何かが起きていく様子を見たいのです。
00:19:24だからこそ、キャンバス上を動き回るカーソルを表示し、モデルがどのように考えているのかを視覚化しました。
00:19:33処理に時間がかかる場合でも、ユーザーに対して非常にコミュニケーション豊かであることは重要です。
00:19:42同時に、モデルがさらに高速化し、リアルタイムで表示されるようになることを期待しています。
00:19:49ここで重要なのは「並列性」もまた大きな突破口になるということです。
00:19:57モデル単体が遅くても、複数のことを同時に実行できれば、それは障壁にはなりません。
00:20:08処理が進んでいる間に、キャンバスの他の複数の領域で作業を続けたいですから。
00:20:17ここで作業したい。エージェントが終わるのを待つ必要はありません。
00:20:23Pencilのクールな点は、エージェントが作業している「その手元」でデザインをいじり始められることです。
00:20:32エージェントが作業中でも、すでに出来上がった部分を整理し始めることができます。これが「バイブ・デザイン」が理にかなっている理由です。
00:20:45コードの場合、エージェントが書いている最中に手を加えると、競合してコンパイルエラーになる可能性があります。
00:20:54しかし、キャンバス上では領域が分かれているため、それが可能になるのです。
00:21:01Pencilの歩みで私が最も気に入っているのは、あなたがデザインの世界において深い専門知識を持っている点です。最近のバイブ・コーディング・ツールの中には、
00:21:10「できるか」ばかりを考えて「すべきか」を疎かにしているものも見受けられます。ワークフローとして使いにくいものもありますが、あなたの「人間を置き換えるのではなく助ける」というアプローチは素晴らしいと思います。
00:21:25私もそうしたAIツールに惹かれますし、Pencilのその姿勢は非常にクールです。
00:21:30ええ、100%同意します。ユーザーと話すと、まるで「ジュニアデザイナーのグループ」がチームに加わったような感覚で、以前よりずっと速く、的確に指揮を執れるようになったと言ってくれます。
00:21:51以前なら、適切なパディングやマージン、フォントサイズといった細かな調整に膨大な時間を費やしていました。
00:22:01頭の中にビジョンはあるのに、それを形にするための「マラソン」に何時間もかけていたんです。
00:22:07しかし今では、すでにビジョンが見えているのなら、それを一気に「スプリント」して具体化することができます。
00:22:20先ほどの並列エージェントの話に戻りますが、それは複数のエージェントが「同じデザイン」を同時に作るということですか? それとも「異なるデザイン」を別々に作るということでしょうか?
00:22:38実は、その両方です。並列性に着目した当初の目的は、キャンバスの異なる場所で、同じデザインのバリエーションを同時に探求することでした。
00:22:53しかし、なぜ複数のエージェントが同じページで作業できないのかと考えたんです。実際、それは可能です。というのも、
00:23:15適切にオーケストレーション(調整)すれば、コードとは異なり、キャンバス上では競合しないように作業を分担できるからです。
00:23:32達成すべき目標の共通認識さえあれば、一人がヒーローセクション、もう一人が中間セクション、三人がフッターといった具合に分担できます。
00:23:50Cognitionの論文では、コンテキストの問題があるため複数のエージェントを実行すべきではないとされています。「スーパーマリオ」を作る例で、レベル担当とキャラ担当が異なる重力設定にしてしまうような事態を懸念していましたが、Pencilではどう解決したのですか?
00:24:15魔法です(笑)。というのは冗談で、何度も試行錯誤を繰り返しました。正直なところ、まだ表面をなぞり始めたばかりで、可能性の方向性を示したに過ぎません。
00:24:32共有コンテキストの扱い方や、速度、トークン使用量の最適化など、やるべきことは山積みです。
00:24:49本当にワクワクするようなことが、これからたくさん待っています。あなたが言ったように、異なる役割(ロール)を与えることもできます。エージェントのチームと言うと普通は役割を分けることを考えますよね。
00:25:14それも一つの方法ですが、誰かが終わるのを待つことになります。私が本当に興奮している並列性とは、エージェントがお互いを待たずに、まるでGPUのように真に並列で動くことです。
00:25:30世の中には多くのツールやモデル、エージェント基盤がありますが、あなたがPencilで作業する際、どのようなツールを使い、エージェントとどのようにやり取りしていますか?
00:25:45それはPencil内の特定のツールのことですか、それとも?
00:25:49両方です。Pencilそのものもそうですが、CodexやClaude Code、あるいはGeminiなどは使っていますか?
00:25:57すべて使っています。Pencilをローンチした際、人々がいかに多様な組み合わせで使いたがっているかを知り、非常に驚きました。
00:26:08Discordが爆発し、誰もが「聞いたこともないようなモデルと組み合わせて使えるか」と聞いてきました。
00:26:17このエージェント基盤やこのCLIと使えるか、など。この世界がいかに広大であるかを思い知らされました。
00:26:30私たちはまだその入り口に立っているだけで、これからあらゆる組み合わせが登場するでしょう。
00:26:38今、Pencilでは、あるフレームをCodexで、別のフレームをOpusで、三つ目をGeminiでといった使い分けができます。
00:26:48驚くべきことに、これらすべてのモデルを同時に走らせ、結果を比較検討することも可能です。
00:26:56モデル同士を協力させることもできるので、非常に興味深いですよ。
00:27:02内部でモデルのデザイン能力をどのようにベンチマークしているのか気になります。新しいモデルが出るたびに、飛躍的な向上があるかチェックするシステムはありますか?
00:27:14自動化された手法もありますが、まだ初期段階なので、かなりの部分は手作業での検証に頼っています。
00:27:32新しいモデルが出ると真っ先に「何ができるか」を確かめます。言葉にするのは難しいのですが、Opus 4.5から4.6への進化のように、細部のディテールにわずかな違いを感じることがあります。
00:27:51「何が違うの?」と聞かれても説明に窮しますが、使ってみれば一目瞭然です。細部にこだわりが感じられ、突然すべてが腑に落ちる瞬間があるんです。
00:28:03Opus 5.0などへ向けて、こうした反復を繰り返していくことになります。また、新しい画像生成モデルも続々と登場しています。
00:28:15そこでも細部の向上が見られますが、やはり言葉では表現しきれません。見れば分かる、という感覚です。
00:28:22例えば今、ウェブサイトのデザインが欲しい場合、Nanobanana Pro 2などで生成し、それをPencilに取り込んでさらにデザインを詰めることはできますか? それともPencilでゼロから始めるのがベストでしょうか?
00:28:48もちろんです。実際、Pencilのチャットに生成した画像をドラッグ&ドロップできます。複数の画像を入れることも可能です。
00:28:59画像だけでなく、独自のルールやガイドラインを記したMarkdownやテキストファイルも追加できます。多くのユーザーがそうした環境を構築し始めています。
00:29:12ルール、ライブラリ、画像を組み合わせて、望む結果を得るわけです。また、果物や花の写真を取り込んで、それをデザインの「バイブ(雰囲気)」として使うこともできます。
00:29:28私たちのスタイルガイドの多くも、花などの「バイブ画像」から、ビジョンモデルを使ってカラーパレットを抽出して作られました。
00:29:43人間が外を歩いて山や海、街並みを見てインスピレーションを受けるのと同じように、そうした探索や組み合わせがますます増えていくでしょう。
00:30:04「ああ、これだ」と思っても、以前の手動デザインでは、わざわざ写真を撮るまでもなく、単に頭の中に記憶の断片(メンタルスナップショット)を残すだけでした。
00:30:17家に帰ってデザインを始める時に、その日見たものに無意識に影響を受けているような状態です。
00:30:25しかし今では、そのインスピレーションを直接AIに渡し、何が出てくるか試すことができるのです。
00:30:30SVGアセットや画像をプロンプトに使えば、凝ったSVGアニメーションなども作れるのでしょうか?
00:30:42SVGに関しては、まだ完全ではありませんが、最近いくつか面白いSVGモデルが登場しています。
00:30:49この分野で起きていることは非常に興味深いですし、アニメーションも次の大きなフロンティアになると思います。
00:31:01RemotionやLottieなどもありますし、Replitもアニメーション機能をリリースしましたよね?
00:31:12ですから、これはまだ開拓が始まったばかりの、次なる大きな領域になるでしょう。
00:31:18まだ表面をなぞった程度で、素晴らしい出来ではありますが、After Effectsを使いこなすプロのデザイナー級のレベルには達していません。
00:31:32しかし、この分野には非常に大きな可能性があると考えています。
00:31:36新しいSVGモデルのデモを見ましたが、現在のモデルがSVGに苦戦していることを考えると、非常にクールでした。
00:31:43徐々に進化してはいますが、その特定のSVGモデルは現状で可能なことと比較しても驚異的でした。
00:31:50これは非常に興味深いテーマで、レイアウトに関してはかなり良いレベルに達している段階だと思います。
00:31:57しかし、ウェブサイトとは単に良いレイアウトであればいいというものではなく、そこから得られる「感情」が重要ですよね。
00:32:04それはイラストであったり、テキストを非常に太く配置したり、サブタイトルを添えたりすることで強調されます。
00:32:16つまり、テキストを面白く、あるいはファンキーな方法で構成することなのです。
00:32:22動きのあるビデオがあっても、それはあくまで雰囲気作りのための抽象的なイメージだったり、スクロールに合わせてスライドしたり動いたりするものです。
00:32:41そういった要素が「バイブ・デザイン」にも取り入れられ始めるでしょう。特にイラストに関しては、3Dはどうでしょうか?
00:32:54最近のウェブサイトでは、キューブなどを使って、バイトデータがパッケージに組み上げられる構造を説明するようなレンダリングをよく見かけます。
00:33:11そういったサイトは多くありますが、それが今の欠けている要素です。画像生成AIは素晴らしい写真を生成しますが、イラストはどうでしょう?
00:33:232026年の後半には、イラストが大きなトレンドになると私は考えています。
00:33:30それは楽しみですね。私自身、これまでイラストには苦労してきましたから。
00:33:33Adobeのツールなどを使っても、上手なイラストを描けた試しがないんです。
00:33:37ええ、それは重要なポイントですね。多くの人が「良いデザイン」がどういうものかは理解しています。
00:33:47頭の中でイメージすることさえできます。
00:33:49ただ、人間とコンピュータの間に、それを具現化するための「溝」があるだけなのです。
00:33:55私がワクワクするのは、そうしたツールが自分とビジョンの間の溝を埋めてくれるのを目の当たりにすることです。
00:34:04それでも「人間ならではの感性」は必要だと思いますか?AIにデザインを任せきりにすれば、すべてが凡庸になってしまう気がします。
00:34:13人間が外の世界からインスピレーションを得て、自分のアイデアを持ち込み、AIをその方向に導くことこそが「人間らしさ」なのでしょうか?
00:34:22それが、将来も人間のデザイナーが必要とされる理由だと思いますか?
00:34:27そうですね。私たちが日々使っている優れた製品には、否定できない「センス」の要素が宿っています。
00:34:39コードやデザインの面でAIから得られるものは、いわば「型通りの結果」であり、それ自体はどんどん向上していくでしょう。
00:34:51見た目はさらに良くなっていきますが、それでも誰かによる「最後の一仕上げ」が欠けているかもしれません。
00:35:00そして、その仕上げこそが、依然として非常に重要であり続けるのだと思います。
00:35:02ただ、その仕上げは単に最後に加えるものではないかもしれません。
00:35:04人間がプロセスに介在し、何度も反復試行を繰り返す中での一部になるでしょう。
00:35:11「バイブ・コーディング」や「バイブ・デザイン」といったツールは、そのゴールへより速く到達することを可能にします。
00:35:18反復の回数を増やすことで、単に速く作るだけでなく、最終的により良いものを作れるようになるのです。
00:35:28今のインターネットを見渡しても、すべてが素晴らしいデザインというわけではありません。
00:35:34私の希望は、あらゆる場所のユーザー体験(UX)を、桁違いに底上げすることです。
00:35:46それが、少なくとも私が予見する未来への希望ですね。
00:35:52その先に何があるかは分かりませんが、それこそが次のフロンティアでしょう。
00:35:56その後に何が来るか?
00:35:58それは誰にも分かりません。
00:35:59実際、私たちは日々、多くのことを発見し続けている最中なのです。
00:36:05この世界でデザイナーとして歩み始めるジュニア層に向けて、どう適応していくべきかアドバイスはありますか?
00:36:12マーク・アンドリーセンが、これを非常にうまく表現していましたね。
00:36:18質問に答える前に、少し話を遡らせてください。
00:36:23彼はこれを「メキシカン・スタンドオフ(三つ巴の睨み合い)」と呼びました。PM、デザイナー、エンジニアがお互いを指差し合っている状態です。
00:36:35誰もが自分も相手の役割ができると思っているんです。
00:36:39かつては、学校に行って4、5年かけてデザインを学びました。
00:36:46エンジニアリングも同様に、専門の学校で4、5年かけて学びました。
00:36:53PMならビジネススクールに行ったり、あるいは物作りに没頭してユーザー行動を理解しようとしたりしました。
00:37:06しかし、正直なところ、私は自分自身に問いかけています。
00:37:11Z世代やα世代は、学校や職業を選ぶときに何を考えるのだろうか、と。
00:37:21私の仮説では、今や誰もが本質的に「メーカー(制作者)」や「ビルダー」になりつつあります。
00:37:29「自分はただのエンジニアだ」とか、
00:37:39「自分はただのデザイナーだ」とは考えなくなっていくでしょう。これは今の世代ではなく、新しい世代の話です。
00:37:46私たちが目にすることになるのは、より多くの「問題解決者(プロブレム・ソルバー)」の姿だと思います。
00:37:50解決したい課題があり、そのために必要なツールを自在に選ぶ人たちです。
00:37:55私は常にそのマインドセットで動いてきました。その原点は「Flash」にあります。
00:38:01Flashは、一つの環境でデザイナーとエンジニアの両方になれる、初めての魔法のようなツールでした。
00:38:11本当に魔法のようでしたね。
00:38:13もちろん、規模が拡大するにつれて限界が来ましたし、
00:38:15後に新しいフレームワークが登場したことで、多くの面で綻びも出ました。
00:38:20しかし、ビジョンを持つ人がそれを実現するために必要なツールを何でも手に取れる、そんな時代の再来をずっと夢見てきました。
00:38:33「バイブ・コーディング」や「バイブ・デザイン」は、私にとってこの20年間で最もFlashに近い存在に感じられます。
00:38:44あなたのスタイルガイドについても伺いたいです。
00:38:47それらをどのように管理し、構築しているのでしょうか?
00:38:51デザインの世界では、毎年Pantoneが「今年のカラー」を発表したり、その時々のデザイントレンドがあったりしますよね。
00:39:05トレンドの進化に合わせて、Pencilもアップデートされていくイメージでしょうか?
00:39:12実際、最新のリリースでスタイルガイドをアップデートしたばかりです。
00:39:16常にリフレッシュは続けています。
00:39:18ただ、スタイルガイドを「これが正解だ」と考えたことは一度もありません。
00:39:22「ここで何ができるか」というアイデアを示すための、ちょっとしたヒントだと思っています。
00:39:30また、真っ白なキャンバスを前にして何をしていいか分からなくなる、いわゆるコールドスタート問題の解決も目的です。
00:39:37「どう使えばいいか分からない」という不安を払拭したいのです。
00:39:42それがここでの本当の狙いでした。
00:39:46私たちの目標は、それを文書化して開放し、人々が自分専用のガイドを作ってコミュニティで共有できるようにすることです。
00:39:56自分たちがトレンドセッターになりたい、などと考えたことはありません。
00:40:03全くありません。
00:40:03単に、他人がそれをもとに構築したり、インスピレーションを得たりするためのきっかけに過ぎません。
00:40:09Flashの話に戻りますが、私がFlashを始めた頃、多くのFlashファイルを研究して、人々がどう物を作っているかを学びました。
00:40:19それこそが私にとって、作り方を知るだけでなく、その中の複雑な仕組みを知るためのインスピレーションの源でした。
00:40:33ですから、私たちのスタイルガイドも、単にインスピレーションとなり、誰かがリミックスして自分のものにしてくれることを願っています。
00:40:45他社もPencilが成し遂げたことに気づき始めているようですね。
00:40:51SketchもMCPサーバーやツールを導入しましたし、Figmaも同様です。
00:40:56Figmaも独自のMCPツールを持っています。
00:40:59競合他社に市場シェアを奪われないために、どのように差別化を図り、最先端を走り続けるつもりですか?
00:41:07興味深い質問ですね。ですが、例えばCursorとCopilotをどう使い分けますか?
00:41:17逆にあなたに問いかけてみたいと思います。
00:41:20そこには微妙なニュアンスの違いがありますよね?
00:41:24明確な違いがあるんです。
00:41:26深く掘り下げれば言葉にできるかもしれませんが、明らかに大きな違いが存在します。
00:41:33私たちはそれを維持し、常に先頭を走り続けたいと思っています。
00:41:45先ほども何度か言いましたが、やるべきことは山ほどあります。
00:41:50Pencilとして、イノベーションの最前線を走り続けたいと考えています。
00:41:57Pencilを作るにあたって、「A16Z Speedrun」というプログラムに参加されましたよね?
00:42:05ええ、誰にでもおすすめしたい素晴らしいプログラムです。
00:42:11YC(Y Combinator)とSpeedrunが、最も有名なプログラムでしょうね。
00:42:15その二つがツートップだと思います。
00:42:20他にも世界中に多くのアクセラレータープログラムがありますが。
00:42:24Speedrunは、いくつかの理由で私にとって最高の経験でした。
00:42:31コロナ禍で、誰もが家に閉じこもり、外に出ることが少なくなりましたよね?
00:42:40Speedrunは、同じ志を持つ創業者たちと定期的に再会し、繋がるための絶好の機会でした。
00:42:48そこで得られるエネルギーの大きさは、過小評価されていると思います。
00:42:53誰もが経験すべきことだと思いますし、可能性の境界線を押し広げようという共通のビジョンを持つ、
00:42:58密なグループの中で時間を過ごすべきです。
00:43:03それがまず一点目です。
00:43:06二点目は、創業者としての自分を非常にポジティブな方向に形成してくれることです。
00:43:13アンドリーセン・ホロウィッツ(A16Z)のチームによる手厚いサポートは、言うまでもなく素晴らしいものです。
00:43:20彼らとは数え切れないほどの議論を重ねましたし、
00:43:25膨大な事例を見てきている彼らの経験は計り知れません。
00:43:27何がうまくいき、何がいかないかについて、彼らは卓越した直感を持っています。
00:43:32本当に優れたアドバイザーです。
00:43:35そして、1000人の投資家の前でデモを行う、デモデイという瞬間があります。
00:43:42今年は「Speedrun 5」として参加しました。
00:43:49会場はサンフランシスコのヤーバ・ブエナ・センター・フォー・ジ・アーツでした。
00:43:53かつてスティーブ・ジョブズがiPadなどのApple製品を発表した場所です。
00:44:00そんな舞台に、今、自分が立っているわけです。
00:44:02そこには何か魔法のようなエネルギーが流れています。
00:44:05本当に信じられないほどです。
00:44:07誰もが一度は経験すべき素晴らしい体験だと思います。
00:44:11自分のピッチを極限まで研ぎ澄ますことを余儀なくされますから。
00:44:18プレゼンに与えられた時間は、わずか2分です。
00:44:22Pencilについて1時間話すのは簡単ですが、
00:44:282分で伝えるのは至難の業です。特に、照明で視界が遮られるようなステージの上に立ち、
00:44:35そこに足を踏み入れた瞬間の緊張感は相当なものです。
00:44:38真っ暗な舞台裏から出てくるわけですから。
00:44:44光一つない、本当に暗い場所なんです。
00:44:47それが突然ステージに出ると、強烈なスポットライトを浴びます。
00:44:52その状態で、自分が作っているものについて、最高にエキサイティングな調子で話し始めなければなりません。
00:44:58言葉が次から次へと溢れ出てくるようにね。
00:45:01もちろん、そのために何度もリハーサルを重ねました。
00:45:05ですが全体として、自分の中から最高の力を引き出すための、
00:45:10誰にとっても素晴らしい経験になると思います。
00:45:14なるほど。
00:45:16カリフォルニアやサンフランシスコにいる人は、テクノロジーの中心地にいて、
00:45:20AIのパワーやテックハブの熱気を肌で感じられるという、圧倒的に有利な立場にあると感じます。
00:45:28あなたもそう思いますか?
00:45:29ええ、100%そう思います。
00:45:31かつて私はサンフランシスコに長年住んでいました。
00:45:34今はそこには住んでいません。
00:45:36適度な距離を保つようにしています。あそこには素晴らしいエネルギーがある一方で、
00:45:38正直なところ、ノイズも多いですから。
00:45:44私が見つけたバランスは、定期的に訪れるけれども、
00:45:47毎日そこにいるわけではない、という状態です。
00:45:53行くたびに新しいインスピレーションをもらえますしね。
00:45:59それが私にとってうまくいくやり方だと気づきました。
00:46:05でも、あそこで10年過ごしましたから、
00:46:08街の隅々まで知り尽くしていますよ。
00:46:10確かに、あそこにいることは「不当なまでの優位性(unfair advantage)」です。
00:46:14サンフランシスコに飛んだ人と話せば分かりますが、
00:46:19みんな信じられないほどエネルギーをチャージして帰ってきます。
00:46:24ですから、もし一つアドバイスするなら、バッグを持ってサンフランシスコへ飛び、
00:46:26人々に会って語り合い、一緒に何かを練り上げるべきです。
00:46:33Pencil.devは、現在チームで運営されているのですか?それともあなた一人ですか?
00:46:38今は10人のチームです。
00:46:42ええ、素晴らしいメンバーが揃っています。
00:46:45実はこれ、よく考えると非常に複雑な製品なんです。
00:46:50ですから、もはや私一人の手に負えるものではありません。
00:46:52ええ、そういうことです。
00:46:57メンバーは、Adobe時代や以前のスタートアップからの仲間ですか?
00:46:59それともSpeedrunで出会った人たちでしょうか?
00:46:59前のスタートアップで一緒に働いていた仲間もいますし、
00:47:06新しく加わったメンバーもいます。
00:47:09様々な経歴の人が混ざっています。
00:47:16なるほど。その「前のスタートアップ」について、お話しいただけますか?
00:47:18もちろんです。
00:47:19一つは「Around」というビデオ会議アプリでした。ご存知でしょうか?
00:47:20見たことありますか?
00:47:24以前使っていたあれですよね。
00:47:25ええ、使っていました。
00:47:30よく利用していましたよ。
00:47:33とても気に入っていたので、サービスが終了したときは残念でした。
00:47:34そうでしたか。
00:47:37もしよろしければ、あのツールの印象を教えていただけますか?
00:47:38純粋に興味があります。
00:47:40Google WorkspaceやSlackなどに比べて、もっと楽しくて体験が良かったと感じます。
00:47:41何というか、
00:47:42設計された目的を正確に果たしつつ、クールな機能も備わっていました。
00:47:44私たちの意図は、特にコロナ禍において、ビデオ会議を「少しだけ楽しくする」ことでした。
00:47:50当時は誰もがHDや4Kと、画質をどんどん追求していましたが、
00:47:51私たちは別の考え方をしました。
00:47:57デスクトップ上に小さな円形のワイプを表示して、あえて相手に見える自分の姿を抑えたらどうだろうか、と。
00:47:57そこにフィルター機能なども加えました。すると、チームでの議論が急に居心地の良いものになったんです。
00:47:59それが非常に大きな要因だったと思います。
00:48:03私が手掛けてきたすべての製品において、
00:48:07他とは全く異なる「独自の切り口」を見つけようとしてきました。
00:48:09誰かが作ったものをやり直したり、コピーしたりするのではなく、常に新しい何かを追い求めています。
00:48:15自分が情熱を注げる「新しい何か」を見つけることは本当に重要です。
00:48:15結局のところ、物作りはマラソンのようなもので、
00:48:17自分自身がそれを構築することにワクワクし続けなければなりません。
00:48:23Pencilで、キャンバス上をカーソルが飛び交うのを初めて見たとき、
00:48:25「これだ!」と思いました。
00:48:31素晴らしかった。
00:48:33ずっと見ていても飽きないほど、魅了されました。
00:48:38そして、「早くこれをみんなと共有したい」と強く感じたんです。
00:48:46そういった小さなこだわりの積み重ねです。最初は、スキャン中であることを示すアニメーションもありましたが、
00:48:51技術的には必要ありませんでした。
00:48:58単にJSONを読み込めば済む話ですからね。
00:49:01でも、その「体験」こそが重要だったのです。
00:49:08それが、今のPencilの基盤になっています。
00:49:15これを作ることに、個人的にワクワクしていなきゃいけないんだ。
00:49:17Pencilに関して言えば、キャンバス上をカーソルが飛び交うのを初めて見た時、
00:49:23「これだ」と思ったよ。
00:49:25本当に素晴らしかった。
00:49:25目が離せなかったんだ。
00:49:27すっかり魅了されてしまったよ。
00:49:29それで、「これを早くみんなに見せたい」って思ったんだ。
00:49:35最初は、要素をスキャンするようなアニメーションを入れるといった、ちょっとしたことから始まった。
00:49:40別にやらなくてもいいことだったんだ。
00:49:43ただJSONを読み込むだけで済む話だからね。
00:49:47でも、フレームをスキャンする様子を見て、「おお、これだ」と感じた。
00:49:56手応えを感じるんだよ。
00:49:56AIを肌で感じているような感覚だ。
00:49:57多くの人が、チャットがAIのメインインターフェースになると話しているけれど、
00:50:04僕はそうは思わない。
00:50:08今、僕たちはAIと対話するための、これまでに見たこともないような
00:50:14新しいユーザー体験を発見し始めているところなんだと感じている。
00:50:19このカーソルやスキャンといった演出は、ほんの氷山の一角に過ぎない。
00:50:24これからもっと多くの、そういったものを見ることになるだろう。
00:50:25創作の過程を視覚的にガイドしてくれるような体験だ。
00:50:29AIが単なるLLMのテキストチャットではなく、
00:50:36その背後に何かクリエイティブなものが存在しているように感じさせてくれるんだ。
00:50:40何て言えばいいのかな。
00:50:40適切な言葉がすぐには見つからないけれど、そんな風に感じ始めている。
00:50:45わかるだろう?
00:50:46特に、デザインのようなクリエイティブな分野において、
00:50:50チャットは相性の悪いインターフェースだというのは事実だと思う。
00:50:52ページ上で見たいものをプロンプトに落とし込むのは、本当に難しいことだからね。
00:50:56もっと多くの人にAIを使ってもらいたいなら、
00:51:03より優れたインターフェースを考え出す必要がある。
00:51:04もちろん音声も一つの手段だろうけれど、
00:51:10君たちはAIとのやり取りにどれくらい音声を使っている?
00:51:13めったに使わないだろう?だから、
00:51:19新しいインターフェースを見つけなきゃいけないんだ。
00:51:20それについては時々考えているんだけど、
00:51:24AIが僕の考えていることを聞き取ってくれたらいいなと思う。
00:51:28話したくないし、打ち込みたくもない、ただ僕の思考を理解して実行してほしい時があるんだ。
00:51:31それがニューラリンクなのか何なのかはわからないけれど、
00:51:35もし実現できたら、最高にクールなインターフェースになるよね。
00:51:36そうだね。それなら、僕の親友をこのポッドキャストに呼ぶことを検討すべきだよ。
00:51:44Jakub Zeczolkaという、今注目されているデザイナーなんだけど、
00:51:50彼が最近、最新のプロトタイプの動画を投稿したんだ。
00:51:55彼はiPhoneでアイトラッキング(視線計測)をやっていて、
00:52:02画面上の色々なものを見ながら、それに対してどうしたいかを話すんだ。
00:52:05「左にあるこの画像」なんて説明する必要はない。
00:52:08ただその画像を見て、「これを何かに変えて」と言うだけでいい。
00:52:10AIは彼がどこを見ているか分かっているからね。
00:52:13こういったインターフェースこそが、多くの新しい可能性を切り拓くことになる。
00:52:19もしAIが、ユーザーの視線や見ている方向といった、
00:52:24思考のヒントを知ることができればね。
00:52:26そして、そういったヒントがもっとたくさん見つかることを願っているよ。
00:52:30そうなれば、もっと自然に感じられるようになるはずだ。
00:52:33まるで君が僕の部屋の隣に立っている時のように、
00:52:38「これを見て」と言って具体的に指差す必要がなくなるんだ。
00:52:42その場の状況や文脈から、君はすでにそれを分かっているはずだから。
00:52:48それはめちゃくちゃクールだね。
00:52:49実は僕は、音声をよく使うタイプの一人なんだ。というのも、
00:52:55タイピングに疲れてしまう時があるから。
00:52:56ただAIと話したいだけなんだよ。
00:52:58だから、話しかけるだけで僕の視線を理解してくれるなら、それは素晴らしい製品だね。
00:53:03気に入ったよ。
00:53:04だろう?
00:53:05手の動きを追跡して、ディスプレイ上のものを指差したり、合図を送ったりするのを想像してみてよ。
00:53:10車に乗っている時、「ここに行って」と言うことがあるだろう?
00:53:15「右」とか「左」とか言わずにね。
00:53:19「ここを曲がって」って。
00:53:20車の中や自動運転のAIに「ここを曲がって」と伝えたいけれど、
00:53:28同乗している人間には伝わっても、
00:53:33AIにはさっぱり分からないんだ。
00:53:35「この交差点を右に曲がって」なんて言わなきゃいけない。
00:53:37「なんてこった、誰がそんなこと言うんだ?」って思うよ。
00:53:40言葉にすると長すぎるんだ。
00:53:43なるほど。ところで、デザインやAI、あるいはテック業界全般について、何か「持論」はある?
00:53:50それはまた、深くて難しい質問だね。
00:53:53答えはシンプルだけど。
00:53:55見どころになるようなコメントが欲しいんだよね。
00:53:59そうだね、持論か。
00:54:02正直に言うと、さっき議論していたことがまさにそれなんだ。
00:54:06もっと人間らしくて自然な、
00:54:12AIと対話するための新しいインターフェースを発見したいと思っている。
00:54:16AIが世界の状況や君の置かれた環境、視点、注視点から、
00:54:26君が実際に何を考えているかを理解してくれるようなね。
00:54:30そうすれば、いちいち手取り足取り教える必要はなくなる。
00:54:34今はそうせざるを得ないけれど。僕の最初のアイデアに戻ると、
00:54:40「言葉で説明するのではなく、ただ描きたい」というのも、それと同じことなんだ。
00:54:44僕にとっては、言葉で説明するよりも、描いたり指差したりするほうが
00:54:52ずっと簡単なことがよくあるから。
00:54:53これが、AIにおいてこれからすぐに
00:55:00変わり始めるステップだと思っているよ。
00:55:01それから、数年前のChatGPTを思い返すと、
00:55:06当時は本当に長文の質問やプロンプトを投げなきゃいけなかった。
00:55:10でも今は、短く問いかけるだけで、AIがすべてを分析して
00:55:1420個くらいの選択肢を提示してくれる。
00:55:16どんどん進んでいくんだ。
00:55:17ユーザーがどこに向かおうとしているのかを察しているようだね。
00:55:21もしかしたら、他の人のチャット履歴から学習して、
00:55:30考えや答えのパターンをキャッシュしているのかもしれないけれど。
00:55:33そう。あともう一つ思うのは、
00:55:41新しいLLMのプロンプトを入力するのは、新しい世界の始まりのようなものだということ。
00:55:45毎回ゼロからのスタートなんだ。
00:55:46だから、もっと「共有メモリ」のようなものが活用されることを期待している。
00:55:51大きな違いは、「これを要約して」と頼むだけのLLMと、
00:56:01Slackにいる同僚のように、これまでの会話の文脈をすべて把握しているLLMとの差だね。
00:56:06いちいち過去の情報を引っ張り出して考え直す必要がない。
00:56:11毎回説明するのは、なんだか馬鹿げていると感じるからね。
00:56:13そういった変化がもっと起きてくると思うよ。
00:56:16Aroundの話に戻るけど、あの効果音や、通話の最後にやっていたミニゲームが本当に恋しいよ。
00:56:21最大の損失は効果音だったね。
00:56:22あれは大好きだった。
00:56:25まったくだよ。
00:56:26今すぐそのゲームができたら最高なのにね。
00:56:28本当に。
00:56:31ええ、そうですね。
00:56:32僕の一番のお気に入りだったよ。
00:56:33ああ。
00:56:35いいですね。
00:56:36楽しかったな。
00:56:40今はSlackを使っているんだ。
00:56:41Slackハドルを使っているけど、やっぱり違うんだよね。
00:56:42そうだね。
00:56:44驚いたことに、
00:56:45Slackには録音・録画機能がないんだ。
00:56:46ただ通話を記録させてほしいだけなのに。
00:56:48すごくシンプルなことに思えるけど。
00:56:51まあ、とにかく。
00:56:52ええ。
00:56:54そうですね。
00:56:55いいね。
00:56:56Aroundに何が起きたのか、話しても大丈夫?
00:56:57ああ、AroundはMiroに買収されたんだ。
00:57:00それで、Miroのホワイトボード体験に完全に統合されたんだよ。
00:57:08なるほど、そうだったんだ。
00:57:10まだ存在はしているけれど、使うにはMiroが必要ってことだね。
00:57:12トム、今日は時間を取ってくれてありがとう。
00:57:15最後に宣伝したいことはある?
00:57:16Pencil以外で、話しておきたい活動とか。
00:57:17そうだね、まずはPencilをぜひチェックしてみてほしい。
00:57:21僕はいつでもみんなの力になるよ。
00:57:27Discordのコミュニティのみんなもね。
00:57:31Pencilを使った面白い知見や、
00:57:40作成したもののスクリーンショットやファイルをたくさんシェアしてくれている。
00:57:42今では数千人が参加している、とても活気のあるコミュニティなんだ。
00:57:46何か問題があったり、質問や機能のリクエストがあれば、
00:57:56X(旧Twitter)でもDiscordでも、気軽にDMを飛ばしてほしい。
00:58:00僕は君たちの味方だからね。
00:58:02いいですね、僕からの機能リクエストは「カスタムUIキット」かな。
00:58:07shadcn/uiを使わずに自分専用のUIキットを作りたい時があるから。
00:58:10完全に同意するよ、それはすごく理にかなっているね。
00:58:13「Better Slack Podcast」をご視聴いただきありがとうございました。
00:58:16各ポッドキャストプラットフォームで配信中です。
00:58:18AppleやSpotify、YouTubeで見ている方は高評価とチャンネル登録をお願いします。
00:58:23それでは、僕からは以上です。さようなら。
00:58:25さようなら。僕からも、さようなら。それでは失礼します。
00:58:28皆さん、聴いてくれてありがとう。
00:58:31本当に楽しかったです。

Key Takeaway

AIエージェントが人間と並行してデザインを構築する「バイブ・デザイン」の時代において、ツールは直感的なインターフェースを通じて人間のビジョンと具現化の間の溝を埋める存在へと進化しています。

Highlights

PencilのCEOトム・クラッカー氏は、AdobeでのFlashエバンジェリストとしての経験が現在のAIツール開発の原点であると語っています。

「バイブ・デザイン」とは、言葉で細かく指示するのではなく、直感的なビジュアル操作やAIエージェントとの対話を通じてデザインを具現化する新しい手法です。

Pencilは、特定のフレームワークに依存しないJSON形式(penファイル)を採用しており、人間と複数のAIエージェントがリアルタイムで並行してデザイン作業を行えます。

デザインにおいて最も優れたモデルとしてClaude 3.5/4.6 Opusが挙げられており、構造化データの扱いやレイアウトの正確性が高く評価されています。

将来のインターフェースとして、テキストチャットを超えた「アイトラッキング」や「思考の理解」など、より人間らしく自然な対話形式の可能性が示唆されました。

次世代のクリエイターは、単なる「デザイナー」や「エンジニア」という枠組みを超え、AIを駆使して課題を解決する「ビルダー」や「メーカー」になると予測しています。

Timeline

トム・クラッカー氏のキャリアの原点とFlashの影響

トム・クラッカー氏は、自身のキャリアがAdobe Flashから始まったことを詳しく振り返ります。7歳からPhotoshopに触れ、Flashの登場によってアニメーションとインタラクティブ性の虜になった経験が、現在のデザインツール構築の基盤となっています。彼はAdobeでFlashやゲームのエバンジェリストを務め、多くの開発者がモバイルプラットフォームへ移行するのを支援しました。この時期に培われた「一つの環境でデザインとエンジニアリングを融合させる」という哲学が、最新のAIツールであるPencilにも色濃く反映されています。

デザインからコードへ:初期の試行錯誤とAdobe XDの誕生

スピーカーは、イラストレーターの図面をJavaScriptに変換する「DrawScript」の制作背景について語ります。当時はSVGの制限が多く、Canvas上でインタラクティブな描画を行うためにコード化が必要だったという技術的課題が動機となっていました。その後、Adobe XDの開発に携わった際、モバイルアプリ時代に合わせた「軽量で高速、かつ複数のアートボードを俯瞰できる」ツールの重要性に気づいたと説明しています。第一原理からデザインツールを見直したこの経験が、後のPencil開発における「使い慣れたUI」の設計に繋がっています。

Pencilの誕生と「バイブ・デザイン」のコンセプト

CursorなどのAIコーディングツールを使用する中で、視覚的なイメージを言葉で説明することの限界を感じたことがPencil開発のきっかけでした。2025年5月に公開されたプロトタイプはSNSで爆発的な反響を呼び、多くのユーザーがビジュアルとコードの橋渡しを求めていることが明らかになりました。ここで提唱される「バイブ・デザイン」は、IDE内に統合されたキャンバスを通じて、直感的にAIエージェントへ意図を伝える手法です。内部的には構造化されたJSONデータ(penファイル)を用いることで、特定のフレームワークに縛られない柔軟な出力を実現しています。

AIモデルの進化とデザインにおけるベンチマーク

トム氏は、Pencilで採用されているAIモデルの進化と、現在のデザイン能力について分析します。特にClaude 3.5や4.6 Opusは、複雑なレイアウトや構造化データの処理において非常に優れたパフォーマンスを発揮すると述べています。AIがユーザーの意図を「聞き出す(エリシテーション)」能力が向上したことで、曖昧な指示からも質の高いデザインが生成可能になりました。また、今後のイノベーションにおいて最も重要なのは「速度」であり、デザイナーのフロー状態を維持するためにリアルタイムの反応が不可欠であると強調しています。

マルチエージェントによる並列デザインとオーケストレーション

複数のAIエージェントがオーケストラのように連携し、一つのデザインを同時に作り上げる革新的なワークフローについて解説します。コードとは異なり、キャンバス上のデザインは領域が分かれているため、競合を避けながら並列で作業を進めることが技術的に可能です。例えば、一人のエージェントがヘッダーを担当し、別のエージェントがフッターを作成するといった効率的な分担が実現されています。このアプローチにより、人間はジュニアデザイナーのチームを指揮するディレクターのような立場で、より迅速にビジョンを形にできるようになります。

将来のトレンド:イラスト、アニメーション、そしてインスピレーション

2026年後半のデザイントレンドとして、AIによるイラスト生成とアニメーションが大きなフロンティアになると予測しています。現在のモデルはレイアウトには優れていますが、サイトに「感情」を吹き込むイラストや3Dレンダリング、動的な演出にはまだ改善の余地があると考えています。Pencilでは、外部で生成した画像やスタイルガイド、さらには自然界の写真からカラーパレットを抽出してデザインの「バイブ」として取り込むことが可能です。人間が日常から受けるインスピレーションを直接AIに渡し、共創するプロセスが一般的になると説いています。

デザイナーの役割の変容と次世代へのアドバイス

AI時代におけるデザイナーの価値は、最終的な「センス」や「仕上げ」に宿り続けるとトム氏は断言します。AIは型通りの結果を出すのが得意ですが、製品に魂を吹き込むのは依然として人間の感性による試行錯誤のプロセスです。Z世代やα世代は、エンジニアやデザイナーといった既存の職種に縛られず、道具を自在に使いこなす「プロブレム・ソルバー(問題解決者)」として成長していくでしょう。彼はこの状況を、かつてのFlashが提供していた「誰もがクリエイターになれる魔法」の再来であると肯定的に捉えています。

起業家精神とサンフランシスコのテックコミュニティ

A16Zの「Speedrun」アクセラレータープログラムに参加した経験を通じ、スタートアップ創業者が持つべきエネルギーとピッチの重要性について語ります。スティーブ・ジョブズも立った伝説的な舞台での2分間のデモは、製品の本質を研ぎ澄ます貴重な機会であったと振り返っています。また、サンフランシスコという場所が持つ「不当なまでの優位性(情報の密度と熱気)」を認めつつ、現在はノイズを避けるために適度な距離を保つバランスを推奨しています。チーム運営においては、過去のプロジェクト(ビデオ会議アプリAroundなど)からの信頼関係がPencilの開発を支えていることを明かしました。

次世代インターフェース:チャットを超えたAIとの対話

動画の締めくくりとして、AIとの対話はテキストチャットから、より直感的で文脈を理解する形式へと進化すべきだと提言します。アイトラッキングを用いて「見ているもの」をAIが認識したり、共有メモリによって過去の文脈を説明不要で把握したりする未来のUIに期待を寄せています。Pencilにおいても、エージェントが作業する様子を視覚化するなどの演出が、ユーザーに「AIを感じさせる」重要な体験となっていると説明しました。最後に、活気あるDiscordコミュニティへの参加を呼びかけ、ユーザーからのフィードバックを基にさらにツールを研ぎ澄ましていく姿勢を示して対談を終えました。

Community Posts

View all posts