URL

https://chiroshiga.com/

カテゴリー

予約システム構築

担当

新規制作 | デザイン、コーディング、ライティング、各種デバイス対応、開発

スキル

HTML、CSS、JavaScript（jQuery・Vue.js）、PHP、Laravel、XAMPP

概要

2021年に制作した、カイロプラクティックの施術院向けWebサイトです。店舗運営の効率化とユーザー体験の向上を目指して構築されました。

主な機能

予約システム

• Livewire: 動的な予約カレンダー機能を実装

• Flatpickr.js: 日付ピッカーを搭載し、簡単に予約日を選択可能

管理機能

• 管理人用ログイン: 管理人は予約管理や情報更新を行うことが可能

• Laravel Breeze: 認証機能を構築

レスポンシブデザイン

• 対応デバイス: パソコン、タブレット、スマートフォン

• ブレークポイント:

  パソコン: 1024px以上、タブレット: 768px、スマートフォン: 480px以下

表示インターフェースの向上

• Alpine.js: 軽量なJavaScriptフレームワークでユーザー体験を向上

画像アップロード機能

• シンプルな画像アップロードを実装し、操作性を向上

• Figma、Canva: デザイン用の画像を作成

Vue.jsの採用と仕様変更

• 2024年5月まで: 管理人用ページにてInertiaとVue.js 3（Composition API + script setup）を利用し、動的なUIを実装

• 2024年5月以降: ユーザー用ページと同様のノーマルな設計に統一

技術スタック

サーバーサイド

• PHP 8.0: 最新バージョンにより高速なパフォーマンスを実現

• Laravel 9.x: モダンで効率的な開発を可能にするフレームワーク

フロントエンド

• Flatpickr.js: シンプルな日付選択ツール

• Alpine.js: 動的な動作を実装

環境構築

• 開発環境: XAMPPを使用

• 本番環境: レンタルサーバーでデプロイ

• ソースコード管理: GitHubでバージョン管理

ポイント

• プロジェクトの対象: カイロプラクティック施術院のWebサイト

• ユーザー体験を重視: 直感的で使いやすいインターフェースを提供

• 高い活用性: 管理人と利用者の双方が効率的に操作できる設計