ポケモンカード風カードの作り方【Gemini Canvasで簡単！自作テンプレート作成ツール】
こんにちは、Makariです。
わが家の子どもたちはポケモンが大好き。
4歳と6歳の息子は、
ポケモンカードをたくさん集めています。
眺めて楽しんでいるだけですが、
「ポケモンカード、もっとほしい！」
というので……
「オリジナルのポケモン風カードを作ってみる？」
という話に。
今回は、無料で使える Gemini Canvas を使って、オリジナルカードを作ってみました。
わが家ではこのカードを ひらがなを読む練習にも活用しています。
おうち時間にGeminiと気軽に遊んでみていかがでしょうか𓂃𓈒 𓂂𓏸
Gemini Canvasとは？
Gemini Canvasとは、
Googleの生成AI「Gemini」アプリ内に搭載された、文書作成やコーディングなどの長文・複雑な作業に特化した対話型エディタ機能です。
プロンプト（指示文）を入力するだけで、
・Webツール制作
・簡単なゲーム制作
・Webサイト制作
などを作ることができます。
プログラミングの知識がなくても、
「こんなツールがあったらいいな」というアイデアを形にできるのが魅力。
今回はこの機能を使って、
ポケモンカード風のカードを作れるツールを作ってみました。
Gemini Canvasでポケモン風カードを作る方法
Gemini CanvasはGoogleアカウントがあれば無料で利用できます。
手順もとてもシンプル。
Canvasを使う手順
1.Geminiを開き、
「ツール」→「Canvas」を選択。
2.モデルで「Pro」を選択。
3.プロンプトを入力して、送信！
▼プロンプト例（背景白バージョン）
ポケモンカード風のオリジナルカードを作れるWebツールを作ってください。
仕様
・HTML + CSS + JavaScriptのみで作る
・ブラウザだけで動くツール
・Canvasを使用してカードを生成
機能
1. カードの名前を入力できる
2. カード内の画像をアップロードできる
3. カードのHPを入力できる
4. 入力内容をもとにCanvasにカードを描画
5. PNG画像としてダウンロードできる
6. カード枠の色を選択できるカラーピッカーを設置
デザイン
・ポケモンカード風レイアウト
・カードの背景は白
・カードの周りの枠の色をユーザーが変更できる
・上部にカード名
・右上にHP
・中央に画像
・下部に技テキスト欄
技1（技名 + ダメージ＋説明）
技2（技名 + ダメージ＋説明）
・カード最下部に横並びのステータス欄
例：じゃくてん ×2 ていこうりょく -30 にげる ★
・カード枠は少し太めで、色が分かりやすいデザイン
UI
・左側に入力フォーム
・右側にカードプレビュー
・カード枠の色を変更できるカラーピッカーを配置
その他
・画像は自動でカード内サイズにリサイズして表示
・Canvas上でカードを描画
・ダウンロードボタンを設置
・ダウンロードするとPNG画像として保存できる
・入力内容を変更するとリアルタイムでカードプレビューが更新される
▼プロンプト例（背景カラーバージョン）
ポケモンカード風のオリジナルカードを作れるWebツールを作ってください。
仕様
・HTML + CSS + JavaScriptのみで作る
・ブラウザだけで動くツール
・Canvasを使用してカードを生成
機能
1. カードの名前を入力できる
2. カード内の画像をアップロードできる
3. カードのHPを入力できる
4. 入力内容をもとにCanvasにカードを描画
5. PNG画像としてダウンロードできる
6. カード枠の色を選択できるカラーピッカーを設置
デザイン
・ポケモンカード風レイアウト
・カードの背景色をユーザーが変更できる
・カードの周りの枠の色はシルバー
・上部にカード名
・右上にHP
・中央に画像
・下部に技テキスト欄
技1（技名 + ダメージ＋説明）
技2（技名 + ダメージ＋説明）
・カード最下部に横並びのステータス欄
例：じゃくてん ×2 ていこうりょく -30 にげる ★
・カード枠は少し太めで、色が分かりやすいデザイン
UI
・左側に入力フォーム
・右側にカードプレビュー
・カード枠の色を変更できるカラーピッカーを配置
その他
・画像は自動でカード内サイズにリサイズして表示
・Canvas上でカードを描画
・ダウンロードボタンを設置
・ダウンロードするとPNG画像として保存できる
・入力内容を変更するとリアルタイムでカードプレビューが更新される
↓
プロンプトを送信すると、
数十秒ほどでツールが生成されます。
↓
実際にできたツールはこちら。
①背景白バージョン
（縁の色を変更可能）
②背景カラーバージョン
（背景色を変更可能）
画面には、
・入力フォーム
・カードプレビュー
が表示され、
リアルタイムでカードを作れる仕組みになっています。
思っていた以上の完成度でびっくりしました。
AIツールを使うときの注意点
生成AIでは、同じプロンプトでも
・毎回同じデザインにならない
・テキストが重なる
・レイアウトが少し崩れる
ということがよく起こります。
もし不自然な部分があった場合は、
新しいチャットで作り直すのがおすすめです。
実際にカードを作ってみた
実際にNano Banana2で作った画像を
アップロードして、カードを作ってみました。
今回のキャラクターやアイデアは、
すべて息子たちの発想です。
🔸パターン①
葉っぱをイメージしたキャラクター
🔸パターン②
猫とハチを組み合わせたキャラクター
🔸パターン③
ユニコーンとイチゴとオムライスを組み合わせたキャラクター
かなり自由な発想ですよね。
ちなみに技の内容も子どもたちが考えたのですが、
「お菓子を食べさせて眠らせる」
「相手を空に運んで、空から落とす」
……なかなか強烈な技でした（笑）
作ったカードを印刷する方法
作ったカードはPNG画像としてダウンロードできます。
今回は、Canvaでサイズを整えた後、
プリンターで印刷しました。
Canvaでサイズを整え印刷
CanvaでA4サイズのデザインを作成
カードのサイズを整え、配置
印刷
トレーディングカードのサイズは
63mm × 88mm です。
※A4には最大8枚まで配置できます。
仕上げはラミネート
印刷したカードはカードサイズにカットして、
ラミネートするだけ。
写真サイズのラミネートフィルムを使うと、
2枚でちょうどいいサイズになります。
さらに息子たちのリクエストで、
100円ショップで購入した
キラキラのラインストーンも追加。
思ったより本格的なカードになりました。
まとめ
AIを活用すれば、
子どもと一緒に遊べるオリジナルカードも
簡単に作れます。
今回のカード作りでは、
・子どもの発想が広がる
・ひらがなの勉強になる
・親子で楽しめる
という、
思っていた以上のメリットがありました。
そして何より、
子どもたちがとても楽しそうでした。
気づけば10枚以上カードを作っていて、
かなりいい時間つぶしにも。
AIは仕事だけでなく、
子育てや遊びにも活用できるツールだと改めて感じました。
おうち時間に、ポケモン風カードを作りを楽しんでみてはいかがでしょうか。
最後までご覧いただき、
ありがとうございました😊
関連記事
▼日常に役立ちそうなAI活用アイディアはこちら
AIイラストを活用したい使いたい方へ✨
月額500円〜
AIイラスト・副業・AI活用の記事が
読み放題のメンバーシップを運営しています。
AIを楽しく活用しませんか☺️
※本記事はAmazonアソシエイトに参加しています。
