ホームへ戻る2026年8月6日(木)03 / 13

Day 03:デザイン4大原則と余白を身につける|Canva×AIでポスターとバナーを仕上げる

近接・整列・反復・対比・余白の考え方を知り、Canvaのテンプレートで実際に直します。後半はCanva単体のAI相談から、ChatGPTと連携したマジックレイヤー編集までを学びます。

今日の学習ゴール

近接・整列・反復・対比・余白の5原則を知り、Canvaのテンプレートを自分の手で直します。後半はCanva単体のAIに相談してポスターを作る流れを知り、そのあとChatGPTと連携してバナー案を作り、マジックレイヤーで編集します。

Day 03前半カバー:デザイン4大原則と余白
Day 03後半カバー:Canva AIに聞く

今日の学習ロードマップ

01

近接:関係あるものは近づけ、関係ないものは離す

講義動画を見る【寝ながら見る】デザイン4大原則をCanvaで実装したら、投稿が変わった
近接の原則
近接で情報をまとめる例

近接は、関係のある情報を近づけ、関係のない情報との間に距離を置く原則です。まとまりが見えると、読む人は情報の関係を迷わず追えます。

研究スライドの失敗から直し方を見る

ダメな例では数字と文字が離れていたり、結論の近くに無関係な説明が置かれていたりします。関係する数字・説明・結論をまとめ、まとまりごとに余白で区切ると、視線の順番が自然になります。

02

整列:写真・文字・余白を同じ基準に揃える

講義動画を見る【寝ながら見る】デザイン4大原則をCanvaで実装したら、投稿が変わった
整列の原則
整列で基準線を揃える例

整列は、写真・見出し・本文などを同じ基準線に揃える原則です。Canvaでは複数の要素を選択して整列ボタンやガイド線、グリッド線を使うと、目分量のずれを減らせます。

整列ボタンだけでは大きさは揃わない

整列ボタンは位置を揃える機能で、写真の大きさまでは揃いません。先にサイズを揃えてから整列すると、基準線と見た目のリズムが整います。

フォントの例:筑紫A丸ゴシックのように特徴のある書体を使うときも、先に基準線を決めてから整列すると、個性を保ったまま読みやすくできます。

03

反復:同じルールを繰り返して統一感を出す

講義動画を見る【寝ながら見る】デザイン4大原則をCanvaで実装したら、投稿が変わった
反復の原則
洋菓子メニューの反復例

反復は、デザインの中で同じルールを繰り返し、ページ全体に統一感をつくる原則です。毎回別の見た目にするより、同じルールを使う方が内容の比較にも集中できます。

洋菓子メニューで見る5つの反復

洋菓子メニューでは、写真サイズ・フォントサイズ・フォント種類・配置・余白が繰り返されています。この5要素を固定してから、商品名や写真だけを差し替えると、追加ページも同じシリーズに見えます。

04

対比:強調したい要素に大胆な差をつける

講義動画を見る【寝ながら見る】デザイン4大原則をCanvaで実装したら、投稿が変わった
対比の原則
対比で視線を集める例

対比は、色・大きさ・太さ・形などに差をつけ、重要な要素へ視線を集める原則です。すべてを目立たせると、結果的にどこも目立たなくなります。

対比を判断する2つの基準

まず強調したい要素を1つに絞ります。そのうえで、違いは誰が見ても分かるくらい大胆につけます。小さな差ではなく、最初に目に入ってほしい場所へ使うのがポイントです。

05

余白:引き算で情報を伝わりやすくする

講義動画を見るデザインは余白でこんなに変わる!初心者でもできる余白の使い方を解説
余白の原則
余白で読みやすくする例

余白は、何も置かない無駄な場所ではなく、情報を区切り、視線を休ませるための設計です。詰め込む前に、伝えたい順番と削れる要素を決めます。

意図しない余白に注意する

意図しない余白が生まれると、見る人は「この余白は何のためだろう」と考えてしまい、違和感に目を奪われます。要素を移動したら、余白が意図した区切りになっているか確認します。

前半の5原則をまとめて確認

