💬

ECサイトを個人開発してみた[要件定義・設計編]

2024/06/24に公開

はじめに

初めまして、アプレンティス3期生のつつひこです。
2023/12/11からアプレンティス(内定直結のエンジニア実習)に参加しています。

そのカリキュラムの中で、個人開発としてハンドメイド家具を制作・販売している友人にECサイトを作ることになりました。
カリキュラムの中で個人開発にあてられた時間は約2ヶ月間です。
その中でも、設計・要件定義は1週間で決めなければいけませんでした。
今回はそちらの内容をまとめていきます。

アプレンティス詳細 ↓
https://apprentice.jp/

要件定義

|一言サービスコンセプト(キャッチコピー)

  • 「こだわりを持ったライフスタイルの提供」
    プロダクトの方向性を決める上でも、キャッチコピーを考えました。
    その友人が運営している、家具と古着の店があり、そちらのお店のキャッチコピーをそのまま使って同じ方向性のECサイトを作ることになりました。

|誰のどんな課題を解決するのか?

  • 「ハンドメイド家具を製作・販売している友人が身内や知り合い伝ての販売しかできていない」という課題
    プロダクトを制作する上で、何のためにプロダクトを作るのかという目的をはっきりさせました。

|どうやって解決するのか?

  • ECサイトを通して、オンラインで購入できるようにする
  • インスタグラムのリンクからECサイトに遷移してすぐに購入できる

|機能要件

  • 商品の出品ができる(運営サイド)
    • 販売者側で商品の出品ができる
      • 商品画像、金額、説明文の投稿ができる
      • カラーバリエーションも展開できる
    • マルチログインができる(運営専用のログイン)
  • 商品の購入ができる
    • 商品をカートに入れて複数の購入ができる
    • オンライン決済ができる
    • 購入履歴が見れる
    • お気に入り登録ができる
    • インスタグラムからのリンクですぐに購入画面に遷移できる
  • 会員登録ができる
    • ログイン・ログアウトができる
    • プロフィールページで住所やカード情報の登録・変更ができる

|非機能要件

  • スマホ・PC対応
  • 家具やインスタグラムの雰囲気と親和性のとれたデザイン/UI
  • セキュリティ
    • CSRF対策
    • SQLインジェクション対策
    • XSS対策
    • SSL化
  • 可用性
    • cloudwatchを使ってサーバーのダウンを検知する
  • 保守性
    • GitHubへプッシュ時に静的解析で自動チェックする
  • 運用性
    • CI/CDでデプロイを自動化

設計

|業務フロー

どのような、流れでアプリを使用することができるのかざっくり図にまとめました。

|ワイヤーフレーム/画面遷移図

figmaを使用してワイヤーフレームを作成しました。
どのような要素を作っていくのか把握しておくだけでも、テーブル設計の時やUIを作るときにスムーズに進めることができます。

|テーブル定義書/ER図

テーブル定義書をGoogleスプレッドシートで作って、PlantUMLでER図を作成しました。
ER図を作成するツールはいろいろあると思いますが、PlantUMLが後々テーブル設計を編集したりするときに楽だと思いました(コードでテーブル設計の管理ができるため)。

|インフラ構成図

今回、クラインアント(友人)からAWSの費用をできるだけ抑えたいとのことだったので、EC2はとりあえず1台の構成にしました。AWSでの運用は初めてなので、実際に運用してみてアクセス数や可用性を見てEC2をもう1台増やすかどうか判断する予定です。

さいごに

アプレンティスのカリキュラムの中にチーム開発というものがあり、その中で要件定義・設計をしたことがありましたが、1人で全て行うのは初めてでした。
なかなか大変な部分はありましたが、全体の流れを掴むことができていい勉強になりました。
また、実装編については後日まとめたいと思います。

Discussion