ポートフォリオ②受験生向けサイトのコーディング (Figma)

1. サイトイメージ画像

2. 制作概要

制作時期：2024年3月

制作時間：60時間

作業内容：コーディング、クロスブラウザテスト、サーバーアップロード

ページ数：6ページ

使用ツール：VScode、Figma

使用言語：HTML、CSS、SCSS、JavaScript、jQuery

3. 工夫したポイント(コーディング)

ファーストビューでは、数秒ごとに画像が切り替わるアニメーションを実装し、訪問者に動きのある印象を与える工夫をしました。

また、トップページでは以下の機能を実装し、利便性を高めています。

・モーダルウィンドウ

・ハンバーガーメニュー

・ローディングアニメーション

・スムーススクロール

・ホバーアニメーション

学科ページについては、4つのページが同一仕様であることを活かし、共通のCSSファイルを適用しました。これにより、保守性や管理効率が向上しています。また、すべてのページにおいてCSS設計ではBEMを使用し、可読性の高いコーディングを行いました。

さらに、予約フォームのページでは、必須項目がすべて入力されていない場合は送信ボタンが押せない仕組みを導入しました。この設計により、利用者が入力ミスに気づきやすくなりました。

最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。