概要
本案件は、表参道エリアに出店するカフェを想定し、新規顧客獲得を目的としたランディングページ（LP）のコーディングを行ったものです。
Figmaで作成されたデザインカンプをもとに、HTML・CSS・JavaScriptを用いて忠実に再現し、レスポンシブ対応および簡易的なアニメーション実装も行いました。
また、ユーザーの視線誘導や回遊性を意識し、直感的に店舗の魅力が伝わる構成を意識して制作しました。
ターゲット
・20代〜30代の女性
・表参道エリアでカフェ利用を検討している層
・SNS映えや雰囲気を重視するユーザー
・友人とのカフェ利用やデート利用を想定した層
課題
・競合の多い表参道エリアにおいて、店舗の特徴が埋もれてしまう
・SNSや口コミに依存しており、Webからの直接流入が弱い
・店舗の雰囲気や魅力がWeb上で十分に伝わっていない
・来店動機につながる情報（メニュー・空間・導線）が整理されていない
解決
・ファーストビューで店舗の世界観を直感的に伝えるビジュアル設計
・コンセプト → メニュー → 空間 → アクセスの順で情報を整理し、来店までの導線を明確化
・スクロール時のフェードインアニメーションにより、視認性と没入感を向上
・CTA（来店・アクセス）を適切に配置し、ユーザーの行動を促進
・モバイルファーストで設計し、スマートフォンからの閲覧でもストレスなく情報取得できるよう最適化