LP制作（架空案件）

制作目的

20〜30代の女性をターゲットにした美容液のLPを制作。集客と予約導線の強化を目的としました。

デザイン意図

安心感と清潔感を意識し、余白を広く取り、柔らかい配色で構成しました。

使用スキル

• Photoshop
• Illustrator
• HTML
• CSS

工夫した点

ファーストビューで訴求が伝わるようにキャッチコピーを大きく配置し、CTAボタンを目立たせることで、ユーザーの行動を促す設計にしました。

CTAボタン改善：変更点と狙い

1. 01ボタンの配色コントラストを反転

   Before背景と同系色の水色で、ボタンが視界に沈んでいる。

   After補色にあたる暖色コーラルに変更。「うるおい（寒色）×グロウ＝輝き（暖色）」というブランド名の世界観も表現しつつ、視線を強制的に集める。

2. 02期限・数量の限定性をボタン直上に明示

   Beforeいつでも買える印象で、後回しにされやすい。

   After「先着300名｜本日23:59まで」を追加し、今このタイミングで押す理由を作る。

3. 03返金保証の文言をボタン直下に近接配置

   Before保証文言が価格の下・ボタンから離れた位置にあり、購入直前の不安払拭に機能していない。

   Afterクリック直前の視線上、ボタンの真下に配置し、心理的ハードルが最も高い瞬間に安心材料を出す。

4. 04押せる質感と動きでアフォーダンスを強化

   Before影が浅く平面的で、タップ可能に見えにくい。

   After立体的な影とゆるやかな発光の脈動、矢印の微小な揺れを追加し、視認性と「押せる感」を両立（prefers-reduced-motion 環境では静止）。

5. 05数字のスキャン性を優先した文字階層

   Before / After「70%OFF」を最大サイズに保ちつつ、Afterはボタン全体の面積を拡大してタップ領域を確保。0.5秒で割引率が伝わる階層は維持しつつ、視認性と操作性を底上げ。

デザイン改善提案：潤い×瑞々しさの強化

「潤い」の世界観を土台に、20〜30代が反応しやすい"瑞々しさ＝生きた輝き"を上乗せする方向での改善提案です。

1. 01カラー：ブルー一色→ブルー×ミントのマイクログラデーション

   Before単色に近い水色で、清涼感はあるが冷たく静的な印象。

   Afterブルーをベースに彩度の高いミントグリーン〜アクアを差し込み、水滴のハイライトに淡いパールホワイトの煌めきを追加。「冷たい水」から「弾ける潤い」へ温度感を転換する。

2. 02ビジュアル：水滴・リップル（波紋）モチーフの追加

   Beforeボトルと背景の水面のみで、潤いが静止して見える。

   Afterボトル周辺に微細な水滴の飛沫、背景に波紋の同心円を薄く重ね、光の反射（ボケ）を強調。潤いが今まさにはじけている瞬間を切り取る。

3. 03コピー：情緒訴求ワードの追加

   Beforeメインコピー「触れる度、潤い満ちる肌へ」が単発で終わっている。

   Afterサブコピーに「はじける、瑞々しさ。」「一滴で、変わる透明感。」を追加し、潤い→瑞々しさのストーリーを補強。20〜30代は機能訴求より情緒訴求への反応率が高い。

4. 04レイアウト：セクション間に「水の流れ」のリズム

   Beforeセクション間がフラットな区切りで、視覚的な連続性がない。

   After波形（wave）のSVG区切り線を挿入し、スクロールに応じて水滴が緩やかに滴るパララックスを加え、ページ全体に水が流れるような視覚的リズムを持たせる。

5. 05マイクロインタラクション：呼吸するようなツヤ感

   Before静止画のみで、潤いの質感が伝わりにくい。

   Afterボタンやセクション見出しのホバー時に水面の波紋アニメーションを追加し、ボトル画像にはごく緩やかな拡大縮小（呼吸）のループを追加（prefers-reduced-motion 環境では静止）。

※01・02・04・05はヒーロー画像自体の差し替えを伴うため、新規ビジュアル素材の制作が別途必要です。03のコピーは現状の構成のまま反映可能です。