Works美容液LPデザイン
※架空の商品です
概要
CodeCamp（プログラミングスクール）開催の10周年記念デザインアワードに応募した作品です。
「株式会社CC Cosme」という架空の企業が販売する新商品のビタミン美容液のLPを作成するというお題でした。
課題要件
- ロゴとワイヤーフレームの支給があり、そちらに基づいてデザインをおこなう
- ターゲット層は美容に敏感な大学生、社会人（10代後半から30代）
- 新商品のビタミン美容液の販売開始に伴うLPを提案する
- コンバージョンが「購入」のため美容液の購入を検討しているユーザを惹きつける魅力的なサイトデザインが必要
制作について
ユーザーに購入を促すLPのため、「安心・信頼感を与えられるLPであること」を第一に考えつつ、以下に留意してデザインを進めました。
- 一目見てどんな商品かわかるように商品画像・商品名・説明タイトルをFVに大きく掲載する
- 背景色にアースカラーであるベージュを使用し安心感を促す
- 商品詳細のセクションは全体的にフォントサイズを大きくして読みやすくなるようにする
- セクションの区切りの部分にイメージ画像を置くことで、自然に次のセクションに視線を促せるようなデザインにする
フィードバックを受けて改善した点
以下のフィードバックをいただきました。
- ファーストビューのテキストについて、この商品は新商品のため、商品名を目立たせるより効果・効能を説明するテキストを目立たせた方が良い
- 「こんなお悩みはありませんか？」のセクションについて、「悩み」を自分事にする要素を入れた方がより良い
- よくあるご質問のセクションの「Q」の文字が少し目立ちすぎている
各フィードバックについて以下のように調整しました。
FVの「7日間でシミ、ニキビ跡集中ケア」の文字を大きくし、色をオレンジに変更し、目立たせる。また、オレンジの彩度を上げてより目立つようにする。
お悩みのセクションがスッキリしすぎていたため、イメージ写真を追加してよりお悩み感が伝わるようにする。
よくある質問の「Q」の文字色を黒から黄・白に変更し、悪目立ちしないようにする。
制作環境
Adobe Photoshop・Adobe Illustrator
約4日