（上記画像クリックでサイトに遷移します。ぜひご覧ください。）
【ページ遷移可能なページ】
- トップページ
- SHOPページ（ナビゲーション）
- SHOP 詳細ページ
- 猫詳細ページ
- 種別・価格のご案内
- お迎えのご予約
【機能】
1 猫の特徴による絞り込み検索
検索ページでは、猫の種類や価格など、猫の特徴による絞り込み検索ができるため好みの猫を見つけられます。
並び順も生後順、価格が安い順で表示を切り替えることができます。
2 猫をお迎えする場合のシミュレーター
プルダウンでオプションが選択でき、選択すると合計金額が更新されます。
気になった猫をお迎えする場合、どれぐらいの費用がかかるのか分かりやすいです。
費用が問題ない場合、「お迎え相談」ボタンクリックでお迎え問い合わせフォームへ画面遷移します。
【制作期間】
3日間
【制作過程】
社内の3人チームで開発しました。
全員開発未経験だっため、意見を出し合いながら制作しました。
デザイン、画面構成、画面遷移、テーブル設計等すべて自分たちで考えました。
【担当ページ・機能】
チーム開発のため、それぞれ分担して開発しました。
わたしは下記のページ、機能を担当しました。
- お店の詳細ページ
- 猫の詳細ページ
- お迎えお問い合わせフォーム
【工夫点】
1 保護猫カフェだと伝わるようなコンセプト文、温かみのあるデザインと色を意識して考えました。
【使用技術】
1 フロントエンド
- HTML / CSS
- Jquery（JavaScript）
- slick（jqueryのプラグイン）
2 バックエンド
- PHP
3 環境
- Windows
- VS Code（エディタ）
- ZAMP（ローカル環境）
- ロリポップサーバー（本番環境）
【課題点】
1 猫カフェの予約機能
現在は猫カフェの予約機能を実装していないため、時間指定で予約できる機能を実装したいです。