フリ女子 広告LP

Website
Figma WordPress(SWELL)

運営に携わっているフリ女子(メディア運営)の広告LPを制作いたしました。Figmaでのデザインカンプ作成からWordPressでの構築まで担当させていただきました。

 

目次

  1. 要件
  2. デザインのこだわり
  3. コーディングのこだわり

1. 要件

依頼内容

既存広告LPからCVRをさらに高めるためのリニューアル

目的

広告(主にGoogle・Meta・Xなど)経由のユーザーに対し、「今すぐ無料体験申込をしてもらう」ことが最大のゴール

ターゲット

以下の悩みをもつ20代後半〜30代前半の女性

  • 未経験だけどデザインに興味がある
  • 育休中・時短勤務中のキャリアに不安を感じている
  • お金をかけるのが不安なので、補助金で安く学びたい
  • おしゃれ・女性向けのスクールを探している

ターゲットのニーズ

  • 自分にもできるか不安
  • 稼げるスキルを身につけられるのか
  • 損せず始めたい
  • 比較して一番質がいい(でもお得なところ)を選びたい

訴求ポイント

  • 今なら補助金利用でお得に始められる
  • 人気スクールを一括比較
  • 無料体験レッスン申込で特典あり
  • 女性向け・未経験OK・サポート充実

トンマナ

  • 中性色(信頼感/安心感/女性らしさ)
  • 直線をベースに一部曲線でやわらかさを演出
  • 信頼感/綺麗/女性的/あたたかい/誠実/軽やか

2.デザインのこだわり

  • フリ女子のトンマナを踏襲した落ち着いたピンクと女性らしさも感じられる明るいグラデーションをメインカラーに選定しました。
  • CTAボタンのみ明るいピンクにすることで、目的であるCVRの改善を狙えるようなデザインに。
  • 全体的なデザインは競合サイトを徹底的に分析し考案。モバイル ファーストのデザインを意識し、スマホでは下部に固定ナビゲーションを設置。PCでは横に余白が生まれる分、サイドバーを設置。ユーザーストーリーを考え、UIをしっかり意識して制作しました。
  • 情報量が多い中でも、文字文字しすぎないようあしらいやイラストを各所に取り入れ読みやすさを心がけました。
  • ファーストビューは2パターン作成しABテストも実施。ディレクターと連携し、数値を分析しながら全体的なデザイン・構成改善も継続して行なっています。

3.コーディングのこだわり

  • SWELLのブロックエディターを活用しつつ、カスタムCSSやJavaScriptを用いることで、ブロックテーマに縛られない自由なデザイン・動きを表現することができました。
  • コードを使いつつも、ベースはテーマのブロックエディターを使用することで、文章の変更などはコーダー以外の担当者も簡単に編集できるよう、運用面も考えながら制作しました。