コードを一行も書かず、話し言葉でお願いするだけ。編集部でも実際に「スライムたたき」を作って公開まで試したところ、数分で終わりました（その全記録は記事後半に載せています）。ただ、動くゲームが数十秒で出てきたその瞬間、ふと引っかかります。私たちが作っているのは「デザイン」なのでしょうか、それとも「ソフトウェア」なのでしょうか。
Canvaは、自然言語のプロンプトでウェブサイトやアプリ、インタラクティブな体験を構築できる「Canva Code 2.0」を、無料、Pro、Business、Enterprise、教育の各ユーザー向けに提供開始した。
Canvaによると、コード生成時間は75%削減され、プロンプトから公開までの時間は中央値で30%短縮された。50種類以上の新テンプレートと、1億2000万点を超えるアセットを備えたライブラリを利用でき、HTMLインポートにも対応する。
Canva Codeの初公開は約1年3か月前で、コミュニティはこれまでに600万を超えるサイトを制作した。Canvaは毎月2億6500万人が利用し、AI製品の利用は累計320億回を超える。導入事例にはAlt Marketing Schoolや、World Book Dayに50人の読書家が制作した教育用ゲームがある。
From: 
Vibe coding that matches your vision: Canva Code 2.0 is now available to all
【参考動画】
【編集部解説】
Canvaが2026年7月14日（米国時間）に全ユーザー向けの提供を開始した「Canva Code 2.0」。この発表の本質は、「バイブコーディング」という生まれたばかりの概念が、ついに一般の人々のもとへ本格的に降りてきた、その転換点にあります。
まず「バイブコーディング（vibe coding）」という言葉自体が、まだ生まれて1年半ほどしか経っていません。AI研究者のアンドレイ・カルパシー氏が2025年2月にX上で名づけたこの言葉は、「コードの存在を忘れ、勢い（vibe）に身を委ねる」という、半ば冗談めいた投稿から始まりました。それが約9か月で、コリンズ英語辞典の「2025年の言葉」に選ばれました。この選出は言葉の注目度の高さを示すものであり、社会への広がりを感じさせます。
つまりCanvaは、言葉が生まれてから間もない領域に、2億6500万人という桁違いの月間利用者を抱えたまま乗り込んできたことになります。ここに、この発表を「今」報じる意味があります。
ここで技術的な要点を、少し噛み砕いておきます。Canvaは、これまでのバイブコーディングツールの多くについて、「動くものは作れる」段階で止まりがちだと問題提起しています。プロンプトを打てばアプリやサイトの原型はできる。けれど、それを「自分らしい見た目」に仕上げようとすると、別のデザインツールを開いたり、開発者に頼んだり、あるいはAIとの終わりのないやり取りに沈み込んだりする必要がありました。Canva自身の言葉を借りれば、多くのツールの出力は「似たものだらけの海」に埋もれてしまうのです。
Canva Code 2.0が狙うのは、まさにこの「見た目の最後の一歩」です。生成した成果物を、いつものCanvaエディター上で、色やフォント、画像をドラッグ&ドロップで直接編集できる。ここがCanvaならではの差別化点と言えるでしょう。競合の多くがコード生成を中心に訴求するなか、Canvaは「生成後に、いかに自分のものへ仕上げるか」という別の土俵を選んだわけです。
数字にも、その本気度がにじみます。Canvaによると、コード生成にかかる時間は75%削減、プロンプトから公開までの中央値は30%短縮されました（いずれもCanvaの公表値で、測定条件や比較対象は開示されていません）。初代Canva Code（2025年4月、Canva Create 2025で発表）のリリースから約1年3か月。この間にコミュニティが作ったサイトは、Canva公称で600万を超えます。
Canva Code 2.0は、数か月前（2026年4月）に発表された「Canva AI 2.0」のワークフローの一つとして提供されます。Canvaは同じ時期に、Proteus（スタイル変換）、Lucid Origin（画像生成）、I2V（画像から動画）といった独自の視覚生成モデルを発表していますが、これらがCanva Code 2.0のコード生成そのものを担っているかは、公式には明らかにされていません。むしろ注目すべきは、Canvaが独自モデルとデザイン資産を拡充する一方で、OpenAIやAnthropicといった外部の技術パートナーのモデルも組み合わせたハイブリッドなAI基盤を築いている点です。実際、初代Canva CodeはAnthropicのClaude 3.7 Sonnetを活用していました。自前の資産と外部の最先端モデルを束ね、膨大なユーザー基盤の上で動かす——ここにCanvaの戦略の輪郭が見えてきます。
一方で、冷静に見ておきたい側面もあります。「誰でもコードが書ける」体験は、裏を返せば「コードを読まずに公開できる」ことでもあります。カルパシー氏本人が当初、バイブコーディングについて「使い捨ての週末プロジェクトには悪くない」という趣旨を述べていたことは、示唆的です。個人の教室ページや持ち寄りパーティーの記録には最適でも、機密情報を扱う業務や、セキュリティが問われる領域にそのまま持ち込むには、まだ慎重さが要ります。無料ユーザーにまで開放されたことで、この「手軽さと責任のギャップ」は、今後より多くの人が直面するテーマになるはずです。
それでも、大きな流れとしてこの動きが指し示す方向は明確であると考えます。2013年のサービス開始以来、Canvaは「デザインを一部の専門家のものから、みんなのものへ」と押し広げてきました。今まさに起きているのは、それと同じことが「ソフトウェアづくり」の領域で始まっている、ということです。プレゼン資料やSNS投稿を作る感覚で、動くウェブアプリやインタラクティブな体験を作る——その敷居が、また一段下がりました。
「未来を、知りたい・触りたい・関わりたい」。もしあなたがそう感じているなら、Canva Code 2.0は、まさに「触ってみる」のに手頃な入り口の一つと言えるのかもしれません。
【関連記事】
Canva AI 2.0正式発表—デザインツールから「仕事が完結するAIプラットフォーム」へ
今回のCanva Code 2.0が組み込まれた「Canva AI 2.0」全体を俯瞰した記事。位置づけを把握できる。
Canva Visual Suite 2.0発表：AIスプレッドシートとコーディング機能を追加
初代Canva Codeが発表されたVisual Suite 2.0の記事。今回の「2.0」との差分を比較できる。
Claude Design始動─Anthropicがデザインツール市場に参入、Claude Opus 4.7が下支え
Canvaと協業しつつ参入したAnthropicの動き。Canva Codeを支える技術パートナーの立ち位置を読める。
Databricksが警告するヴァイブコーディングのセキュリティリスクとその対策
本記事の「手軽さと責任のギャップ」という論点を補強する、セキュリティ面の解説記事。
【実際に使ってみた】プロンプト1つで「もぐらたたき」は動くのか
「コードを書かずにインタラクティブな体験が作れる」と言われても、実際のところどこまで動くものができるのか。ここが読者のみなさんにとって一番気になるところだと思います。そこで、編集部で実際にCanva Code 2.0を触ってみました。
お題に選んだのは、あえて少し難しめの「もぐらたたきゲーム」です。単なる静的なページではなく、時間のカウントダウン、スコアの加算、クリック判定、そして「だんだん速くなる」という状態変化まで含む、ゲームとして成立させるにはそれなりのロジックが必要なお題です。
入力したプロンプト
Canva AIの画面で「コード」を選び、入力欄に指示を打ち込みました。3×3のマス目、30秒のカウントダウン、スコア加算、出現間隔がだんだん短くなる設計、「もう一度」ボタン、クリック時のアニメーション、ポップな配色――といった要望を、箇条書きではなく普通の話し言葉で並べただけです。
数十秒で、遊べるゲームが出てきた
送信ボタンを押してから、実際に遊べる状態のゲームが表示されるまで、体感で数十秒ほど。待っている時間は思ったより短く、コーヒーに口をつける間もないくらいでした。
出てきたのがこちらです。青空と芝生を背景にした「もぐらたたき！」の画面が、いきなり遊べる状態で立ち上がりました。スコアと残り時間のパネル、「スピードアップ だんだん速くなるよ！」というゲージ、そして「準備はいい？」のスタート画面まで、こちらが指示した要素がひと通り揃っています。
肝心の動作ですが、これが問題なく遊べました。もぐら（というには少し首をかしげるイラストではありましたが）が穴から顔を出し、クリックするとスコアが加算されます。30秒のカウントダウン、時間切れでの最終スコア表示、「もう一度」ボタン、そして進むほど出現が速くなる難易度上昇まで、頼んだ要素はすべて実装されていました。指示の再現度という点では、期待以上です。
惜しいのは「見た目」と「音」
一方で、正直に引っかかった点もあります。まず、デザインが洗練されているとは言いにくい。動くことは動くのですが、配色や質感には、どこか手作り感が残ります。「ポップで明るい配色」という指示は反映されているものの、そのまま人前に出すには少し勇気がいる仕上がりでした。
もう一つは、効果音がないこと。もぐらを叩いた瞬間の音があるだけで、体験の満足度はまるで変わるはずですが、そこは生成されませんでした。動き自体はなめらかで、カクつきは感じられなかっただけに、音の不在が惜しく思えました。
「自分らしく仕上げる」の入り口でつまずく
ここで、この記事の核心でもある「生成した成果物をCanvaエディターで自分らしく編集する」を試そうとしました。ダサさの残るデザインを、色や素材を差し替えて整えられるなら、それこそがCanva Code 2.0の真価のはずです。
ところが、生成物からどうやって編集画面へ入るのか、すぐには分かりませんでした。画面上部には「デザインに使用する」「公開」といったボタンが並びますが、どれを押せば通常のCanvaエディターのように色やイラストをいじれるのか、初見では迷います。ここは、ふだんCanvaを使い慣れていない人ほどつまずきやすいポイントかもしれません。
【改造編】会話を重ねて「自分のゲーム」に近づける
編集画面での手直しには迷いましたが、Canva Code 2.0にはもう一つの道があります。チャットを続ける形で改造していく方法です。ゼロから作り直すのではなく、変えたい点だけを会話で伝えるのがポイントです。
「8ビットのドット絵に、叩く相手はスライムで」
入力欄に、こう打ち込みました。全体を8ビットのドット絵調（レトロなRPG風）にすること、叩く対象をもぐらからスライムに変えること、叩いたときに「ぷにゅっ」という効果音を鳴らすこと。そして最後に「スコアや残り時間などのルールは今のままで」と添えました。動作部分まで作り替えられて壊れてしまうのを避けるための一言です。
結果がこちらです。背景はレンガ造りの家が並ぶドット絵のRPGフィールドに一新され、タイトルは「スライムたたき！」に。緑色のスライムもきちんとピクセルアートで描かれ、スコアや残り時間のパネルまでレトロゲームのUI調に変わりました。頼んでいないのに「ぼうけんの準備はいい？」「ぼうけん開始」といったRPGらしい言い回しまで添えられていて、世界観をAIが汲み取ってくれたのが伝わってきます。
そして、バージョン1では実現しなかった効果音も、今回は「ぷにゅっ」という音がしっかり鳴りました。画面右上には「おと：ON」の切り替えまで用意されています。見た目と音、前回の惜しかった二点が、たった一度の指示でまとめて解決したことになります。
「もう少し小さく」も、会話で通じる
仕上げに、もう一度だけ会話を重ねました。画面がやや大きく感じたので、「画面を一回り小さくして下さい」とだけ入力すると、全体をコンパクトにまとめたバージョン3ができあがりました。数値やCSSを一切触ることなく、話し言葉のリクエストだけでレイアウトの調整まで通ってしまう。ここが、コードを書ける人にも書けない人にも効いてくる部分だと感じました。
バージョン1から3まで、かかった手間はチャットに数回話しかけただけです。「動くもの」を「自分の思い描いたもの」へ寄せていく作業が、プロンプトの往復だけで成立する。冒頭で触れたデザインの物足りなさは、この改造の過程でほぼ解消されました。生成した直後の出来だけで判断するのは早計で、むしろ会話を重ねてからが本番だと言えます。
【公開編】十数分で、世界に公開できた
最後に、できあがったゲームを公開してみました。「公開」ボタンから進むと、無料ドメインのアドレスが割り当てられ、数クリックで世界中からアクセスできる状態になります。公開前には、タイトルとファビコンの設定、「検索結果に表示（例：Google）」のオン・オフ、パスワード保護まで、細かく調整できるようになっていました。
そして、実際に公開したのがこちらです。
https://mogurara.my.canva.site/（実際に公開したスライムたたき）
プロンプトを打ち始めてから、遊べるゲームをインターネット上に公開するまで、コードは一行も書いていません。これが十数分ほどで完結してしまう手軽さは、やはりこれまでにない体験です。
ただ、ここでも一つ気づきがありました。公開したページのタイトルは「もぐらたたき」、URLも「mogurara」のまま。中身はバージョン3で「スライムたたき」に作り替えたはずが、公開時の名前だけ初代のまま引き継がれていたのです。ゲーム本体を会話で何度も更新しても、公開設定のタイトルやアドレスは自動では追従しません。世に出す前に、この部分は手動で見直しておくべきでした。手軽さの裏にある、実際に公開してみないと気づけない小さな落とし穴です。
【まとめ】触ってみて分かったこと
数十秒で、状態を持つゲームが一発で動く。この手軽さは、確かにこれまでのデザインツールの枠を超えています。生成した直後こそデザインに物足りなさがあり、編集画面への導線も初心者には少し不親切でした。けれど、その距離は「8ビット風にして」「スライムにして」「小さくして」と会話を重ねるだけで、思ったより早く縮まりました。
「動くもの」を「自分の思い描いたもの」へ寄せていく過程が、コードを一行も書かずに、話し言葉だけで完結する。公開時のタイトル引き継ぎのような小さな落とし穴はあるものの、アイデアを形にして世に出すまでの距離は、確かに一段縮まっています。未来を「触ってみたい」と思っている方には、手頃な入り口の一つと言えそうです。
【用語解説】
HTMLインポート
ほかのツールやAIアシスタントで作成したHTMLをCanvaに取り込み、編集可能なデザインとして続きを作れる機能。ゼロから作り直す手間を省く狙いがある。
Proteus／Lucid Origin／I2V
Canvaが自社開発した視覚生成AIモデル群の名称で、2026年4月発表の「Canva AI 2.0」で紹介された。Proteusはスタイル変換、Lucid Originは画像生成、I2Vは「Image to Video（画像から動画）」の生成を担う。いずれも視覚生成用であり、Canva Code 2.0のコード生成モデルとして使われているかは公式に開示されていない。
Canva Create
Canvaが年次で開催する製品発表イベント。初代Canva Codeは2025年4月10日の「Canva Create 2025」で発表された。
シングルサインオン（SSO）
一度の認証で複数のサービスやシステムへログインできる仕組み。組織内で成果物を安全に共有する際に用いられる。
【参考リンク】
Canva Code / AIコードジェネレーター（公式製品ページ）（外部）
プロンプトからの生成、要素の編集、Canva Sheetsとのデータ連携などを紹介するCanva公式ページ。
Canva（公式サイト）（外部）
ドラッグ&ドロップで誰もがデザインを作れる、世界で広く使われるオンラインデザインプラットフォーム。
Alt Marketing School（公式サイト）（外部）
Canvaが事例として紹介した小規模事業者。マーケティング教育を手がける。
Canva Code の使い方（Canvaヘルプセンター）（外部）
インタラクティブなデザインをCanva Codeで作成・公開する手順を解説する公式ガイド。
【参考記事】
Canva launches Code 2.0, offering AI website building to every user（VentureBeat）（外部）
市場規模47億ドルや競合Lovable・Replit・Bolt.newの動向を引き、全ユーザー開放の意味を報じる。
Canva Code 2.0 adds visual editing, HTML imports, and real-time collaboration（9to5Mac）（外部）
2026年7月14日の全ユーザー向け提供開始と、視覚編集、HTMLインポート、共同編集などの主要機能を紹介した記事。
There’s a new kind of coding I call “vibe coding”（Andrej Karpathy／X）（外部）
「バイブコーディング」という語が生まれた2025年2月2日のカルパシー本人による原典の投稿。
Canva Code Unleashed: Build Interactive Apps Like Never Before（DesignMonks）（外部）
初代Canva Codeが2025年4月10日の「Canva Create 2025」で発表された経緯を伝える記事。
Design, code, and create with our biggest AI launches yet（Canva公式）（外部）
初代Canva CodeがAnthropicのClaude 3.7 Sonnetで構築されたことを明記した、Canvaによる一次発表。
Claude 3.7 Sonnet and Claude Code（Anthropic）（外部）
Claudeのコーディング性能を紹介したAnthropicの公式発表。Canvaによる品質評価にも触れている。
Canva AI Product Terms（Canva公式規約）（外部）
出力の所有と責任の分担、第三者技術の利用を定めた規約。2026年6月26日発効。
