「Canva Codeが無料で使えるようになったらしいけど、結局何が変わったの？」という方も多いと思います。
2026年7月14日、CanvaはAIコード生成機能「Canva Code 2.0」を、無料プランを含む全ユーザーに開放したと発表しました。
この記事では、公式発表と海外の一次報道をもとに、2.0で変わったこと・基本の使い方・無料プランでできる範囲の考え方を整理していきます。
先にわたしの立ち位置をお伝えしておくと、普段はFigmaとPhotoshopをメインに使っているUIデザイナーで、Canvaはサムネイル制作などで時々触る程度です。Canva Code自体はこれから検証する段階のため、実際に触った結果はこの記事に順次追記していきます。
既存の日本語解説記事の多くは2.0より前の仕様をもとにしているため、本記事は「2026年7月のアップデートで何が変わったか」を最新情報ベースでまとめる位置づけです。
Canva Code 2.0とは？7月14日のアップデートで変わったこと
まず「そもそもCanva Codeとは何か」と「今回の2.0で何が変わったのか」を分けて見ていきましょう。基本はわかっている方は、次の比較表からご覧ください。
Canva Codeの基本（初めての方向け）
Canva Codeは、チャット形式のプロンプト（AIへの指示文）から、WebサイトやWebアプリを自動生成できるCanvaのAI機能です。
いわゆる「vibe coding（バイブコーディング）」——自分でコードを書かず、AIと会話しながら動くものを組み立てていくスタイル——を、使い慣れたCanvaの中で完結できるのが特徴です。
Canva Codeは約1年前に登場し（公式発表の表現によります）、その後、刷新版の「2.0」が一部ユーザー向けにプレビュー提供されてきました。今回のアップデートは、この2.0を全ユーザーに開放するものです。
2.0で変わったこと一覧（無料開放・HTMLインポート・共同編集）
今回の発表の要点は、大きく次の4つです。
| 項目 | 2026年7月14日のアップデート後 |
|---|---|
| 利用対象 | 無料プランを含む全プランに開放（free / pro / business / enterprise / education） |
| HTMLインポート | 既存のHTMLを「編集可能なデザイン」としてCanvaに取り込める |
| リアルタイム共同編集 | チームで同時に作成・レビュー・修正ができる |
| テンプレート | 新規テンプレートが50点以上追加 |
あわせて公式発表では、コードの生成時間が75%短縮されたとも説明されています。これまで限定的なプレビュー段階から、全ユーザー向け提供へ移った、と捉えるのが分かりやすいかと思います。
Canva Code 2.0 対象プランと無料で使える範囲
公式発表では「free、pro、business、enterprise、educationの各ユーザーが利用できる」と明記されています。月間2.65億人と報じられるユーザー全体への開放ですから、かなり思い切ったアップデートです。
ただし、CanvaのAI機能には利用制限が設定される場合がありますが、Canva Code 2.0の無料プランについて具体的な生成回数・メッセージ数は公式情報から確認できませんでした。
📝 検証後に追記予定： 無料プランでのメッセージ数・生成回数の上限／有料プランとの差
Canva Code 2.0は日本からは使える？
公式発表には、提供地域についての記載は見当たりませんでした（2026年7月15日時点）。
この点、サービスリリースのアナウンス時からわたしも普通に使えているので、日本からでも普通に利用できるものと思われます。もし、利用エリアなどについての公式情報が確認できたら、また追記してお知らせしようと思います。
Canva Code 2.0の使い方（基本の流れ）
公式発表と英語圏のハンズオン記事をもとに、基本の流れを3ステップで整理します。わたし自身の操作検証はこれからのため、以下は公開情報の整理です。検証で気づいた点は各STEPに追記していきます。
STEP 1 Canva Codeを起動してプロンプトを入力する
CanvaでCanva Code（AIコード生成）を開き、作りたいものをチャットで指示します。
例：「デザインイベントの告知LPを作ってください。開催日は◯月◯日、申し込みボタン付きで」
ポイント： 最初から完璧な指示を目指すより、生成結果を見ながら追加の指示で直していくのがvibe codingの基本スタイルとされています。
出来上がったのは、こんな感じです。まあまあシンプルですが、ちょっと要素が少ない気もしますね。というわけで次は要素追加修正をしていきます。
Canva Code 2.0 で生成されたイベントページ例
STEP 2 Canva Codeの生成結果を編集する
Canva Code 2.0では、生成されたサイトやアプリをビジュアル編集できると案内されています。チャットで再指示する方法と、画面上で直接調整する方法を組み合わせて仕上げていく流れです。
自然言語で要素を追加してみましょう。
例：「以下のブロックを追加して
こんな人におすすめ / FOR YOU
・デザインの新しい刺激がほしい
・他のクリエイターと交流したい
・普段と違う制作体験をしてみたい
レイアウトを、カード風に見やすく」
要素を追加した画像がこちら
こんな人におすすめ ブロックを追加した例
今回、日本語プロンプトでの修正は確認できましたが、ビジュアルを直接編集する機能は確認できませんでした。
STEP 3 Canva Codeで作ったものを公開する
完成したCanva Codeの出力は、インタラクティブな体験として公開できます。
Canva公式によると、無料ドメインで公開できるほか、カスタムドメインをCanva内で購入して公開することもできます。組織内ではSSOを使った共有にも対応するとされています。
また、Canva Codeの出力は画面サイズに自動で適応し、公開前にモバイルでの表示をプレビューできます。
Canva Codeでリアルタイム共同編集はどうやる？
ここで少し分かりにくかったのが、「共同編集するには、一度サイトを公開する必要があるの？」という点です。
結論からいうと、共同編集のために一般公開する必要はありません。
Canvaの編集画面から「共有」を選び、共同編集したい相手を招待するか、編集権限を設定した共有リンクを送ります。相手が同じデザインを開けば、Canva Editor上で一緒に編集やレビュー、コメントができます。
基本的な流れは次のとおりです。
- Canva Codeで制作物を作る
- 編集画面の「共有」を開く
- 共同編集したい相手を招待する、または共有リンクを発行する
- 相手が同じデザインを開く
- Canva Editor上で一緒に編集・レビューする
つまり、「共同編集」と「公開」は別物です。
チームやクライアントと制作途中のものを一緒に触りたい場合は「共有」、完成したWebサイトなどを一般向けに見せたい場合は「公開」と考えると分かりやすいと思います。
これなら、たとえばマーケティング担当に共有して「ここの文言だけ直しておいてください」とお願いしたり、打ち合わせ中に同じ画面を見ながらその場で修正したり、といった使い方ができそうです。
Canva Code 2.0の新機能を現場でどう使う？（デザイナー視点の考察)
ここからは、FigmaとPhotoshopがメインのわたしが、発表内容を見て「現場で使えそうだ」と感じたポイントの考察です。まだ触っていない段階の見立てである点はご了承ください。
HTMLインポート：制作物を「編集できる状態」で渡せる
個人的にいちばん気になっているのがHTMLインポートです。公式発表では、既存の制作物を編集可能なデザインとしてCanvaに取り込める、と説明されています。
これが実務で効きそうなのは、納品後の運用の受け渡しです。デザイナーやコーダーが作ったLPを、コードが書けないクライアントや広報担当がCanva上で更新する、という分担ができる可能性があります。
テキスト1行の修正のたびに依頼と納品が往復する、あの定番のやり取りが減るなら、それだけで検討する価値があると思います。
ただし、既存の複雑なHTMLがどこまで崩れずに取り込めるのか、JavaScriptや外部ライブラリを含むページをどこまで再現できるのかなどは、公式発表だけでは判断できませんので、もう少し検証が必要そうです。
リアルタイム共同編集：非エンジニアを制作に巻き込める
Canva公式は、チームメンバーがCanva Codeの制作物をリアルタイムで作成・レビュー・修正し、エディタ上でコメントできると説明しています。
Figmaユーザーであれば、「同じ制作物をチームで見ながらその場で調整する」という感覚はイメージしやすいかもしれません。
マーケティング担当と一緒にキャンペーン用コンテンツを直したり、社内向けのインタラクティブなツールをチームで改善したり、といった使い方は考えられそうです。
Canva Codeでできること・できないこと（無料版の注意点）
期待値の調整のために、現時点で分かっている得意・不得意を整理します。
できること（活用例）
既存の解説記事や英語圏のハンズオンでは、次のような活用例が紹介されています。
- クイズ・診断コンテンツ：キャンペーンやSNS施策向け
- 計算ツール・タイマーなどの小さなWebアプリ
- LP（ランディングページ）：告知・キャンペーン用の1枚もの
- インタラクティブなチャートやダッシュボード：データの見せ方の工夫
できないこと・注意点
- まず、Canva Code 2.0が全プランで利用できることと、「無料で無制限に生成できる」ことは別です。
- CanvaのAI Product Termsでは、AI製品に利用量・レート・フェアユースなどのAI Usage Limitが設定される場合があるとしています。ただし、Canva Code無料プラン固有の具体的な上限値は公式発表から確認できませんでした。
- また、Canva CodeでWebサイトやアプリを作れるからといって、ログイン、決済、個人情報の取り扱い、大規模なデータ処理などを伴う本格的なWebサービスまで同じ感覚で運用できるとは限りません。
- どこまで実装できるかだけでなく、セキュリティ、データ管理、アクセシビリティ、運用体制なども含め、用途に応じた検証が必要です。
- さらに、2.0以前の記事では現在と仕様が異なる場合があります。使い方を調べる際は、記事の公開日・更新日と、Canva Codeのバージョンを確認することをおすすめします。
FigmaやほかのAIコード生成ツールとの使い分け
わたしのようにFigmaメインの人間から見ると、Canva Codeは「Figmaなどのデザインツールを完全に置き換えるもの」というより、Canvaの中でデザインからインタラクティブな体験までつなげられる道具、と捉えるのが自然だと感じます。
特にCanva Code 2.0では、外部HTMLを取り込めることや、生成結果をCanva Editorで直接編集できることが大きな特徴です。
デザインの細部まで自分でコントロールしたい制作ではFigmaなどの専用ツール、Canvaを普段使っているチームで素早くインタラクティブなものを作りたい場面ではCanva Code、といった使い分けは考えられそうです。
ここは実際に触ったあと、操作性や仕上がりまで含めて比較してみたいところです。
よくある質問（FAQ）
Q1. Canva Codeは無料プランでも使えますか？
A. はい。2026年7月14日の公式発表では、Canva Code 2.0はfree / pro / business / enterprise / educationユーザーに提供されると明記されています。
ただし、無料プランで何回生成できるのかといった具体的な利用枠は、今回確認した公式発表では示されていません。
CanvaのAI機能にはAI Usage Limitが設定される場合があるため、「無料＝無制限」と考えず、実際のアカウントに表示される条件を確認するのが確実です。
Q2. Canva Code は日本語のプロンプトでも使えますか？
A. 既存の日本語解説記事では、日本語プロンプトでの利用例が複数紹介されています。わたしが検証した感じでも、特に日本語のプロンプトでも問題なく認識して生成されています。
Q3. Canva Codeで作ったサイトは商用利用できますか？
A. CanvaのAI Product Termsでは、規約を守ることを前提に、AIによるOutputを合法的な目的で利用できるとされています。
ただし、「Canva Codeで生成した＝無条件ですべて自由に商用利用できる」という意味ではありません。
Canvaライブラリの写真・イラストなどを使用している場合は、その素材のライセンス条件が別途適用されます。また、入力した素材や生成物について第三者の著作権・商標権などを侵害していないか確認する責任も利用者側にあります。
業務利用する場合は、最新のAI Product Terms、Terms of Use、Content License Agreementなどを確認してから公開するのがおすすめです。
Q4. 2.0より前のCanva Codeで作ったものはどうなりますか？
A. 2026年7月14日の公式発表では、旧Canva Codeで作成した制作物の移行・互換性について詳しい説明は確認できませんでした。
既存作品を持っている方は、実際のアカウント上で編集・公開できるか確認するのが確実です。わたしの環境でも確認でき次第追記します。
まとめ
あらためて整理すると、今回のポイントは次のとおりです。
- 2026年7月14日、Canva Code 2.0がfree / pro / business / enterprise / educationユーザーへ提供された
- HTMLインポート、直接編集、リアルタイム共同作業、50点以上の新テンプレートなどが追加・強化された
- Canvaによればコード生成時間は75％短縮し、プロンプトから公開までの時間の中央値も30％短縮された
- 無料版でも利用できる一方、Canva Code固有の具体的な無料利用上限は公式発表から確認できない
- 日本での提供状況や日本語プロンプトの実際の使い勝手については、実機検証が必要
- デザイナー視点では「外部で作ったものをCanvaへ持ち込んで仕上げる」「非エンジニアを含むチームで共同編集する」といったワークフローが特に気になる
今回の2.0で印象的なのは、単に「AIがコードを書いてくれる」という部分より、その後の編集をCanvaの中で続けられる点です。
生成したものをCanva Editorから直接調整でき、外部HTMLも取り込める。さらにチームでレビューや修正までできる——という一連の流れが、従来のAIコード生成ツールとの違いになりそうです。
気になった方は、まず無料プランで小さなクイズやLPなどを試してみるのが分かりやすいと思います。
わたしも日本語環境での使い勝手や、HTMLインポートの再現性、レスポンシブ対応などを検証でき次第、この記事に追記していきます。
最後までご覧いただきありがとうございました！
