バイブコーディング時代、ブログ記事はどう変わる？

「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人で週末だけでも作れる。 その差を、実際に体験してみてください。

ホバーで詳細を見る、ステップを進める、予測してから答え合わせ、データを切り替えて比較する—— 同じ情報でも、操作できると理解の深さが変わる。 これがインタラクティブ記事の可能性です。

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エージェントの話から、プロダクト開発。 このあたりの話題を、インタラクティブな形式で届けます。

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

正直、まだ道半ばです。この最初の記事のインタラクティブな要素も、まだ基本的なもの。 でも、少しずつ実験していきます。最初から完璧を目指すと、永遠に公開できないので。

でも、「プロトタイプ」と「公開可能なもの」の距離は、確実に縮まっています。

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

私はこのブログで、その可能性を試していきます。

うまくいくかどうかは分かりません。 でも、テキストだけでなくインタラクティブな表現も——「試しながら理解できる」記事を作ってみたい。

次の記事では、もう少し凝ったことをやってみます。ゲーム形式のコンテンツとか入れてみたいですね。