URL
https://ayumi-portfolio.site/fitness/
概要
担当：Webサイトデザイン • コーディング（2022年制作）
使用ツール：Figma, Photoshop
サイトの目的
キャンペーン期間に多くの人に入会してほしい、新規顧客獲得
ターゲット
20代～30代の女性、主婦・OL
ペルソナ
川崎はるか
24歳OLの女性。デスクワークのため、運動不足で困っている。
趣味はお菓子作り。
女性も通いやすいスポーツジムを探している。
デザインについて
黄色とオレンジの元気なビタミンカラーの配色で仕上げました。コンバージョンボタンに寒色の緑を使うことで、ボタンを目立たせました。
角丸の長方形でポップな軽さと柔らかさを表現しました。
入会までのステップは、スクロールして、1→2→3の順番でスムーズに目に入るように角度をつけました。
コーディングについて
CSSで背景を斜めにする技術や、リストの何番目に特定の余白のスタイルを当てる方法などを調べて、自分で作ったデザインを再現しました。 @importが廃止予定のため、「Live Sass Compiler」から 今回、新しいプラグイン「DartJS Sass Compiler and Sass Watcher」に切り替えました。今後、最新のDart Sassを使いこなせるように学んでいきたいと思います。
