LP制作(スムージーサブスクWebサイトデザイン)
架空クライアント様からの依頼という設定で、渡されたPC版ワイヤーフレームを元に、PC版とSP版のデザインカンプを制作しました。
🥛制作概要🥛
制 作 期 間 :約3週間(就業日1時間、休日6時間の作業時間)
1▷SPワイヤーフレーム作成(2日)
2▷PCデザインカンプ制作(7日)
3▷ブラッシュアップ(1日)
4▷SPデザインカンプ作成(7日)
5▷ブラッシュアップ(4日)
制 作 範 囲 :クライアントより渡されたワイヤーフレーム分析・SP版の案作成
PC・SPデザインカンプ
使用ソフト:Photoshop
🥛目次🥛
1. 要件
2. 制作物
3. 工夫したところ
4. 制作を通して学んだこと
1.要件
(※架空の要件設定です)
■クライアント名
SUMMY
水や牛乳で溶かして飲む粉末状のドライスムージーが定期的に届くサブスクリプション方のサービス。忙しい人でも手軽に栄養を摂れるヘルシーで美味しいスムージーで毎日の生活に彩りと楽しさを届ける。
■目的
・商品の魅力を知ってもらい、サブスクサービス(定期販売)に申し込んでもらう。
・栄養補給が手軽に美味しくできる他、さまざまな味が定期的に届く楽しさを訴求したい。
■必要要素(クライアントから提出されたワイヤーフレーム)
2.制作物
3.工夫したこと
▼ターゲットの考察、ペルソナの設定
加藤ひろみ(34歳)独身 / 2児の母、パート勤務
<内面>
- 育児に集中しがちで、自分に気を配る時間がない
- 食事は常にぱぱっと済ませがち、Uberとインスタントに助けられている
- 時短にこだわる一方、子供の健康のためにもいいものを与えたい
- 暇があれば常に便利なサービスをネットで調べている
- 子供の意欲を促進させるため、外面デザインにはこだわりがち
<好み>
- 子育ての苦労ゆえか、親近感を感じるものに惹かれがち
- 派手すぎず、それでいて暖かさを感じる可愛らしいものが好き
上記ペルソナに当てはまるトンマナの設定、写真選び、フォント選びを意識しました。
▼情報設計(ペルソナにあったコンテンツ配置の整理)
・ペルソナに響きそうな特徴やおすすめシーンを優先順位的に高くし、栄養士の紹介欄を敢えて消してフレーバーと簡単な成分一覧を作るなど、すっきり、尚且つペルソナに寄り添える構成になるよう情報の取捨選択を行いました。
・情報が多すぎると感じるものにのみカルーセルを設置し、そこに興味を持ってくれたユーザーのみがスライドして確認できるように工夫しました。
▼あしらいや配色
- クライアントの意向である楽しさの訴求と、ペルソナに合う柔らかさがマッチするよう、丸みのあるあしらいを常に用いました。また、波型を多用して遊び心と暖かみを取り入れました。
- メインカラーはベージュや抑えめの黄色などの派手すぎない色を取り入れつつ、ロゴカラーの緑でアクセントを加えました。文字の可読性を上げるため、コントラストチェッカーを使用し問題のない配色にしました。
4.制作を通して学んだこと
▼時には先方の意見を変える必要性
・クライアントの要望通りに制作を進めるだけでなく、自分で必要だと思うことは積極的に提案、実行していくことで、より良いものが作れるのだということを学びました。
▼デザインガイドラインの重要性
・フォントサイズやコンテンツ幅のみならず、ボタンに関してもスマートフォンでタップしやすいサイズ、クリックしやすいサイズなど、明確な指標があることを学びました。実際にフォトショップ上で見るサイズと、WEBページとして見えるサイズの違いも認識ができ、今後のWEB制作に必要な基盤となる学びでした。
▼価値訴求、導入後のイメージの大切さ
・さまざまな競合のサービスがある中で、このサービスはどのような唯一性を持っているのか。それをどうアピールすればユーザーは心が動くのか、そのためにはどのようなデザインがいいのか。多角的な思考とさまざまな視点で見る重要性を感じ、マーケティングの面白さを感じることも出来ました。