Canvaの新機能がすごい！【Canvaコード生成機能】花びらが積もるサプライズのメッセージカードを作ってみた

　Canvaがまたひとつ、すごい進化を遂げました。
2025年4月にロサンゼルスで行われた「Canva Create」(キャンバ　クリエイト)で発表された新機能はもりだくさん！
　今回新たに加わった注目機能―それがCanva Code（キャンバ・コード）です。これが本当にすごいんです。

「Canvaで“コード”？なんだか難しそう…」と思った方もご安心ください。
今回のCanva Codeは、誰でも簡単に“動きのあるデザイン”を作れる仕組みなんです。

　コーディングがわからなくても、プログラミングの知識がなくても、小学生でも動きのあるサイトやアプリが作れちゃう、すごい機能なんです。

　Canvaに「ここをこう変更して」「ここの色を変えて」「動きをもっとゆっくりにして」とチャットで指示するだけで自分の思い通りのデザインが作れます。
　これは、今後の副業などでも、高単価アップのためには必須の技術になってくると思います。

　今回はそのCanva Codeの機能を実際に使って、画面に花びらがふわっと降って積もるサプライズ演出付きのメッセージカードを作ってみました。

　ものすごく簡単にできて、完成度もよく、しかも作っていてとても楽しかったので、この記事ではCanvaコードを使ったカードの制作方法を徹底解説します。
　あわせてCanva Codeの活用方法を、初心者向けにわかりやすくご紹介します。

　Canvaコードって難しそうに見えて、実はとっても楽しく、しかもデザインの自由度が高いのでとてもおすすめです。なんといっても、Canvaが長いコードを、スラスラと自分の目の前で書いてくれるんですから、本当にすごい時代です。
　そんなCanva Codeの魅力を、たっぷりお届けします。

👇Canvaの2025年大型アップデートの徹底解説についてはこちら

　↑　ぜひ、Canvaの2025年4月の大型アップデートの新機能をマスターしてCanvaを使いこなしてくださいね！

そもそも新機能「Canva Code」って何？

　Canva Codeは、Canvaの中で“動きのあるコンテンツ”を追加できるAI生成型のノーコード機能です。

　そう、ノーコードというところがポイントです。コード生成するのに、ノーコードとはどういうことなんだろう…と思う方も多いと思います。
　実は、チャット形式で指示をするだけで、Canvaが自動でコードを書いてくれるんです。
　しかも、出力結果に満足できなかったら、「ここをこう変更して」ともう一度チャットで指示すると「考えさせてください」と数秒Canvaが考えて、またスラスラとコードを書いてくれます。

　このように指示文を入れるだけで、HTML＋CSSの仕掛けを自動で生成してくれて、最後にそのプレビューまで見せてくれます。
　そして、さらにすごいのは、それをそのままCanvaの自分のデザインにそのまま埋め込めこんだり、ウェブサイトとして公開できるというところです。

　これまでCanvaは静的なデザイン（スライド・画像・動画・印刷物）が中心でしたが、Canva Codeの登場で、以下のようなちょっと動く仕掛けやインタラクティブ(動的な)ツールを追加できるようになりました。

Canva Codeでできること

• 花びらや雪が舞い落ちるアニメーション

• クイズや診断のインタラクティブ表示

• 自動更新される日付・時間表示

• フォーム・カウンター・ボタンの仕掛け

• クリックで展開するQ&Aやアコーディオン表示　など

どれも専門知識がなくても思いのままに作れます。

Canvaコードの使い方を詳しく紹介

　Canva Codeを使って、私は「花びらが舞うお誕生日メッセージカード」を作ってみました。ここではCanvaコードの使い方、カードの作り方を画面コピー付きで詳しく紹介します。

　やさしいメッセージと一緒に、画面に花びらがふわっと舞い降りてくるような、少しだけ驚きがあって、でも心があたたかくなるカードにしたいと思います。

　では実際にどうやって作ったのか早速みてみましょう。みなさんも、是非一緒に作ってみてください。

Canvaコードを使ったメッセージカードの作り方

【作り方1】Canvaのチャット欄に作りたいイメージを書く

　Canvaのトップ画面の上のチャット欄、またはCanva AIをクリックしたときに表示される画面のチャット欄に、作りたいものイメージを文章で書きましょう。
　慣れていないと指示文を書くのは難しそうに感じますが、思いついたもの、とにかく何でもいいです。

　それでも、一から書くのは難しいなぁ…ここに何を書けばいいんだろう…とりあえずサンプルを見てみたい！という人もいるかと思います。
　Canva AIの最初の画面には、「AIを使ってできることをチェック」というリストが表示されていて、クリックするだけでCanvaのAI体験を始めることもできます。

