今回は、AIが作ったバナーの参考案をもとに、Figmaで伝わりやすいバナーに作り直す練習をします。
最近は、AIが広く使われるようになりました。実際のお仕事でも、クライアントから「AIで作った画像」を参考案として渡されることが増えています。
一方で、AIで作った画像をそのままSNSや広告に使うと、「AIで生成」といったラベルが付くことがあります。ラベルが付いたバナーは、見る人によい印象を持たれにくいとも言われています。
また、AIの案は飾りや文字が多くなりがちです。みなさんも、街中でAIが作ったポスターやチラシを見かけたことはありませんか？言葉の言い回しや書体、イラストや写真の雰囲気が独特なので「あ、これはAIで作られているんだな」と気づけるんじゃないかと思います。
ですので、AIの案はあくまで参考に、この先私たち人間は「誰に・何を伝えるか」を考えて整えていく力が求められるようになります。
この演習のテーマは「引き算」です。必要な情報は残したまま、見た目の過剰な部分を減らしていきましょう。
この演習の概要
- 完成物：バナー1枚（幅1200px × 高さ600px）
- 使うツール：Figma
- 書き出し：PNG・1倍（1x）
- 提出物：完成画像＋「何を減らしたか・なぜ減らしたか」の説明（1〜2文）
💡この課題の「こもれびカフェ」は架空の店舗です。
参考画像・切り抜いた素材・完成したバナーは、練習用です。実際のお仕事では使わないようにしましょう。
STEP 1：依頼と仕様を確認する
まずは、クライアントからの依頼文を読みます。
オーナー平日の朝に、近くで働く方に来店してほしいです。
落ち着いた雰囲気で、セット内容・価格・提供時間が伝わるバナーをお願いします。
依頼の内容を表にまとめると、次のとおりです。
| 項目 | 仕様 |
|---|---|
| 掲載先 | 架空の店舗サイト |
| 見てもらう人 | 近くで働く人 |
| 目的 | メニューの詳細を見てもらう |
| サイズ | 幅1200px × 高さ600px（2:1） |
| 雰囲気 | 落ち着いた印象 |
必ず残す6つの文言
次の6つは、整理した後もすべてバナーに入れてください。
- こもれびカフェ
- モーニングセット
- トースト＋コーヒー
- 680円（税込）
- 平日 8:00〜11:00
- メニューを見る
STEP 2：AIの参考案を見比べる
同じ依頼から、AIで作った参考案が2つあります。どちらも完成形の正解ではありません。
どちらの案も、ラベル・囲み・飾り・補助コピーが多めに入っています。
オーナー最初は僕がチャッピーに頼んで作ってもらったんですが、逆になんだかわかりづらくなってしまいました。もう少し内容がスッキリしているバナーにして欲しいです。
次の2点を意識しながら、見比べてみましょう。
- 「落ち着いた雰囲気」「スッキリした内容」という依頼に合っているか
- セット内容・価格・提供時間を読み取りやすいか
参考案A：クリーム × コーヒーブラウン
左に文字、右に写真風の商品を置いた案です。リボン・丸いバッジ・囲み・飾り罫が入っています。
参考案B：くすんだグリーン × アイボリー
左に写真風の商品、右に文字のまとまりを置いた案です。ラベル・囲み・丸いバッジ・葉の飾りが入っています。
💡参考案にある次の文字は、雰囲気を添えるための補助コピーです。減らしたり、省いたりして構いません。バランスが取れるならばあえて残してもよいでしょう。
- 朝のひと息に
- ゆっくり始める朝時間
- MORNING MENU
ただし、STEP 1の「必ず残す6つの文言」は消さないでください。
STEP 3：Figmaでバナーを作り直す
参考案を見ながら、Figmaで新しくバナーを作ります。
- 新しいフレームを作り、横幅(W)1200・高さ(H)600にする
- 参考にするバナーをAかBのどちらかを選び、残したい配置や写真の使い方を決める
- 6つの文言を文字で入力し、写真・背景・ボタンを配置する
💡参考画像のサイズは1774×887pxです。課題のフレームは1200×600pxで作ってください。
作るときのポイント
- 見出しや価格は、Figmaのテキストで入力します
- 「メニューを見る」は、図形と文字を組み合わせてボタンの形にします
- 参考案の細かい飾りを、すべて再現する必要はありません
写真素材について
写真素材は、下の3枚から好きなものを選んで使えます。文字を置く場所に合わせて選びましょう。
保存のしかたは、次のとおりです。
- 使いたい写真をクリックして、大きく表示する
- 大きく表示された写真の上で右クリックする
- 「名前を付けて画像を保存」を選ぶ
💡写真のサイズは1536×1024pxです。Figmaでは、フレームに合わせて大きさや位置を調整しましょう。
ここにない写真素材を、自分で探して使っても構いません。
⚠️自分で素材を探すときは、商用利用ができるフリー素材を選びましょう。
サイトごとに利用規約があります。クレジット表記が必要かどうかなども、使う前に確認しておきましょう。
もちろん、AIの参考画像をそのまま貼っただけでは、完成になりません。あくまで参考資料とし、文字・写真・余白などを自分で作り配置し直しましょう。
STEP 4：引き算して、伝わりやすくする
バナーができたら、画面を縮小して全体を見てみましょう。広告はFigmaのデザイン画面で見るよりも小さい状態で、ユーザーに配信されます。
小さめのサイズで見た時にセット内容・価格・提供時間が、パッと読み取れるか、自分なりに確認してみましょう。
ここで減らすのは、6つの文言ではなく、見た目の過剰な部分です。次の4つを手がかりに見直してください。
| 見直すところ | 確認すること |
|---|---|
| 飾り | ラベル・囲み・飾り罫・バッジが、情報を読みにくくしていないか |
| 色の数 | 色の数をしぼると、落ち着いた印象になるか |
| フォントの種類 | 文字の形や、文字のまとまりをそろえると読みやすくなるか |
| 目立たせる場所 | 全部を大きくせず、先に伝えたい情報を選べているか |
必要に応じて、飾りを減らしたり、文字の大きさや余白を整えたりしましょう。
減らす数に決まりはありません。正解も1つではありません。
余裕があれば：AIに意見を聞いてみる
画像を送れるAIが使える方は、作ったバナーと次の文を送ってみましょう。
AIに送る文
このバナーは、近くで働く人にカフェのモーニングセットを知ってもらうためのものです。読みやすさと情報の目立たせ方について、良い点を1つ、改善点を2つ、短く教えてください。
- AIの提案を、全部取り入れる必要はありません。目的に合うものだけ選びましょう
- 画像を送れるAIが使えない場合は、この手順は飛ばして構いません
- 実在のお客様や利用者さんの情報は、AIに送らないでください
STEP 5：完成画像と、減らした理由を提出する
フレームをPNG・1倍（1x）で書き出します。
次の2つを、Discordの自分のチャンネルに送ってください。
- 完成したバナーの画像
- 何を減らしたか・なぜ減らしたか（1〜2文）
説明文の例
Aの補助コピーと丸いバッジを減らしました。セット内容・価格・提供時間を先に読めるようにしました。
Tips：SNSで表示される「AIラベル」について
冒頭でふれたとおり、SNSでは投稿した画像にAIに関するラベルが付くことがあります。
ラベルが表示されるかどうかは、投稿先のルールや、画像に含まれる情報などによって変わります。
手作業で修正しても、ラベルが表示されなくなるとは限りません。
そのため、この演習のゴールはラベルを外すことではありません。AIの案をもとに、目的に合うデザインに整えることがゴールです。