架空の牧場のサイトをコーディング(Figma)

目次
1. サイト名、サイトイメージ画像
2. サイトURL、認証パスワード
3. 制作概要
4. 工夫したポイント

1. サイト名、サイトイメージ画像

サイト名：長崎県長崎市の牧場 | 琴海ごとう牧場

2. サイトURL、認証パスワード

下記URLからご確認いただけます。リンク先にはBasic認証をかけていますのでユーザー名とパスワードのご入力をお願いします。

https://wp926642.wpx.jp/farm/kinkai-ranch.html

ユーザー名：hrsb
パスワード：hrsb

3. 制作概要

制作時期：2024年2月
制作時間：45時間(現在は20～25時間程度で制作可能です)
作業内容：コーディング、クロスブラウザテスト、サーバーアップロード
使用ツール：VScode、Figma
使用言語：HTML、CSS、SCSS、JavaScript、jQuery

4. 工夫したポイント

サイトを開いた際には、ローディングアニメーションを表示させる設計にしています。
商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。

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

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