webデザイン制作|架空のヨガスタジオ

OVERVIEW

figmaの練習、またwebサイトデザインの練習で作成しました。(デザインのみ)

//figma url//

https://www.figma.com/proto/dzcWFHVixiLXPtqCQ9HLaH/Untitled?type=design&node-id=2-2&t=h9V8DMvkY4VovpO1-1&scaling=min-zoom&page-id=0%3A1

//制作期間// 

  • デザイン:10日間

//使用技術//

  • figma、Photoshop

//対応機種//

  • PC

//ペルソナ//
氏名:よしだ りな
性別:女性
年齢:32歳
居住地:田園都市線沿い
職業:都内に勤める会社員
家族構成:一人暮らし
趣味:友人と旅行、ショッピング、読書、インテリア、カフェ巡り
性格・価値観:向上心がある、美意識高め
現状の課題:年齢的に健康面や今後の人生設計に悩みを持っている。
身体的にも精神的にも良い効果のあるヨガを始めたいと思っているがスタジオ選びに迷っている。
自宅、会社帰りからの通いやすさ、女性専用、清潔かつ広々した空間でできるヨガを
希望。家と会社の往復という単調な生活に変化を求めている。

//ターゲット//
これからヨガに通おうとしている20〜50代の女性。東京、神奈川近郊に住み
通いやすさ、清潔さ、洗練された雰囲気を好む女性

//目的//
無料体験予約をしてもらい、最終的には会員数を増やす
→より多くの世の中の女性達に、家や会社以外の居場所を持ってもらい、ヨガで
心も身体も健康になって欲しいというスタジオの願いを実現するため

//こだわったところ//

  • 体験予約を促すため、ナビの右側のボタン、FVの体験予約バナーを目立たせた。サイトの雰囲気が全体的に紫色を基調としているため補色である緑のグラデーションを使用し、より強調させた。

  • キャッチコピーの「3rd place」はより強調するため文を大きめにした。圧迫感が出てしまうため縁のみの中抜き文字にして圧迫感をなくしつつもしっかり「第3の」居場所を強調できるデザインとした。

  • FVの写真は、ユーザーが自分自身がヨガに通っているイメージがしやすくなるよう、あえて顔を写さず口元より下の女性の写真にした。

  • FV直下イベント告知のカルーセルバナーは、それぞれのレッスンやイベントに思わず行きたくなるようなデザインを意識し、作り込みをした。

  • CTRを上げるため、ナビ、FV、FV直下、フッターにそれぞれに体験レッスン申し込みボタンを設置。FV直下バナーはヨガの講師が優しく生徒に教える写真を使用、初心者でも安心して参加できることをアピールした。

  • 選ばれる理由ではスタジオの最大の売りであるスタジオのお洒落な内装を一番目に置いて強調。より多くのスタジオの写真を載せるためカルーセルですっきりと見せた。

  • スタジオの紹介では、全スタジオの位置関係が一目でわかるよう路線図を使用した地図をデザインした。路線名はそれぞれの路線の色を使用してよりわかりやすさを意識。