バナーのトレース練習とバナーデザインの言語化

こんにちは。どちらかというとプログラミングよりもデザインができるようになりたいSoyです。

というわけで、いくつかバナーのトレース(模写)を行いました。

トレースとは言いますが、見本の上に乗せて真似をするのではなく、見本を横に置いて同じように作る練習です。

見本はこちらのサイトで気に入ったものを選びました。

バナートレースのマイルール

  • フォントは似たものでOK
  • 画像は同じでなくてもOK

使用ソフト

Affinity Photo

サイズ 300 × 250

ロクシタンのギフト 45分

見本バナー
見本
練習バナー
練習

いいなと思った理由

  • ブランドを連想させる配色
  • 3色でシンプルさと清潔感がある
  • 背景が単色ではなく壁紙のような質感で温もりがある
  • ラッピングが別窓のような配置でおまけ感が伝わる
  • 別窓に線を入れることで見た目のもの寂しさを解消してる

作ってみて気づいたこと

最初、別窓のリボンの画像がカクカクしすぎでイケてないなぁと思っていた。でも別の丸い感じのリボン画像を使って自分で作成してみると、見本のリボンの方がクリアに見える。

壁紙っぽい背景画像は適当に探したけど、もう少し明るくすべきだった。

&や!が半角になっている。

愛知旅行 90分

見本バナー
見本
練習バナー
練習

いいなと思った理由

  • マツケンの写真がイカしてる
  • 文字数が多いけど、色の統一感とアクセントカラーの使い方でメリハリがついている
  • 和風の雰囲気を出す毛筆フォント

作ってみて気づいたこと

漢字・数字・括弧を使っている申込み期間のところで、文字の大きさと文字間などのバランスを良くするのがむずかしい。

文字は小さくても意外と読める。自分でオリジナルを作ると文字を大きくしがちかもしれないと思った。

サイズ160 × 600

すっぽん小町 120分

見本バナー
見本
練習バナー
練習

いいなと思った理由

  • 色合いが可愛いらしい
  • 実績が見やすい
  • 斜め、丸、四角など色々な要素がバランスよく並んでいる

作ってみて気づいたこと

光のバランスがとてもむずかしい。

そしてソフトをうまく使いこなせなくて時間だけが過ぎ、疲れてクオリティが下がってしまった。細部まで気を遣えなかったので、見本とは大違いになってしまった。

一番上の斜め文字列の斜め具合が絶妙。これが全体のきっちりした要素の配置をひと崩ししていてとてもバランスが良い。

この3つを練習してみて、全部小さな丸が入っていることに気づいた。

あと、意外と全体を1pxの線で囲んでいるバナーが多くある。それだけで、表示されるページのデザインに関わらず、バナーがクリックできるものであることが伝わる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)