Frontend Engineer YM Web Support Yuki Miyagawa

Mathup

Mathupのコーポレートサイト制作実績

プロジェクト概要

サイト概要
Figmaのデザインカンプをもとに制作した、教育サービスを想定したWebサイトのコーディング課題です。 トップページに加え、下層ページやお問い合わせフォーム、ログイン画面などを含むサイト構成となっており、実際のWebサイト制作案件を想定した実装を行いました。
制作期間
約4週間(本業と並行しながら制作)
担当範囲
コーディング
使用技術
HTML / SCSS / JavaScript / jQuery

制作ポイント

Figmaのデザインカンプをもとに、余白や文字サイズ、レイアウトのバランスを確認しながらデザインの再現性を意識してコーディングを行いました。 また、複数のCTA配置やボタンアニメーション、ファーストビューのアニメーションなど、ユーザーの行動を促すインタラクションの実装にも取り組みました。 さらに、下層ページやお問い合わせフォーム、ログイン画面の実装を通して、LP制作とは異なるサイト全体の構造を意識したコーディングを経験しました。

課題と解決

複数ページの実装を含む制作だったため、作業期間が長くなり進捗管理が課題でした。 そのため、納期から逆算したスケジュールを作成し、作業工程を日々のタスクに落とし込むことで制作を進めました。 また、ファーストビューのアニメーションについては運営側と認識をすり合わせながら調整を行い、実サイトとは異なるアニメーションを試すなど、クライアントとのコミュニケーションを想定した制作を経験することができました。