デザインの基本は個性の邪魔にならない、広告画像の添削から読む

出典: 個性を出す前に、デザインの基本を磨け。

広告画像を作る時、個性を出したい気持ちと、見やすく伝えたい気持ちがぶつかることってありませんか？どちらを先に直すのか。この添削は、その問いに手を動かしながら向き合っていきます。

動画は、デザインソフトの画面を共有した公開ライブ添削です。サナータナ満明さんが、ハンバーガーの新商品キャンペーン用の広告画像を、その場で直していきます。

画面の左上には、公開ライブ添削のテロップがあります。左下には話し手の顔が映る丸い窓。共演者はいません。

冒頭の予告は、個性と基本的な技術の攻め合いがよく分かる回、というものでした。基本と個性のどちらが大事なのかに向き合い、悩みながら手を動かして、最後に1つの結論が出ると話します。

添削は情報設計の見直しから始まります。途中で個性の話を挟み、レイアウトの最終調整と振り返りで終わる流れです。

本題の前に、課題の芯も先に示されます。情報は3種類あるのに、見せ方が1種類しかない、という指摘です。人は目立つ側を先に見て、同じ情報だと直感で勘違いしてしまう、という話です。

添削の構えも、最初に語られます。広告画像を丸ごと変えて直すのは簡単。でも、この良さを生かしながら直したい、それがいつものスタンスだと言います。

サナータナ満明さん（動画 1:20〜）

皆さんの個性を、え、尊重しながらやりたいが、変えるとこは変えないといけないとも思ってるんやけどね。

元の広告画像には、デジタルギフトカード1,000円分が合計300名にその場で当たる、とあります。その横に、フォローとリポストで応募完了、と並んでいます。

直しは、課題その1の情報設計から。キャンペーン名、新発売の商品の特徴、1,000円分がもらえる条件、商品名。この4つが一目で入ってこない、という指摘です。

画面越しに、話し手自身も説明されてやっと理解できた、と打ち明けます。パッと見た瞬間に伝わるかどうか。そこが直しの出発点でした。

サナータナ満明さん（動画 2:14〜）

パッと見た時にそれがズドンと入ってこないといけないんよね。

正直、ここがいちばん大事なところだと私は見ています。先に決めたのは、個性を削ることではなく、伝わる形にすること。

広告画像の良さを残すと決めてから、伝わらない所に手を入れていく順番。めちゃはっきりしているんですよね。

で、ここで一つ、私の過去の記事を引かせてくださいね。

私の記事に、見本とカルピス原液をマージするのが最強、という一文があります。

その記事には、見本は型と到達水準を渡すもの、原液は私自身のストーリー、価値観、判断軸、在り方、Whyを渡すもの、と書いてあります。

私の記事より（見本は型と到達水準を渡し、原液は自分のWhyを渡すという整理を書いた魂磨きの記事・国盗り 肉のハナマサ 〜天下布肉〜で起きていたことの節）

見本とカルピス原液をマージするのが最強。

型は借りても、中心は薄めずに。動画の直しも、広告画像の良さを残したまま、伝え方の骨格だけを組み直していきます。私には、同じ向きの話に見えます！

基本は、個性の邪魔者ではありません。個性を相手に届けるための通り道なんです！

パッと見て伝わらなければ、込めた思いも相手に届かないままです。届かない思いは、ないのと同じ。

私なら、型は借りても、薄めてはいけない中心は手放しません。

見た目が同じなら、情報も同じに見えるという話。いやー、作る側に回ると、ここが見えにくいんですよね。画面の直しを順に見ていきますね。

課題その2は、見せ方（らしさ）です。広告画像の部品が、全部同じ見た目の枠にそろっていました。

サナータナ満明さん（動画 0:00〜）

3種類なのに見せ方が1種類しかないんですよね。これ本当は3種類あるべきなんですよ。

画面には赤い手書きで、情報×3、デザイン①と書き込まれます。素材（訴求）、行動、説明の3種類があるのに、見た目は1種類にまとまっている、という図です。

この書き込みが、ここからの直しの地図になります。3種類の情報に、3種類の見せ方を当てていく流れです。

添削はここで、見た目がそろえば中身までそろって見える、と指摘します。人は目立つ側を先に見て、同じ情報だと直感で勘違いしてしまうそうです。

