【自主制作】
担当
デザイン(UI設計・情報設計)
コーディング
Roku 様
Roku様 ポートフォリオ
https://foriio.com/sakubou
https://roku.v2008.coreserver.jp/wandeli/
ユーザー名
admin
パスワード
wandeli_lp
◾️ターゲット
35〜55歳の女性
愛犬を家族のように大切にしている方
食材や品質にこだわり、安心・安全なおやつを選びたい方
◾️目的
初回限定商品の購入促進
定期購入への申し込み獲得
◾️使用ツール
Figma
◾️制作ポイント
「愛犬も大切な家族だからこそ、安心して選べる商品であること」が伝わるよう、安心感・信頼感・上質さを軸にデザインしました。
全体はベージュやグリーンを基調としたナチュラルな配色と、余白を活かしたレイアウトで構成し、商品の品質やブランドのこだわりが自然と伝わる世界観を意識しています。高級感を演出しながらも、堅くなりすぎない親しみやすさを大切にしました。
ファーストビューでは、「無添加・国産素材100%」という商品の強みと「初回30%OFF」の訴求を整理し、安心感を与えながら購入への第一歩を後押しできる構成としています。
コンテンツは、「選ばれる理由」→「レビュー」→「ブランドストーリー」→「商品ラインナップ」の順に設計し、商品の特徴だけでなく、ブランドへの共感や信頼を積み重ねながら、自然に購入へ進める導線を意識しました。
また、デザインだけで完結させるのではなく、実装面も考慮した設計を意識しています。スマートフォンではCTAボタンを画面下部に固定表示し、購入したいと思ったタイミングでスムーズに申し込みへ進めるUIを想定。PCではCTAボタンや商品カードに控えめなホバーアニメーションを取り入れることで、ブランドイメージを損なわず、心地よい操作感を演出できるよう設計しました。
Figmaデータでは、カラー・フォントの管理やオートレイアウトを活用し、余白やレイアウトルールを整理。デザインの意図がコーディング時にも伝わるよう、実装しやすく引き継ぎやすいデータ設計しました。