制作概要
| サイトURL | https://rich-life.saki-portfolio-create.com |
|---|---|
| Basic認証 | ユーザ名：demo パスワード：demo |
| 使用スキル | HTML / CSS / JS / jQuery |
| 制作範囲 | コーディング |
| 制作概要 | オンラインスクールの自主制作課題として制作した、架空の家具・家電サブスクリプションサービスサイトです。 |
デザインデータ：Figma
CSS設計：FLOCSS
ドロップダウンメニュー
アコーディオン
制作で意識したこと
CSS設計にはFLOCSSを用い、保守性・再利用性を意識したコーディングを行いました。また、レスポンシブ対応を実施し、PC・タブレット・スマートフォンなど各デバイスで最適な表示になるよう調整しています。メディアクエリを用いてブレークポイントごとに余白やレイアウトを細かく調整し、デザインの再現性と閲覧時の快適さを意識しました。
工夫したこと
サイトの雰囲気に合わせてやわらかいアニメーションを取り入れ、自然で心地よい動きになるよう工夫しました。また、開発環境にはGulpを導入し、タスクを自動化することで制作効率を高めながら実装を行いました。