Cuyaron

メニュー

Canvaで作ったバナーがしっくりこない。色を変える前に見る4つのこと

最終更新: PR

Canvaのテンプレートを選んで、写真と文字を差し替える。ここまではよかったのに、完成したバナーを見ると、どこかまとまらない。

色を変え、フォントを変え、飾りを足してみる。気づけば候補が増えただけで、どれを使うか決められなくなる。

そんなときは、一度、色選びの手を止めてみてください。見直すのは「この画像で何を伝えるか」「どの順番で読むか」「文字の大きさ」「余白」の4つ。直す理由がはっきりすると、次に触る場所も決めやすくなります。

まず「誰に、何をしてほしいか」を一文にする

たとえば、初心者向けの写真講座を告知するバナー。講座名、開催日、参加費、講師の経歴、申込方法を全部大きく載せると、見る人には何を先に読めばいいのか伝わりません。

編集を始める前に、画像の外へ目的を書きます。

スマホで料理を撮るのが苦手な人に、写真講座の詳細を見てもらう。

この一文があるなら、最初に目に入る言葉は「春の特別講座」より、「料理の写真を、もっとおいしそうに」のほうが目的に合いそうです。開催日と参加費は、その内容に興味を持った人が次に探せる位置へ。講師の詳しい経歴は、リンク先で伝えることもできます。

この例の下書きは、大きな見出しを「料理の写真を、もっとおいしそうに」、その下を料理写真、下部を開催日・参加費のまとまりにします。「写真講座の詳細を見る」という案内を添えれば、見た後にどこへ進むかも決まります。

縦4コマの漫画。告知バナーへ文字と飾りを詰め込んだ人が、誰に何を伝えるかを書き出す。見出しと開催情報に優先順位をつけ、最後にスマホ表示で読みやすさを確かめる。

色を触る前に、読む順番を決める

料理写真、講座名、日付、申込案内。全部を同じ強さにすると、視線の行き先が増えます。

先ほどの講座なら、まず見出し、次に料理写真、最後に開催情報という順番を考えてみます。見出しを大きくし、開催情報をひとまとまりにする。写真が主役の構成なら、逆に写真から見出しへつなぐ形でも構いません。

画面を小さく表示して、最初に目に入る言葉が、伝えたい内容と合っているかを確かめます。

「限定」「初心者歓迎」「申込受付中」の囲みがいくつもあるなら、まず一つ外して比較する。変更前のページを複製して残しておくと、どちらが読みやすいか見比べられます。

文字サイズと余白は、セットで見直す

見出しを大きくした結果、行が増えて窮屈になることがあります。そのまま全体を縮めると、今度は開催情報まで読みにくくなってしまいます。

そこで、文字の大きさを戻す前に、見出しの言葉を短くできないか考えます。「スマートフォンで撮影する料理写真の基本講座」なら、「スマホで料理をおいしく撮る」と置き換える案もあります。

余白は情報をまとめたり、区切ったりするために使います。日付と時間は近づけ、そのまとまりと見出しの間には距離を置く。同じ情報どうしを寄せることで、読む人が区切りを見つけやすくなります。

最後はスマホで、見出し、開催日、参加費を順に読めるか確認します。小さくて読めない文字があれば、言葉を短くするか、置く場所を広げます。

見本の「なぜ」を言葉にする練習もできる

自分のバナーを直そうとしても、よい見本との違いを言葉にできないことがあります。そこで、参考デザインを分析する練習に使う選択肢が、まとさんのデザイン分析GPTsです。

ChatGPT上で参考画像を読み込み、色・フォント・余白・配置や、誰に何を伝えるデザインなのかを整理するツールとして販売されています。販売ページで案内されている出力は、デザイン解説シート、コンセプト設計シート、デザインサンプル案の3種類。参考画像を1枚アップロードし、「学習をはじめる」と送る使い方です。自作画像の分析にも使えると説明されています。

購入部分には、具体的な使い方や、分析結果を自分のデザインへ生かす方法が含まれていると案内されています。見本のどの配置や文字サイズを自分のバナーに生かせるか、理由を考えながら学びたい人向けです。

利用先はChatGPTです。OpenAIの案内では、無料プランでもGPTsと画像アップロードを使えますが、それぞれに利用上限があります。Canvaで編集する前に、ChatGPTへ見本を渡して直す理由を言葉にしたい人に合う使い方です。販売価格は2026年10月2日時点で4,980円(税込)です。

次の1枚は、一か所だけ直して比べる

写真講座の例なら、最初に見出しが読めるかをスマホで見ます。日付の囲みばかり目に入るなら、その囲みを弱めた版を一つ作って、元の版と並べます。次に日付と参加費まで読めるかをたどれば、見出しを目立たせた結果、必要な情報が埋もれていないかも分かります。

見本との違いを言葉にするところで止まるなら、デザイン分析GPTsの解説シートが学ぶ対象になります。色・余白・配置の分析から、自分のバナーで試す変更を一つ選ぶ使い方です。手元の一枚をどこから直すか決めたい人は、販売ページで解説と分析の進め方を見られます。

参考資料