【課題】ドライスムージーのサブスクサービスLP [AI/PS/STUDIO]

◽使用ツール・制作時間

• デザインカンプ：Illustrator／Photoshop
• サイト実装：Studio

（制作時間：PC・SPデザインカンプ作成〜実装まで約1ヶ月）

◽案件情報

ドライスムージーのサブスクサービスLP制作

＜商品概要＞
水や牛乳で溶かして飲む粉末状のドライスムージーが定期的に届くサブスクリプション型サービス。忙しい人でも手軽に栄養を摂れるヘルシーで美味しいスムージーで毎日の生活に彩りと楽しさを届ける。

◽制作要件

｜目的　

• 商品の魅力を知ってもらい、サブスクサービス（定期販売）に申し込んでもらう。
• 栄養補給が手軽に美味しくできる他、さまざまな味が定期的に届く楽しさを訴求したい。

｜ターゲット

• 女性 25〜35歳
• 健康でいたいが時間が取れずになかなか良い食生活ができていない
• 野菜やフルーツがなかなか摂取できていなくて栄養の偏りが気になる
• 丁寧が暮らしがしたいとは心で思っている

＜ペルソナ＞

• 豊田 楓（32）
• 仕事が充実しいている、朝が苦手でゆっくり朝ごはんを食べる時間はない
• 週末はピラティスに通っていて体型維持には気を遣っている
• 料理は得意な方ではない、でも健康的には気遣い添加物系はなるべく避けている
  　∟値段も上がっていて野菜やフルーツも買うのを躊躇してしまいがち
• ミーハーでおしゃれや流行りが好き
• 美容が好きでお肌に良いものを取り入れたいと思っている
• めんどくさいことが苦手、都度注文する手続きごとなどは苦手

｜依頼内容

• 制作物：PC・SPデザインカンプ
• webサイトへの実装

｜トンマナ

• 配布ロゴを使用（色のみ変更可）
• 配布のワイヤーフレームを元に制作（内容は適宜変更可）
  ※その他要件指定なし

◽制作物

実装サイト：https://violet992190.studio.site/

◽工夫した点

＜デザイン観点＞

• 商品特徴である「彩りと楽しさ」というテーマをサイト全体を通して感じていただけるよう、食材の色合いを活かした賑やかなカラー、各所へアニメーションを付けるなど、工夫して作成しました。
• 鮮やかにすることで色味が散らばったり、見ることに疲れを感じさせないように、各要素はFVで使用した赤・オレンジ・緑で統一し、その他はホワイト・グレーでまとまりが出るよう配色。サイト上で繰り返し使用されるアイコンやあしらいは線を使ったものを使用して余白感を出せるようにしてます。
• FVのみでは味が３種類しかない・ボトル商品と思われかねないというデメリットがあるため、グラスに入ったスムージー画像や、商品パッケージを並べることで、”フレーバーが豊富なドライスムージーである”ことを認知いただけるようデメリットのカバーを行いました。

＜情報設計観点＞

• SPサイトは縦の構造を意識して組み方を考えました。また、スクロールが長く続くと離脱懸念があると考え、”見せたい情報”は直接配置、さらに深掘りしたいユーザーは自らスライドして見ていただけるようカルーセルで整理することで、情報のメリハリを行っています。
• PCサイトにおいてはSPで作ったデザインはそのまま配置を変えるのみとし、世界観を変えないよう作り込みを意識しました。また、各要素の表示幅で動きを付け、画面が広くなってものっぺりとした重たい印象にならないよう工夫しながら作成いたしました。
• 重要なCTAボタンにおいては、FV・サイト末尾とサイト内部であえて記載を変えることで、前者で取りこぼしたユーザーを違う表現で呼びかけできるような訴求ポイントを取り入れています。