近接・整列・反復・対比・余白のまとめ
前半実習の説明スライド

今日の実習:Canvaのテンプレートを自分の手で直す

作業タイマー押すと背面で計測します。画面はそのまま読み進められ、時間になったら上部に知らせます(スヌーズ/解除を選べます)。

デザイン4大原則(近接・整列・反復・対比)を知り、余白の取り方で見え方が変わることを体験します。実習問題で、実際にパーツを動かして直してみましょう。

  1. 下のボタンから実習問題を開きます。
  2. Canva左上のメニューから「ファイル」→「コピーを作成」をクリックします。
  3. 自分のフォルダにコピーを移動します(「ファイル」→「移動」→自分の名前を検索→フォルダを選び「移動」)。
  4. ファイル名を「自分の名前 実習問題」に変更します。

実習問題を開く

大切:必ず自分のフォルダにコピー/移動してから書き込みを始めてください。ページごとの黄色の付箋にヒントがあります。YouTubeのリンクを確認しながら、実際にパーツを移動してみましょう。

Tip:動かして「なんか違うな」と思ったら、Ctrl+Z(Macはcommand+Z)で元に戻せます。何度も動かして、見え方の違いを比べてみましょう。

先輩受講生からのおススメサイト共有

今日の内容が分かりやすくまとまった記事を、先輩受講生が教えてくれました。復習にどうぞ。

後半の見方

前半はCanva単体のAI相談、後半はChatGPTとCanvaの連携を順番に見ます。後半の実習は、パート2のChatGPT連携とマジックレイヤー編集に対応しています。

06

Canva単体でもAIに相談しながら作れる

講義動画を見る【完全解説】Canva AIだけで「ポスター」を爆速で作る方法
Canva AI単体でポスターを作る導入
Canva内蔵AIに相談できること

Canvaには、外部のAIを使わず、デザイン画面の中で相談できるAI機能があります。ポスターを841×1189mmで新規作成し、まずタイトル・日時・場所など決まっている情報を仮置きしてから、AIに相談します。

相談の具体例

イベント概要・日時・場所・ターゲットを伝えて「ポスターに必要な要素を教えて」と相談すると、タイトル・日時・イメージイラスト・キャッチコピーなどの構成案をもらえます。機能名は画面上の表記に合わせて「Canva AIに聞く」と呼びます。

07

構成・キャッチコピーをAIと壁打ちする

講義動画を見る【完全解説】Canva AIだけで「ポスター」を爆速で作る方法
AIに構成とキャッチコピーを相談する

決定事項を入力したら、構成を相談し、キャッチコピーの案も出してもらいます。AIの回答を完成品と考えるのではなく、壁打ち相手として使い、採用する案を人間が選びます。

3案から選んで貼り付ける

「キャッチコピーを3案出して」と依頼し、気に入った案をそのままコピー&ペーストします。最初から1案に決めつけず、目的とターゲットに合うかを見比べて選びます。

08

フォント・背景・テクスチャをAIに相談する

講義動画を見る【完全解説】Canva AIだけで「ポスター」を爆速で作る方法
フォントと背景をAIに相談する

「このイベントに合うフォントを3つ教えて」のように、用途と雰囲気を伝えて相談します。例として、提案された Potta One を実際に選び、全体へ反映します。背景は色味やリネン風・ドット・チェックなどのテクスチャを相談してから調整します。

一括変更で確認する

提案されたフォントを適用するときは「すべて変更」で全体に一括反映できます。ただし、見出しと本文の読みやすさが保たれているかは、人間が画面で確認します。

09

消しゴムで写真の不要な部分を整える

講義動画を見る【完全解説】Canva AIだけで「ポスター」を爆速で作る方法
マジックスタジオの消しゴムで整える

写真の見切れや不要な部分は、マジックスタジオの消しゴムで対象をなぞって整えます。背景との境目が不自然になっていないか、文字や主役の素材を消していないかを拡大して確認します。

小さく消して結果を見る

一度に大きく消すより、不要な部分を小さく分けて処理すると修正しやすくなります。結果が不自然なら、元に戻して範囲を狭めます。

