架空歯科サイト

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

デザイナーとヒアリング

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

コーディング

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

レスポンシブ対応

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

ハンバーガーボタン、ドロワーメニューの実装

今回ハンバーガーボタンは2本線で実装しました。
ハンバーガーボタンを押すことでドロワーメニューが表示されるようにjQueryで実装しました。

背景の波線を実装

擬似要素で背景の波線を実装しました。

スクロール時の要素のフェードイン実装

下にスクロールしていくと要素が下からゆっくりとフェードインするようにjQueryで実装しました。

感 想

今回1番苦戦したところは背景の波線部分の実装でした。
波線部分のデザインデータを落とし込んで擬似要素で表示させました。
かなり難易度が高かったですが自力で完成させることができました。
また、サイトのイメージがふわっとした優しい雰囲気ということだったので、下にスクロールしていくと要素が下からゆっくりとフェードインするようにjQueryで実装しました。

Webサイトはこちら

ソースコードはこちら