架空美容院サイト

静的サイト完成までの流れ

デザイナーとヒアリング

デザイナーからFigmaのデザインデータいただきました。
ヒアリングをしてペルソナ設定に見合ったコーディングを心掛けました。

コーディング

Sassを取り入れたことにより作業効率がアップしました。
また、FLOCSSによるCSS設計を取り入れ、保守性のあるコーディングを行いました。

レスポンシブ対応

スマホファーストでレスポンシブの対応を行いました。

ハンバーガーボタンの実装

ハンバーガーボタンを押すことでヘッダーメニューがフェードインで表示されるようにjQueryで実装しました。
美容院のサイトであることからオシャレで優しいイメージを心掛けました。

アニメーションの実装

サイトを開く、又はサイトをリロードするとキャッチコピーが左から右に流れるように表示されるように実装しました。
画面をスクロールするとテキストなどの文字がぼやけから出現するようにしました。
トップ画像はSwiperを使用して4枚の画像をスライドで自動で切り替えるように実装しました。
画像をマウスオーバーすると画像自体がキラッと光るような感じに実装しました。

感 想

今回は美容院サイトということだったのでオシャレで優しいイメージを持ってアニメーションを実装しました。
Swiperの実装も今回初めてだったのでうまく実装できるか不安な部分もありましたが、無事に実装することができました。
今回の美容院サイトもかなりたくさんの新たな知識が身に付きました。

Webサイトはこちら

ソースコードはこら