制作したもの

Works

website

アゼライン酸美容液
LP（ランディングページ）

https://norm.ito-nanako.site/

制作期間

コンテンツ設計：3日

デザイン：7日

コーディング：10日

使用ツール / 言語

Photoshop / Figma / VSCode
HTML / CSS / jQuery

概要

アゼライン酸美容液のLP（ランディングページ）新規作成

最終目的

成分重視でスキンケアを選ぶ人に商品の魅力を伝える
商品を購入してもらう

現状課題

ECサイトのみの展開のためブランドの認知度が低い
商品の特徴やどんな悩みを持つ人に向いているのかが十分に伝わっていない

改善策

商品の詳細・成分・効果を伝える
→根拠を持たせた具体的な内容にする
悩みが解決できそうだと感じられる構成にする
→ブランドの世界観や想いよりも「実際の効果」をアピールする

ターゲット

肌トラブルがあり、すでに様々なスキンケアを使用しているが効果実感がない方
自ら成分を調べて「アゼライン酸」に興味を持っている方

上記を踏まえて、サイトのコンセプトを次のように決定しました

コンセプト

商品の魅力と悩み解決を訴求する
肌トラブルを沈静する効果を期待させる

コンセプトに沿って、最終目的を達成するために次のような設計にしました

コンテンツ設計

ターゲットはブランドのファンではなく「成分」「効果」を求めて当サイトに訪れる場合がほとんどだと予想されるため、ブランドの世界観や想いよりも「商品の詳細・成分・効果」を見せる構成にしました。「共感」→「解決」の流れをメインとし、原因を提示して「その原因にアプローチできる商品である」ことを伝えられるよう意識しました。ブランドについてのセクションは下部に設けました。

詳細を見る

FV（ファーストビュー）

商品画像とともに、商品の特徴である「アゼライン酸13%配合」という情報を添え、一目でどういった製品なのかを伝えています

「共感」→「解決」

「悩み」の具体例を挙げることで自分事と認識していただきます
「原因」をしっかりと提示することで、その後の「成分」の説得力を増加させています

その他

PRODUCTでは全サイズ展開を並べ、ターゲットの意識を「この商品を購入するか」→「どのサイズを購入するか」に持っていく狙いです
REVIEWは先に提示した各悩みにフォーカスした内容をピックアップしています
FAQで疑問を解消し、直後のCTAで購入につなげる導線を設置しています

意匠設計

グリーンを基調とした配色にし、肌トラブルが沈静していくようなイメージを与えています。この商品の主力成分である「アゼライン酸」については、配色やジャンプ率を変えることで強調しています。強い色やフォント、不安をあおる言葉は使用せず「ターゲットが納得して選択できる」ような雰囲気を意識しました。PCでは左右の背景に水面のようなゆらぎを入れ、美容液の使用感を無意識に感じられるようにしています。