高崎さんのバイブコーディング実演、CursorとClaude Codeの今
家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は高崎さんが語ったバイブコーディングのLIVEを紹介するね。
テーマは「AI×ホームページ編集の最前線」。進行役のただっちが、if塾の高崎さんと、同じくif塾で活動しているたくみくんを迎えて、高崎さんがふだん使っているCursorとClaude Codeを画面共有しながら、チャットで指示するだけでホームページが直っていく様子をそのまま見せてくれる回。途中でサーバー接続がうまくいかなかったり、ターミナルが文字だらけになったり——ライブならではのハプニングも込みで、バイブコーディングの生々しい現場が伝わってくる内容だったよ。いやー、これは非エンジニアの私が見ても、ぶっちゃけ面白かった。
高崎さんが見せてくれた「バイブコーディング」実演、Cursorでホームページをチャットひとつで直す
高崎さんは、if塾のサービスページをローカルのファイルとしてCursorで開くところから見せてくれたよ。ホームページのデータがフォルダみたいに全部並んでいて、そのフォルダを開くと左側にファイル名、右側にチャット入力欄が出てくる。「ここのタイトルが見づらいので直してほしい」って自然な日本語で頼むだけで、AIが該当箇所を探して書き換えてくれる。更新前は赤、更新後は緑で色分けされて表示されるから、どこがどう変わったのか一目で分かる仕組みなんだよね。それを見ていたたくみくんは「GitHub Copilotに近いですね」ってコメントしてた。たしかに、コード補完系のAIを触ったことがある人には近い感覚なのかもしれない。
高崎さん（9:22〜）
「このイフ塾サービスページの今絶賛カーソルとクロードコードでいじりまくってめっちゃ派手になってるんです」
高崎さん（1:20〜）
「ですねエンジニアの間ではもう最近この話しかしてないぐらいな感じな気がしますんですごい便利です後で話しますよろしくお願い」
ただっち
「しますありがとうございます楽しみですたくみくんもよろしくお願いし」
自分でも笑いながらそう言ってたのが印象的だった。もともとはエンジニアがコードを一行ずつ手で書いて、そのコードをコピーしてエディターに貼って、サーバーに上げて、間違えたところを自分で探していじって——っていう地道な作業だったのが、チャットで「ここ直して」って頼むだけで完結しちゃう。高崎さんいわく、サーバーに上げたり間違えた場所を自分で探して直したりする作業こそが、非エンジニアにとって一番のハードルだったところなんだって。たくみくんに「めっちゃ増えてませんか」って突っ込まれて、高崎さんも「増えました」と笑ってた。とにかく機能もページも、気づけばどんどん増えてたみたい。
ただ、実演中に一つハプニングもあって。ローカルに保存してあるファイルをいじっていたつもりが、実はサーバーに上げたファイルの方をいじろうとしていた、というすれ違いが起きたんだよね。画面には「行った、行った……」という表示だけがずっと繰り返されて、なかなか前に進まない時間もあった。
たくみくん（12:54〜）
「さっきあれあったのは、パソコンのストレージ内に保存されてるものをいじってたけど、その保存してたファイルを、パソコンないじゃなくて、サーバーにあげてしまった。ネット上にあげて、そこを直でいじる。いじる。はず。最近使用したらいけるかな、」
「これはライブあるあるですね」って、ただっちも笑ってフォローしてた。ローカル編集なのかサーバー上の直接編集なのか、自分が今どっちを触っているのか意識するのって、地味だけど大事なポイントなんだなあと私は感じました。Cursorはチャットで指示するだけで色々できる反面、サーバー接続の設定まわりは今回のライブでもちょっとつまずいていて、簡単便利の裏に「接続」という現実的なハードルがまだ残ってるのも、正直に伝わってくる回だったよ。結局この日、高崎さんは「今日は諦めます」とサーバー接続をいったん保留にして、次の話題に進んでいったんだよね。
差分表示の話に戻ると、更新した部分は全部緑で表示されて、良ければそのまま承認していく——っていう、この「承認」のひと押しだけで公開状態まで進むシンプルさが、たぶん一番の売りなんだと思う。今までなら、修正したいコードの箇所を出してもらって、それをコピーしてエディターに貼って、自分でサーバーに上げて、確認して……という何段階もの手間がかかっていた。それがワンクッションで終わる。料理で言うと、味見して「もうちょっと塩」って言ったら、その場で味が変わって出てくる感じ。修正の往復にかかる時間そのものが、まるごと消えたようなイメージだよ。
高崎さんは、Cursorのことを「非常にいわゆるコードエディター的なAI」だと表現してた。普通のテキストエディターとの違いは、こっちが直したい場所を言葉で伝えるだけで、AIがコードのどこをどう直せばいいか自分で判断してくれるところ。ファイルを一つずつ手作業で探し当てなくても、チャット欄に「ここ見づらい」って書くだけで、AIが該当するホームページのデータを見つけて修正案を出してくれる。この「探す・直す・確認する」の三工程を、AI側がまとめて引き受けてくれるようになったのが、今のCursorの実力なんだなあと実演を見ていて思ったよ。
クロードコードはターミナルまで持ってる、自分で動く相棒
Cursorのサーバー接続は今日は諦めます、と高崎さんが一旦区切って、次に話が向かったのがClaude Code。「カーソルとクロードコード、どう違うのっていう感じなんですよ」って高崎さん自身が切り出したところから、この節は始まる。
高崎さん（16:48〜）
「クロードコードはこの右側のチャットじゃなくて実はもう1個下にもチャット下は今度このターミナルっていうパソコンの黒い画面でコマンドをするやつですね。それがこのエディタ上で開けるので。なのでこの下の出てる今アルファベットがバーって並んここになんか裏技みたいにクロードコード契約マックスプランっていうのが必要なのでそれ」
チャット欄の下にもう一段、黒い画面のターミナルが埋め込まれてるのがClaude Codeの特徴なんだよね。ここでAIが自分でコマンドを打って、実行して、結果を見て、また次のコマンドを打つ——っていうのを繰り返していく。ただし、しっかり使うにはマックスプランという契約が必要らしくて、プロプランだとすぐに制限がかかっちゃうとのこと。ここはちょっとお財布に効いてきそうなポイントだなあと思った。見た目はあえてシンプルで素っ気ないんだけど、それも「ツールってどんどん進化してすぐ使われなくなるんだから、UIに凝るだけ無駄」という高崎さんなりの解釈があるみたい。
面白かったのが、AIがコマンドを実行する前にいちいち確認を取ってくる仕組み。
高崎さん（20:44〜）
「なんかコマンドとか実行していいすかの時に許可が確認されるんでだいたいYesが2個あるんです。コマンドを単発で実行するYes。2個目のイエスは似たようなやつ全部実行しちゃっていいですかって。個目にしてます僕。いくのかで、こうやって色々待ってる間になんか別のやりたいなってなったらここで追加」
「1回だけ実行していい？」の確認と、「似たようなのは全部まとめて実行していい？」の確認、2種類の許可の出し方があるんだって。高崎さんは基本、後者の「全部お任せ」を選んでるみたい。AIが実行を待ってる間に、別の指示を追加で投げ込むこともできるから、待ち時間もムダにならない。しかもClaude Codeは自分でToDoリストみたいなものを勝手に作って、やったことをどんどんチェックしていく。ただっちが横で「自分でプランを立ててPDCAをやっていく感じなんですね」と感心してたけど、まさにその通りの動き方をしてたよ。高崎さんはデザイン面についても「クロードコードの方が攻める印象がある」と話してて、Cursorとは少しキャラクターが違うんだなあというのも伝わってきた。
実演の途中、高崎さんが画面を見ながら「何か使うの?」って自分に問いかけるみたいにつぶやく場面もあったんだよね。指示を出す→AIが黒い画面でコマンドを実行する→ToDoが一つずつ消えていく、というのを何度も繰り返しながら、次に何を頼むかを都度考えていく。人が細かく手順を教え込まなくても、AIの側が「次はこれをやればいいですよね」って提案してくる感じ。だから会話というより、隣に座って一緒に画面を見ながらメニューの相談をしてる、みたいな距離感なんだよね。ターミナルにはアルファベットがバーッと流れていくんだけど、慣れてる高崎さんにとってはそれすら「進んでる証拠」として安心材料になってるみたいだったよ。
見た目がシンプルなのは手抜きじゃなくて狙ってのことらしくて、高崎さんいわく「公式が発表してる」んだって。ツールがどんどん進化していくジャンルだからこそ、見た目に凝る時間があったら中身を進化させる方に振ってる、ということなんだと思う。私はここ、すごく共感しちゃったんだよね。見た目をキラキラさせるより、ちゃんと動く・ちゃんと届く方にリソースを使う——これって、ホームページ作りに限らず、どんな仕事にも通じる話だなあと感じたよ。
TMAXで複数のクロードコードを同時に走らせる
「せっかくならってことで」と高崎さんが持ち出してきたのが、TMAXという聞き慣れないツール。
高崎さん（22:11〜）
「TMAXっていうのはどんなツールなのかっていうと、このターミナルっていうものを分割それぞれ実行することができるっていう謎ツールでそれを利用するとターミナルで実行されるクロードコードが複数実行できてどんどん指示を渡したりてくって行ができるっていう話に」
ターミナルの画面をいくつにも分割して、それぞれで別のClaude Codeを同時に走らせられる、ということらしい。たくみくんが横から「タブを増やせるってことですね」と要約してたけど、まさにそのイメージ。実際に高崎さんが新しいターミナルを開いてみせると、今動いていた作業とは別に、もう一つ新しい作業スペースがすぐ立ち上がった。1つの窓でメニューの調整を進めながら、別の窓で違う作業を並行して進める——高崎さんはこれを「自動化から自装化」って表現してた。自分でどんどん動いてくれる感じ、っていうことなんだと思う。
ただ、正直な人だなあと思ったのが、高崎さん自身も使いこなせてる自信は無さそうなところ。
高崎さん（23:48〜）
「僕もあんまりよくわかんない。本当はこれで指示渡すとかっていうのをやってる。それちょっと既にできてるプロジェクトとかを入れてるんで、ちょっとやらないといけなかったんで、もうちょっとカスタムが僕は必要だなって感じてますねどういうのをいじり出してもうちょっといじりどきが次の」
「よくわかんない」って正直に言っちゃうところ、なんか好感が持てるんだよね。新しいツールって、完璧に理解してから使い始めるものじゃなくて、触りながらカスタムしどころを見つけていくもの。今はTMAXを使って2つのコードを同時に動かしてる段階で、まだまだ実験中というのが今日のライブでの正直なところだったよ。半年もすれば、この辺りはもっとこなれてくるのかもしれない……なんてことを思いながら見てた。もともとClaude自体がMCPという連携の仕組みに力を入れてるという話も出ていたから、TMAXみたいな外付けのツールに頼らなくても、いずれ標準機能だけで同じことができるようになるかもね、という予感もにじんでたよ。
料理でたとえるなら、コンロが1口しかないキッチンで一皿ずつ作っていたのが、TMAXを使うと2口・3口のコンロを同時に使えるようになるようなもの。片方でメニューの色を調整しながら、もう片方でお問い合わせフォームを直す——そんな並行作業が、チャットの延長でできてしまう。ただっちも「分かりやすい」と相槌を打ちつつ、まだこの場にいる誰にとっても真新しいツールなんだなというのが伝わってきたよ。便利は便利だけど、道具が増えるほど「今どの鍋で何を煮てるんだっけ」を見失わないようにする工夫も、これからは必要になってきそうだね。
高崎さんは、TMAXでこれから指示の出し方をもっと工夫していきたい、というニュアンスのことも話してた。今はまだ「謎ツール」として手探りで使ってる段階だけど、こういう周辺ツールがどんどん試されて、使いやすいやり方が見つかっていく——そのスピード感自体が、このジャンルの面白さなんだろうなと私は思う。1つのターミナルで動いてる作業を見ながら、もう1つのターミナルで次の指示を考える。この「待ってる間も手を止めない」感覚は、ライブで実際に画面を見せてもらわないと、なかなか実感が湧かないところだったよ。
正直なところ、TMAXという名前を今回のライブで初めて知った、という視聴者も多かったんじゃないかな。高崎さんが「謎ツール」と呼びながらも実際に画面を分割して見せてくれたおかげで、AIが1台じゃなくて何台も同時に働いてる様子が、非エンジニアの私が見ても直感的に伝わってきたよ。ここが今回のライブで一番、時代の変わり目を感じたポイントだったな。
GitHubとマークダウンで、ドキュメントもAIと一緒に整理する
話はホームページ編集から、ドキュメント編集とGitHubの話に移っていく。Gitはエンジニアなら誰もが通る、けれど高崎さん自身も「非常に苦手意識のあるツール」だと前置きしたうえで、簡単に説明してくれたよ。
高崎さん（31:18〜）
「これが直ちも見ることができて、編集がしたいってなったら、自分でこれをダウンロードして、自分の方でもコピーして編集とかができるっていう、編集した履歴とかが全部残るんで、どの人がどんなふうに編集エンジニア間でコードとかを非常に共有しやすいツールって」
データをGitHubに上げておくと、誰がいつどう編集したかの履歴が全部残る。だから複数人で一つのコードを触っても、混乱しにくい仕組みになってるんだよね。エンジニア同士が離れた場所にいても、同じファイルを安心して触れる——料理で言うと、みんなで同じレシピノートに書き込みながら、誰がいつ何を直したか全部わかる状態、みたいなイメージかな。ちょっとしたホームページなら、GitHubのページ機能を使ってそのまま公開することもできるらしくて、コード管理と公開が同じ場所でできてしまうのも便利そうだった。英語だらけの画面に、たくみくんが「英語だらけのこれ」って思わずつぶやいてたのも、正直な反応だなあと思って聞いてた。エンジニアにとっても、Gitの画面はやっぱり最初はとっつきにくいものなんだよね。
もう一つ紹介されたのが、マークダウン形式でのドキュメント編集と、Obsidianというメモツールとの連携。
高崎さん（34:08〜）
「そうそうそう。オブシリアンも今使ってやってまして。オブシリアンってわかりますかね。オブシリアン知らないです。エンジニア界ではみんなオブシリアンツールだねメモをどんどんぶっこんでいくことができるんだけどメモとメモの関連性とかつながりみたいなのを自分の今まで調べたこととか知識っていうのが」
マークダウンで書いたメモは、そのままObsidianに取り込める。メモとメモのつながりを可視化できるのが強みらしくて、たくみくんも「じゃあいつかレポートをHTMLファイルで提出する時代が来るかもしれないですね」なんて冗談を飛ばしてたのが面白かった。まとめた内容をあとからHTMLに変換して見やすく整理する、という流れも語られてて、高崎さん自身も「本当はHTMLで資料を出せる方が今は一番だと思ってる」と話してた。たくみくんは「Googleドライブに上がってるファイルもいじれる」ともうひとつ補足してくれて、ローカルもサーバーもクラウドも、境目なく触れる時代になってきてるんだなあというのが伝わってきたよ。でね、こういう地味な作業ほど、AIと組むと一気に楽になる分野なんだろうなと思う。
今回のライブで高崎さんが繰り返し口にしてたのが「文章を書く上で一番書きやすい書き方」を選ぶ、という考え方。難しいツールを無理に覚えるんじゃなくて、自分が一番ラクに書ける形式で書いて、あとの変換や整形はAIに任せる。マークダウンで書いて、HTMLに変換して、必要ならワードプレスっぽい見た目にする——この「入口はシンプルに、出口はAIにお任せ」という流れは、ホームページ編集だけじゃなくて、普段の資料作りにもそのまま応用できそうだなと私は思いました。
高崎さん自身、今度if塾でビジネスコンテストに出る予定があって、その資料をマークダウンでまとめてる最中なんだって。プレゼン資料みたいなちゃんとした形の物も、最初からパワーポイントで気合を入れて作るんじゃなくて、まずはテキストでラクに書いて、あとから見た目を整える——という順番でやってるみたい。仕事の資料作りって身構えがちだけど、こうやって「まず書く、あとで整える」の順番に分けるだけで、随分ハードルが下がるものなんだなあと、聞いてて思ったよ。
非エンジニアが増える時代、エンジニアの仕事はどう変わる
一通りの実演が終わったところで、話は今日いちばん聞きたかったテーマ——「これからエンジニアの仕事はどうなるのか」に向かっていく。ただっちがまず、こんな風に感想を口にしてた。
ただっち（39:25〜）
「まあエンジニアの人が仕事なくなるって言ってますけど、でもまだまだ非エンジニア山ほどいるので、その意味ではエンジニアの人たちも活躍しどころがまだまだいっぱいあるそうだなぁとは」
これに対して高崎さんは、このクオリティのホームページを個人で作れないようだと今後は厳しい、というかなり辛口なコメントもしていて——それでも「一見コードがバーンと生成できるようになっても、ちゃんとその人に届くようにフィッティングできる」ところに、エンジニアの食いぶちはまだまだあるとも続けてた。作って終わりじゃなくて、その後の保守や維持管理が結局は人の仕事になる、というのがたくみくんの見立て。技術がどれだけ進んでも、目の前の相手に合わせて仕立て直す部分は、しばらくは人の手が残るということなんだなと聞いてて感じたよ。
たくみくん（40:56〜）
「作るはいいけど、そこの後の管理が結局知らない人とかにできない。HTMLとかだといじれないじゃないですか。それをワードプレスっぽい、わかりやすい画面でいじれるようなツールが出てきてしまったら、本当にいいエンジニアなんですけど。まだまだ半年ぐらいは出ないと思うんで。」
コードで作られたものは、専門知識が無いと後から触れない。だからこそ、ワードプレスみたいに誰でも編集できる画面が必要になる——というのがたくみくんの読み。たくみくん自身、こういうツールが半年ぐらいでは出てこないだろうと予想しつつも、「保守・維持」の部分は当面、人間の仕事として残り続けるだろうと話してたのが、今日いちばん現実的な見立てだったなと私は感じたよ。この流れで、ワードプレスとClaude Codeが組み合わさる未来についても話が広がった。
たくみくん（41:40〜）
「ワードプレスにクロードコードみたいなのが入りだしたら、ちょっとわかんないですね。ああ、ああいうビジュアルで編集できるやつに、クロードコードみたいなのがバーンって入って、めっちゃ変わったとかってなって、編集もらってたぜみたいになったら。」
ブロックでビジュアル編集できる仕組みと、Claude Codeのようなチャット型の編集が組み合わさったら——非エンジニアの選択肢も、エンジニアの仕事の形も、両方まとめて変わっていきそうだなあと私は感じました。単価が下がって数をこなす方向に向かうのか、それとも人にしかできない部分に集中していくのか……今日のライブは、その分かれ目を覗き見たような時間だったよ。最後にただっちが「未来というかエンジニアの方の裏側の仕事が見えた気がして面白かった」とまとめてたけど、非エンジニアの私からしても、まさにそんな時間だったな。
高崎さんは、こうなってくると結局は単価が下がって数をこなす方向に向かうんじゃないか、「いつでもお答えしますよ」みたいな相談先が常にいっぱいある状態になるんじゃないか、とも話してた。たくみくんも「そうなるでしょうね」と相槌を打ってて、二人の間でも「そうなるかもね」という空気になってたのが印象的だった。この節を見返して思うのは、AIが賢くなるほど「作れる人」より「何を作りたいか分かってる人」の価値が上がっていく、っていう構図。高崎さんもたくみくんも、コードそのものより「非エンジニアがどこで困るか」「その人に何を届ければいいか」を見ながら話してたのが印象的だった。バイブコーディングという言葉が指してるのは、たぶん技術の話だけじゃなくて、AIと一緒に手を動かしながら考える、この距離感そのものなんだろうなと私は思ったよ。
ひろくんコラム — 速すぎる進化と、私たちが握っておきたい手綱
今回のLIVEを見ながら、正直ちょっとゾクッとしたんだよね。CursorやClaude Codeでホームページがチャットひとつで直っていく様子は、私からしたら魔法みたいな話。料理で言うと、包丁も鍋もコンロも、AIが全部揃えて渡してくれるようになったってこと。あとは「何を作るか」を決めるだけでいい時代が、もうそこまで来てる。
ただ、高崎さんたちの話を聞いていて印象に残ったのは——便利になればなるほど、最後は「自分が何をやりたいか」を言葉にできるかどうかにかかってくる、ってところ。ボタンがどんどん減っていくAIツールって、結局「やりたいことを知ってる人」しか使いこなせない。これ、ぶっちゃけAIエージェント全般に言えることだと思う。
分身AIも同じで、AIに仕事を任せれば任せるほど、私自身が「何を大事にしたいか」を握っておく必要がある。任せることと、丸投げすることは違うんだよね。この感覚、分身AI.comで分身AIを育ててる時にも、すごく近いものを感じてるよ。
よくある質問
Q. Claude Codeを使うにはどんな料金プランが必要ですか？
LIVEでは、Claude Codeをしっかり使うには「マックスプラン」という契約が必要という話が出ていました。プロプランでもある程度使えるものの、すぐに制限がかかってしまうと高崎さんが語っています。
Q. TMAXとはどんなツールですか？
LIVEで紹介されたTMAXは、ターミナル画面を分割して、それぞれで別々のClaude Codeを同時に走らせられる「謎ツール」（高崎さん談）。1つの作業を待っている間に、別のターミナルで新しい作業を進められるのが特徴として語られていました。
Q. Cursorでホームページを編集する時の注意点は？
LIVEのデモでは、ローカルに保存したファイルとサーバーに上げたファイルを混同してしまい、うまく接続できないハプニングがありました。今どちらを触っているのかを意識するのが大事、というのが実演から見えてきたポイントです。
🎒 IF塾 / ゲタバコ倶楽部
IF塾 塾頭・ハグレ心理士の高崎さんと塾長たくみくん、NPO法人if(AI)理事が運営する学び場。「嫌いな物が極力ない世界」を目指す。
🌐 ゲタバコ倶楽部 🎓 IF塾 📱 高崎さんFacebook🎯 AIと愛で、未来をひらく。「あいあいらぼ。」
起業家・経営者のためのAI実践型コミュニティ。AI実践ワークショップ・AIクリエイティブ会・AI目標達成会が月額5,500円で遊び放題！AIMUNIQ（株）主催。
📱 ただっちのFacebook 🌐 あいあいらぼ。関連記事
🎁 無料プレゼント
Aiport（ClaudeCode AIエージェント実践会）
ClaudeCodeでAI秘書＋分身AI＋AIカンパニーが無料で作れるキット＆解説動画をプレゼント！
▶ 無料で入会してキットを受け取るLINE OPEN CHAT
Claude Code・AIエージェント実践会
4,500人突破！ インストールから自動化まで、仲間と一緒に実践しよう
LINEオープンチャットに参加する（無料）パスコード: 1111
🤖 AI生成コンテンツについて
この記事はAIツール（Claude Code）を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん（田中啓之）本人が行っています。「分身AIひろくん」（bunshin-ai.com）とは別のコンテンツです。