何を言っているかより、どんな表情で言っているかの方が先に入ってくる、とサナータナ満明さんは続けます。

サナータナ満明さん（動画 3:14〜）

悪いこと言ってる人は悪い顔しとかなあかんし、いいこと言うてる人はいい顔しとかなあかんし、真面目なこと言うてる人は真面目な顔しとかなあかんわけですよ。

ここでは意外性のある組み合わせは要らない、とも言います。求めているのは、その情報にふさわしいらしさでした。

サナータナ満明さん（動画 3:31〜）

ギャップいらないんですよね。ここではね。その情報が持ってるらしさを作って欲しいっていうのが僕が気になってる2つ目ですね。

情報の中身と見た目の表情を合わせる、という考え方を、ここから具体的な部品の直しで見せていきます。

直しは、行動の枠から始まります。ピクセルアート風の枠は可愛いけれど、3種類に対して1個だけでは足りないという判断です。デジタルっぽさは、リポストとフォローの行動の所に寄せていきます。

元の枠は、SNSのフォローボタンには見えない形でした。そこで、実際にフォローする時のボタンの形へ寄せていきます。

画面では、その枠を黒の塗りにして、角丸も内側とそろえます。アクションエリアなんだな、と一目で分かる形になりました！

役目の違う情報には、違う顔を。この章の直しは、ここに尽きます！

でね、文章でも画像でも、情報を整理して伝えるという点は同じだと私は考えています。

役目の違うものが同じ顔で並んでいたら、どうなるでしょう？読む人は、どれが大事かを自分で探す羽目になります。

探させた時点で、伝える側の仕事が一つ抜けている状態。私はそう見ています。

その点、行動の枠だけを押せる形にした直しは、読む前に体の方が先に、ここを押すんだな、と分かる見せ方。

逆に言えば、全部を同じ枠に入れると、どれも押せそうで、どれも読めそうに見えてしまいます。見た目をそろえすぎることが、かえって迷わせる原因にもなるんです！

役目が違う情報は、顔も違う方が、読む人にやさしい。

1,000円分がもらえることと、この商品がおいしそうなこと。広告画像で先に目に入れたいのは、どちらだと思います？ここから添削は、情報の置き場所を大きく組み直していきます。

次は、商品の情報のまとまり。上のエリアの情報は商品にかかるので、商品のそばへ寄せます。ちょっと大工事、と言って、商品名を3行にし、商品説明は上へ移します。

新発売の文字と商品の説明、それにハンバーガー。この並びはセットの情報なので、同じ色にそろえます。似た情報だよ、と見せるための直しです。

1,000円の情報は、下に置いても上に置いても成り立つ。サナータナ満明さんが選んだのは、後半の下でした。1,000円がもらえるからフォローするより、この商品はおいしそうの方が、今回の人の気持ちとして強いから。

店としても、お金目当ての人より、中長期的にファンになってくれる人に来てほしい、と話します。

サナータナ満明さん（動画 8:14〜）

自分たちのコアとなる価値で欲求を刺激したいなので食欲で刺激していきましょう。

ただし、1,000円分が300名で30万円のキャンペーン、とも話します。クライアントの満足を考えて、ここは強めに置く判断。大きく見せたいけれど、やりすぎるとユーザーが置いてけぼりになる、とも言います。

第1段階の終わりは、デジタルっぽいカクカクをどこまで行かせるかで迷う場面。いったん試して、弱いな、とやり直します。大体の情報設計はできた、でひと区切りです。

続いて、下のエリアの左右。ギフトカード側とフォロー側に、関連性を持たせます。似たパーツは、黒塗りの背景に置きます。

サナータナ満明さん（動画 10:04〜）

冒頭でも言った同じようなことは同じような顔で言いたいですよね。

ギフトカードの枠は、赤からグレーへ試して、グレーに決定。合計300名は1行にまとめます。300名なら自分にもチャンスがありそう、と思わせたい、と話していました。

似た情報には、同じ顔。まとめて見てほしい情報を、見る人に知らせる合図なんですよね。

動画が挙げた理由は、お金目当ての人より、ファンに来てほしいから。私はここを、来てほしい人の姿から入口を決める話だと考えます。

