制作概要
| サイトURL | https://melia-fitness.saki-portfolio-create.com |
|---|---|
| Basic認証 | ユーザ名：demo パスワード：demo |
| 使用スキル | HTML / CSS / JS / jQuery |
| 制作範囲 | コーディング |
| 制作概要 | オンラインスクールの自主制作課題として制作した、架空のパーソナルジムサイトです。 |
デザインデータ：Figma
CSS設計：FLOCSS
制作で意識したこと
CSS設計にはFLOCSSを用い、保守性・再利用性を意識したコーディングを行いました。また、レスポンシブ対応を実施し、PC・タブレット・スマートフォンなど各デバイスで最適な表示になるよう調整しています。メディアクエリを用いてブレークポイントごとに余白やレイアウトを細かく調整し、デザインの再現性と閲覧時の快適さを意識しました。
工夫したこと
アニメーションは過度な演出を避け、サイトの世界観に馴染む落ち着いた動きになるよう設計しました。ファーストビューには時間差で表示されるアニメーションを実装し、視線誘導と読みやすさを両立できるよう、速度や遅延の度合いを細かく調整しています。また、開発環境にはGulpを導入し、タスクを自動化することで制作効率を高めながら実装を行いました。