野菜配達サービス スグ食べのLPサイト
- クライアント
- 友人
- URL
- PDF(PCサイズ)
- 担当範囲
- 情報設計、デザイン、実装
- 制作期間
- 1ヶ月（ワイヤーフレーム：2日間、デザイン：1週間、コーディング：2週間）
- 使用ツール
- illustrator、Adobe XD、Dreamweaver
- 使用言語
- HTML／CSS、JavaScript
スクールの中間課題で制作しました。食にこだわりのある家庭をターゲットにしたサービスを想定し、安価というよりは高級寄りのデザインを目指しました。全体的に写真を多くし、特に生産者の顔がよく見えるようにしました。ユーザーに知ってほしい情報は強調し、目立つよう意識しました。
- 目的
- リスティング広告のために新たに訴求力の高いLPを作り、コンバージョンを増加させる
- ターゲット
- まだ成長期の子どもがいるママ。働き盛りの夫にも、まだまだ元気でいてほしいと思っている妻。そこそこ食にお金をかけられる（普通のスーパーの1.5~2倍程度）。食にこだわる自分が好き。「ていねいな暮らし」が好き。
- クライアントの要望
- ナチュラルで明るく、清潔感がある感じ。LPなので、ある程度リッチなデザイン（ディティールに凝ったもの）にしたい。 でもギラギラした昔ながらのLPにはしてほしくない。お試しセットのボタンが目立つようにしてほしい。ターゲットユーザーはスマホもよくみるので、スマホでも使いやすくしたい。
- コンセプト
- 新鮮さ・信頼感・安心感・健やかさ・ヘルシー
- 情報設計
- LP上部にコンバージョンエリアを置く
ファーストビュー直下に「スグ食べとは？」のセクションと生産者のスライドを載せることで、サービスの大体の雰囲気を掴んでもらいます。
この時点で興味を持ってもらえたユーザーに購入の検討をしてもらいたいため、すぐ下にコンバージョンエリアを配置しました。
ただ、ここで購入を決める方はごく少数だと考えられることと、微妙だと思った方が離脱することが考えられるため、すぐ目に入る位置にスグ食べが選ばれる理由を記載しました。
その後は、実際の購入者の声やサービスの利点でもある品質保証など、購入の後押しになる情報を続けて配置しています。要所にコンバージョンエリアを入れることで、すぐに購入できる設計になるよう心がけました。
- デザイン
- みずみずしいシズル感のある写真をメインビジュアルに。
新鮮なイメージを持ってもらうために、見ただけでみずみずしさが感じられる写真を選びました。盛りだくさんの野菜は色数も多いため、パッと見で目を引く効果もあると考えました。
フォントは游明朝体、アクセントカラーは渋いグリーン（#3e4f20）を使用しました。ファーストビューのキャッチコピーは高級感のあるデザインに調和しやすい縦書きにしました。
強調したい部分はデザインを変える。コンバージョンエリアのタイトルはリボンのような装飾にし、通常のセクションとは差別化。背景にはクラフト紙のテクスチャを使用し、大幅にデザインを変えました。また、ユーザーに特に見てほしい「スグ食べが選ばれる3つの理由」はタイトルに帯をひくことで差別化しています。
※LPの全体像は以下のpdfでご確認いただけます。
[PCサイズ]PDFはこちら - 今後の展開
- –
- ふりかえり
- 制作のスケジュールは1ヶ月を予定していたため、（スクールの在籍期間内に終わらせる必要がある点やその時点での自分のスキルも考慮し、）期間内に終わるよう削ぎ落とした内容もありました。実際のクライアントワークでは、より予算感やスケジュールの関係でできることが限られてくるため、スピード感を持って的確な情報設計・デザインをしていかなければならないと学びました。