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