　今回は、その「AIを使ってできること」のリストの中から「コード：紙吹雪がはじける、デジタルのバースデーカードを作成してください」というサンプルをクリックして作り始めてみます。

　もちろん、このリストの中から出なくても、直接チャット画面に　「花びらがふわっと画面に降り積もる、やさしい雰囲気のデジタルバースデーカードを作ってください。」という指示を入力してもよいです。

※このCanva AI自体が表示されないという人もいるかもしれません。
まだ新機能モードになっていない人は、是非CanvaのYouTubeでCanva Create2025を見て、いち早く新機能モードにする秘密の仕掛けを手に入れてくださいね！

▼Canva Create2025(ロサンゼルスの中継)はこちら

https://www.canva.com/canva-create/

　Canvaの新機能が搭載されたバージョンになるとこんな画面が表示されます。こういう楽しい仕掛けがあるのもCanvaのいいところです。

【作り方2】Canvaがコードを作ってくれるのを待つ

　Canva Codeの解説とは言え、何も難しいことはありません…。Canvaが全部自動で描いてくれます。1～2分そのまま待ってみましょう。すごいスピードで右のコード欄に書いてくれます。ただ見ているだけでOKです。(もちろん画面を見なくて他の作業をしていてもOKです)

【作り方3】完成したカードを確認する

　コードを生成し終わったら自動でCanvaが完成形のプレビュー画面を表示してくれます。今回のカードは、なんと2段階のサプライズ仕様のカードになっているようです。
　早速、表示されたプレビュー画面の「カードを開く」ボタンを押してみましょう。

【作り方4】Canvaコードで作ってもらった動きを確認する

　「カードを開く」ボタンを押すと、新しい画面が表示されました。
さらに、「サプライズ」ボタンを押すと、紙吹雪がでてきます。
　しかも、クリックにすぐ反応してくれるので、連打するとものすごい紙吹雪が出てきます。お祝い感満載ですね。これはもらったら嬉しいカードです。

【作り方5】Canvaに修正依頼を指示する

　今回Canva Codeで作ってもらったカードの完成形で気になったのは、中央の白の枠が小さすぎてお祝いメッセージの文字が入り切れていないことです。

そこで、追加として、チャット欄でこのような修正依頼を出しました。

　すると、即座にコードを書き直してくれます。
今回は追加で、紙吹雪を「薔薇の花びら」に変更してもらいます。

さぁ、早速Canvaがコードを書き直してくれています。修正してくれているコードを見ると、
　「薔薇の花びらのパス」
　「ランダムな花びらの形状」
　「ランダムな色」
　「ランダムな位置と動き」
など、花びらに特化したコードも自動生成してくれているのは、ほんとうに感動ですね。

【作り方6】Canvaが修正したバージョンを確認する

　１～2分でコードを修正してくれました。早速、カードが新しい画面になっています。後ろの白い枠も指示通り大きくなっています。「カードを開く」ボタンで、カードの中身を見てみましょう。

　白い枠は指示通り大きくなっていたのですが、文字が上にはみ出しています。そこでこのような修正依頼の指示を出します。(左のチャット欄に書きましょう)

　花びらとして舞うスピードが速かったので、ひらひらと舞うように落下速度を遅くしてもらいました。
　また、最後に花びらが下にたまるときれいそうだなぁと感じたので、下にたまるように変えてもらいます。こういった指示も、簡単な1文だけでコードを変えてくれるのはとても便利ですよね。

　さっそくCanvaが修正してくれています。そのコードを見てみると、花びらが舞い落ちるアニメーションの速度や、花びらを下に積もらせる関数など、ちゃんと作ってくれています。

【作り方7】花びらが舞うバースデーカードが完成！

　さぁ、バースデーカードが完成です。
　Canvaに書いてもらったコードをリアルタイムで読んでいて気付いたのですが、この開く前のカードにも、すこしだけ自動で花びらが舞うようにかかれているのもすごいですね。
　このような素敵な仕掛けがコードに入るのも、Canvaならではの仕様だと思います。

　さぁ、メッセージカードを開いてみましょう。

　ちゃんとメッセージが白い枠内に配置されました。メッセージの下の「サプライズ」を押せば押すほどたくさん花びらが舞います。どんどん連打したくなる仕様です。
　とても美しいカードに仕上がりました。花びらが舞うスピードも希望通りにできています。

　しばらく待つと、ちゃんと下に花びらがたまりました。余韻を感じさせるカードになりました。

Canvaコードを使って感じたこと

　最初は正直、「本当に指示文をいれるだけでCanvaがコーディングしてくれるの？」と思っていました。
　でも実際にプロンプトを入れて、プレビューで花びらが舞い始めた瞬間、「あ、これはすごい！」と感じました。

