バイブコーディングでブログ記事はどう変わるか

2025年2月、OpenAIの共同創業者であるAndrej Karpathyが「バイブコーディング（vibe coding）」という言葉を生み出しました。

“You just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.”

ただ見て、言って、実行して、コピペする。だいたい動く。

要は、AIにコードを書かせて、自分は方向性だけ示す、というスタイルです。 マーケターがランディングページを作り、デザイナーがプロトタイプを動かし、ライターがインタラクティブな記事を書く。 「作り手」と「使い手」の境界が溶け始めています。

さらに興味深いのは、「コードを書く人」の定義が変わりつつあることです。 マーケターが、デザイナーが、起業家が——職種を問わず、アイデアを持つ人が自分でアプリを作り始めている。

もちろん批判もあります。設計やレビューを飛ばせば、実装は簡単に破綻します。 それでも、個人が動く記事を作るまでの距離は短くなりました。

こうしたアイデアは、バイブコーディング以前から存在しています。

Timelineの先頭にある2011年。この年、Bret Victorが「Explorable Explanations」というエッセイを発表しました。 Victorの問題意識は、テキストを「消費する情報」ではなく「思考するための環境」として使うことでした。

“A reactive document allows the reader to play with the author's assumptions and analyses, and see the consequences.”

リアクティブなドキュメントは、読者が著者の仮定や分析を操作し、その結果を見ることを可能にする。

Nicky Case: 遊びながら学ぶ

Bret Victorの思想を具体的な形にしているのが、Nicky Caseです。彼女の作品は「複雑なシステムを理解させる」という一貫した目標を持っています。

彼女のブログには 「How I Make Explorable Explanations」 という記事もあります。「説明したいことをゲームにする」プロセスが詳しく書かれていて、参考になる。

そして、こうした「体験型学習」には科学的な裏付けもあります。

なぜ作ったか

Pudding.coolに刺激を受けて、「こういう記事を作りたい」と思っていた。 ただ、個人で作るには実装量が重いとも感じていた。 Claude Codeを使うようになって、その前提が少し変わった。

AIとの共同制作

このサイト自体、ほぼ全てClaude Codeで作っています。 デザイン、コンポーネント設計、アニメーション実装—— 自分が「こういう感じにしたい」と言語化し、AIがコードに落とし込む。

この記事も同じ。文章を書いているのは私ですが、インタラクティブな要素やレイアウトはClaude Codeと一緒に作っています。 つまり、この記事自体がバイブコーディングの実践例です。

何をやるか

AIエンジニアリング、LLMやAIエージェントの話から、プロダクト開発。 このあたりの話題を、必要に応じてインタラクティブな形式でも扱います。

コスト計算のシミュレーター、意思決定のフローチャート、データの可視化。 読者が自分の状況に当てはめて考えられるようなコンテンツを作りたい。