【自主制作】保護猫カフェサイト

OVERVIEW

架空の保護猫カフェのサイトと、お迎え可能な猫を検索するページを制作しました。

(上記画像クリックでサイトに遷移します。ぜひご覧ください。)

【ページ遷移可能なページ】

  • トップページ
  • SHOPページ(ナビゲーション)
  • SHOP 詳細ページ
  • 猫詳細ページ
  • 種別・価格のご案内
  • お迎えのご予約


【機能】

1  猫の特徴による絞り込み検索

検索ページでは、猫の種類や価格など、猫の特徴による絞り込み検索ができるため好みの猫を見つけられます。

並び順も生後順、価格が安い順で表示を切り替えることができます。

 

2 猫をお迎えする場合のシミュレーター

プルダウンでオプションが選択でき、選択すると合計金額が更新されます。
気になった猫をお迎えする場合、どれぐらいの費用がかかるのか分かりやすいです。

費用が問題ない場合、「お迎え相談」ボタンクリックでお迎え問い合わせフォームへ画面遷移します。


【制作期間】

 3日間

【制作過程】

デザイン、画面構成、画面遷移、テーブル設計等すべて自分で考えました。


【工夫点】

1 保護猫カフェだと伝わるようなコンセプト文、温かみのあるデザインと色を意識して考えました。


【使用技術】

1 フロントエンド

  • HTML / CSS
  • Jquery(JavaScript)
  • slick(jqueryのプラグイン)

2 バックエンド

  • PHP

3 環境

  • Windows
  • VS Code(エディタ)
  • ZAMP(ローカル環境)
  • ロリポップサーバー(本番環境)


【課題点】

1 猫カフェの予約機能

現在は猫カフェの予約機能を実装していないため、時間指定で予約できる機能を実装したいです。