Canva連携・画像素材 / 非公式Figmaガイド
FigmaとCanvaでサムネイル確認
Canvaで作ったサムネイルをFigmaで並べて読みやすさを確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Canvaは画像や素材、Figmaは設計とレイアウト確認として使い分けます。 Canvaで作ったサムネイルをFigmaで並べて読みやすさを確認します。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- 素材権利を確認した
- 公式ロゴを使わない
- 画像の役割をFigmaで確認した
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
どちらで作るかの分かれ目
サムネイル制作では、次で決めると迷いません。
- 数を早く作る — 型が用意されている道具
- 細かく詰める・実装へ渡す — デザインツール
- 継続して同じ形で出す — 型を1つ作れば、どちらでも構いません
1枚あたりの制作時間を測ってから決めてください。機能の多さより、続けられるかのほうが結果に効きます。
共通して守ること
道具が違っても、サムネイルの要件は同じです。
- 一覧で小さく表示される — 文字は10字前後まで
- 細い書体を避ける — 縮小で線が消えます
- 四隅に重要なものを置かない
- 並べた時に揃うか
確認は簡単です。縮小して少し離れて見てください。そこで読めなければ一覧でも読めません。
型を作って量産する
1枚ずつ考えると続きません。先に決めておくと制作時間が半分以下になります。
- 書体を2つまで、色を3つまで
- 文字の位置を固定
- 背景のパターンを2〜3種類
全部同じに見えるのも問題です。色か写真のどちらか1要素だけ変えると、揃いつつ区別が付きます。
乗り換える時に見込むこと
途中で道具を変える場合、次を見込んでおいてください。
- 作ったものは移せないことが多い — 編集可能な形では持ち出せません
- 操作を覚え直す時間
- チームで使っている場合は人数分
迷っている段階で、簡単な1枚を両方で作ってみてください。本番の制作で試すと、途中で引き返せなくなります。