00:00
こんにちは、AIで仕事をサボるラジオのしゅうへいです。ということで今日はですね、Xでまあまあ伸びてた内容をちょっと話したいと思うんですけど、
これを入れるとですね、Claude Codeが10倍ぐらいすごくなるというね、 開発スピードが上がったりとか開発の質が上がる、そんなスキルを紹介したいと思います。
それは何かというとですね、簡単に言うと、フローチャートみたいなものが作れるスキルなんですよ。
これを聞いたときに、うなもん前から作れるわい、アーティファクトという機能があるやろうが、しゅうへい何やお前AIのこと全然勉強してないんけと思う人もいるかもしれません。
実際僕もね、使いスキルなんてそんな入れたところでどうすんのみたいな、まあなんかのXでね、
まああのGitHubで人気のスキルがありますよって流れてきたんで、えーと思って、まあX、一応勉強でね、いつも見てますから、あの見てたんですけど、
それでなんかこれ使ってなんかすごいことあるのかなと思ってたんですが、まあ物は試しなんですよやっぱりね。
そう、やっぱね使ってみるっていうことが大事。使うとね、なるほどなということがわかったので、今日はそれについて解説をしたいと思います。
で、えーと何かというと、僕のXとか見ていただいたらあります。でもう調べてもらってもいいです。えーとまずですね、ダイアグラムデザインというものです。ダイアグラムデザイン。
はい、えーまあ多分ダイアグラムデザイン、GitHub人気って調べたら多分出てくると思います。で、チャッピーとかクロードに聞いてもいいと思います。
で、まあ何かというとですね、図をAIに描かせると、なんか全部よくある箱になっちゃうというか、なんか微妙なものがありますよね。
で、これまとめてくれてるXのアカウントがまさにわかりやすく出してくれてるんですけど、これを使うことによって、このダイアグラムデザインを使うことによって何が起こるかというと、アーキテクチャ図、まあいわゆるなんか設計図みたいなもんですよね。
うん、なんか設計図とかフロー図などの、など27種類の図を出せると。HTMLとSVGだけで完結すると。で、ビルドが不要であると。これどういうことかというと、一時デプロイとかなんかそういうことする必要がないということなんですね。
で、サイトを読んで色やフォントを寄せて、ブランド感まで合わせるみたいなことができると。で、Figmaで微調整地獄を避けやすいみたいなことがあるらしいです。
で、例えば技術記事、理系の方とかエンジニア方でなんか配線図とかそういうものを作られる方とか、あとはAIで何かを作っていくときに設計資料みたいなのを作ったりとか、プロダクトを自分で紹介したいなっていうときに、
今自分が作っている内容をこのフロー図にしてください、フローチャートとかアーキテクチャ図にしてくださいみたいなことを言えば、すぐ発動してですね、自分のクロードコードが要するに図解みたいにしてくれるわけです。一般的なそのいわゆるポップな図解というよりかは、ちょっとこうなんて言うんですかね、ビジネス寄りというか。
03:03
で、これもちろん無料で使えます。無料で使えます。で、これですね、こういうふうにXで流れてきたやつを、なんか後でやろうっていう人いるじゃん。僕もブックマークして終わることもあるんだけど、これですね、リンクをXのリンクでもいいんだけど、別にGitHubのリンクでもいいんだけど、コピーしてクロードコードに投げて、これやりたいんだけどって言えば、やってくれます。そう、作ってくれるんですよ。そうなんです。
だからまあ、なんかいや、そもそも図解なんかさせてもね、別にそんな、えー、そういう図解のブログでもやってるわけじゃないから、不要ですよっていう人もいるかもしれませんね。で、こっからが結構お味噌で、実際さ、僕もじゃあ別に設計者でもなんでもないから、まあそれは自分で作るときは設計っていうかなんか設計っぽいことを考えますけど、で、別になんかそれを技術資料としてどこかに出すわけではないので、別に僕もなくてもいいわけですよ。
でも、このスキルを入れてね、とあることを試したらですね、いや、なるほどと、これはこっちに使えるぞむしろ、非エンジニア文系はと思ったんですよ。それ何かというとですね、いわゆるね、今のクロードコードにこういうこと投げたときにこんなことできますよ、ね、ウェブアプリとかウェブサイトでもゲームとかアプリでもなんでもいい、開発が結構複雑になってくるって結構クロードコードでありませんか。
何やってんのかわかんねーみたいな、もうテキストだけで出されてきてさ、はーみたいな。で、アーティファクトの機能があるからね、アーティファクトで整理してって言ってもいいんだけど、それさせると時間もかかるしトークン商品も増えるんだろうなーみたいなのがあるじゃないですか。
で、それがあるから、なんかまああれテキストであるけど、まあなんかもういいか、これでまあなんかそれっぽくやってみたいな感じになって、あれなんか全然違うで、どういうことで開発が止まるとか時間がかかるってことがあるんだけれども、このね、Flows自体のスキル、まあGitHubのそのスキルを自分のクロードコードに入れて、僕はFlowsで出してFlowsで使いしてとかっていうと、あのスキルが発動されて絵を描いてくれるんですけど、あの画像として出してくれるんですね。
で、画像として出してくれるんだけども、それをすることによってですね、まあ今例えばステップメールを作ろうとしたときに、こんなステップメールでこんな感じでこんな感じで、ここで動画見なかった人はこっち飛ばして、こっちああして、ああしてってなんか話すじゃないですか、タイプレスで話して指示をして、で、ただ自分で言っててさ、他のことやってるんですよ、その間。
で、他のことやってて、ちょっと待てよ、ここで何してたっけって思い出せないときあるんですよ。そう。で、あと、そもそも言ったことなんだけど、どういうふうにどこをどういうふうにAPIとかMCPとか何かで繋ぐのかWebhookでどこが繋がってんのかが、自分の中で分かんなくなってるときあるんですよ、いくつも作ってると。
これほんとAI時代のなんか人間のボトルネック感がすごいよね、もう処理できないね自分が、自分のお願いしたやつが処理できなくて、でもそれをこういうふうにフロー使いしといてとフローチャートで出してってそのスキル使ってやるとですね、あ、今ここをやろうとしてんだって、こことここはこういうふうに繋がるんだみたいなことが分かるんですよ。
06:03
だから実際僕今Webアプリ学習サイトとか運営してる中で、今学習サイトの開発ってどういうふうになってんのフロー図で出してって言ったときに、めっちゃ自分の中で、あ、そうか確かにこうなってたね、こことここがこういうふうに繋がってんのかって視覚的にね、なんか学習ができたっていうか理解ができたんですよ。
で、それ別に分かってないわけではないんだけども、やっぱテキストだけよりかはこういうふうに見えたほうが理解が早いなっていうふうに思いました。で、あとですね、これ普通にクライアントワークしてる人とかフリーランスの方、まあ会社員の方もそうなんだけど、あのいわゆるさ、ガントチャートとかってあるよね、ガントチャートだったっけ?
で、よくプロジェクトマネージャーの方とかが作ったりとか、それを共有するじゃないですか、何々さんがここまでで広告代理店にここに入口があって、ここでなんか知らしがポップができててみたいな、あるじゃん、スケジュールを置いてくれるの。ああいうのって結構作るの大変じゃない?
で、ああいうみたいな感じ、あんなふうな感じで、要するに自分のto doを出してくれるんですよ。要するに今ってAIと一緒に仕事してるから、何が起こるかというと、AIが止めてるのか、自分で止まってるのか分かんないときあるんだよね。
で、ちょっと待って、今の開発状況を教えてって、僕のto doをこのフロー図で出してくださいって言うと、周平この後これやって、この次にこれやって、これやって、同時にこっちも進めながらやってくださいみたいなことが出るんですよ。
そう、でそうすると、ああ確かに今日これとこれとこれやったらいいからスッキリするわみたいな。僕も結構やっぱ多動っていうかADHD技術があるから、なんかね、思いついたことやっちゃうんだよね、その都度。ああ気づいたこと思いついたことやって、あの本ちゃんの優先順位がなんか分かんなくなるときあって、これをね、なんかテキストで言われて歌唱書きに書かれてもあんま頭に入んないんですよ。
なんでか分かんない。テキストは読めるし分かるし、認識はパッと見て分かるんだけど、頭に入ってこないんですよ。なんかそれが。でも、このフローチャートみたいな感じでね、Ganttチャートみたいなの出してくれると、ああそっかそっかこの後これやって、ああやって、ああなるほどこれとこれをひも付くから、一緒のタイミングでこれやればいいよねみたいな。自分が頭の中で絵を描かなくてもいいんですよね。
そう、なんか僕ね、言語処理みたいなものは高いらしいっていうか、その平均よりも高かったんですよ、なんか知能検査みたいなしたとき。でも、逆になんか図形の理解みたいなものは僕低いんですよ。だから、直感に反するんですよね、この感じが。でも自分の中ではAIにバーってテキストで言われるかは、まあそれでもみんなそうか。
やっぱこういうふうに、なんかこう図解してくれて、この後この後これ順番ねって整理してくれたほうが、なんていうのかな、紙に書き出すよりも僕の中ではすごくなんかわかりやすくなってですね、すごいなんかこれいいなと思ったんです。だから技術資料とかを作るほうにみんな寄せると思うんだけど、これそういうふうに使われてるんだけどGitHubでは。
僕の中ではね、もう開発状況を今理解したくて、クロードコードに聞いてまとめてもらう、またはそれをやる中で自分のトゥールを出してもらうっていう、だから何やってるかぐちゃぐちゃになる人とかわかんなくなる人は、これ1回作るといいと思いますよ。
09:13
そうそうそう、だからロードマップとかもいいかもね、今年の目標とかを1回作ってもらうとかね。あとはなんか、あ、いいわ。これさ、周辺が今考えてること、今やろうとしてること、過去のセッション履歴からあの図解してって言えばいいじゃんね。
そうだ、これめちゃくちゃいいのを見つけた。ちょっと待って今言っていい?はい、依頼しました。もうとにかくね、自分の周辺の脳内の開発状況、メモとかアイディアとか含めて、もう全部一枚図にしてぶち込んでくださいっていうふうに言いました。
ってなると、これ何が起こるかというとさ、あーめちゃくちゃいいね。これ要するに、なんかさ、あのオブシディアンとかでグラフビューツってさ、自分の脳内のなんかシナプスみたいなの繋がっていきますよ。あれ、僕やってんだけどいまいちピンときてなくて、かっこいいなと思ってやるんだけど、これそれよりもさ、こうやってなんか図解してもらったほうがいいよね。
うーん、これいいわ。で、何が言いたいかっていうとね、結局このダイアグラムデザインを僕はスキル化したわけですけど、これをやったことによって、クロード自体の性能が別に上がるわけではないんですよ。なんだけど、自分自身で何か止まっていることとか忘れていることとか、理解できないことが理解できて、あ、なるほど、すっきりした。じゃあ次これやってこれやってこれやってって言って、僕自身のボトルネックが解消されるんですよね。
そうすることで、クロードコードの性能は変わらないんだけども、10倍使えるようになるっていう、そういうものなので、僕みたいなことあっちゃこっちゃなんかいろんな方に言っちゃう方はですね、ぜひこれ入れてみてください。無料で使えますから。はい、ということで、昨日おかげさまでですね、ウェブアプリ開発の教科書が出せました。皆さん早速買っていただいた方、ありがとうございます。で、今、ブレインで販売中でございますので、ぜひ気になる方は4980円でございます。4980円。
で、一応ですね、事前登録のリンクがまだありますので、それから登録していただいたら割引できますので、気になる方はそっちから、1000円別に高くても、普通に4980円で買いますわって方はもうブレインそのまま行っていただいて大丈夫です。公式サイトにリンクがありますので、事前登録したらすぐ割引リンクが来ると思いますので、8月の20日お盆明けしばらくして、で、もう割引は一斉に終了しますので、
ぜひですね、それまでに買って、いろいろ今年のまだ夏は、まあちょっと秋っぽいけどね、続くと思いますので、今年の年内はね、ウェブアプリが作れるようになると。もうまあ別に、あれ見ていただいたらほんと簡単ですよ。
あの、見ていただいたらね、ほん、そんな難しいことしてないから、あの開発がひ、続けば続くほど複雑になるだけで、別に難しいことはしてないので、あのぜひですね、あの僕の画面解説とかでやってます。
あの一応AIのモーション動画とかはね、一部あの入ってますけど、あのほとんど僕のあの画面解説で僕が話してますので、えーそこはね結構あのかなりえー人間が喋っておりますので、逆にあの信頼感があるかなというふうに思います。
だから、めっちゃややこしい話はそこまでしてます。あの教材自体はね、結構もうほんとにボリューミーなんだけど、あのそれ自体全部読まなくていいから、あの僕も読んでもね、まあ意味はわかるけど、これは読んでもなんか作れるようになる感じはしない。
12:12
別にそういうもんじゃないから、教材のテキスト自体はもうAIに読み込ませた方がいいので、でどちらかというと動画で雰囲気をつかんで、で手順書があるのでその手順書を入れながら自分で小さく作ってみると。
あの一旦メルマガシステムみたいなものは簡単に作れるようにしてますのでテスト環境みたいな感じで、で一切その作るのにまずお金かからないので、えーそこがすごくいいです。
あのクラウドフレア、クロードコード、リセンドこの辺りを組み合わせることによって、あのいわゆる事前登録のシステムみたいなのが作れますので、結構ねGoogleフォームとかいろんなものを使って消耗してる人、いちいちコピペしてる人とか、クライアントとのなんか進捗管理とかで消耗してる人とか、
本当にこのウェブアプリ一本作ってURLで渡してあげるだけでクライアントワークの質がすごい上がると思います。僕は多分そういう人には発注し続けるだろうなと思います。この人AI使えるから大丈夫だと思うからね。
だからウェブアプリされるようになっとくだけでも全然もうAI開発の規模がね、もう多分1万倍ぐらい変わります。ちょっと言い過ぎかもしれない。1000倍ぐらいでも本当に変わると思いますね。
公式サイトただ作るだけだとまだまだ弱いので、もうそんなのみんなできるから当たり前にバイブコーディングとしてはね。それをウェブアプリっていうのはやっぱり一歩踏み出すといいです。APIとかデータベースとかMCPとか使えるようになると全然変わりますから。チャットボトル作るだけでも今仕事になりますからね。
なのでまあそれ考えたら4980円で、普通プログラミングスクール行って30万50万払ってウェブアプリを半年くらいかけて作って小さい何か仕様のものを作ってデプロイして使ってもらうぐらいだと思うので、スピード感で言うとそれ一気に飛ばして今日からすぐデプロイして使えるようになりますので。
規模としてはちょっとそんな大きいものではないですけど、そこから自分は本当に作りたいものをどんどん作っていけばいいので、だからまあ3,4から50万ぐらいはもしかしたらかかるかもしれないような学習を、まあもちろんその細かいところはまだすっ飛ばしてますけど、まあ本当にパッと出すことはもうできるので、その体験だけでもかなり4980円は価値があるかなというふうに思います。
というわけで、本来は多分5万ぐらいでも安いんじゃないかなと勝手に思ってますけどね、この後もちょっと動画とかね事例とか足していきますので、まあ今買っていただいたらそのアップデートは全然お金かかりませんので、ぜひ買ってみてください。
こちらも公式サイトにね、事前登録リンク、割引リンクもありますので、20日までぜひ1000円引きでございますので買ってみてください。ということで今日も聞いただきありがとうございました。この後も心地いい時間を過ごしてください。バイバイ。
