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

「vibe coding」——AIにコードを書かせて、自分は方向性だけ示すスタイル。 2025年、Collins Dictionaryの年間ワードに選ばれた言葉です。

コードを書ける人の範囲が広がると、ブログ記事の作り方も変わります。 テキストだけでなく、インタラクティブな表現も選択肢に。 この記事では、実際に小さなインタラクションを入れて試します。

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

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

Source: X (@karpathy)

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

実際に、バイブコーディングを前提としたスタートアップが急成長しています。

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

つまり、「コードを書く」行為が、エンジニアリングだけでなく、 マーケティングやグロースの領域でも使える手段になり始めています。

もちろん批判もあります。Andrew Ngは「バイブコーディングという言葉は誤解を招く」と指摘していますし、 設計やレビューを飛ばせば、実装は簡単に破綻します。 それでも、個人が動く記事を作るまでの距離は短くなりました。

エンジニアでなくてもコードが書けるようになった。 コードが書けるということは、「動くもの」を作れるということです。

従来のブログ記事は、テキスト、画像、せいぜい埋め込み動画まで。 情報を「伝える」ことはできても、読者が「試す」ことはできませんでした。

でも、コードがあれば話が変わります。 数字を入れて計算させる。パラメータを変えて結果を見る。 データをグラフで見せて、必要な時だけ補足を開く。 読者が操作しながら理解を深める——それがインタラクティブ記事です。

有名な例

2012年、New York Timesが「Snow Fall」という記事を公開しました。 雪崩事故を追ったこの記事は、スクロールするたびに動画やアニメーション、 シミュレーションが本文の理解を助ける作りでした。

公開から6日間で350万PV。Pulitzer賞を受賞。 「to snowfall（スノーフォールする）」という動詞が業界用語になるほど、 インパクトのある作品でした。

同じくNew York Timesの「You Draw It」シリーズでは、 読者がまず自分で予測を描いてから、実際のデータと比較します。 「予測 → 答え合わせ」というシンプルな仕組みが、記憶の定着を促す。 研究でも、こうした能動的な関与が学習効果を高めることが示されています。

でも、作るのは大変だった

こうした記事を作るには、従来は専門チームが必要でした。 エンジニア、デザイナー、ライター、データアナリスト—— 8人で数週間かけて、ようやく一つの記事が完成する世界。

Bloombergには30人のデータジャーナリズムチームがいます。 The Puddingも、フルタイムのスタッフが各自リサーチからコーディングまで担当する体制。 個人が片手間に作れるものではありませんでした。

でも今は、1人で週末だけでも試せる。 その差は、制作体制の変化として整理できます。

補足を開く、順番に読む、予測してから答え合わせをする、データを切り替えて比較する。 同じ情報でも、読者が考える余地を持つと理解の深さが変わる。 インタラクティブ記事の価値は、ここにあります。

ここで話したいのは、Markdownを否定することではありません。 バイブコーディングで「動くもの」を作れる人が増えたなら、記事制作の途中にも、 文章だけではなくブラウザで読める下書きを挟めるようになった、という話です。

参考にしている「The unreasonable effectiveness of HTML」は、20個の自己完結HTMLを Exploration、Code Review、Design、Prototype、Diagram、Deck、Research、Report、Editorの 9カテゴリに分けています。共通しているのは、Markdownで縦に流れる情報を、 比較できる面、触れる面、見直せる面に変えていることです。

インタラクティブ記事の制作では、この中間形がかなり効きます。 最初からThe Puddingのような完成品を目指すのではなく、まず単一HTMLで構成、図、比較、操作、根拠を並べる。 そこで「これは読者の理解に効く」と分かったものだけを記事へ移し、 制作中だけ便利だったUIや、意味の弱い図は落とす。

つまり、単一HTMLは公開形式というより編集形式です。 読者に見せる最終UIではなく、作り手が「この記事は読む価値のある形になっているか」を確かめる作業台。 だからこそ、公開時には削る判断も同じくらい重要になります。

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.”

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

Source: worrydream.com/ExplorableExplanations

静的なテキストでは、読者の思考は「内的で見えないまま、曖昧で推測的」にとどまる。 でも、インタラクティブなドキュメントなら、読者は著者の仮定を変更し、その結果を自分の目で確認できる。 読むことが、能動的な「検証」になる。

