概要
本案件は、ハンドメイドアクセサリーブランド「sobolon」を想定したランディングページのコーディングを行ったものです。
Figmaで作成されたデザインカンプをもとに、HTML・CSS（Sass）・JavaScriptを用いて忠実に再現し、レスポンシブ対応およびアニメーション実装まで対応しました。
ブランドの世界観やストーリーを重視した構成となっており、単なる商品紹介にとどまらず、「共感」から購入へとつなげる導線設計を意識して制作しております。
ターゲット
・20代〜30代の女性
・ハンドメイドやナチュラルテイストが好きな層
・サステナブルや環境配慮に関心があるユーザー
・ファストファッションではなく、ストーリー性のある商品を求める層
・SNSを通じてブランドや価値観に共感し、購買行動につながるユーザー
課題
・ブランドの世界観や想いが十分に伝わらず、他のアクセサリーブランドとの差別化が難しい
・商品の魅力だけでなく「なぜこのブランドを選ぶのか」という理由が伝わりにくい
・ECサイトに遷移するまでの導線が弱く、購買行動につながりにくい
・感覚的なデザインに偏りすぎると、情報が整理されず離脱につながるリスクがある
解決
・ファーストビューでブランドのコンセプトや価値観を訴求し、第一印象で共感を獲得
・ストーリーや制作背景を段階的に伝える構成とし、ブランドへの理解と信頼を醸成
・商品紹介セクションでは視覚的な魅力と情報のバランスを意識し、購買意欲を高める設計
・CTA（購入・詳細確認）を適切に配置し、スムーズにECサイトへ遷移できる導線を設計
・アニメーションを活用し、ブランドの世界観を損なわずに自然な視線誘導を実現
制作範囲
・コーディング（HTML / CSS（Sass） / JavaScript）
・レスポンシブ対応（PC / スマートフォン）
・アニメーション実装
制作期間
・約2週間
※本LPはコーディング課題として制作したポートフォリオです。