英語の図解Artifactを日本語化して単独Vueページで公開するまで

claude.ai の共有 Artifact に、組織の AI 導入を5段階で整理した英語の図解「Steps of AI Adoption」（Boris Cherny 氏、2026年7月16日公開）があった。これを日本語で読みたい。ついでに言うと、元の表は横幅が足りなくて窮屈だ。日本語訳とレイアウト調整をまとめて片付けたい、というのが出発点だった。

読み取り: 外からは塞がれていた

まず中身が取れるかどうかから怪しかった。WebFetch はネットワークエラーを返し、リトライすると「しばらくお待ちください...」の Cloudflare チャレンジ画面で止まる。agent-browser に切り替えさせても、今度は claude-in-chrome 拡張が接続されていない。外から取りに行く経路は、ことごとく塞がれていた。

ところが、答えは手元にあった。自分の Chrome には、この Artifact のタブがすでに開いている。Chrome DevTools MCP でそのタブに繋がせると、本体は claudeusercontent.com の iframe の中にいることが分かった。親ページをいくら眺めても本文が出てこないわけだ。iframe の URL を直接取らせて、ようやく全文が手に入った。

テキストが取れたあとも鵜呑みにはせず、Chrome で開かせてスクリーンショットで描画まで確認させてから訳に入った。

日本語化と4カラム調整

日本語訳は memo/2026-07-17/steps-of-ai-adoption-ja.html に書き出させ、元の Artifact の隣のタブに開いてもらった。原文と訳文をタブの行き来で見比べられる。

中身は、AI 導入の段階を同時に動くエージェント数で刻んだ表だった。

• ステップ0: ゲートあり（Gated）── エージェント 0体
• ステップ1: アシスト（Assisted）── 〜1体
• ステップ2: 並列（Parallel）── 〜10体
• ステップ3: 監督付き自律（Supervised autonomy）── 〜100体
• ステップ4: AIネイティブ（AI-native）── 〜1,000体超

各ステップに「どんな状態か」「ボトルネック」「役立つプロダクト」「ガードレール」の4つの観点が付き、ステップの間には「次へ進むには何が要るか」の遷移条件が挟まる。この遷移条件が具体的でいい。

• ステップ1→2: エージェントを同時に複数動かす。テスト・ビルド・lint を束ねた自己検証ループ。許可プロンプトで作業が止まらないオートモード。コードレビューの自動化
• ステップ2→3: Claude が自力でコード・Wiki・議論を読める経路。仕事をループとルーチンに分解する。Claude が Claude を起動できる仕組み

訳していくと、図解というよりそのまま使える導入チェックリストに近い。

各ステップで「解放されるもの」を書いた一行も印象に残った。

午後まるごと潰れていた変更が、会議の合間に終わるようになる。（アシスト段階）

チームで数週間かかっていたバックログが、エンジニア1人の午後のオーケストレーション作業に収まる。（並列段階）

段階が上がると何が変わるのかを、機能の羅列ではなく時間の感覚で言い当てている。

ただ、最初の訳文版はまだ縦に長かった。4つの観点が縦に積まれていて、ステップ同士を見比べようとすると視線が上下に往復する。この4セクションを横一列の4カラムに並べ替えるよう指示して、スクリーンショットを撮らせては収まりを確認した。4列がきれいに画面に収まった時点で、手元用としてはいったん完成。

HTMLからVueページへ持ち替える

ここで欲が出た。手元の HTML のままでは自分しか見られない。公開したい。ただし条件がある。横4カラムでも縦1列でも見たいし、いま詰めた見た目をそのまま保ちたい。

Markdown のブログ記事にすると @nuxt/content のレンダリングに縛られて、表示切替のトグルが作りにくい。ブログではなく、apps/web/app/pages/ai-adoption-steps.vue の単独 Vue ページとしてカードコンポーネントで組み直させた。

• 5つのステップをデータ配列に持たせ、テンプレートはカードの繰り返しにする
• 「横に見る（4列）」「縦に見る（1列）」のトグルで grid-template-columns を切り替える。狭い画面では自動で2列→1列に落とす
• 「ステップ0から1へ進むには」といった遷移条件は、カードとカードの間に挟んで原文の流れを保つ
• 「ペア」「オーケストレーター」といった各ステップでの人間の役割ラベルもカードに残す
• useSeoMeta でタイトル・description・OGP を設定して、単独ページとして共有できる形にする
• 外部リンクはサイトのルール通り target="_blank" 付きのアンカーで統一する

dev サーバーで縦横の切替を動かして確認し、OpenTelemetry リンクの改行が崩れていた箇所は computed style まで見させて直りを確かめた。手元の HTML で一度レイアウトを詰めてあったので、Vue 側の作業はほぼ移植に徹することができた。

デプロイ

/deploy で本番に出した。ローカルでビルドして Cloudflare Pages に直接デプロイする流れで、デプロイスクリプトを apps/web 配下で探して一度空振りし、リポジトリルートにあると分かって実行し直す小さなつまずきはあった。それでも 5,693 ルートのプリレンダリングが通ってアップロードまで完了。本番の表示・コンソール・payload の確認まで済ませてもらった。4カラムのカード表示と「縦に見る（1列）」のトグルが、本番でもそのまま動いている。

公開ページはこちら: AI導入のステップ

学び

• 外から読めないページでも、自分の Chrome にタブが開いていればそこから抽出できる。WebFetch → agent-browser → Chrome DevTools MCP と落としていくフォールバックが今回も効いた
• claude.ai の Artifact の本体は claudeusercontent.com の iframe 内にある。親ページを取っても本文は出てこない
• 「縦でも横でも見たい」のような、表示そのものが要件のコンテンツは、Markdown 記事に押し込むより単独 Vue ページのほうが素直に作れる
• 結果的に、memo の HTML でレイアウトを詰めてから Vue に移す2段構えになった。試行錯誤の段階ではビルドも dev サーバーも要らないので、往復が速い