Nicky Case: 遊びながら学ぶ

Bret Victorの思想を具体的な形にしているのが、Nicky Caseです。カナダ出身のインディーゲームデザイナー兼ウェブクリエイター。 彼女の作品は「複雑なシステムを理解させる」という一貫した目標を持っています。

代表作「The Evolution of Trust」は、ゲーム理論の古典を30分で体験できるインタラクティブ作品。 一方的に説明するのではなく、遊ぶ過程で構造が見える。 これが「遊びながら学ぶ」の強さです。

「The Evolution of Trust」が伝えているのは、短期的には「裏切り」が得に見えても、 長期的には「協力し続ける」方が双方にとって得になる。 その構造を自分で追えるから、抽象的なゲーム理論が具体的に見える。

Nicky Caseの作品は多岐にわたります。社会科学、心理学、政治学—— どれも難しいテーマを「体験」に変換している。

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

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

記事はここまでできるのか

最初に見たのは、たしかSpotifyの再生データを分析した記事だったと思います。 スクロールするたびにグラフが動き、自分のデータを入力すると結果が変わる。 読んでいるというより、動かしている。

The Puddingとは何者か

The Puddingは2017年に立ち上げられたデジタルメディア。 「文化で議論されるアイデアを、ビジュアルエッセイで説明する」というミッションを掲げています。

創業者は Matt Daniels、Russell Goldenberg、Ilia Blinderman の3人。 元々 Polygraph というデータデザインスタジオを運営していて、 YouTube や Google などの大企業向けにビジュアライゼーションを制作していました。 The Pudding はその編集部門としてスタートしたわけです。

なぜThe Puddingは特別なのか

Russell Goldenberg はこう語っています： 「私たちは The New Yorker のような1万語の記事は書かない。 でも同じように複雑なトピックを、文章ではなくビジュアルで探求する」と。

彼らの強みは「ジャーナリスト兼エンジニア」という珍しい人材構成にあります。 階層的なチームではなく、コレクティブ（集合体）として運営。 各メンバーがテーマを選び、リサーチからデータ分析、デザイン、ライティング、コーディングまで一人で全工程を担当します。

平均して1プロジェクトに約1ヶ月をかけるそうです。 プロセスの核心は「答えたい問い」を見つけること。 ニュースサイクルやクリックベイトは追わない。 ビジュアルが情報を伝え、かつ楽しませるテーマを選ぶ。

代表作品

彼らの作品を見れば、その哲学がよく分かります。

特に印象的なのは「The United States of Abortion Mazes」。 各州の中絶政策を「迷路」として体験させるという発想。 政策の複雑さを、文章で説明するのではなく、ユーザー自身に迷わせることで伝える。 これが「Explorable Explanations」の強さです。

The Puddingは「Making Internet Things」という3部作のガイドも公開しています。 データ処理、デザイン、ストーリーテリングについて、 彼らの手法を具体的に共有している。

憧れと現実

「自分もこういうのを作りたい」と思いました。 でも同時に、「自分には無理だ」とも思いました。

D3.js？Svelte？データ分析？デザイン？ こうした役割を一人で担える人材は、採用市場でもかなり限られています。 Nicky Caseはゲームデザイナーとしてのキャリアがある。 The Puddingはフルタイムの専門チームを抱えている。 個人が、本業の片手間に作れるものではない——少なくとも、今までは。

——でも、バイブコーディング時代の今なら、話が違います。

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

AIとの共同制作

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

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

何をやるか

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

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

最初から大きな作品を作るより、小さく出して、読む人の反応を見ながら直していく。 このブログでは、その作り方自体も試していきます。

でも、「プロトタイプ」と「公開できるもの」の距離は、かなり縮まっています。

アイデアがあれば、とりあえず形にできる。 形にすれば、フィードバックがもらえる。 フィードバックをもとに改善できる。 このサイクルが、以前より速く回せるようになった。

このブログでは、その距離の縮まり方を自分の題材で試していきます。

毎回インタラクティブにする必要はない。 ただ、テキストだけでは伝わりにくいところでは、読者が試しながら理解できる形を選びたい。

次の記事では、コスト計算や技術選択のように、触ることで見え方が変わるテーマを扱います。