10

まとめ:Canva単体で完了。次は外部AIと連携する

Canva単体AIのまとめ

Canva単体でも、構成・コピー・フォント・背景・仕上げをAIに相談しながらポスターを作れます。相談のたびに目的・ターゲット・雰囲気を伝え、提案を採用するかどうかは画面を見て判断します。次は、外部AIで作ったラフ案をCanvaで仕上げる流れを見ます。

11

AIとCanvaの役割分担:マジックレイヤーとは

講義動画を見る【超簡単なのに9割が知らない】Canva×ChatGPT のバナー作成が超便利!今すぐやって!【WEBデザイン初心者】
AIとCanvaの役割分担
マジックレイヤーの概要

AIで作った画像はラフ案として便利ですが、1枚の画像のままだと文字・人物・商品・背景を個別に直しにくいことがあります。マジックレイヤーへ変換すると、パーツごとに編集しやすくなります。

役割を分ける判断基準

AIはラフ案づくり、Canvaは仕上げの修正という役割で使い分けます。AIに全部を任せるのではなく、目的に合わせた最終判断を人間が行う流れです。

ここで使う機能:ChatGPTの画像生成機能でラフ案をつくり、Canva側で編集できる素材へつなげます。製品名を断定するのではなく、まず画像の目的と編集したい部分を言葉にしておくのがコツです。

12

ChatGPTとCanvaを連携する

講義動画を見る【超簡単なのに9割が知らない】Canva×ChatGPT のバナー作成が超便利!今すぐやって!【WEBデザイン初心者】
ChatGPTの設定からCanvaを連携する
Canva連携を確認する

ChatGPTの左下メニューから「設定」→「プラグイン」→「プラグインを探す」と進み、Canvaを検索して接続します。連携時はCanva側でもサインインと許可を行います。

接続後の確認

新規チャットの「+」→「さらに表示」を開き、Canvaのアイコンが出ていれば連携成功です。自分のCanvaアカウントで接続されているかも確認します。

13

マジックレイヤーへ変換する

講義動画を見る【超簡単なのに9割が知らない】Canva×ChatGPT のバナー作成が超便利!今すぐやって!【WEBデザイン初心者】
マジックレイヤーへ変換する手順

生成結果の「回答をコピーする」ボタンで画像をコピーし、新規メッセージへ貼り付けます。「+」からCanvaを選び、「Canvaのマジックレイヤーで使えるようにしてほしい」と追加指示を送ります。

変換前を保存する

変換前のオリジナル画像を先にダウンロードしておきます。変換後に「このデザインをカスタマイズ」で編集画面を開き、元画像と見比べられるようにします。

14

編集でプロっぽく仕上げる

講義動画を見る【超簡単なのに9割が知らない】Canva×ChatGPT のバナー作成が超便利!今すぐやって!【WEBデザイン初心者】
マジックレイヤーで各パーツを編集する
Canvaでバナーを仕上げる

変換後は人物・文字・商品・CTAボタンを個別に動かし、整列・反復・対比の原則を使って仕上げます。AIが作った案をそのまま使うのではなく、広告の目的と読みやすさに合わせて調整します。

編集の具体例

CTAボタンは彩度を上げて目立たせ、フォントは元の雰囲気に合わせて選び直します。商品を大きくし、人物を控えめにし、コピーを邪魔しない余白を残します。

15

注意点:変換前後を見比べる/Canva経由が便利な理由

講義動画を見る【超簡単なのに9割が知らない】Canva×ChatGPT のバナー作成が超便利!今すぐやって!【WEBデザイン初心者】
変換前後の比較
Canva経由で編集する利点

マジックレイヤー変換では、色・文字・グラデーションが元の案から変わることがあります。変換後だけを見て完成とせず、元の画像と見比べて誤字や色味、配置を修正します。

1枚絵を作り直すより部分修正する

ChatGPTへの再指示だけで直そうとすると、画像全体が変わって作り直しになる場合があります。Canva経由なら、文字・人物・商品など必要なパーツだけを直せるのが便利です。

後半のまとめ

