DETAIL
ミラクルデュウ オールインワンクリーム
期間限定40%OFFご購入ページ
化粧品のLPのセオリーを踏まえて作成した架空の基礎化粧品のデモサイトです。このページの目的は、サイト訪問者が「買い物カゴに入れる」ボタンを押して商品を購入するまでの導線作りです。
デザイン解説
ベースの白を基調としてコーポレートカラーの赤をポイントカラーに、高級感を感じるゴールドをメインカラーに取り入れています。バナーには商品の使用感に優しさを感じるピンクを配色、またお得感が一目で分かるように期間限定の金額を目立つように配置しています。
その下に商品説明、使用方法、購入者の声で商品をよく知ってもらい安心して購入できるようにしており、 各セクションの間に購入ボタンとページトップに戻るボタン、最後にもう一度バナーを提示しています。
技術スタック
シンプルな作りの1ページLPです。レスポンシブ対応：ブレイクポイント 1000px, 520px
- HTML,CSS,JavaScriptを使用
- 商品名とテキスト素材はChatGPTと自分で作成
- 画像素材はAdobe stock の無料素材、生成AIで作成したイラストを使用
- 画像加工にIllustrator、Photoshop、デザインカンプ作成にFigmaを使用