practice
アプリサイト
01
Information
- 制作種別
- practice
- 制作期間
- 3週間
- 使用技術
- HTML / CSS / JavaScript / Figma
- 担当範囲
- デザインカンプをもとにHTML / CSS(SCSS) / JavaScriptを用いたコーディング
02
Overview
デザインカンプをもとに、スマートフォン・タブレット・PCそれぞれに対応したレスポンシブサイトを制作しました。
JavaScriptを用いてハンバーガーメニュー、アコーディオン、モーダル、Swiperによるスライダー、スクロールアニメーションなど、ユーザーが快適に操作できるインタラクションを実装しています。
コードの保守性を意識し、BEMを用いたクラス設計とSCSSによるコンポーネント単位でのスタイル管理を行いました。
03
Full Page
04
Coding Point
実装で意識したこと
・スマートフォンからPCまで崩れないレスポンシブ対応を意識しました。
・JavaScriptは機能ごとに処理を分け、可読性を保ちながら実装しました。
・IntersectionObserverを利用し、スクロール時のみアニメーションを発火させることで不要な処理を抑えました。
・Swiperやモーダルなど複数のUIを組み合わせても、コードが複雑になりすぎないよう責務を分けて記述しました。
05
Problem & Solution
PROBLEM
苦戦した点
レスポンシブ対応を進める中で、レイアウト崩れや余白の調整に苦戦しました。
また、ハンバーガーメニュー・モーダル・Swiperなど複数のJavaScript機能を同時に実装したため、それぞれの処理が干渉しないよう管理することにも時間がかかりました
SOLUTION
解決方法
デベロッパーツールを活用して画面サイズごとの表示を細かく確認し、メディアクエリを使いながらレイアウトを調整しました。
JavaScriptは機能単位で実装し、一つずつ動作確認をして原因を切り分け、安定した動作になるよう改善しました。
06