バナーを作りながら考えていたこと
デザインを学ぶとき、「どう考えて作るか」の思考過程が知りたい人も多いと思います。
今回は、私が架空のバナーを作ってみて、作りながら何を考えたのかを書いてみます。
制作課題として、実在のサイトをもとに「もし似たサービスの広告バナーを作るとしたら？」というテーマで制作しました。
参考にさせてもらった実在のサービスはこちらです。
👉 withlab-baby.com
読み解く：「このサービスの核は何か？」
まずはサイト全体を読んで、“何のサービスなのか”を理解します。
そして、その中でも「このサービスのユニークな部分はどこ？」を探します。
「あれもできる」「これもできる」と全部を盛り込むと結局何も伝わらなくなります。
だから、「一番伝えたいこと（メインメッセージ）を一つに絞る」ことを大切にしています。
重複する言葉はできるだけ省いて、最もシンプルな、過不足のないメッセージに絞る。背骨になるような言葉を探す作業。
とはいえ、そんなに時間をかけるわけでもなく、5〜10分ほど“ふんわり”全体を把握する程度でやりました。
どんなビジュアルと言葉が必要か、なんとなくイメージできるくらい。
写真選びも「情報設計」の一部
次に、Adobe Stockで写真を探しました。
写真は“ただの装飾”ではなく、“情報”のひとつです。
「一目でこのサービスが伝わる写真ってなんだろう？」と考えながら探しました。
今回の条件はこんな感じ：
- 産前産後のママ（妊婦さんまたは赤ちゃんを抱っこ）
- 室内で軽い体操をしている
- トレーナーがついている
- できれば集団講座の雰囲気
これらを満たす写真を探すだけで、20〜30分経過…。
写真選びも、情報整理の延長です。
メイキング動画
ここからの作業画面を録画してみました（10倍速）。
この先の文章とあわせてご覧ください。
（こうしてみると、ほとんどの時間を写真加工に使っているのがわかる）
Photoshopでの試行錯誤：「伝わる絵作り」を模索
見つけた素材写真をもとに、生成機能で“妊婦さん”の要素を加えようとしたのですが…なかなかうまくいかない！
エラーが出たり、不自然になったり。
（もしかして“妊婦”がNGワードなのかも…？）
次に赤ちゃんを生成する方向に切り替えましたが、それも不自然に。
最終的に別の写真から赤ちゃんを切り抜いて合成しました。
私は生成AIはそれほど慣れていないので、上手く扱えていないのだろうと思います。
それでも「生成機能は使えない！」と決めつけず、試してダメなら撤退、くらいで使っています。
（なお、これは架空のお題なので大胆に生成や合成を試していますが、実務では生成も合成も慎重に扱います。このような人物生成や雑な合成を最終アウトプットに使うことはほとんどありません。撮影前の仮イメージ図のために使ったり、何かを消したり、背景を少し伸ばしたりといった用途がほとんどです。）
Illustratorでレイアウト開始：「見やすく伝える構成」
素材写真をIllustratorに配置して、レイアウトを考えます。
その前に、背景の観葉植物がちょっと邪魔だったので、人物と背景を分離。
こうしておけば人物の背後に色面を置くこともできて、レイアウトの幅が広がります。
これで写真の準備が整ったので、次は言葉を吟味します。
伝わる最小構成を作ってから、周辺情報を足していく
私がメインコピーに選んだのは
「産前産後の運動指導」
サービスの核がシンプルに伝わる言葉かなと思いました。
「ママ」「心と体のケア」「対面講座」などの要素もありますが、
「産前産後」という言葉の中に“ママ”は含まれ、写真から“対面レッスン”も伝わります。
そのため、重複する言葉は削りました。
補足的に「無理なく正しい」を足したのは、言葉のリズムと見た目のバランスを考えてのこと。
ビジュアル的なボリューム感を足しました。
サブコピーには
「心と体のケア」「悩み相談」「専門の指導士さんが見つかる！」
など、サービスの概要説明を補うワードを配置しました。
一番伝えたいことをしっかり大きく配置して、残りのスペースで他の言葉を足す、という順番がポイントかもしれません。
だからといって、読む順番が不自然にならないように、上から下へ自然に言葉がつながるように意識して作りました。
書体選び
書体はオールドタイプの角ゴシック体。
モダンすぎず、やわらかい印象になります。
テーマが「運動」なので、少しシャキッとした角ゴの雰囲気が健康的に見えるかなと思いました。
丸ゴシックも合うと思います。比較のために試作してみました。
同じレイアウトでも、フォントを変えると雰囲気が少し変わりますが、どちらもアリな感じもします。
仕上げとまとめ
最後にロゴ的な装飾を整えて完成。
制作時間はだいたい1時間半〜2時間。
今回は「まずサービスをストレートに伝える」ベーシックな案を作成しました。
2案目を作るなら、「運動指導というサービスを知らない人」に向けて、もっと“気づきを促す”タイプのバナーにしても面白そうです。
伝える工夫の積み重ね
デザインの勉強というと、レイアウトや色のセンスを磨くことと思われがちですが、今回のような作業では「情報を咀嚼する」「素材を整える」「言葉を取捨選択する」のような地味な作業が大部分だったりします。
いろいろ試したり、やっぱりやめたり。うまくいかない時間も含めて、必要な過程と言えるかも。
人によって、こういう頭の回路とか思考の巡らせ方は違うものかもしれませんが、なにかのヒントになれば嬉しいです。
