Facebook 【HerTech架空案件】Webデザインオンラインスクールバナー
Logo

【HerTech架空案件】Webデザインオンラインスクールバナー

クレジット
Avatar
WEBデザイナー
【HerTech架空案件】Webデザインオンラインスクールバナー-1
シェア
制作ノート
制作について

⚫︎ビジュアルイメージ

“子育てとキャリアを両立したい女性”に向けて、 やわらかく親しみのあるビジュアルで設計。メインビジュアルには、子どもを抱えながらPCに向かう女性の写真を使用し、 「在宅で学ぶ・働く」という未来像を直感的に伝えた。また、ピンクを基調にした柔らかなデザインにすることで、 Webデザイン未経験の女性でも安心感を持てる雰囲気を意識した。

⚫︎カラー

女性らしさや安心感を与えるピンクをベースにしながら、 ブラウン系の文字色を使用することで、甘くなりすぎず上品な印象に調整。また、「5回」の数字部分には濃いピンクを使用し、 キャンペーン情報が一目で伝わるよう視線誘導を行った。

⚫︎タイポグラフィー

視認性と親しみやすさを重視し、 丸みのあるゴシック体を使用。メインコピーはジャンプ率を大きく取り、 Instagram上でも瞬時に目を引くよう設計した。

⚫︎情報設計

Instagramでの閲覧を想定し、 「3秒で内容が伝わる構成」を意識して制作。情報は以下の順で整理した。

①共感

「子供との時間も、収入も。どっちも欲しいあなたへ。」

まずユーザーの悩みや理想に共感するコピーを配置。

②解決策

  • 未経験からのWebデザイン
  • 在宅でスキル習得

ユーザーが求める働き方を簡潔に提示。

③キャンペーン訴求

「3回→5回に増量」

数字を大きく見せることで、 視覚的にお得感が伝わるよう設計。

④行動喚起

「無料セミナーに参加する」

最下部にCTAを配置し、 ユーザーが迷わず行動できる導線にした。

【工夫したポイント】

子どもを抱えながらPCに向かう女性の写真を使用することで、 「子育て」と「在宅で働きたい」というターゲットの理想像を直感的に伝えられるよう工夫した。

メインコピーは改行を工夫し、 「子供との時間も、収入も。」を大きく見せることで、 ユーザーが一瞬で内容を理解できるよう設計した。また、コピーの背面にピンクの帯を敷くことで、 写真の上でも視認性を確保している。

ユーザーが自然な流れで情報を読めるよう、共感コピー→ 学べる内容→キャンペーン→CTAの順で視線誘導を行った。特に「5回」の数字は大きくジャンプ率を上げ、 キャンペーンの魅力が一目で伝わるようにした。

Instagram閲覧時の視線の流れを意識し、 最下部に「無料セミナーに参加する」を配置。ユーザーが情報を読み終えた後、自然に行動へ移れる導線設計を行った。

ターゲットの「キャリアへの不安」と「子どもとの時間を大切にしたい」という感情に寄り添いながら、安心感と未来への期待感を持てるデザインを目指しました。

シェア
foriio

あなたのforiioを無料で作成

fori.io/
foriio

あなたのforiioを無料で作成

fori.io/