ripoko0614 
概要
架空のプロテインECサイトをデザインしました。
PC、SP全体のデザインは一番下に掲載しています。
担当範囲
デザイン
使用ツール
Figma、Photoshop
Figma file
Figma preview
目的
女性向けプロテインのECサイトで商品を購入して欲しい。
ターゲットなど
【ペルソナ】
・28歳、女性、事務職。東京都内で一人暮らし。
・コンスタントにトレーニングを実施し、しっかり身体を鍛えている人。
事務職をしていて普段は身体を動かすことが少ないため、1年程前から週2日、ジムに通っている。最初は運動不足の解消を目的としていたが、筋トレを続けることが楽しくなり、Instagramで自分の健康状況などの記録を投稿するようになった。次第に「身体の中からも調子を整え、もっと健康的で美しくなりたい！」と思っていた時に、InstagramでTOKYO PROTEINの広告を見つける。一度試しに購入してみようと思い、ECサイトを訪れる。
【5W1H】
What：プロテインを購入して欲しい。
Who：20～30代女性でしっかりと身体を鍛えている人、これから身体を鍛えたい人。
Why：プロテインを飲んで、健康的に身体を鍛えたいため。
When：身体を鍛えたいと思ったとき。テレビ、雑誌、SNSなどで憧れの女性を見たとき。
Where：自宅、通勤中の電車の中など。
How：SNS。
イメージ
かっこいい、スタイリッシュ
制作ポイント
【配色】
黒、白、ゴールドで統一し、かっこよく魅力的な身体を目指す女性をイメージ。
【トップページ】
・お試し購入をしやすいように、トップページには初回限定セットのバナーを配置。
・見込み客を逃さないように、SALE情報やLINE公式登録のバナーを配置し、商品に興味を持ってもらう。
・プロテインを初めて購入する人が、出来るだけ悩まずに購入しやすいよう、ランキングや人気商品を上位に表示。
・MAGAZINEにて、プロテインを使ったレシピブログを掲載。飽きずに美味しく続けられるよう、リピーターを獲得することを想定。
・CTAで新規会員登録客を獲得。
【商品一覧】
・ユーザーが望んでいるプロテインをすぐに見つけられるように、カテゴリ、フレーバー、容量、価格 で絞り込み検索機能を実装。
【商品詳細】
・端的にわかりやすく商品情報を表示することを意識。
・お召し上がり方の動画を掲載し、手軽に簡単に飲めることをアピール。
・プロテインの知識がない人や、どの商品を購入しようか迷っている人の手助けとして、レビュー機能を実装。
・関連商品を掲載。さらに興味を持ってもらい、購買意欲を高める。
【カート画面】
・商品名、個数など必要最低限の情報を掲載し、ユーザーがカートに入れた商品をシンプルにわかりやすく表示。
【注文画面】
・ステップバーを表示し、注文確定まであとどれくらいで辿り着くかを明確化。離脱を防ぐことを目的とする。
