概要
本案件は、家具・家電の購入促進を目的としたランディングページ（LP）のコーディングを行ったものです。
Figmaで作成されたデザインカンプをもとに、HTML・CSS・JavaScriptを用いて忠実に再現し、レスポンシブ対応およびアニメーション実装も行いました。
また、ECサイトに近い購買導線を意識し、ユーザーがスムーズに商品理解から購入行動へ進めるよう、情報設計と導線設計を重視して制作しています。
ターゲット
・20代〜40代の男女
・新生活や引っ越しをきっかけに家具・家電を検討している層
・デザイン性と機能性の両方を重視するユーザー
・オンラインでの購入に慣れている層
課題
・商品の特徴や使用イメージが伝わりにくい
・価格や機能の比較が難しく、購入判断に時間がかかる
・オンライン購入に対する不安（品質・使い勝手など）がある
・購入ボタンまでの導線が弱く、離脱につながる
解決
・ファーストビューで商品の魅力と利用シーンを訴求し、興味を喚起
・機能や特徴を分かりやすく整理し、比較しやすい構成に設計
・ビジュアル（画像）を活用し、使用イメージを具体化
・CTA（購入・問い合わせ）を適切な位置に配置し、行動を促進
・スクロールアニメーションにより視認性を高め、最後まで読了される構成とした
制作範囲
・コーディング（HTML / CSS / JavaScript）
・レスポンシブ対応（PC / スマートフォン）
・アニメーション実装
制作期間
・約３週間
※本LPはコーディング課題として制作したポートフォリオです。