Frontend Engineer YM Web Support Yuki Miyagawa

Mathup LP

Mathupのランディングページ制作実績

プロジェクト概要

サイト概要
学習サービス「MathUp」のランディングページを想定した課題制作です。 Illustratorで作成されたデザインカンプをもとにコーディングを行い、実務を想定した制作フローでサイトを構築しました。 細かな装飾やレイアウトが多いデザインのため、要素サイズや余白を確認しながら、デザインカンプを忠実に再現することを意識して実装しています。
制作期間
約3週間(本業と並行しながら制作)
担当範囲
コーディング
使用技術
HTML / SCSS / JavaScript / jQuery

制作ポイント

Illustratorのデザインカンプをもとに、要素サイズや余白を確認しながらレイアウトを構築し、デザインとのズレが出ないようピクセル単位での再現を意識してコーディングを行いました。 また、LP全体で統一感のあるUI表現になるよう、テキストリビールや円グラフなどのスクロールアニメーションを実装し、視覚的にわかりやすいサイト構成を意識しています。 SCSSではコンポーネント単位でスタイルを整理し、フォント管理や共通スタイルをまとめることで、CSS設計を意識した保守性の高いコード構造を心がけました。

課題と解決

スクロールアニメーションが多いLP構成だったため、個別にアニメーション処理を書くとコードが複雑になってしまう点が課題でした。 そのため、アニメーションの共通クラスや処理を整理し、再利用できる形で実装することでコードの可読性と保守性を向上させました。 また、本業と並行しながらの納期課題だったため、作業の優先順位を整理しながら効率よく実装を進めることで、期限内に制作を完了することができました。