00:02
こんにちは、AI駆動開発部の日常へようこそ。 このポッドキャストは、日々AI駆動開発を行う
企業家の山本とエンジニアの阿部が AI駆動開発のリアルを緩く語り合う番組です。
はい、じゃあよろしくお願いします。 よろしくお願いします。
はい、じゃあちょっとね、 最近出たばっかりの
すごくいいのがあるので、すごくいいのがあるので、 ちょっとそのシェアをできたらなと思っております。
聞いたことある人も多いんじゃないかな。
Claude Designですね。 Claude.aiすらデザインでアクセスできる。
Claudeの新しいサービスなんですけれども、 これがね、マジでやばくて。
マジでやばい。 何がやばいかっていうのをちょっとこれから伝えれたらと思うんですけど、
本当にね、すごい怖いので、ちょっとシェアできたらなというふうに思っております。
なんかね、Claude Design、多分僕がまあ、みんなどうかわかんないですけど、
僕が初めこんなサービスだよっていうふうに受けてた印象としては、
スライド生成してくれたりとかデザインシステムを作って、それをFigmaみたいにペペペって、
ちょっと自分でもカスタマイズできるみたいな、さらに手を加えてできるみたいな、
FigmaかけるClaudeみたいな感じのサービスなのかな、みたいな印象を受けている方が多いんじゃないかな。
僕もそうでしたっていう感じで。 安部ちゃんどうやった?実際。
いじれるぐらいまでも僕はあんまりイメージしてなかったので、
どっちかというとデザインがポンと出て終わりなのかなみたいな印象だったんですよ。
チャットベースで指示したら、もちろんそこは変わるけど、みたいな。
そういうイメージでしたね。だからなんか使ってる感じだとペンシルとかにすごい近い形で出てきたのかな、みたいな。
はい、はい、はい、なるほど。それがですね、実際に触ってみたと。
触ってみたんですけれども、僕は何で触ろうと思ったかみたいなところなんですけれども、
僕実はYouTubeもちょっとだけ出してて、動画を。
全然AI関係ないんですけれども、関係ないやつでYouTube出してて。
それの動画のオープニングに使うフレームっていうのか枠とか、
あとはずっと常時出しておく左上にアイコンみたいなのを作りたいな、みたいなのを持って使い始めましたっていう感じなんですけれども。
03:10
僕の初めの期待値としては、どのくらいの良いデザイン作ってくれるのかな、みたいな感じで触り始めて。
実際にアイコンとか10腕とか出してくれて、結構良いじゃんけど、別に期待通りというか、要望通りだな、ですよね。
そこから、これでABCDEFGみたいなんで、じゃあGのパターンで確定していいんで、実際に使えるように書き出ししたりできるようにしてください、みたいな依頼をふとしたんですよ。
そうすると、完全にデザインのCMSというか、デザインシステム、デザイン管理システムみたいなのを作り始めて。
へー。
だから、アイコンプラス題名みたいなのを、題名を自分で書き換えれるみたいな。
あー、入力して文字を変えたら、アイコンの文字も変わるみたいな。
そうそうそうそう。
で、しかもそれによって、可変でデザイン変わっていくみたいな仕組みを作ってくれて、だからシリーズがちょっと変わっても耐えれるような可変な仕組みを作ってくれて、
しかもそれを背景とかで書き出せるようにしてくれるみたいな。
それってあれだよね、都度チャットでお願いしたら変わるじゃなくて、なんか入力フォームみたいなのが出来上がったってこと?
そうそう、入力フォームのそう、出来上がったみたいな。
すごい。
そう、なんか、入力してるやつで、いくつかパターンをポチポチ選択して切り替えて、これいいじゃんっていうやつを出力できるみたいなデザインシステムみたいなのを作ってくれて。
おー。
で、なんか初め、めっちゃいいじゃんって思ってアイコンを作ってもらって、で、アイコンいい感じだな、書き出しできるようになったなって思って、じゃあ次、フレームを作ってもらおうと。ビデオフレーム。
まあなんかその一番初めにこう、枠、窓みたいなのを作って、その中に映像を流すことで、なんかこう完全にこう本編とオープニングを視聴者の印象という的に切り替えるようにしたいなと思ったから、
オープニング用の枠を作ってもらおうと思って、いい感じのね、でそれを作ってもらったら、ちゃんとねそのアイコンがすでにあるから、
アイコンのコンテキストがすでに注入されているから、ちゃんと一貫性のあるフレームを作ってくれたらね。
あー、デザイン的に、まあ色もそうだと思うけど、トーンが似てるみたいな?
そうそうそうそうそうそう。
ありがたいな。
そう。しかもさらに、その文章を引き継いでできると。
なるほど。
そう。ってことは、これ1個のプロジェクトの中で、なんか一貫性を持って、じゃあ次あの吹き出しテロップを作ってもらおうとか、
06:06
まあ今、YouTubeのサムネイルを自動で作ってもらえるようにしようかなみたいなのをやってるんだけど、
だから写真を入れ替えたら勝手になんか写真が差し替わるみたいな。
写真をアップロードしたら、そのアップロードした写真の中から選んでさ、
はいはいはい。
で、自動でサムネイルを作って、それを書き出せるみたいな仕組みを作ってくれたりとかして、
もうなんか、AIの枠越えて、なんかシステムじゃんみたいな。
確かに。なんかより柔軟性のあるフィグマとかキャンバーが出来上がったわみたいな感じなのかな。
そうそうそうそうそうみたいな。文字も変えれるしみたいな。
それすごいね。
これで再現性のあるデザインを作りまくれるみたいな。
なんか一個AI駆動開発なんで、システム開発でどういう風に使うかみたいなので言うと、やっぱりこのデザインシステムを作れるよねとか。
あと一応なんかエクスポートすると、そのデザインシステムの情報と、あとそれをデザインのスキルみたいなのを書き出してくれるらしくて、
そこまでちょっとまた試してないんですけど、プロジェクトで一貫性のあるデザインをAIコーディングで組めるようになるみたいな。
みたいなことができると。これ結構すごいなと思って、共有できればと思ってですね、今ちょっと話しているんですけれども、使っている人いるのかな。
なんかどうなんだろう、僕Xとかでしか見てなかったんですけど、なんかデザインできてすごい良いデザインしてくれたねみたいなぐらいしか見てなかったんで、
なんか入力して変えれますみたいなのまで知らない人多いんじゃないですかね。僕も全然知らなかったし。
しかもそのデザインに対してコメントっていうのでコメントしたりとか、あとなんかエディットってエディットで自分でこうポチポチ、もちろん変えれるとか、
あとなんかTweaksっていうのがあって、Tweaksっていうやつをなんか作っておくと、Tweaks上でそのなんか、例えばテキストを変換するものの管理画面みたいなのが、それをオンにしているときだけ出てくる。
Tweaksっていうので、なんかそこが編集画面っぽくなってくれてるみたいなイメージなのかな。
まあなんかそんなイメージなのかな。けどなんか言わなかったら、画面上に勝手に管理画面みたいなの作ってるパターンもある。
すごいね。なんかアップロードした画像とか、そういうのも保存しておいてくれて、クロード側で使い回したりとかもしてくれるのかな。
なんかそんな感じやね。なんかアセットっていうところ、一応なんか、そのデザインファイルズっていう中にプロジェクトみたいなのが出来上がるんよね。
09:09
で、その中でなんかアセットっていうのがあって、アセットの中には自分が入れたことのある画像ももちろん見れたりとかするみたいな感じで、だからなんか作りとしては本当に、
なんか一個のシステムを作ってるみたいな作り方に近いのかなというふうに思ってますね。
え、これって別にローカルの自分のフォルダーが反映されているとかじゃなくて、これは全部アップロードしたものが勝手に、クロード上でフォルダ分けされてる。すごいね。
そう。相当すごいよ、これ。
で、フォルダ分けとかも勝手にやってくれて、データとか情報整理してデザインに反映してくれてるって感じなのか。
そうそうそうそう。
これすごいね。え、なんか、すごいな。
やばいよね、これ。
え、今までもこんな感じでフォルダ管理とかしてくれてたのかな。コワークとかだと。
コワークはもう、こういうフォルダ分けしてみたいな、いったりとかっていうベースなんで、まあどっちかというとこれはもう、何だろう、多分クロードのこのデザインのハーネスによるものなのかなというふうに。
すごいね。
まあでもいいね、こうやってクラウドに全部アセットが集まるから、ローカルの中にぐちゃぐちゃ作られるわけでもないし、ローカルのフォルダ移動したら壊れちゃったみたいなことも起きにくいから、なんかいいね、これ。
うん。まあ共有するのがちょっとめんどくさいなっていうぐらいのかな。まあ一応なんか、ダウンロードプロジェクトジップみたいなんで。
はいはい。
なんかガツッと落とせるのかな、これで。
これそのまんま他の人とシェアして共同編集みたいなの、そこまではできないのかな、まだ。
あ、できるできる。
あ、できるんだ。
できるんだけど、その、まあもちろん当たり前だけど、クロードに課金してる人っていう限定条件付き、みたいな感じ。
チームとかでクロードの契約してたりするとすごくいいのかな、もしかして。
うんうんうん。まああと一応その、何だろう、全部ダウンロードで落とせるので、まあそれを展開するっていうのもまあ一つだとは思いますね。
全部JSXとかHTMLとかそういうのだけで組まれてるから。
うーん、まあ確かに。
これローカルでの再現性もあるっていうのが嬉しいね、ダウンロードしたら。
うん、まあちょっとどこまで再現できるかはちょっと分かんないけど、たぶん、おそらくできるんじゃないかなっていう。
うんうんうん。
うん、って感じですね。いやこれはマジでね、すごい。
12:02
しかもなんか、まあ僕が見てる限りこのロゴとか、生成されてるロゴとかもなんかちょっとしたLPとか、そういうデザイン重視のサイトとかにも全然埋め込めそうなフォントというかレイアウトなので、
なんかこういう形で一個一個パーツをAIに作って、まあクロードに作ってもらって、最後それを1枚のLPにしてもらったのをそのままサイトに反映するとかも、
なんかできそうなイメージがなんかある。
うんうんうん、それはね一応ねクロードも公式としてその利用用途としてたぶん言ってて、
どっちかというとデザインシステムであったりとか、なんかそういうものなのかな、が用途として挙げられてる。
あとスライドとかももちろんだし、プロトタイプとかももちろんですけど、逆になんかYouTubeのこういうサムネイルとか作りに使ってる人の方が珍しいかもしれないぐらいかもしれない。
ああそうなんだ、まあむしろウェブシステムとかウェブデザインに向けてる方が向きっていうようなイメージなのかな。
そうそうそう、まあけどとはいえそのなんか書き出したいとか背景透過にしてほしいとか、
なんか映像がここに入ってるで、渡した画像を映像と見立ててサンプル作って、でそれで書き出ししたときはその分だけピングで透過にしてほしいみたいなとか、
なんかそういう要望にも応えてくれたから、割となんか何でもやってくれるんだなみたいな。
やってくれるね、うんうんうん、いやなんか正直Figmaとか、僕は特にデザイナーではないので、
FigmaとかあのPhotoshopとかああいうツール使うこと、使ってデザインを調整すること自体結構苦痛だったり、
あとは画像だったりそのできたアセットを書き出すこと自体も苦痛だったんだけど、
なんかクロードデザインでチャットベースでこういう指示して、まああと最後ダウンロードとかできるんだったら正直このクロードデザインでいいんじゃねみたいな感覚にさせられますね。
まあなんかそうだね、実際のところで言うと、個人的なあれですけど、
デザイン、なんかクリエイティブなデザインを作らせようと思うと、だからYouTubeのサムネイル作らせてみたんですけど、
それだとなんかかなりちょっとなんか違う方向だなみたいなの言ったんよね、一回。
なんだけど、だから自分でCanvaで作ってそれを読み込ませたらそこそこのところまで行ったから、
まあこれはなんか性能とかの問題になってくるのかなーって思ってる。
なんかあれなのかな、アイコンとかそういう絵を生成させようとしたり、絵を作らせようとするとちょっと微妙な感じになるけど、
15:01
テキストとかその情報をうまく配置したりして、なんか強弱を作るとかはかなりよくやってくれるみたいなイメージなのかな。
そうだね、そうだね、そんな感じなのかな。
けど色とかも全部変えれるからね、このエディットモード。
確かにね、エディットで色変えれるのか。
そう、なので結構使えるなっていう感じなので、ちょっとこれはまあいつもの開発とは若干分野が違いますが、
相当良いのではないかというところがあって、特に個人開発とかしている人とか、うちみたいに少数でAI駆動開発やってるところとかは、
相当使える余地があるんじゃないかなっていうのが、今の所感かなっていう感じですね。
そんな感じです。逆になんか本当に開発する事業領域、考えないといけないなと。
そうだね、ちょっとなんかAI使えるからこういう便利なの作りましたと、一瞬でひっくり返されちゃうみたいな。
そう、駆逐されるっていう。今だからショピファイとか、ECをAI駆動でできるようにみたいなのを発表したりとかしてるけど、
ショピファイは完全に今の既存の仕組みっていうのを、スキルとかを使って自動でサイトを組み上げる。
それはクロードコードでも動かせるし、どのツールからでもMCPとか使ってうまく動かせるような仕組みを作ったりとかしてるけど、
その戦略としてはもう、うちはショピファイの中にAIを搭載するのではなくて、
AIがいじれるような環境を提供するっていうことにフォーカスするみたいなのを、戦略的に決め切ったみたいな、そういうふうにしましたみたいなを言ってて、
そういう方針を取る企業も増えるでしょうね。自社のサースの上でAIモデルを動かしてサービス内に閉じるみたいな話じゃなくて、
どのAIからもアクセスできますぜみたいな。
なるほどね。それでいうと、最近の似てるような話だと、フリー、会計のフリーとかがある程度MCPとかAPIを公開して、
どのAIが操作できるように、どのAIでも操作できるようにしたっていうところと、一方でマネーフォワー、コワークを今度出します。
マネーフォワーとコワーク、だからそこの大きい方針がね。
どっちが正解ってないのかもしれないですけど、それでどう変わるのかすごい気になりますよね。
18:05
いい待機というか、マネーフォワーとフリー。
クロードコードとか、クロードのサブスクを入るだけで完結していいよねみたいな前提を作ってるのが、フリーとかショピファイとかの戦略やんね。
けど、それだけではできないみたいなこともあるじゃないですか。
結局、プロンプトインジェクションとかで上手く情報を抜き取られるから、こういう機密情報まではやらせられないなみたいなっていうのはジレンマとして多分出てくると思うので、
そうなった時にどこまでMCPで開放できるんだっけ、どこまでやれるんだっけみたいなのは絶対ある。
それで言うと、ペンシルは上手いことやってるよね。もうファイルでやらせるっていう前提で。
けどそれは機密情報とかを別にペンシルはデザインツールだから保持しないよねあんまりっていう前提があるからできることだと思うけど、
だから外部からMCPとかAIネイティブに他のAIエージェントが使いやすくするっていう、どの中でもいくつかの方向性があるんだろうなっていう、っていうのはあるよね。難しいけど。
そうだね。僕たちも今作っているサービスっていうのがどういう方向性でもって、
AIで外から操作できるようにするっていう仕組みを作る一つとっても、
その作り方一つで全然意外と使えないじゃんみたいな、AIにとっても操作しにくいじゃんみたいな。
それはそれとしてまたどう作り込むかの判断が難しいし。
サービス内でAIを動かすにしても、MCPから動かすにしても、どちらにしてもそのAIが動かしやすいサービス設計みたいなのはあるから、そこはなかなか難しいところですが、前提条件を満たす必要あるよね、結局は。
そうだね。既存のシステムとかだと、そもそもちょっと難しいとかあるけど、今後何かシステムを作るときは、そういうのも前提に考えていかないといけない時代なのかなっていうのを思います。
どういう性質のサービスであっても、そこはある程度前提に見据えてたほうがいいのかなみたいな。
そうだね。そんな感じで、クロードデザインやばいですっていう共有でした。じゃあ、ありがとうございます。今日は以上ですかね。
21:00
はい。
じゃあ、ありがとうございます。本日もAI駆動開発部の日常をお聞きいただきありがとうございました。いかがでしたでしょうか。今日はですね、ちょっと開発は近いっちゃ近いか、デザインシステムとかそういう観点で言うと、
クロードデザインが思った以上にすごかったので、共有させていただきました。こんな感じで、いろいろなAIサービスも使ってみたりしているので、気になるのとか、これ使ってみてよみたいな要望あれば、ぜひコメントとかいただけると嬉しいです。
このポッドキャスト気に入ってくれた方は、いいねやフォロー、高評価ぜひお願いいたします。それでは次回もお楽しみください。バイバイ。
