ポートフォリオ①牧場サイトをコーディング(Figma)

1. サイトイメージ画像

2. 制作概要

制作時期：2024年2月

制作時間：25時間程度

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

使用ツール：VScode、Figma

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

3. 工夫したポイント

サイトを開いた際には、ローディングアニメーションを表示させる設計にしています。

商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。

また、問い合わせフォームでは、必須項目をすべて入力しないと送信ボタンが押せない仕組みにすることで、利用者が迷わずに操作できるよう配慮しています。そのほか、ハンバーガーメニューやスムーススクロール、FAQページにおけるアコーディオン機能の実装も行い、ユーザーにとって快適で分かりやすい構成を目指しました。

コンタクトフォームはPHP工房をカスタマイズして実装しました。

CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。

最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。