2年前の私を添削する、バナー摸写のレポート

こんにちは、ずずです。
今回は、TAKAMIさんのバナー摸写を2年越しにリベンジしてみました

使用ツール:Illustrator、Photoshop
※摸写で使用した画像は、ネット上で似たような構図の写真を拝借してきたものです。問題がありましたら速やかに削除します。

初めに摸写作業をしたのは2022年の冬で、Adobeソフトを触り始めて半年ちょっと経った頃です。
あれからAdobeソフトの扱いにも慣れたし、デザインも齧り始めました。そこで、「2年経った今ならもっと元のバナーに近い画像が作れるのでは…！？」という淡い期待のもと、リベンジに挑みます。

元画像。透明感が摸写と全然違う。

こちらが2年前に私が3日ほど頑張って作った摸写画像

今回4時間で修正した画像。文字間隔が広がって、可読性が改善されました。

修正ポイント1

ロゴマークの画像処理

Photoshopの自動選択ツールでロゴの線を選択し、白色に塗りつぶし。
PNG-24形式で保存し、背景を透過。（2年前の分はPNG-8で保存し、なぜか背景が透過されず…）

修正ポイント2
色味の微調整

2年前は目視で色を決めていましたが、今回はスポイトツールを使用しました。
それでも赤みが強く感じたので目視で微調整していますが、やっぱりまだ紫っぽい。
あんまり良いモニターを使用していないのが歯痒い。

修正ポイント3
「毛穴ケア～」のキャッチコピーの微調整

一番苦労しました。作り込みが丁寧すぎる…！

まず段落ごとに文字間隔が違います。なんなら、単語ごとに間隔が使い分けられてます。
2段落目は、読ませたい文字（常識、3）を大きくすることで、字が詰まっているのに読みやすくなるように計算されています。
このバランス感覚が難しい…！日を分けて4時間近く格闘しましたが、降参です。

そもそもこのバナー、文字の扱いが上手い。ほぼタイポグラフィのみで視線誘導を完成させている。（と、思います。）
「毛穴ケア、1,000円、商品画像」が真っ先に目に入るように計算されていて、そこに派手な色や柄を用いた強調は一切使われていません。使用色は淡い青系と白色のみ、写真も1枚だけ。
高級かつシンプル（個人の感想です）という、TAKAMIさんのブランドイメージを見事に演出されています。
非常に勉強になりました。

まとめ

キャッチコピーの文字のバランス感が絶妙で、今の私にはまだ再現できませんでした。
2年前の私は「文字ばっかりじゃん、簡単に摸写できるー」なんて舐めた態度を取っていましたが、全くそんなことなかったです。
書体も、恐らく小塚明朝だろうと踏んで制作しましたが、きちんと精査すればまだまだ発見がありそうです。
あぁ、プロフェッショナルってこういう技術のことを指すんだろうなぁ。いつか絶対身に着けたいです。

2年前に作ったバナー摸写はまだまだありますので、これに懲りずにどんどんレポートしていきます。いつも読んでくださって、ありがとうございます。