auto_awesome Canva AI ハンズオン

Canva AI ハンズオンセミナー 第4回

コード書けなくても
作れる・公開できる！

Canva Code 入門

プロンプトだけで動くフォームを作って、 自分のCanvaドメインで公開する2時間。

code

1. 動くフォーム

Canva Code

arrow_forward
slideshow

2. 提案書

Canva AI / Magic Design

arrow_forward
public

3. 公開・共有

Canva無料ドメイン

Today's Goal

今日のゴール

「コード書けない」を、「自分で作れた・公開できた」に変える

Before
  • close 「コードが書けないから自分のサイトは持てない」
  • close インタラクティブなものはエンジニアに頼むしかない
  • close ヒアリングシートは紙かWordで送るしかない
  • close 公開とかドメインとか、よくわからない
After
  • check_circle プロンプトだけで動くフォームが作れる
  • check_circle 自分のCanvaドメインを持てる
  • check_circle URL1つでクライアントに渡せる
  • check_circle 「コード書けなくても作れた！公開できた！」の体験

Flow

今日の流れ

作って・作って・公開する！

1

Canva Code でヒアリングフォームを作る

プロンプトだけで動くフォームを生成。ドロップダウン・ラジオ・カラーピッカー・日付選択まで全部入り。コード1行も書かない（25分）

2

提案書・企画書を作る

Magic Design for Presentationsで、テキストからスライドを一括自動生成。Brand Kit適用まで（30分）

3

作品を公開・共有する

Canva無料ドメインで自分のスペースを持ち、ヒアリングシートと提案書をURL1つで共有（30分）

lightbulb 今日のキモ

プロンプトの質 = 成果物の質
雑な指示なら雑なものが返ってくる。具体的な指示書ならプロ品質のものが返ってくる。今日の3パート全部に通じる、たった1つの法則です。

Part 1

Canva Code でヒアリングフォームを作る

プロンプトだけで、コード1行も書かずに動くフォームを作る

code

Canva Code とは

Magic Studio の中にある、プロンプトでインタラクティブなコンテンツを作れる機能。 フォーム、計算機、クイズ、ミニアプリ、ウィジェットなどが、コード1行も書かずに作れます。 コードが書ける人向けじゃなく、むしろ「書けない人」のための機能です。

Magic Studio内 Pro/Teams/Education/Enterprise Canva Sheets連携可

compare プロンプトの質 = 成果物の質

雑なプロンプト

ヒアリングフォームを作って

  • close テキスト入力欄が2〜3個だけ
  • close UIが単調・選択肢なし
  • close クライアントに渡せるレベルじゃない
しっかりした指示書

図解制作依頼のヒアリングフォーム。用途はドロップダウン、テイストはラジオボタン、カラーはカラーピッカー3つ、参考画像はアップロードボタン x4、納期は日付ピッカー、予算は数値入力、送信ボタン付き、レスポンシブ対応で。

  • check_circle ドロップダウン・ラジオ・カラーピッカー全部入り
  • check_circle 送信ボタン付きで実際に動く
  • check_circle そのままクライアントに渡せる品質

lightbulb プロンプトに含める6要素

何のフォーム

案件タイプ・用途

質問項目リスト

5〜7個に絞る

UI要素の種類

ドロップダウン/ラジオ/etc

各要素の中身

選択肢のリスト

送信処理

ボタン・送信後の動き

デザイン

クリーン・カジュアル等

directions_run 実習ステップ

1

プロンプトを設計する

1. 自分の案件で「何を聞きたいか」を5〜7個に絞る

2. 各質問にどんなUI要素が合うか考える（ドロップダウン？テキスト？）

3. デザインの雰囲気を決める（クリーン・カジュアル・モダン等）

4. 上の「6要素」を埋めるようにプロンプトを書く

2

Canva Code で生成

1. Canvaトップ → Magic Studio → Canva Code を開く

2. 設計したプロンプトを入力 → 生成

