架空の牧場のサイトをコーディング(Figma)
架空の牧場のサイトをFigmaデザインよりコーディングし、それをオリジナルデザイン化しました。 工夫したポイントなどは下記をご覧ください。
目次
1. サイト名、サイトイメージ画像
2. サイトURL、認証パスワード
3. 制作概要
4. 工夫したポイント
1. サイト名、サイトイメージ画像
サイト名：長崎県長崎市の牧場 | 琴海ごとう牧場
2. サイトURL、認証パスワード
下記URLからご確認いただけます。リンク先にはBasic認証をかけていますのでユーザー名とパスワードのご入力をお願いします。
https://wp926642.wpx.jp/farm/kinkai-ranch.html
ユーザー名：hrsb
パスワード：hrsb
3. 制作概要
制作時期：2024年2月
制作時間：25時間
作業内容：コーディング、クロスブラウザテスト、サーバーアップロード
使用ツール：VScode、Figma
使用言語：HTML、CSS、SCSS、JavaScript、jQuery
4. 工夫したポイント
サイトを開いた際には、一度だけローディングアニメーションを表示させる設計にしています。
商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。
また、問い合わせフォームでは、必須項目をすべて入力しないと送信ボタンが押せない仕組みにすることで、利用者が迷わずに操作できるよう配慮しています。そのほか、ハンバーガーメニューやスムーススクロール、FAQページにおけるアコーディオン機能の実装も行い、ユーザーにとって快適で分かりやすい構成を目指しました。
コンタクトフォームはPHP工房をカスタマイズして実装しました。
CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。
最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。