【自主制作LP】食材宅配サービス「Colorlthy」


【制作時間約17人日
【制作範囲】企画(競合調査/ポジショニングマップ・デスクリサーチ・ペルソナ・コンセプト設計)・ラフ案・デザインカンプ・コーディング(レスポンシブ)

https://assignment-lp--colorlthy.com/

※現在はサイトの公開を中止しています。


制作過程

まずは、競合調査をもとにポジショニングマップを作り複数の比較サイトの項目より、KBFとして寄与度が高そうなものからポジショニングマップを作成しました。

🏢競合調査・ポジショニングマップ


次に、デスクリサーチ結果をもとにペルソナをプライマリーとセカンダリーに分けて制作し、それぞれの趣味嗜好や利用目的・利用シーン、好みデザインの傾向を分析しました。

👤ペルソナ


制作したペルソナをもとに、ムードボードを制作しそれに合わせた参考デザインをピックアップしてまとめました。

🎨ムードボード/参考デザイン


次の段階では、参考デザインと主にプライマリーペルソナの訴求ポイントをもとにラフ案を制作しました。

LP内の動線としては、下記を想定しました。

1.まずは無添加や無農薬野菜、オーガニック食材を宅配サービスで販売していることに加えて、キャンペーンの価格を知ってもらう。
2.満足度が高いことを知ってもらい、安心してもらう。
3.キャンペーン特典で、旬のおすすめ食材が3品プレゼントされることを理解してもらう。
4.お試しセットの内容が種類豊富かつ、新鮮でいいものが含まれているを確認してもらう。
5.実際のお客様の声を見て、私も注文してみたいと感じてもらう。
6.期間限定でプレゼント特典があること、こだわりの食材をお得にセットで購入できることに魅力を感じてもらい、会員登録後にお試しセットを購入してもらうこと。

✏️ラフ

最後にXDにてデザインカンプを制作しました。

XDデザインカンプへ >

最後に実装ではVScodeの拡張機能「SFTP」の接続を行い、実装と公開をスムーズに行う環境を作りました。レスポンシブデザインを実装し、CSSは命名規則のBEMを使って設計しました。

イメージ:


参考:ロゴ制作

ロゴ制作を簡単に行いましたので、制作資料を載せます。


WEBSITE