プログラミング学習半年で作った美容サロン向けCRMの紹介

#はじめに

##### ※ご覧いただいている全ての方へ
記事の内容が良かったと思ってくれた方はLGTMしてくれたら嬉しいです。

# アプリの概要
作成したアプリについて説明していきます。
アプリURL：https://kartech-app.com/
![スクリーンショット 2021-10-03 22.51.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/3aeda8c9-7210-dfbf-aa44-1c5bad9b0c17.png)

## ターゲットユーザー
美容室、ネイルサロンなどを経営する小規模事業者。
今回は僕のパートナー（ネイルサロン経営）をペルソナに設定して要件定義などを行いました。

## 競合サービスが抱える課題
顧客管理アプリは世の中にたくさんあるため、利用している、または利用したことのある既存サービスの課題を洗い出してもらいました。
### 顕在化していた課題
1. 多機能すぎるが故に、UIがごちゃごちゃしている。もっとシンプルでいい。使いこなせない。
2. 目的のページに辿り着くまでに何度か画面を遷移しないといけないのが面倒。
3. カスタマイズ性が欲しい。例えばお客様アンケートなどはお店によって収集したい情報が違うため、テンプレート化されてるよりもアンケート内容をカスタマイズできた方がいい。
4. 手間がかかずに、売上状況など様々なデータを分析できるようにしてほしい。

以上のような課題が上がりました。

## ベネフィット
課題を踏まえ、これから作るプロダクトが生み出せる価値を考えました。
1. シンプルかつ、わかりやすいUI
2. すぐに目的のページに遷移できるUX
3. カスタマイズできるアンケートなどの機能
4. 日報の登録機能と、日報から自動で様々なデータを抽出して可視化する機能

## 実装した機能紹介
ベネフィットに沿った開発を意識し、具体的に実装した機能をいくつかご紹介いたします。
顧客管理アプリは意外とありふれたものだと思われますが、アンケートや同意書をカスタマイズできる機能は他社にはなく、今後実装予定の顧客分析や売上分析機能をもっと拡充すれば他社と比べても十分にバリューを出せると考えています。

### アンケート作成機能
お客様にアンケートを取りたい場合に便利な機能を用意しました。
ここでアンケートを登録すると、顧客追加ページに反映され、お客様に情報を入力してもらう際に、一緒にアンケートを取ることができます。
お客様が回答したアンケートは、顧客詳細ページでいつでも確認することが可能です。
![アンケート.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/8cd4b1da-e3c9-9eec-3889-ae252e360f52.gif)

### 同意書作成機能
サービス提供前に事前に同意を得ておきたい免責事項がある場合に便利なのが、この同意書作成機能です。
作成した同意書は顧客追加ページに反映されます。
お客様に情報を入力してもらった後に、免責事項の確認を促し、同意を得ることができます。
![同意書.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/ada00c93-7c90-f55f-c361-09bbdea24640.gif)

### 顧客追加機能
お客様に名前や連絡先などの情報を入力いただくことができます。
また、アンケートや同意書を登録していれば、このページに反映されます。
安全のために、顧客追加ページはフォーム送信ボタン以外のリンクがないページとして新規タブで開きます。
![顧客追加.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/2d96d354-3f09-e1ee-8a51-d493b4b8bd31.gif)

### 提供メニュー作成機能
お店で提供しているサービスやメニューを登録できます。
メニューを登録すると、来店記録ページでお客様に提供したメニューを一緒に記録できるようになり、売上の分析に活用できます。
![メニュー追加.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/5c588516-03e1-506e-ae01-989078c2773b.gif)

### 来店記録（日報）作成機能
接客記録を残すことができます。写真も複数枚投稿できます。
写真が投稿できると、その日提供したサービスの仕上がりなどを写真として記録できて便利です。
今後実装予定にはなりますが、来店日と提供サービスを登録することで、期間別や顧客属性別（年代など）に人気メニューや売上の確認、売上の推移の確認などができるようになります。
![来店記録.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/719acfdb-92a4-cf1f-21ab-3a502ae899f6.gif)

### 検索機能
目的の顧客を素早く見つけてもらうために検索機能は必須です。
![検索.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/b3cb58c8-6c03-f276-b5db-2d486fac57f7.gif)

## 画面遷移図
![画面遷移図.dio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/1147bdeb-2861-b644-ba40-69da0878fced.png)

## AWS構成図
![AWS構成図.dio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/54be2f3c-c6f1-a7f1-2229-dcb0b8d93638.png)

## ER図
![ER図.dio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326211/2690ee56-67ac-551e-b13b-4936441e8f46.png)

## 使用技術とツール
### バックエンド
PHP 7.3.24 / Laravel 6.20.34

### フロントエンド
HTML / CSS / JavaScript / jQuery / Bootstrap

### 開発環境
DockerコンテナにLEMP環境を構築
Docker 20.10.7 / Docker Compose v2.0.0-beta.6

### 本番環境
EC2にLEMP環境を構築
mysql 8.0.25
AWS(EC2, RDS, Route 53, ALB, S3, CloudFront, ACM)

### その他使用ツール
バージョン管理： Git / GitHub
IDE： Visual Studio Code
DBクライアント：　Sequel Ace
ER図, 画面遷移図, インフラ構成図： VScode拡張機能のDraw.io

##1-9. 技術選定の基準
言語にPHPを選んだ理由は、ドキュメントの豊富さ、PHPで開発されているプロダクトの多さ、求人の多さなどが挙げられます。
フレームワークにLaravelを選んだ理由は、ドキュメントの豊富さとシェアの高さが挙げられます。
つまり、開発のしやすさと、LaravelをFWとして採用している企業が多いことにより知識の再利用ができる可能性が高いと考えたためです。
インフラにAWSを採用した理由は、ドキュメントの多さ、スケールのしやすさなどがあげられます。
つまり、何か困った時に調べて解決しやすかったり、ユーザーが多くなった時に簡単にサーバーなどを増設できたりするためです。
EC2を2台設置しALBで負荷分散することで可用性を高めたり、CloudFrontで画像をキャッシュサーバーから送信するようにすることで画像の表示速度を高めたり、ACMによるHTTPS化を取り入れたりしました。
ポートフォリオで採用されやすいHerokuですが、手軽な反面、アップロードした画像が24時間おきに消えてしまうなど、ユーザーに使ってもらうサービスのインフラとして採用することは考えにくい仕様だったため、少し費用はかかりますがAWSを選びました。

## 今後の課題
- UI / UXの改善
- 分析機能の拡充
- 来店予約システムの実装
- 来店予約システムと連携した様々な機能の実装