1
/
5

新人デザイナー奮闘記!バナーのビフォーアフターで成長を実感

はじめまして!新人デザイナーの藤井です!

早いもので入社してから、あっという間に3ヶ月が経ちました。社会人になると時間があっという間に過ぎるというのは本当だったのだと実感している今日この頃です...でも毎日充実していて楽しいです😄!

以前の記事で「ビフォーアフターで一番大きな変化が見られるのは、バナーデザインだと思います。」と述べたので(以前の記事はこちら)今回は入社して1ヶ月も経っていない頃に自主制作で制作したバナーを自分でブラッシュアップしていきたいと思います💪!

まずはビフォーのバナーから

▼入社して1ヶ月経った頃に自主制作したバナーです

XDで試したい機能があり、それを使ってバナー制作しよう!くらいの気持ちで作りました。

当時私が意識していたのは、ターゲットが20代女性であること、そして文字組み(文字の大きさやメリハリ)に焦点を当てることでした。まずは欲張らず、その部分にしっかりと取り組みたかったので、線や円を用いたシンプルなデザインにし、装飾はあまり使わない方向で制作することを決めていました。色合いについても、ピンク系で統一感を持たせ、あまり大胆な変更を加えないようにしました。

今振り返ると、練習用の制作だったとはいえ、もう少し改善できたんじゃないかと気になる点がたくさんありますね…(笑)。当時は焦点を絞って一生懸命作っていたものの、改めて見ると色々な改善点が見えてきました…

今の私から見たこのバナーの改善点

①「全体的にボヤッとした印象」

正直、全体的にもっさりした感じで、全部が気に入らないです🙅!(笑)
細かい分析は後ほどしますが、シャドウの入れ方写真の選定など、気になる点が多いです。さらに、装飾に使った玉ボケもボケすぎて、全体がぼんやりした印象になってしまっています。

②「テキスト情報の不足」

架空の練習用だったとはいえ、もう少し具体的に内容を練り込むべきでした…
特に今回は医療脱毛の広告バナーなので、何回コースなのか1回あたりの料金を明記すべきだったと思います。さらに、バナーなのにCTAがないというのは大問題で、ユーザーに次の行動を促すための基本的な要素が欠けています。このような必要な情報の不足は、広告としては致命的なミスでした…。

③「テキストの優先順位が不明確」

はじめに「文字組みを意識して制作しました」と言いましたが、正直、その文字組みが微妙でした(笑)。当時はメリハリをつけたつもりでしたが、今こうして見るとまだまだ弱いですね。

さらに、テキストの優先順位以前に、内容自体が具体的に練れていなかったので、テキスト情報が不足していたことも要因だと思います。結局、何を伝えたいのかが曖昧になってしまいました。

④「フォントが混在」

明朝体とゴシック体が混ざってしまい、全体的に統一感が欠けた印象になりました。
特に気になるのは、値段部分のフォント選定です。値段のフォントと、その下にある「最短6ヶ月」の数字のフォントが異なっていて、これも気になるポイントです。さらに、字詰めが甘くて、全体のバランスが悪く見えてしまっています😫

⑤「画像の選定がやや残念

全体的にぼんやりとした印象になってしまい、女性の肌もマットな質感に見えました。

医療脱毛の広告なので肌が見えている女性の画像を選んだ点は良いと思いますが、今回はターゲット層も20代と若く、内容も美容系なのでツヤ感のある肌の方が魅力的だったかもしれません😣

また、背景に使用した玉ボケは良い雰囲気を出していましたが、細かなキラキラの要素は少し古い印象を与えるかもしれません。これに関しては好みにもよりますが、もう少しシンプルにする方が今のトレンドに合っているように感じました!

⑥「シャドウの入れ方が古っぽい」

シャドウが濃くしっかりしすぎているため、全体的に古っぽい印象になってしまいました。
もっと最近のデザインを意識して、うっすらとした柔らかなシャドウを取り入れるべきでした。


細かく洗い出して分析していくと、最初から気づくべきだった点が多く、少し恥ずかしいのですが、今の自分はその部分に気づけるようになったので、成長したと感じます。これからもそうありたいですね!

そのバナーをもとにブラッシュアップしたものがこちら!

当時の反省点を踏まえ、より良いデザインに仕上げました。

意識した点としては、ビフォーのテキスト情報や色合い、構成を保ちながら、全体をより良くする方向で制作しました。
アクセントカラーを加えたい気持ちもありましたが、今回はビフォーのバナーの意識を尊重し、同系色でまとめました。(ただし、少し変化をつけるために微調整は行いました!)

ブラッシュアップのポイント

①「ターゲット層に合わせたすっきりとした印象」

全体を通して、ターゲット層に合う雰囲気を作り出すために工夫を重ねました。
具体的には、「医療脱毛」の部分に線の装飾キラキラを加え、さらにリボン風の装飾を取り入れることで、シンプルさの中にも華やかさを演出しています!これらの工夫が、ターゲットに響くデザインを目指したポイントです。詳細は、以下でご紹介します💡!

②「テキスト情報の見直し」

ビフォーのバナーでの反省を活かし、このバナーがどんな人に、どんなタイミングで、何を伝えたいかをしっかり考えた上で、テキスト情報を追加・変更しました!大きな変更点としては以下の通りです。

  • 施術コースの回数を追加
  • 「期間限定」を「今だけ限定!感謝を込めた特別価格」に変更
  • 終わりの見える」を削除
  • CTAの追加

