カードゲームを作る3回シリーズ
今日 / 第5回
カード作り→印刷
来週 / 第6回
自分のゲームを企画して、カードを作り始める
再来週 / 第7回
お互いのゲームを実際に遊ぶ（ここで提出いただいたものは成績評価対象）
今日のカードは 練習作品。来週から作るのが「自分のゲーム」のカードです。
AI と Figma で、カードを 何枚か 作って印刷するところまでやる
- AI に頼って作ってみる - 何が出てきて、何が足りないかを体で知る
- 足りない部分を、自分の手で埋める道具 (Figma) に触る
- 最後は紙に出力するところまで持っていく
今日のカードは練習。第7回でそのまま使うものではありません。
AIにポン出しでカードゲームのカードデザインを依頼
// 最初の一発
カードゲームで使えるようなものをデザインしてください。
まずは、ざっくりと依頼してみてください！
出てきたカードを見比べる
- 制限の問題もあるので1枚出力すればOKです
- 出てきたカードを Notion に貼っておいてください！
- 周りの人が出力したカードとデザインを見比べてみてください！
AI が返すカードの 共通点
こすげの出力結果
- HP / 攻撃力 / コスト といった数字
- 「効果」のテキスト欄
- 属性アイコン、レア度のマーク
- キャラクターの絵が中央に大きく
AIの認識 「カードゲーム = 対戦型カードゲーム」？？
目的 が決まっていないカード
- 何のゲームのカード？
- そもそも自分は、対戦型のカードゲームが作りたかった？
- 緩く頼むと、AI は「世間で一番多い形」を返してくる
目的のないデザインに意味はない...！
作ったカードを印刷する
- 出てきたカードのうち、気になったものを何枚か印刷する
- カードのサイズに切ってみる（トランプくらいの大きさ）
- 切ったカードを並べて、手のひらに乗せてみる
手に取って並べてみると、画面で見ていた印象と違うはず。
印刷して気づくこと
- 文字が読めるサイズか
- 余白が窮屈すぎないか
- 切り出すと、入れたかった要素が端でちぎれていないか
- そもそも、ゲームに使えるカードに見えるか
AI に印刷向けの調整を頼む
次に、印刷向けの指示になるように先ほどのデザインに追加指示を加えてみてください！
// 例
先ほどのデザインを、サイズは 63mm × 88mm になるようにトレカサイズに作り直してみてください。
指示通りになったか、再印刷で確認
適材適所
- AIができると認識していることと、実際にできることは違う
- サイズがわかってるなら、自分で調整した方が早い？
AIにも得意と苦手がある。時と場合によりAIに頼んだ方が遅い場合がある...
Figma - UIデザインのスペシャリスト（本来）
- Webサイトやアプリ画面の設計に特化した定番ツール
- Photoshop が写真加工・編集のプロなのに対し、Figma は 画面のデザイン が得意
- 役割が違うので、目的に応じて使い分けるのが普通
- 印刷にも使える
今回は覚えることが少なくて済むという理由でFigmaを使います！
事前準備の確認
- Figma 公式ページから登録
- 登録がまだの人はその場で進めましょう
- 無料で始められます
基本的な画面構成
フレーム を作る
- Photoshop でいう「アートボード」にあたるのが Frame（フレーム）
- ツールバーから Frame を選択（または F キー）
- 画面上をクリック / ドラッグでフレームを作成
- 右パネルでサイズを mm 単位で指定できる
文字を入れる
- ツールバーから文字ツール（T）を選択
- フレーム上をクリックして文字を入力
- Photoshop と入力の感覚は同じ
色やフォントを変える
- 変えたい文字を選択
- 右側のプロパティパネルから、色・フォント・サイズを変更
図形を入れる
- ツールバーから図形ツール（四角は R、楕円は O）を選択
- 画面上をドラッグで図形を描く
- 色・枠線・角丸はプロパティパネルで設定
レイヤー
- 配置したものは レイヤー として左パネルに並ぶ
- 上にあるレイヤーが 手前、下が奥に表示される
- フレームの中に入れた要素は、フレームの子として整理される
- 重なり順を入れ替えると見え方が変わる
- レイヤー名は分かりやすい名前に変えておくと後で楽
Figma は元々 Webデザイン のツール
- サイズ指定の標準は px（ピクセル）
- 「63mm」のような mm 指定は、そのままでは扱えない
- 印刷向けに作るときは、mm を px に 換算 してフレームを作る
mm → px の 変換
- 家庭用プリンタは 300dpi が目安
- 1mm ≒ 11.81 px
- カード 63mm × 88mm → 744 × 1039 px
- 塗り足し込み 69mm × 94mm → 815 × 1110 px
- A4（210 × 297mm）→ 2480 × 3508 px
教室のプリンタで印刷する分には、塗り足しまでは気にしなくて大丈夫です。
A4 に複数枚並べた テンプレ
- カードサイズ (63mm × 88mm) のフレームが、A4 に何枚か並んだ状態
- 切り取りガイド線も入っている
- 自分の Figma にコピーして使ってください
- 最低4枚・できる人は8枚デザインしよう
テーマは 「トランプ」。大統領ではありません笑
AI と Figma の 分業
- AI が作るもの - イラスト部分だけ（文字も枠も入れない）
- Figma が担当 - フレーム / 文字 / 数字 / 枠線 / アイコン
- こうすると、文字や数字を後からいくらでも調整できる
- イラストを差し替えれば、別のカードになる
トランプのデザインを作ってみよう！！
印刷用 PDF の書き出し方
- 書き出したいフレームを 選択 する
- 右パネルの Export セクションへ
- 「+」ボタンを押して、Format を PDF に変更
- Export ボタンで書き出し
- 複数フレームを同時に選べば、一括書き出しもできる
印刷ダイアログでは「実寸サイズ」「100%」で印刷するよう注意してください。
Figma は CMYK 非対応
- Figma は RGB専用（画面表示用の色）
- 印刷所に入稿するなら、印刷向けの CMYK に変換が必要
- Figma から書き出した PDF を Illustrator で開く
- ［ファイル］→［ドキュメントのカラーモード］→ CMYKカラー
- RGB のまま印刷すると、発色がくすむ・黒がグレーになる等の色ズレが出る
Photoshop で印刷用 PDF を作る
- 単位と画像解像度を変更 - ［イメージ］→［画像解像度］→ 300dpi、A4 サイズに合わせる。「再サンプルでディテールを保持」を選択（劣化防止）
- キャンバスサイズを印刷サイズに調整 - ［イメージ］→［キャンバスサイズ］で正しい比率と基準位置を設定
- カラーモードを CMYK に変更 - ［イメージ］→［モード］→ CMYKカラー
- PDF で保存 - ［ファイル］→［別名で保存］→ 形式「Photoshop PDF」→ PDF/X-1a:2001
もう一度、印刷してみよう
- Figma から PDF で書き出して、プリンタへ
- A4 を切り出して、何枚かのカードを手に取る
今日の振り返りを書こう
- AI の返してきた形（対戦型のテンプレ）への違和感
- 印刷してみて気づいたこと
- Figma で触ったときに「自分でやった方が早い」と思った瞬間
- 「自分が本当に作りたいカードゲーム」って、どんなものだろう