URL：https://first-suit.kurino096.com/
サイトの目的
- 大学の入学式に着用するスーツに関する情報のまとめサイトです。
- エンドユーザーの「初めてのスーツ」に対する悩みを解決することを
目的としています。
ペルソナ
- 4月から大学・専門学校入学を控える高校3年生の男子生徒、その親御様。
制作背景
- 前職のスーツ販売店で接客する中で、「今度入学する息子にスーツが必要だけど、
必要な物も費用も初めてで何もわからない。」とお客様の悩みをヒアリングする
機会が多くありました。 - 事前に必要なものやどのくらいの費用がかかるか等の情報をまとめたサイトがあれば、来店前にお客様の「初めてのスーツ」購入に対する不安を解消し、店舗での購買体験を楽しい物へと変化できると考え制作しました。
制作工程
- 使用言語：HTML/CSS/Sass/JavaScript/jQuery
- 担当領域：ライティング、デザイン、コーディングを担当しています。
- 制作期間：約3週間で制作しています。（平日1～2時間、休日5～8時間）
こだわったポイント
- Sassを使用しました。カラーとフォントは変数を定義し、
修正がしやすいコーディングを意識しました。 - ヘッダーメニューのaタグには、display: inline-blockを指定。
paddingを上下に付け、レスポンスブではwidth: 100%を指定し、
メニューのクリック領域を確保しました。 - サイトのつかみ部分であるメインビューが単調だとサイトの離脱率が増えると
仮説を立てました。
ライブラリswiperと@keyframes zoomupで少しずつズームアップしながら
3枚のスライドが切り替わるようなアニメーションを取り入れました。 - Animate.cssとjQueryライブラリWow.jsを使用し、スクロールが楽しくなるような動きを付けて、ユーザーに興味を持って閲覧していただく工夫を施しました。
- Itemセクションのcard部分の並べ方を工夫しました。
space-between,space-aroundなどを使用せず、calc関数を使用。
width: calc(カード枚数-余白幅×余白数/カード枚数)で幅を指定。
カード枚数が増えても表示崩れが起きないようなコーディングを意識しました。