これらのテキストは、ターゲット層に響くように、言葉の響きやバランスを意識しながら配置し、言い回しを微調整しました。ターゲット層を常に念頭に置いて変更を行っています!

③「テキストの優先順位の見直し」

今回のバナーでは、最も伝えたい内容を見直し、テキストの優先順位をつけました。まず、医療脱毛の広告であることと価格が一目でわかるように配置しています。「最短6ヶ月で完了」や「全身+VIO込み」などの補足情報は、適度に目立たせつつも主張を抑えています。そして、「限定価格」が強調されるように、デザインに工夫を加えて少し目立つようにしています。

以前は「最短6ヶ月」「期間限定」「全身+VIO」をアイコン化し3つ横並びに配置してました。今回はテキストの内容を踏まえて、適切な場所に再配置しました。これにより、ユーザーが見やすく理解しやすいデザインに仕上げています!

④「フォントの見直し」

以前は場所によってフォントが異なる部分がありましたが、今回はフォントを統一し、全体的に見やすく仕上げました。これにより、デザイン全体に統一感が生まれ、よりスッキリとした印象を与えられるようになっています✨

⑤「画像を再度選定」

画像も改めて選び直しました!今回は、艶のある肌がしっかり見える女性を選び、より医療脱毛の広告らしい印象に仕上がったと思います。背景画像も、以前のはっきりしすぎたものから抽象的なものに変更し、情報量を整理することで、文字の視認性が向上しました。

さらに、全体に散りばめていた丸いキラキラした装飾も、円をぼかしつつ、モードをソフトライトに設定して玉ボケを作り、より自然な輝きを演出しました!

⑥「今っぽいシャドウに」

最近の広告デザインを意識し、さりげなくシャドウを入れることで、全体がぼやっとしないように工夫しました。シャドウの多用によってぼやけた印象にならないよう、繊細さを大事にしています。
細かい部分では、女性の上にうっすらとグラデーションの光を加え抜け感を演出。また、文字の視認性を高めるため、テキストの後ろにぼかした白い背景レイヤーを配置しています。さらに、CTAにはグラデーションをかけ、のっぺりした印象を避けています💡

さらにもうワンポイント!

実際にバナーとして使用する場合を想定し、カラーを変更したものがこちらです!特別価格であることがより伝わりやすくなり、ユーザーがその下に続くテキストを読んでくれる可能性も高まりそうです。

さらに、ゴールドをアクセントとして取り入れたことで、特別価格にふさわしいリッチな印象が加わり、バナー全体がより高級感を感じさせる仕上がりになりました✨

今回のバナーでは、以前よりも具体的に内容を詰めることで、優先順位が明確になり、デザインがしやすくなりました。ビフォーとアフターで印象が大きく変化し、かなり良くなったのではないでしょうか…!

もし今の自分が同じ情報でバナーを作るなら!

先ほどまではビフォーを元にカラーやテキスト内容を保ったバナーを作成しましたが、もうワンパターン、同じ情報で「今作るならこんな感じ!」という形で新しく作成しました😆!

ターゲット層は先ほどと同じく20代女性をイメージしています。画像も新たに選び直し、文字にグラデーションをかけたデザインにしました!こちらもかわいらしい雰囲気になっていて、個人的に気に入っています👍!

3ヶ月間で学んだこと

最初は、とにかく情報を詰め込んで見てもらいたいという気持ちで、結果的に見づらいバナーを作ってしまいました。しかし、情報整理の重要性や、デザインにおける引き算の大切さを学びました。
デザインは単に雰囲気が良ければ良いわけではなく、何のためにデザインするのかこのデザインで何を解決したいのかを常に考えながら制作する必要があると感じています。
これは今後もずっと意識していくつもりですが、まだまだ難しく、さらに頑張る余地があると思っています。

この3ヶ月間、先輩デザイナーである夏美さんからいただいたアドバイスを元に、細部まで気を配ることを意識しながらデザインに取り組んできました。
まだまだ未熟な部分はありますが、こうして振り返ってみると、以前よりも確実にデザインに対する解像度が高まり、成長できていると実感しています✨!

次なる目標

さらに、より高いクオリティのデザインを素早く提供できるように自分を磨いていきたいと思います。
この3ヶ月間でこれだけ多くのことに気づけたのなら、半年後や1年後にはもっと着眼点が鋭くなり、デザインスキルも大きく成長しているはずです!自分を信じて引き続き頑張っていきたいと思います!

次は、さらに成長した自分でデザインのブラッシュアップを行いたいですね!
第二弾、乞うご期待〜👋

あなたも一緒に成長しませんか?

「デザインを通して自分を成長させたい!」と思っている方、ぜひ私たちと一緒に働きませんか?
NOBUには、未経験でも私のように3ヶ月で大きく成長できる環境が整っています。
的確なフィードバックを受けながら、スキルを磨き、仲間と共に新しい挑戦に取り組んでいきましょう!✊


株式会社NOBU's job postings
4 Likes
4 Likes

Weekly ranking

Show other rankings
Invitation from 株式会社NOBU
If this story triggered your interest, have a chat with the team?