TOKYO PROTEIN ECサイトデザイン

OVERVIEW

デザイン

YEAR 2023

■案件概要

・女性向けのプロテインのECサイト
・「TOKYO PROTEIN」のオリジナルプロテインを販売するECサイトを作成してほしい。

ターゲット
・20~30代の女性
・コンスタンスにトレーニングをして、体を鍛えているひと
■5W1H

What プロテインを買ってほしい
Who 20~30代 身体を鍛えている女性
Why プロテインを飲んでさらに理想の身体を手にいれたい
When もっと本格的にボディメイクをしたい
Where 家、電車でスマホから
How SNS

■目的

・プロテインを買ってほしい
・商品に関する必要な情報がすぐにキャッチできること
・決済までのステップが単純であること

■デザインコンセプト

ターゲットが20~30代の身体を鍛えている女性ということで、
明るめのグリーンを用いた、フレッシュな印象を与えるサイトにしました。
フォントはメインには見やすさを重視して「Noto Sans JP」を使用し、
サイト内のバナー等には女性向けのサイトらしく、柔らかい印象を与える「Shippori Mincho」を使用して、男性向けのプロテインサイトとは違う、キレイ目な印象に仕上げました。

また、ホーム画面にランキング、目的別、プロテインの種類別に項目をまとめて掲載したり、商品ページでは好きな商品に絞って検索できるようにすることで、はじめてサイトを訪れた方や、プロテインにあまり詳しくない方でも、直感的にサイト内を周遊して、商品を購入してもらいやすくなる導線設計にしました。

■ポイント

サイト内のバナーの内容も、女性向けの「プロテインを使用したレシピ」や「オンラインヨガ」の案内など、運動している女性向けのコンテンツ内容を掲載することで、一度商品を購入して終了してしまうのではなく、商品購入以外の暇な時にも、訪れて新しい情報を得ることができる「ターゲットにとって有益なサイト」という印象を与えるように工夫しました。

■カラー

#11A932 #454749 #5E6163 #FFFFFF

身体を鍛えている方に向けたプロテインのサイトということで、
明るめの緑をメインカラーに設定し、「さわやか、やすらぎ、健康、生命力」といった
プラスの明るいイメージを表現しました。

また、「20~30代の女性」というターゲット層に刺さるよう、
サイト自体の配色としては「緑、グレー、白」でシンプルに統一しつつも、
サイト内のバナーには女性的な「紫、ピンク」などを使用して、明るくお洒落な印象に仕上げました。

■フォント

日本語  Shippori Mincho、Noto Sans JP 

■フォントカラー

#231F20 #FFFFFF #11A932