プロジェクト概要
制作ポイント
実サイトのデザインを参考に、余白・文字サイズ・レイアウトのバランスを確認しながら、ピクセル単位での再現を意識してコーディングを行いました。 CSSはSCSSを使用し、変数やmixinを整理することでブレイクポイントや共通スタイルを管理し、保守性を意識したスタイル設計を行っています。 また、JavaScriptではハンバーガーメニューやスクロール表示UI、Swiperによるスライダーなどの動きを実装し、実際のサイトに近いインタラクションを再現しました。
課題と解決
実サイトを参考にレイアウトを再現する中で、要素間の余白や配置の細かなズレを調整する点が課題でした。 ブラウザ上で実サイトと見比べながら表示確認を繰り返し、要素サイズやFlexboxレイアウトを細かく調整することで、デザインに近いレイアウトを再現しました。 また、Swiperスライダーやスクロールアニメーションの実装を通して、JavaScriptを用いたUI表現への理解を深めることができました。