3. 生成されたフォームを確認・テスト（実際に入力してみる）

3

追加プロンプトで微調整

気に入らない部分は追加プロンプトで何度でも修正できます。

例：「カラーピッカーをもう1個追加して」「ボタンの色を青に変えて」「質問3を選択式じゃなくテキスト入力に」

何度でも直せる → これがCanva Codeのいいところ

task_alt Part 1 チェック

  • check_box_outline_blank Canva Code で動くフォームが作れた
  • check_box_outline_blank 雑プロンプトと指示書プロンプトの差を実感できた
  • check_box_outline_blank 追加プロンプトで微調整できた
  • check_box_outline_blank 「自分でフォームが作れた！」体験ができた
Part 2

提案書・企画書

Magic Design for Presentations で、テキストから提案書を自動生成

slideshow

Magic Design for Presentations

テキストを入力するだけで、AIが構成・レイアウト・デザインを丸ごと作ってくれるプレゼン自動生成機能。 Canvaトップの「プレゼンテーション」から使えます。生成後のスライドはすべて自由に編集可能。PPTX形式でダウンロードすればPowerPointでも開けます。

directions_run 実習ステップ

1

テキストからスライドを一括生成

1. Canvaトップ → 「プレゼンテーション」をクリック

2. テキスト入力欄に案件の概要を書く（下のプロンプト例を参考に）

3. スタイルを選択 → 「生成」

4. AIが構成+デザイン込みでスライドを生成！

2

デザインを調整

1. テンプレートスタイルを案件の雰囲気に合わせて変更

2. Brand Kitの配色があれば適用（第2回で作った方はここで活躍！）

3. フォントを調整

3

テキスト + 画像を調整

1. AI生成テキストを読んで確認・修正

2. 「/」→ Magic Writeで追加テキストを生成

3. 画像をAI生成 or Canva素材から追加

4

提案書としてのクオリティチェック

この4つが入っているか確認してください:

help_outline クライアントの課題
lightbulb 具体的な解決策
workspace_premium あなたの強み・実績
event 次のステップ（見積・日程）

tips_and_updates 知っておくと便利

  • arrow_right PDFでダウンロード → Canvaアカウントがないクライアントにも渡せる
  • arrow_right PPTX形式でダウンロード → クライアントのPowerPoint環境で開ける
  • arrow_right プレゼンテーションモード → Canvaからそのまま画面共有でプレゼンできる

task_alt Part 2 チェック

  • check_box_outline_blank 案件に合った提案書のスライドが生成できた
  • check_box_outline_blank デザイン（テンプレート / Brand Kit）を整えた
  • check_box_outline_blank 課題→解決策→強み→次のステップの構成を確認した
Part 3

公開・共有

Canva無料ドメインで自分のスペースを持ち、案件をURL1つで完結させる

public

なぜ「公開」するのか

PDFをメールで送る、添付ファイルでやりとりする…これ、もうやめましょう。 Canvaの無料ドメインを使えば、URLひとつでクライアントと共有できます。 修正したら自動で最新版になるし、スマホでもPCでもどこからでも見られる。 しかも自分のドメイン（住所）まで持てちゃうんです。

language Canva無料ドメインの基本

ドメインとは、簡単に言うと「インターネット上の住所」。google.com とか konmari-design.com みたいなやつです。

今日使う

Canva管理ドメイン（無料）

https://[ユーザー名].my.canva.site/[サイト名]

  • ・無料でCanva公式が管理
  • ・Canvaアカウントがあればすぐ使える
  • ・ユーザー名は自分で変更可能
今日は触れない

独自ドメイン（カスタム）

https://konmari-design.com

  • ・年1,000-5,000円で取得
  • ・所有権は自分
  • ・Canvaに接続して使う

warning_amber 知っておくべき制約

公開数の上限

Canva Free版は最大5サイトまで公開可能。Pro/Teams/Educationは無制限

