架空司法書士サイト

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

デザイナーとヒアリング

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

コーディング

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

レスポンシブ対応

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

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

ハンバーガーボタンを押すことでドロワーメニューが上から表示されるようにjQueryで実装しました。

アニメーションの実装

サイトを開く、又はサイトをリロードするとキャッチコピーがフワッと表示されるように実装しました。
グラデーションのボタンをホバーするとグラデーションが流れるように実装しました。
ヘッダー、フッターのナビメニューをホバーすると下線が左から右にスライド表示されるように実装しました。

感 想

今回は司法書士サイトということだったのであまり大きな動きは付けず細かい部分の動きを付けました。
レスポンシブのブレイクポイントは4点で行い、要素の配置を拘りました。
制作時間は28時間でコーディングのスピードも徐々に早くなってきました。

Webサイトはこちら

ソースコードはこちら