概要
ハンドメイドアクセサリーを製造する会社の自社商品を紹介するランディングページのサンプルサイトです（仮想案件）。
担当はコーディングで、Figma
の支給デザインから忠実に実装しました。ハンドメイド商品ならではの繊細さや温かみを、動きを使って魅力的に見せる構成にしています。
制作会社さまの視点では、商品の世界観を崩さず、リッチな演出で魅力を引き立てる
LP 実装力を確認いただける一例です。
課題
ハンドメイドのアクセサリーは、写真だけでは手仕事の繊細さや温かみが伝わりきりません。
商品の世界観を保ちながら、動きで魅力を引き立てること。そして、その演出をスマートフォンでも崩さず動かすことが、想定した課題でした。
解決アプローチ
演出への配慮： スクロールやホバーに対応したアニメーションを実装し、商品をリッチに見せる演出を加えました。スクロールに合わせて要素が現れたり、商品にカーソルを合わせると反応したりと、手仕事の魅力を動きで引き立てています。
デザイン一体感への配慮： コンタクトフォームにオリジナルの CSS を適用し、ブランドの世界観と一体感のある問い合わせ導線を実現しました。既製の見た目に頼らず、商品の繊細な印象を最後まで保っています。
デザイン再現性への配慮： デザインカンプに忠実なコーディングと、レスポンシブでも崩れない適切な画像配置を徹底しました。動きを加えつつも、どの画面サイズでも整った表示を保っています。
工夫したポイント / 想定効果
スクロールやホバーのアニメーションで、写真だけでは伝わらない商品の魅力を引き立てた点が工夫です。
フォームを既製の見た目に頼らずオリジナル
CSS でブランドの世界観に合わせたことで、問い合わせの意欲を高められることが期待できます。