ノーコード革命？CanvaのAIコード生成でWebサイトを作ってみた

5月 20, 2025

Canvaの『コードを生成』機能を使ってWebサイトが作れると知り、勢いで作ってみたサンプル3つ+1を紹介します。簡単にゲームやシミュレーターが作れると好評なコード生成機能でLPが爆速で作れるのか…？

サンプル1｜ポートフォリオサイト

アップデート直後にお試し感覚で作った簡易的なポートフォリオサイトです。「取りあえず作ってくれ！」の勢いでしたが、初回からかなりそれっぽいものを出してくれました。その後テキストや画像の差し替え、リンク先の指定などを行い現在の形に。モーダルウィンドウは指定無しでも実装してくれました！
さらに手を入れて整えたかったのですが疲れたので放置中（笑）。
メールフォームは外部のメールサービス（Formspree）との連携で実際に送信することができます。

サンプル2｜ヘアサロン用サイト

Canvaの公式テンプレートとして作ったモックアップ用デザインをベースに作成しました。
自動で切り替わるメインビジュアルやモーダルウィンドウ、モバイル表示の際に右から出てくるスライドメニューも実装してもらいました。

サンプル3｜画像スライダー

デスクトップ表示の際に、画像が右から左に移動するアニメーションを実装したスライダーを作ってもらいました。
写真をクリックすると拡大表示されます。モバイルの方は何度か書き直してもらいましたが挙動がおかしかったのでアニメーションは断念、左右のナビボタンで写真を切り替えます。

サンプル4｜うさぎメッセージ

最後はオマケですが、おみくじのようにランダムにメッセージが表示されるページを作ってもらいました。
うさぎの画像はCanvaでアニメーションを付けてGIFアニメとして書き出したものを使用しています。

どんな内容を、どんなスタイルで作るのかAIに指示します。指示内容（プロンプト）もAIに相談しながら作るのがオススメです。
サンプル1の簡易ポートフォリオサイトを作ってもらう際のプロンプト初回は大体こんな感じでした。

基本情報
Webサイトの種類： [ポートフォリオ]
デザイン要件
デザインスタイル： [例：モダン / プロフェッショナル]
カラースキーム： [例：#FFFFFF, #222222, #29b8cf, #8256d8 など]
フォント： [例：Noto Sans, Montserrat, Roboto など]
コンテンツ構成
必要なページ： [例：ホーム / 作品一覧 / 作品詳細 / 問い合わせ]
ホームページの主要セクション: [例：ヒーローセクション / 特徴 / 作品紹介 / CTA]
主要なCTA：[例：お問い合わせ]
技術仕様：[例：レスポンシブ対応]

ここからAIと相談し、修正や変更を何回も入れた結果が現在公開中のページになります。
私がプロンプトの書き方に不慣れなため手探り状態でしたが、分からないことは常にAIに聞くスタイルで制作を進められるので、知識が無くても何とかなります。

現在Canvaのコード生成には画像を直接アップロードする機能がありません。そのため、今回のサンプルは外部のレンタルサーバーにアップロードした画像のURLを参照させています。ちょっと面倒でイレギュラーな使い方なのであまりお勧めはできませんが、どうしても自分の画像の使いたい場合はこんなやり方がありますということで…
※特に指定しなければ通常はCanvaが適当な絵文字やイメージを挿入してくれます。

デザインを左右するフォントは自分が選んだものを使いたいですよね。無料で使えるフォントライブラリを利用すればフォントの選択肢が広がります。私が作成したサンプルではそれぞれGoogleフォントの中から選んで指定しています。

Canvaのコード生成を使えばLP（ランディングページ）が簡単に作り放題なのでは…？！と浮き足立ちましたが、　率直な感想は「爆速で作ってくれるけど修正・更新は難しい」です。
例えばテキストを一文字変更したいというケースでも、その度にコードを頭から書き出すので時間がかかります。
さらに書き直したものが修正前の状態から（意図しない部分まで）微妙に変わってしまうというケースが多々ありました。毎回完全に同じものを再現するのが難しい※のです。これはかなり厳しい（悲）…のですが、今回のような使い方は本来Canva側が意図した使い方とはかなりズレているという自覚もあるので、あまりここで深掘りするものでも無いかなぁという感じです。
とは言え今後の進化が期待されるCanvaのコード生成の「使い方」を確認するためにまた色々試してみようと思います！

※過去のソースコードを貼ってあげれば良いのですが、文字数の関係で一度に貼れないという欠点が…（涙）

AIに何かを作ってもらう時、まず「プロンプトを上手く書かなければ」と身構えちゃう人がいるかもしれないのですが（私も割とそう…）、考えがまとまらない状態でも、まず質問からスタートした方が目的に合ったものが早く完成するかもしれません。

Canva AIに「こんなのが作りたいけど出来る？」と質問すると、例えば『〜〜は、技術的あるいは規約やポリシーの問題で作れない。でも代わりにこれなら作れるけどいかがですか？」と代替案を提示してくれます。
質問する時に目的を言えば、より適切な選択肢を提示してくれるし、自分でも「⚪︎⚪︎⚪︎を作りたかったけど△△△の方がベターかも」という具合に考えが整理できます。

サンプル01のポートフォリオサイトでは、「問い合わせフォームを実装できる？」と質問したら、最も簡単な方法として外部フォームサービスとの連携を教えてくれました。

一発で完成品を出すのは難しいので、まず質問から始めてAIと相談しながら制作するのがオススメです！

これを書いている2025年5月末現在、Canvaが書いてくれるプログラム言語は以下の3つに限定されています。

HTML – ウェブページの構造を作成するためのマークアップ言語
CSS – ウェブページのスタイルやデザインを定義する言語
JavaScript – ウェブページに動的な機能やインタラクティブな要素を追加するための言語

バックエンド処理を行う言語には非対応です。なので、例えば問い合わせフォームなどの『見た目』は作れるけれど、実際に機能させることはできません。が、サンプル1のポートフォリオサイトのように、外部のサービスと繋げることができれば可能になる場合もあります。とは言え、他のAIサービスのような「プログラム自体を書いてもらう」というオーダーには非対応です。できないのではなく、その領域はCanvaの本分ではないから、ということのようです。（公式サポートに聞いてみました）
以下回答の引用です。