正直、お金で人を集めると、集まるのはお金が目当ての人。来てほしい人に来てもらうなら、その商品の中身で欲しくなってもらう方がいいんです。

でね、話はここで終わりません！クライアントの満足も外さない置き方。1,000円分の情報は消さずに強めに置く、と動画も話していましたよね。

売る側にも買う側にも偏らない並べ方だと、私は見ています。

大きく見せたい気持ちと、ユーザーを置いてけぼりにしない線。この両方を一枚の中で持つって、簡単そうで難しいですよね？

安売りで引き寄せず、囲い込みもせず。その置き方の方が、結局は長く続きます！

広告画像を良くしたい時、つい何かを足したくなるもの。でも、この章で起きるのは逆です。やめる決断をしたら、画面はどう変わったのか？

視線の誘導では、最初のネオン風の細いラインのアイデアを生かします。ただ、整えるだけだと風景になってしまう。そこで、ちょっとだけ動きを入れ、バランスをあえて崩す、と話します。

サナータナ満明さん（動画 12:15〜）

整えるだけだと風景化しちゃうんで、ちょっとだけ動き、ま、バランスをあえて崩してるみたいなことかな。

ここで生かすネオン風の細いラインは、最初の広告画像にあったアイデアです。

画面では、白い1本の線が入ります。視線の流れに沿って、先に読んでほしいものを上へ上げていく直しです。読む順番を、目で追える形にしていきます。

合計300名の強調にも、太い飾りではなく細い線を使います。前の場面で、見る人にチャンスがありそうと思わせたい、と話していた数字です。

ただ、やりすぎると元の広告画像から変わりすぎる、とも言います。線を足すたびに、元の広告画像から離れすぎていないかを確かめる進め方です。

添削が引っかかったのは、湯気のように曲げた文字。曲げたい気持ちは分かるけれど、変形が入りすぎ、と話します。デジタルのカクカクしたトーンから、急にうねうねしたアナログっぽいトーンへ。トーンが2つ混ざっている、という指摘です。

引っかかったのは、文字の形そのものより、一枚の中に二つの空気が同居していたこと。直しの向きは、二つのトーンのどちらかにそろえることでした。

直しは、フォントを商品名の字に寄せるところから。色は赤にして、商品名の赤い大きな文字とそろえます。斜めにするのも、少しだけです。

そのうえで笑いながら、このデジタルっぽい処理はやめてもいいんじゃない？と言います。やめてみると、めっちゃまとまる、という場面ですｗ

外したのは、デジタルっぽい処理だけ。それで画面の空気が一つにそろった、という流れです。

続けて、なぜデジタルっぽい処理にしたかったのか、狙いがあるなら作った人に聞いてみたい、とも話します。

サナータナ満明さん（動画 15:40〜）

なんでこれデジタルっぽくしたかったんやろな。聞いてみたいなあ。

足して良くしたのではなく、やめたら良くなった、という場面！ここが見どころなんですよね。

いやー、やめる判断って、足す判断より出しにくいと私は思います。

私の過去の記事に、チラシやホームページを作り込んだとき、と書いた箇所があります。

私の記事より（作り込むとは、外向けに飾ることではなく、内側と外の形を一致させることだと書いた記事・反転したのは、チラシとホームページを作り込んだときの節）

装飾じゃなくて、一致させる作業だ。

引用にあるのは、飾りを足すことではなく、内側と外の形をそろえる向き。ちぐはぐを消していく作業です。トーンを一本にそろえて画面がまとまった場面と、同じ向きに並んで見えます。

同じなのは、足すより、そろえるという向き。違うのは、作り手が何を狙っていたかは分からない、とサナータナ満明さんが話しているところです。

自分の内側でも、ほかの人の画面でも、見る所は同じ。ちぐはぐな所がどこにあるか、です。

ちぐはぐは、足して隠さず、そろえて消していきます！

個性を出して、と言われて、そのまま出したらどうなるでしょう？伝わる形になるのか、ちぐはぐになるのか。添削の最後は、この問いにまっすぐ向き合う時間でした！

サナータナ満明さんは、個性を活かして仕事をしてほしいと思っている、と話します。ただ、個性を出せと言って出したら、とんでもなくなる時もあるそうです。今回はそこまでひどくはないけれど、難しい、という話です。

