CanvaとCodexでHTML/CSSサイトを作る流れ

このページの役割

Canva側から見たHTML/CSS化のページです。CanvaデザインをCodexでサイト化する時の受け渡しを中心に扱います。

全体の流れを見たい場合は Codex側のCanva連携 も参考にしてください。

関連する読み順

1. まず全体像を見る：Codex側のCanva連携
2. このページで詳しく見る：Canva側のCodex連携
3. 次に確認する：HTML/CSS実装 / 公開前チェック / Figma設計から実装

似ているページとの違い

• Canvaは素材・資料・見た目案寄りの入口です。
• Figmaは画面設計やワイヤーフレーム寄りの入口です。

このページでわかること

• CanvaとCodexの役割分担
• CanvaデザインをHTML/CSS化する時の注意
• Codexへ依頼する時に伝えること

デザインを渡す前に整えること

作った版面をそのまま実装へ渡すと、意図が伝わりません。渡す前に次を整えてください。

1. 使っている色の種類を数える — 感覚で少しずつ変えた色は、実装では全部別の値になります
2. 文字の大きさの種類を減らす — 5〜6種類に収める
3. 余白の値を揃える — 基準の倍数だけを使う

1番目が効きます。似た色が10種類あると、実装側で10個の定義が必要になります。渡す前に一覧にして、統合できるものはまとめてください。

見た目より「ふるまい」を伝える

静止した版面から読み取れないことがあります。次を添えてください。

• 文字が想定より長くなった時 — 折り返すか、省略するか
• 画面幅が変わった時に何から隠すか
• 押した時、読み込み中、エラー時の見え方

2番目を伝えないと、実装側が推測します。「狭くなったら何を残すか」はデザインの判断なので、実装に委ねないでください。

書き出した素材の扱い

画像として書き出す場合、実装で使いやすい形にしてください。

• 寸法を2の倍数にする — 半端な値は表示時にぼやけます
• 写真と図で形式を分ける — 図は輪郭がはっきりする形式で
• ファイル名を役割で付ける — 「画像1」では何か分かりません

3番目は後から効きます。差し替える時に、どのファイルがどこの画像か分からなくなります。役割が分かる名前を付けてください。

できたものを確認する順番

実装が上がってきたら、影響の大きい順に見てください。

1. 文言が合っているか — 誤字や古い表現
2. 狭い画面で崩れていないか
3. 押した後に何が起きるか
4. 細部の余白や色

4番目を先に見ると時間を使い切ります。余白が数ピクセル違うことより、文言が古いことのほうが問題です。

一度に渡す量を決める

全ページ分をまとめて渡すと、確認が追いつかず手戻りが大きくなります。

• 共通部分を先に渡す — ヘッダー、フッター、ボタン
• 1画面ずつ渡す — 間違いが局所で止まります
• 動きのある部分は最後

1番目の順番が効きます。共通部分を先に確定させると、以降の画面で同じ議論を繰り返さずに済みます。

関連ページ

• canvaguide.jp
• Canva初心者ガイド
• ChatGPTとCanvaの組み合わせ方
• Canvaの商用利用で確認したいこと
• Canvaを安全に使うための注意点
• Canva FAQ
• Canva初心者が最初に読むガイド
• Canvaを安全に使うための注意点まとめ
• Canvaの素材を使う時に確認したいこと
• Canvaでロゴを作る時の注意点
• Canvaで画像の権利を確認したい時の考え方
• codexguide.jp/codex-canva/
• codexguide.jp/codex-html-css/
• codexguide.jp/codex-public-check/
• figmaguide.jp/figma-codex-web-design/