Claude CodeとFigma MCPでUIデザインを作る
はい、じゃあ収録を始めていきます。 モックアップラジオ、略してモックラです。よろしくお願いします。
えーっと、今日も歩きながら撮っております。 えーっと、家からちょっと駅の方に買い物に行く用事があるので、
その道すがら歩きながら撮っております。 えーっと、今週は何を話そうかなーって思ってたんだっけ。
あ、そうそう、えーっとね、先週、いつだっけな、ちょっと前に、 またAI、生成AIとかAIエージェントの話になるんですけど、
えーっとね、クロードコード、 そのAIエージェント、
クロードコードと、フィグマっていう、 いわゆるUIデザイン、ウェブサイトだったり、アプリケーションだったりとか、
のデザインをできるツールっていうのを接続する、 あのフィグマのMCPっていう、
まあこれも説明が難しい。 自分でもよくわかってないから説明が難しいんだけど、
まあそこ、それを使うことによってクロードコードで指示を与えるだけで、 フィグマの方で画面のデザインをボンボンと作っていってくれる。
で、修正したい場合はまたクロードコードで指示をすると、 それに指示に沿ってフィグマの方の画面を直してくれるみたいな、
仕組みがあって、まあなんか存在はしてるんですけど、 全然あまりその辺を使いこなせてなくて、
なんかね、ここ半年はもうあの会社員になって、 そこでエンジニアとしてやっていて、 個人開発でやったりはしてるんですけど、
まあデザインもね、もう本当、クロードコードで、 何ていうのかな、
もうそのまま直接アプリのデザインを組んじゃって、 その上で何か気になるところがあったら、
まあクロードコードで指示を出したり、時には直接自分でファイルをいじって、 レイアウトを整えたりとかっていうことをしてたんですけど、
そうそう、あのね、ちょっと何か用事、何、 必要に駆られて、
フィグマの画面をそのままデザインするっていうのが、 ちょっと久しぶりに必要になったので、
あのそうそう、今だったら、
フィグマ、MCP使ってクロードコードで、 レイアウトできるかなと思って、ちょっと試してみたんですけど、
いやーすごい便利ですね、もうびっくりしたって、 完全に浦島太郎だなって思ったんですけど、
そうそう、去年ぐらいからかな、 そのクロードコードを使ったりして、コーディングに関しては、 かなり便利にいろいろと活用していたという感じで、
もともと僕デザインとかをやっていたので、ウェブサイト作ったりとか、 フィグマももちろん使ってとかあったんですけど、
ここ1年ぐらいは、もうなんていうのかな、 そういうデザイン作業みたいなのを直接あんまりやることがなかったので、
フィグマ自体あんまり触ってなかったんですけど、 久しぶりにちょっと触ってみたら、
今はこんな便利にできるんだって思って、 いやーちょっとびっくりしましたね、っていうのと、
デザインとプログラミングで異なるAIとの関係
あとね、やっぱそうそう、デザイン業務で、 そのAIエージェントとかを使ってやってみるっていうのをやって初めてちょっと感じたんですけど、
やっぱね、デザインに関しては、一応自分としては10年以上、 いろいろなデザインを我々なりにもやってきたというところがあるので、
そういう経験値がある中で、AIが作ったものに対して、 もう大体8割ぐらいいい感じだなっていうのを認めながら、
ただちょっと詳細、細かいところをこうしたりとか、 っていうのを目で見て、
よしよしとか、もっとこうした方がいいかも、みたいなところを判断して、 そこを指示して完成度を上げていくみたいなことが結構いいリズムでできたっぽいな、みたいな感覚があったんですね。
一方で、今普段普通に使っているプログラミング開発において、 クロードコードを使ってAIにいろいろやってもらったりするっていうのが、
結構ね、その仕上がったものに対して、 結構これ変だなみたいなところに気づいて直してもらうところもあれば、
結構やっぱね、自分が分かんないコードとか、 理解が追いつかないみたいなのが結構作られてきて、 そこに対して僕の方から質問をして、
これってどういうこととか、 ここってこう書いてやるけどなんでみたいな、結構いろいろ聞きながら、 やっと自分の理解が追いついて、
その上で初めて、あれでもなんかちょっとおかしいかも、 みたいなことがあれば、そこを擦り合わせして直してもらう、 みたいなことはしてるんですけど、
やっぱね、どっちかというともうAIの方が、 そのプログラミングに関しては完全にもう、 実力が上っていう感じでやってるので、
AIに頼りながらも何とかついてってやっていく、 みたいな感じがあったんですけど、
デザイン業務に関して言うと、 ちょっとまあもちろん得意分野とか、いろいろあるんだけど、
まだこっちが手綱を握れてるっていうか、 自分が作ってもらって、いいじゃんいいじゃんっつって、
ただまあその上でもっとこうしたい、 みたいなのが結構スムーズに出てきたんだけど、
なんかね、そこに気づけたのがすごい面白くて、 プログラミング作業に関して言うと、
AIのことを先生と思っていろいろやってるんだけど、 デザインの方は結構まあ、
対等なパートナーだったり、あるいは部下でもないけど、 ちょっとこう代わりに手を動かしてもらうっていう、
なんかそういう関係でできたのが、 なんか面白いなと思って、
デザインと開発の垣根を越えた活用
そうそう、だからそんな感じで、 プログラミング作業とデザイン作業で、
自分の中でAIとの使い方、 AIエージェントの使い方がちょっと違うっていうのが面白くて、
なんかそれはなんていうのかな、こううまく生かして、 どっちもこうやっていきたいなっていう気持ちが、
なんか改めて感じたっていう感じですかね。
ちょっと何を言いたいか忘れちゃったな、 よくわかんなくなっちゃったんだけど、
まあとにかくね、自分としてはアプリだったりとか、 ウェブサイトもそうだし、ウェブアプリとか、
ウェブアプリだけじゃなくて、 他のモバイルアプリとかでもそうなんだけど、
なんていうのかな、別にプログラミングとデザイン、 どっちもその垣根なくどっちもやっていきたいっていう気持ちがあるので、
なんかそう、最近デザイン業務とか、 Figmaを使ってのデザイン作業とかっていうのはあんまりしてなかったんだけど、
ちょっとこの辺もAIを使いながら便利にサクサクと進めながら、 やっていきたいなっていう感じがしましたね、はい。
IMAXで観る「オデュース聖夜」
っていう感じかな、あと何か話すことあったっけな、 今日は特にない、なんか1週間あっという間だったんだよな、
特にトピックもないんだけど、 多分明日、映画のオデュース聖夜を見に行く予定ですね、はい。
クリストファー・ノーラン監督の最新作、 オデュース聖夜を妻と一緒に出かけに、見に行く予定なので楽しみですね。
結構ね、周りの人とか会社の人とか、 もう見に行ったっていう人がちらほらいて、話してるのを横で聞いていて、
ネタバレは聞かないようにしつつ、 何か話に混ざりたいなって思ったりしてたので、
ようやくその話に入れるなっていう感じで、 非常に楽しみにしております。
そう、なんかね、もう近くの映画館では、 上映時間が絞られちゃってて、
ちょっと行きづらい時間になっちゃったので、 ちょっと離れた映画館。
ただそっちだとね、あの、アイマックス、 なんかすごい画面がでかくて、音もでかいみたいな、
ちょっとすごいアホみたいな表現になっちゃったけど、 そう、アイマックスで上映してるってことなんで、
そう、アイマックスでオデュース聖夜見に行くのが、 すごい楽しみですね、はい。
って感じかな。
じゃあ今日もまた、もうすぐスーパー駅前の方に着くので、 これぐらいにしていこうと思います。
じゃあ今日はこれぐらいにしておきます。 月後からまた頑張っていきましょう。
ご意見、ご感想、ご質問などある方は、 概要欄にあるお便りフォームにお寄せいただくか、
エッグスやリッスン、ミクシー2などで コメントいただけると嬉しいです。
今回も聞いていただき、ありがとうございました。 ではではまた。