ChatGPTとCanva連携のまとめ

AIはラフ案、Canvaは仕上げ。役割を分けて、変換前後を確認しながら編集します。

今日の実習:ChatGPTとCanvaを連携させてバナーを作る

作業タイマー押すと背面で計測します。画面はそのまま読み進められ、時間になったら上部に知らせます(スヌーズ/解除を選べます)。

ChatGPTとCanvaを連携させ、プロンプトから広告バナーのデザイン案をつくり、マジックレイヤーでパーツごとに編集できることを体験します。

事前準備:参考動画(07:03から)

  1. 先に、個人のCanvaにログインしているかを確認します。
  2. ChatGPT左下の「設定」→「プラグイン」→「プラグインを探す」→「Canva」を検索し、「+」ボタンでインストールして連携許可を出します。自分のメールアドレスのアカウントになっているか確認してください。
  3. 左サイドメニューの「画像」を選択し、新規チャットに下のプロンプトを入れます。
あなたはプロの広告デザイナーです。
40代女性向けのスキンケア化粧品広告バナーを作成してください。
目的は、初回購入・公式サイトへの遷移です。
ビジュアルメインではなく、コピー訴求が主役の広告にしてください。
サイズは1:1。
白〜淡いベージュを基調に、上品で清潔感のあるデザイン。
高級感はあるが、読みにくい装飾は入れないでください。
レイアウトは、左側に大きなコピー、右側に化粧品ボトルと女性の肌イメージを配置。
テキスト・商品・人物・CTAボタンがそれぞれ独立して編集しやすい構成にしてください。
入れるコピーは以下です。

メインコピー:「その乾燥、年齢のせいにしないで。」
サブコピー:「うるおいを与えて、朝までふっくらハリ肌へ」
オファー:「初回限定 1,980円」
補足:「乾燥小じわ・ハリ不足が気になる方へ」
CTAボタン:「公式サイトで詳しく見る」

デザイン条件:
・メインコピーを一番大きく
・「乾燥」「ハリ肌」「初回限定」を目立たせる
・CTAボタンは押せる見た目にする
・人物写真は控えめで、コピーを邪魔しない
・商品ボトルは右下に配置
・余白を広めに取り、読みやすさ重視
・AIっぽい過剰な光、キラキラ、立体アイコンは使わない
・実際のWeb広告バナーのように、CVを意識した構成にする
  1. 「回答をコピーする」ボタンで画像をコピーし、プロンプト入力欄に貼り付けます。「+」からCanvaを選び、下の追加指示を入力して送信します。
  2. 追加指示例:「Canvaのマジックレイヤーで使えるようにしてほしい」。許可を求められたら「常に許可」を選びます。
  3. 「このデザインをカスタマイズ」をクリックして編集用デザインを開きます。Canvaが別ウィンドウで開いたら成功です。

確認ポイント:パーツごとに分かれて動かせるのがマジックレイヤーの便利なところです。1枚の画像では難しい部分修正を試します。

おさらい

カードをクリックして裏面のポイントを確認し、今日の確認項目にチェックを入れましょう。

POINT 01
近接

関係のある情報を近づけ、まとまりをつくる。

POINT 02
整列

写真・文字・余白を同じ基準線に揃える。

POINT 03
反復

同じサイズ・種類・配置・余白のルールを繰り返す。

POINT 04
対比

強調したい1つの要素に、誰でも分かる大胆な差をつける。

POINT 05
余白

情報を区切り、視線を休ませるために設計する。

POINT 06
Canva AIに聞く

概要・日時・場所・ターゲットを伝え、壁打ち相手として使う。

POINT 07
役割分担

AIはラフ案、Canvaは仕上げ。人間が目的に合わせて判断する。

POINT 08
プラグイン連携

ChatGPTの設定からCanvaを接続し、新規チャットで確認する。

POINT 09
マジックレイヤー注意点

変換前後を見比べ、文字・色・配置の変化を直す。

今日の確認

Day 04へ

Day 04では、チラシを題材に情報整理・視線の流れ・デザインの言語化を学びます。前半教材を公開しました。