途中では、ごめん、だいぶ変わっちゃったね、と謝る場面があります。そのうえで、怒っている言い方に聞こえるけれど、怒ってはいない、と笑います。ｗ

話は、個性とは何かへ進みます。主張するものではなく、出てきてしまうもの。歪みに近いもの、と画面の前で語ります。

サナータナ満明さん（動画 17:30〜）

めちゃくちゃ基本的なこととかいろんなことを叩き込んでね、叩き込んでフォーマットの中にバシッとやってそんな個性消えるやんってとこまでやった後にでも出てきてしまう癖みたいなんが本当の個性なんちゃうかなって思うわ。

指導くらいで消える個性は、そもそも個性ではない、とも言います。広告画像を作った人へは、発想は悪くない、使えるところは別の場でも使える、無駄ではない、と伝えていました。

最後の調整では、全体が窮屈なので、周りの白を広げます。新発売を見出し風に反転させる案は、個性はどこへ行ったのかと自分で突っ込んで、取りやめ。偶然よく見えた反転の抜きは、黒を斜めに切り込む形に生かしました。

振り返りで挙がった課題は2つ。似た情報が離れていたこと。似ていない情報が同じ見た目だったこと。この矛盾を作りたいなら、むしろアートに任せる、と話します。

サナータナ満明さん（動画 20:51〜）

その矛盾を作りたいっていうのはむしろアートとかそういったとこに任せましょう。

直しは、順当なものを作って最適化していく、という考え方でまとまります。最初のステップは、情報に対する最適化。商品名と新発売と商品説明はセットで見せ、行動の枠は近くに置きます。湯気のように曲げた文字は、悪くないけれど浮くので、通常に戻しました。

結論は、活かすところは活かす、というもの。ただ商業デザインでは、見やすさと、正確に伝わるかが求められる、と添えます。独特の装飾も、細い線も、ネオン風のギミックも、とても良いという評価。そのうえで、ベースには情報設計の骨格をしっかり組む、という話でした。

サナータナ満明さん（動画 22:49〜）

やっぱし見やすさであったり、え、正確に伝わるかね、そういったとこが商業デザインにおいては求められますよね。

個性は足すものではなく、基本のあとに残るもの。動画は、悩みながら手を動かした末に、そこへ着地しました。

いやー、添削の最後にこの言葉が置かれると、それまでの直しが一本の線でつながって見えるんです！

そうそう、動画を真似て動画を作った記事でも、私はこう書いています。

私の記事より（動画を真似て実践し、自分の血肉にする大事さを書いたゲーム風AI動画の記事・一行の依頼で36秒。ただし推測には気づく必要があるの節）

だから、どんどん真似て、自分で実践してみるのが大事です。

この一文の向きは、型を身につけた先に、自分のものが出てくる、というもの。動画の言う、基本を叩き込んだあとに残る癖と、同じ方向に並びます。型をなぞる時間は遠回りではなく、自分のものが出てくるまでの道のりなんですよね。

でね、ここで見たいのは順番です。先に型、そのあとに自分。逆にはならないんですよね！

正直、個性を最初から出そうとするより、基本を磨く方が結局は早いと私は考えています。最初から個性を探すと、何を残して何を直すかの基準が持てません。基本は、個性が濁らずに出てくるための通り道。

自分の広告画像で、出そうとしている個性と、出てきてしまう癖、どちらが前に出ていますか？

私なら、個性は付け足さず、基本を磨いた先で思い出します。

動画は、情報が一目で入らない元の広告画像から始まり、3種類の情報の見せ方、似た情報は同じ顔に、食欲を先に、トーンの混ざりを経て、基本のあとに残る個性へと進みました。

持ち帰ったのは、情報が一目で入るかを先に見ること。役目の違う情報は違う顔に、似た情報は同じ顔にして、トーンは一つにそろえます。足すより、やめてまとめます。個性は、基本のあとに残るもの。

ここまでの章で引いた私の記事の言葉と、動画の添削は、同じ方向を向いているように読めます！

次に広告画像を作る時、出したい個性より先に、その情報が一目で入るかを確かめてみませんか？