名前の再利用

過去に他ブランドが使った名前は再利用不可（フィッシング防止のため）

利用プラン

Free / Pro / Teams / Education 全プランで利用OK

変更権限

Teams/Educationでは管理者のみドメイン名変更可能

play_circle 実習1: Part 1のヒアリングフォームを公開

1

公開したいデザインを開く

Part 1で作ったヒアリングシート（or Canva Code版）を開く

2

Canva無料ドメインを設定

1. Canvaトップ → アカウントプロフィール → 設定

2. サイドメニューから「Webドメイン」を選択

3. 「Canva管理ドメイン」を選択 → ユーザー名を入力

完成URL: https://[ユーザー名].my.canva.site/

3

公開してURLを取得

1. ヒアリングシートのデザインに戻る → 右上の「共有」

2. 「Webサイトとして公開」を選択

3. 設定したCanva無料ドメインを選び、サイト名を入力

4. 公開ボタン → URLを取得！

play_circle 実習2: 提案書を簡易LP化して同じドメインで公開

1

提案書から1スライド選ぶ

Part 2で作った提案書から、ビジュアルがいいスライドを1枚選んで複製

2

ヒアリングフォームへのリンクを設置

1. 「ボタン」要素を追加（または既存のテキストをクリック）

2. ボタンに「ヒアリングシートに記入する」と入力

3. リンク → 実習1で公開したヒアリングシートのURLを貼る

3

同じドメインで公開

1. 「共有」→「Webサイトとして公開」

2. 同じCanva無料ドメインを選択

3. サイト名を入力（例: proposal-yoga-sora）

2つのサイトが同じドメインに並ぶ → 1案件 = 1URL の動線完成！

settings 管理テク（覚えておきたい操作）

やりたいこと 操作手順
ドメイン名変更設定 → Webドメイン → 表示 → 編集
公開デザイン削除設定 → Webドメイン → 削除
独自ドメイン接続設定 → Webドメイン → サードパーティドメイン

campaign 第5回（5月）予告

今日設定したCanva無料ドメインを使って、本格的なWebサイトを作る回です。 複数ページ、メニュー、お問い合わせフォーム…全部Canvaだけで作れます。 今日のドメイン設定が前提知識になるので、必ず今日中に確保しておいてください！

task_alt Part 3 チェック

  • check_box_outline_blank Canva無料ドメインを設定できた
  • check_box_outline_blank Part 1のヒアリングシートを公開URLで共有できた
  • check_box_outline_blank 提案書を簡易LP化して同じドメインで公開できた
  • check_box_outline_blank 1案件 = 1URL の動線を作れた
Prompt Collection

プロンプト集

コピーしてそのまま使えるプロンプト例。案件名だけ差し替えてください

code Part 1: Canva Code 用（Canva Code に入力）

図解制作依頼ヒアリングフォーム（汎用）

図解制作依頼のヒアリングフォームを作ってください。

以下の項目をインタラクティブなフォーム形式で作成：

1. 図解の用途（ドロップダウン選択）
   - プレゼン資料 / SNS投稿 / Webサイト / 印刷物 / 社内資料

2. 伝えたい内容（大きめのテキストエリア）

3. デザインテイスト（ラジオボタン）
   - ビジネス / カジュアル / テック / ナチュラル / 和風

4. カラーの希望（カラーピッカー3つ）
   - メインカラー / サブカラー / アクセントカラー

5. 参考画像のアップロード（ファイルアップロードボタン x 4）

6. 納期（日付ピッカー）

7. 予算感（数値入力 + 単位「円」）

最後に「送信」ボタンを配置。送信したら確認メッセージを表示。
デザインはクリーンでプロフェッショナルに。
モバイルでも見やすいレスポンシブ対応で。

プレゼン資料向け図解依頼フォーム

プレゼン資料向けの図解制作依頼フォームを作ってください。

以下の項目をインタラクティブなフォーム形式で：

