← WORKS

Web Design / Landing Page

Cleansing SerumLanding Page

  • Beauty / Skincare
  • Landing Page Design
  • Mobile

濃厚美容液クレンジングの
スマートフォン向けLPデザイン。

LP 商品訴求セクション「そんなあなたにおすすめ 濃厚美容液クレンジング」
LP「おすすめの理由 3つのポイント」セクション
LP ファーストビュー「洗うたび うるおい肌へ」

Mobile LP — 375px

02

PROJECT OVERVIEW

Overview

濃厚美容液クレンジングのスマートフォン向けLPデザイン。
「洗浄力」だけではなく「美容液のようなうるおい」を感じてもらえるよう、 商品ビジュアルと使用イメージを組み合わせ、 商品の特徴から購入まで直感的に理解できる構成を目指しました。

Type
Landing Page
Category
Beauty / Skincare
Device
Mobile
Role
Design

03

DESIGN CONCEPT

Cleanse × Moisture

  1. 01

    MOISTURE

    水しぶき・気泡・透明なボトルを重ね、クレンジングでありながら美容液のようなうるおいを視覚化。

  2. 02

    PREMIUM

    見出しには明朝体、背景にはゴールドの光を使い、通販LPでも安っぽく見えない品のある印象に。

  3. 03

    CONVERSION

    価格・割引率・CTAは世界観より視認性を優先。迷わず購入へ進めるコントラストを確保。

Color Palette

  • White#FFFFFF
  • Cream#F7E8C0
  • Gold#B8992E
  • Orange#F7AC41

LP内の背景・バッジ・光の表現から抽出。白とクリームをベースに、ゴールドとオレンジで温かみと華やかさを加えています。購入CTAのみ、補色に近いグリーン（#20BD04）を使用。

04

FIRST VIEW

LP ファーストビュー「洗うたび うるおい肌へ」

Key Message

洗うたび
うるおい肌へ

「洗うたび うるおい肌へ」というベネフィットを最も大きく訴求。 商品・使用イメージ・実績・特徴をファーストビュー内に集約し、 商品価値を短時間で理解できる構成にしました。

  1. Benefitキャッチコピーを最上部・最大サイズで配置
  2. Visualうるおった肌のモデル写真で使用後をイメージ
  3. Productボトルと水しぶきで「美容液」を印象づける
  4. Trust実績バッジで信頼感を補強
  5. FeatureW洗顔不要・天然由来成分100%・濡れた手でOK

05

USER JOURNEY

悩みを自覚 → 商品を提示 → 購入理由を説明。ユーザーの気持ちの動きに合わせて、セクションの順番とトーンを設計しています。

  1. 01PROBLEM

    LP「最近こんなことで悩んでいませんか？」セクション

    悩みを自覚

    「最近こんなことで悩んでいませんか？」

    乾燥・毛穴・シワをチェックリストで提示し、「もしかしたら…」で原因に気づかせる。あえてモノクロにトーンを落とし、次のセクションとの対比をつくりました。

  2. 02SOLUTION

    LP「そんなあなたにおすすめ 濃厚美容液クレンジング」セクション

    商品を提示

    「そんなあなたにおすすめ
    濃厚美容液クレンジング」

    悩みの直後に明るいオレンジへ切り替え、商品を解決策として大きく提示。8つの特徴を円形のアイコンにまとめ、一目で把握できるようにしました。

  3. 03BENEFIT

    LP「おすすめの理由 3つのポイント」セクション

    購入理由を説明

    「おすすめの理由
    3つのポイント」

    「なぜ良いのか」を3つに絞って具体化。写真とテキストを左右交互に配置し、説明が続いても読み進められるリズムをつくりました。

→ CONVERSION 各セクションの直後に購入CTAを配置

06

DESIGN DETAILS

「おすすめの理由 3つのポイント」。ポイントごとに写真とテキストの位置を入れ替え、縦に長いスマートフォンの画面でも単調にならないよう構成しています。

LP「おすすめの理由 3つのポイント」セクション全体
3 Points — Section
  1. Point 01 毛穴の汚れをしっかりOFF

    01

    毛穴汚れへのアプローチ

    洗顔するモデル写真を右に大きく配置し、使用シーンと「落とす」効果を直感的に結びつける。

  2. Point 02 美容成分配合でうるおいを保てる

    02

    美容成分・うるおい

    気泡を含んだ透明なテクスチャー写真を左に配置。「うるおう」を質感として伝える。

  3. Point 03 柑橘の香りでオフの時もリラックス

    03

    柑橘の香り・使用体験

    ボトルとオレンジを組み合わせ、香りという見えない魅力をビジュアルで表現。

07

CONVERSION DESIGN

LP 価格・購入CTA（通常価格2,980円、特別価格1,490円、50%OFF、初回限定、特別価格で購入する）

Information Priority

  1. 1

    通常価格 2,980円

    取り消し線で「本来の価格」を示し、比較の基準をつくる

  2. 2

    初回限定 1,490円 50%OFF

    最も大きな文字サイズで価格差を強調。割引率はバッジで補足

  3. 3

    特別価格で購入する

    ボックス幅いっぱいのボタンで、次の行動をひとつに絞る

価格差・割引率・初回限定の情報に優先順位をつけ、 CTAには周囲とコントラストのあるグリーンを採用。 購入アクションが直感的に認識できるよう設計しました。

CTA Placement

×3

  1. FVファーストビュー直後 — 興味が高いうちに
  2. SOLUTION商品訴求の直後 — 特徴を理解したタイミングで
  3. BENEFIT3つのポイントの後 — 納得した最後のひと押しに

同じ価格ボックスを3回繰り返し、どこで購入を決めても迷わずアクションできるようにしています。

08

FULL PAGE DESIGN

スマートフォンLP全体 — FVから最後のCTAまで。

濃厚美容液クレンジング スマートフォンLP 全体
Full Page — Mobile