【実案件】SHE株式会社様 ポップアップバナー(Before_After)

OVERVIEW

⚫︎使用ツール : Figma ⚫︎制作年月:2025年2月 ⚫︎制作時間 : 約5時間 ⚫︎デザインイメージ:ポップ、わかりやすい、対比構造

YEAR 2025

【概要】

SHE株式会社様が運営するオンラインスクール『SHElikes』のLP内にて、離脱前に表示されるポップアップバナーを制作いたしました。


【目的】

・LP離脱前の閲覧者に対して公式LINEへ誘導し、友だち登録者数を増やしたい。


【掲載場所】

・下記公式LP離脱時

🔗配信先LPはこちら


【ターゲット】

・20-30代の働く女性

∟特に働き方やキャリアにモヤモヤや悩みをお持ちの方

・SHElikesのことを認知済みで、LPを見るレベルに関心をお持ちの方

∟※動線イメージ

SNS等の広告→公式LP→「本ポップアップバナー」→LINE


【制作要件】

・メインコピーを一番目立たせる形での制作を希望


【完成制作物】


【工夫したポイント】

・カラーは遷移先LPの2色を用いて、LPとの統一感を図りました。ブルーとオレンジを対比構造する形で使用しています。

・メインコピーの下に2股の矢印を入れて、「分かれ道」というワードを視覚的に表現しました。カラーも強く入れているため、要件のメインコピーを目立たせるという部分にもマッチしていると考えています。

・アフター内のテキストやお写真をビフォーのものより大きく確保しています。アフターがより良いものになっていることを直感的にわかりやすくすると同時に、インパクトを出して目に留まりやすくしました。

・最下部のボタン部分は、立体感を出すために背景を透過にすることをご提案させていただきました。指のアイコンも使用することで、閲覧者のクリックを誘引しています。

また、本バナーが表示される際は背景となるLP部分が黒っぽくなるため、ボタン部分がLPと馴染まないよう明るいグリーンを使用しました。