1. 担当者情報（テキスト入力 x 2）
   - 会社名 / お名前

2. 図解の種類（チェックボックス、複数選択可）
   - フロー図 / 比較表 / 組織図 / タイムライン / データ可視化 / 概念図

3. 使用場面（ラジオボタン）
   - 社内プレゼン / クライアント提案 / 経営報告 / 研修資料

4. 伝えたいメッセージ（テキストエリア）

5. 数値データの有無（ラジオボタン）
   - Excelあり / PDFあり / なし

6. 企業ブランドカラー（カラーピッカー x 3）
   - メイン / サブ / アクセント

7. 納期（日付ピッカー）+ 修正回数（数値入力）

送信ボタン付き。デザインはビジネスブルー系でフォーマルに。

SNS・ブログ向け図解依頼フォーム

SNS・ブログ向けの図解制作依頼フォームを作ってください。

以下の項目をインタラクティブなフォーム形式で：

1. 連絡先（テキスト入力）
   - お名前 / メールアドレス

2. テーマ・タイトル案（テキストエリア）

3. 掲載先SNS（チェックボックス、複数選択可）
   - Instagram / X / TikTok / note / ブログ / その他

4. サイズ（ラジオボタン）
   - 正方形 / 縦長4:5 / 横長16:9 / ストーリーズ9:16

5. テイスト（ラジオボタン）
   - ポップ / シンプル / おしゃれ / かわいい / クール

6. 使いたい色（カラーピッカー x 3）

7. 参考画像のアップロード（ファイルアップロード x 4）

8. シリーズ化の予定（はい/いいえのトグル）

送信ボタン付き。デザインはカジュアルで親しみやすく、丸みのあるUIで。

slideshow Part 2: 提案書用

Magic Design for Presentations に入力するテキスト

○○（クライアント名）の△△（案件名）提案書。
ターゲット：□□（年代・属性）。
目的：□□（認知拡大、売上向上、ブランディングなど）。
提案内容：□□（ロゴ、Webサイト、SNS運用など）。
期間：○ヶ月。予算感：○万円。

Magic Write で追加テキストを生成するときのプロンプト例（個別にコピー可能）

この提案の競合優位性を3行で書いて
クライアントが得られるメリットを箇条書きで
次のステップ（スケジュールと見積もり）を表にして
もっとフォーマルなトーンに書き直して
箇条書きに変換して

よくある質問

help_outline Magic Writeは無料でも使えますか？

無料版は月25回。Pro版は月250回使えます。

help_outline Canva無料ドメインは何個までサイトを公開できますか？

Canva Free版は最大5サイトまで。Pro / Teams / Education版は無制限で公開できます。

help_outline Canva Codeは無料で使えますか？

Pro版以上の機能です。無料版でもAI機能のお試し回数の範囲内で触れますが、本格利用はPro版（月1,500円）以上が必要です。

help_outline 提案書をPowerPointに変換できますか？

はい！ダウンロード時にPPTX形式を選択できます。クライアントのPowerPoint環境でそのまま開けます。

help_outline 独自ドメイン（自分で買ったドメイン）も使えますか？

使えます。設定 → Webドメイン → サードパーティドメインから接続できます。最大5つまで接続可能で、サブパスを使えば実質無制限にサイトを公開できます。

help_outline 商用利用できますか？

自社の広告・SNS・プレゼン・クライアント納品はOK。素材としての販売・再配布はNG。AI生成コンテンツを「人間が作った」と偽ることも禁止です。

今日できるようになったこと

code

Canva Codeでプロンプトから動くフォームを生成

slideshow

Magic Designで提案書を自動生成

language

Canva無料ドメインで自分のスペースを持つ

public

作品を公開してURL1つで世に出す

「コード書けないから無理」 → 「自分で作って公開できた！」

プロンプトの質 = 成果物の質

具体的に書けば、ちゃんとしたものが返ってくる。