　Canva内で、これほど直感的に“動き”を作れるようになったこと自体が驚きですが、何より素晴らしいのは、それが自分のデザインと完全に一体化できることです。

たとえば…

• 特典などのプレゼントとしてウェブページとして公開する

• Webページの背景としてループ表示させる

• プレゼン資料のラストページに演出として使う

　どの使い方も「Canvaの世界観のまま」動く仕掛けを組み込めるというところに、これからのデザインへとても大きな可能性を感じますね。

Canva コードはこんな場面で使えます

　ここからは、実務での活用アイデアや仕上がりの工夫ポイント、そしてCanva Codeがどういう場面で使えるのか、もう少し掘り下げていきます。

実務にも使える！Canva Codeの活用アイデア集

　「花びらが舞う」演出は、感性をくすぐるカードにぴったりでしたが、Canva Codeの活用シーンはそれだけではありません。
　実は、ビジネスにも教育にも、ちょっとした自動化にも使える万能ツールです。

🌸 プレゼン・資料作成に使う

• 発表の最後に拍手アニメーションを追加する

• スライドの途中で診断クイズを表示して参加型にする

　Canvaで作ったプレゼンはそのまま公開・配布もできるので、デザイン×動き×使いやすさが揃った資料になります。

🌸 WebページやLPに使う

• 季節のキャンペーンに合わせて背景に演出（雪、花火、葉っぱなど）

• 商品紹介ページにぴったり診断ウィジェットを設置

• ページ上部にカウントダウンタイマーを表示

　コーディングの知識がないとできなかった演出が、Canvaだけで完結するのは大きなメリットです。

🌸教育・研修コンテンツに使う

• 〇×クイズや選択肢チェックで理解度をはかる

• 授業スライドにミニテストや学習ポイント確認を入れる

• 研修レポートに学んだこと診断を加える

　特に教育現場では、楽しく・直感的に参加できる仕組みが求められるので、Canva Codeのような仕掛けは相性抜群です。

Canvaコードが変えるこれからのデザイン

　これまでCanvaは、「整った見た目」を作るツールとしてのイメージが強かったと思います。でもCanva Codeの登場によって、“心を動かす仕掛け”を持ったデザインが誰でも作れる時代になりました。

• 想いを伝えるメッセージに、少しだけ“魔法”をかける

• ビジネス資料に、ちょっとした“気配り”を加える

• 教育スライドに、楽しさやインタラクションをプラスする

　そういった、「あと一歩」の魅力を届けるための武器として、Canva Codeはこれからのデザインの可能性を広げてくれるはずです。

💡 ぜひCanvaの新機能を試してみてください！

　Canvaのホーム画面にある「Canva AI」→「コードを生成」をクリックするだけで、すぐにCanvaコードが使えます。

　Canva Codeは、コードレスで、ノーストレスに、動きをデザインできる革新的なツールです。思い立ったらすぐに使える身軽さも、大きな魅力のひとつです。

「花びらが舞う演出を入れたい」
「診断ウィジェットを作ってみたい」
「資料にちょっとした驚きを加えたい」

　そんなとき、あなたのアイデアを形にしてくれるのがCanva Codeです。
　ほんの数分で、あなたのデザインに“心を動かす仕掛け”が加わる体験、ぜひ味わってみてください。

🍸Xの「アルルのBar」で情報発信しています

　企業や個人向けのマーケティングを日々研究し、ブランディングやSEO対策、ライティング、AI導入など幅広く支援させていただいています。　
　Xで展開中の「アルルのBar」ではCanva×AI×SNSを駆使した便利な情報を発信中です。業務の時短＆高クオリティの仕事のためのワザを公開しています。
　アルルのXのフォローはこちら　→https://x.com/7ironote

🚀SEO対策&AI活用支援ならアルル制作所へ

　私たちアルル制作所は、SEO対策を軸に、その企業様にあった、完全オーダーメイドのコンサルティングを行い、営業戦略やWeb集客ロードマップの作成、Web担当者の内製化などマーケティングの支援を行っています。

　ChatGPTの活用を、ツールやシステムの導入にとどまらず、実践形式を多く取り入れ、社員さま一人一人が、成果を出せるようにサポートしています。

　企業のSEO対策、ChatGPT活用、AI導入支援なら、ぜひアルル制作所におまかせください。手の届きやすい施策をご提案いたします。
LINEでお気軽にご相談くださいね。

　これからも私たちが実践している、プロ目線のSEO対策、ChatGPTやAIのノウハウを、みなさんにシェアしていきますので、楽しみにしていてくださいね！