ポートフォリオを作り始める前に、『アジャイルサムライ』の「インセプションデッキ」を作ってみた。

# はじめに
### 記事の目的
インセプションデッキについて、ポートフォリオを作り始める際に作成したところ、「なんの課題を解決するのか」という目的が明確になり、進むべき方向がわかるようになったので、大切な工程だったと考えます。
実際に作成したインセプションデッキを今回記事としてアウトプットすることで、自身の振り返りと、ポートフォリオを作成する方のご参考になればと思います。

### 目次
[1. インセプションデッキとは](#1-インセプションデッキとは)
[2. インセプションデッキを作成した目的](#2-インセプションデッキを作成した目的)
[3. 実際に作成したインセプションデッキ](#3-実際に作成したインセプションデッキ)
[まとめ（感想）](#まとめ感想)

#### （参考）先日公開したポートフォリオの概要
絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです。
サービス名は**『よんで』**です。Web上に公開中です。（2021.12.31公開終了したため、アクセスできません。）▶︎ https://yonde-iiyo.com/


![home_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/6740ca1a-fe88-4604-7961-b476545997e4.png)

▼ ポートフォリオ紹介記事を書かせていただきました。

https://qiita.com/ryamate/items/c3b4f63f8d94ab090bf8

# 1. インセプションデッキとは
- 開発のチームメンバー全員がプロジェクトの目標は何なのかを理解するためのもの。
- プロジェクトの背後にある**「WHY」を明確にするための質問と課題５つ**と、**「HOW」を明確にするための質問と課題５つ**に答えていくことで、プロジェクトが始まる前にみんなの向かう先を揃えるもの。

### ◆ 「WHY」を明確にするための質問と課題５つ
| 質問・課題 | 説明 |
|:-|:-|
| [①我々はなぜここにいるのか](#-我々はなぜここにいるのか) | 目的・理由を確認する |
| [②エレベーターピッチ](#-エレベーターピッチ) | どんなプロダクトなのか、どんな価値があるのかを短くまとめたもの |
| [③パッケージデザイン](#-パッケージデザイン) | プロダクトのイメージをビジュアル化して、キャッチコピーをつける |
| [④やらないことリスト](#-やらないことリスト) | スコープ（やる範囲）の対象外のことは？制約条件は？ |
| [⑤『ご近所さん』を探せ](#-ご近所さんを探せ) | プロダクトの関係者、ステークホルダー（利害関係者）を洗い出す |

### ◆ 「HOW」を明確にするための質問と課題５つ
| 質問・課題 | 説明 |
|:-|:-|
| [❶解決案を描く](#-解決案を描く) | どのように解決するのか？技術的な解決策 |
| [❷夜も眠れない問題](#-夜も眠れない問題) | 現時点で気になっている問題、後から問題になりそうだと思っていることを洗い出す |
| [❸期間を見極める](#-期間を見極める) | いつまでに完了するのか？ |
| [❹トレードオフスライダー](#-トレードオフスライダー) | 期間、予算、機能、品質のバランスをどうとるのか |
| [❺何がどれだけ必要か](#-何がどれだけ必要か) | 開発人数、予算を決めておく |

# 2. インセプションデッキを作成した目的
**なんの課題を解決するのか、どのような状態になればよいのかを最初に決めるために、インセプションデッキを作りました。**

- ポートフォリオを作成する際に、闇雲に作っていくのではなく、Webアプリケーションの作り方として、課題定義・要件定義をしてから作り始める、ということを学習して知りました。
- そして、手法として「アジャイル開発」の「インセプションデッキ」というものがあると知り、チームでの開発ではなく個人開発ではありますが、観点としてどのようなことを明確にしてから開発を始めていけばいいかのフレームワークとして、まずは作ってみようと思いました。

# 3. 実際に作成したインセプションデッキ
ポートフォリオ作成前に、実際に作成したインセプションデッキをご紹介させていただきます。
## ◆ 「WHY」を明確にする
### [① 我々はなぜここにいるのか](#-whyを明確にするための質問と課題５つ)
**※目的・理由を確認する**
#### ⑴ 「よんで」を開発する目的

<details><summary>絵本が好きな子どもに、いつでも絵本を読んであげたい気持ちになりたいため。</summary>
    - 読み聞かせの記録をつけていくことで、親が疲れているとき、気分が乗らないときにも、積み上げる感覚で、子どもにもっと読み聞かせてあげたくなる。
    - 同じ絵本でも読み聞かせの日時の記録をつけていくことで、同じ絵本を読んでいて内容には飽きてしまっている親でも、読むモチベーションが上がり、何度でも読みたい子どもの気持ちのギャップを埋められるようにしたい。</details>
<details><summary>子どもが成長した時に、絵本をたくさん読んできた記録をアルバムのように振り返りたいため。</summary>
    - 読み聞かせてもらった絵本が記録されているのは、成長した子どもにとって嬉しいのではないか。
    - 成長した時に、「こんな絵本読んでもらったことあるんだ」と振り返ることができる。「この本読んだことあった気がする…」というとき確認できる。
    - 自分が子どもに読み聞かせた絵本の記録を正確に残したい。</details>
<details><summary>自分の子どもに読んであげる絵本選びのヒントが欲しいため。</summary>
    - 他の子どもが実際に何度も読んだ絵本を知って絵本選びの参考にしたい（ベストセラー以外の誰かが大好きな作品を知ることができる）。
    - 何歳くらいの時期にちょうどいい内容かを、正確な情報を実際の集計で知りたい。
    - 自分の子どもにいい絵本とたくさん出会わせてあげたい。</details>

#### ⑵ そもそもの開発する目的
<details><summary>転職活動時のポートフォリオを準備するため。</summary>
    - アジャイル開発を意識して進めて、まずは最低限のものを公開できる状態を目指し作成する
    - 最低限の機能のサービスを早めにリリースして、その後に機能を付け足していくイメージで進める</details>
<details><summary>実務経験に近い困難を乗り越える経験を積むため、技術力を高めるため。やり抜けることを証明するため。</summary>
    - 直面した課題に対して逃げず、実装を諦めないことで力をつける
    - 開発中に詰まって解決した部分をQiitaに投稿する
    - 作成中は「転職活動用のポートフォリオを作成する」ためと考えるのではなく、「サービスを立ち上げる」気概で取り組む</details>
<details><summary>自分で考え、一からサービスを作成することで、エンジニアの仕事の醍醐味を知るため。また、エンジニアとしての自身の適性を把握するため。</summary></details>

### [② エレベーターピッチ](#-whyを明確にするための質問と課題５つ)
**※ どんなプロダクトなのか、どんな価値があるのかを短くまとめたもの**

<details><summary>**（参考）エレベーターピッチのテンプレート**</summary>
    - [潜在的なニーズを満たしたり、潜在的な課題を解決したり]したい
    - [対象顧客]向けの、
    - [プロダクト名]というプロダクトは、
    - [プロダクトのカテゴリー]です。
    - これは[重要な利点、対価に見合う説得力のある理由]ができ、
    - [代替手段の最右翼]とは違って、
    - [差別化の決定的な特徴]が備わっている。</details>

#### ◇ 作成したエレベーターピッチ

- **絵本が好きなこどもにいつでも絵本を読んであげたい、絵本を読んだ記録を残したい、絵本選びで困らないようになりたい**
- **子どもを育てる人**向けの、
- **よんで**というプロダクトは、
- **絵本読み聞かせ記録管理のWebアプリケーション**です。
- これは**絵本を読んであげたときに記録を残して、振り返ることのできる「アルバム」のようなものにすること**ができ、
- **既存の読書記録サービス**とは違って、
- **読み聞かせした記録を残せる、個人での記録ではなく家族と記録を共有する役割**が備わっている。

### [③ パッケージデザイン](#-whyを明確にするための質問と課題５つ)
**※ プロダクトのイメージをビジュアル化して、キャッチコピーをつける**

#### ◇ 絵本読み聞かせ記録・管理アプリ「よんで」
#### こどもの「よんで」が楽しみになる
![family_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/5e489732-a5cc-f8cf-b9c7-589258d4b02c.png)

**絵本のWeb本棚**:green_book:
気になる絵本やこれまで読んだ絵本をいれることができます。他の家族の本棚を見て、新しい絵本が発見できるかもしれません。

**読み聞かせの記録・管理**:pencil:
絵本の読み聞かせをした記録をつけることができます。いつ読んだか、どんな反応だったか、具体的な記録が簡単にできます。

**家族と共有**:family_mmb:
本棚・読み聞かせ記録を家族と共有することができます。絵本を読んだ記録を、家族の思い出、こどもの成長の記録として残せます。

### [④ やらないことリスト](#-whyを明確にするための質問と課題５つ)
**※ スコープ（やる範囲）の対象外のことは？制約条件は？**

#### ⑴ やること
- 最初にPHP（既存フレームワークなし）で手続き型で作り始め、オブジェクト型に作り変えていく。
    - MVCフレームワークを意識して作成する。
    - フレームワークの内部構造を知ることが大事だと教わり、自分も根本（普遍的な部分）の理解を大事にしたいと考えているため

#### ⑵ やらないこと
- アプリの使い方説明
    - 読んでくれる可能性が低いため。使い方の説明を書かなくても直感的に使ってもらえるアプリが理想
- 理解していないコードを使うこと
- バックエンド志望に求められないこと
    - デザインに凝りすぎる、デザインを自分で考えること
    - レスポンシブ対応や全ブラウザ対応にこだわりすぎること
- オリジナリティを求めすぎること
- 予算がかかりすぎること

#### ⑶ あとで決めること
- なし

### [⑤ 『ご近所さん』を探せ](#-whyを明確にするための質問と課題５つ)
**※ プロダクトの関係者、ステークホルダー（利害関係者）を洗い出す**

- 関係者: 自分

## ◆ 「HOW」を明確にする

### [❶ 解決案を描く](#-howを明確にするための質問と課題５つ)
**※ どのように解決するのか？技術的な解決策**

- Webアプリケーションとして作成する
- 使用する場面はスマホの方が多いと考えられる
    - レスポンシブ対応させる

#### 使用する技術（バージョンも記載）
**⑴ PHPのフルスクラッチで作成し、Herokuにデプロイする**
**→ 生のPHP、SQLを学習後、Herokuへのデプロイはせず、下記 ⑵の開発へ移行**

- HTML 5, CSS 3
- Bootstrap
- jQuery
- PHP 7系
- MySQL 5系
- PHPMyAdmin
- Heroku
- Git/GitHub
- Apache
- 開発環境：Docker, VSCode 


**⑵ Laravel（フレームワーク）で作成し、AWSにデプロイする**

- HTML 5, CSS 3
- Bootstrap
- jQuery
- PHP 7系
- Laravel 6系
- MySQL 8系
- PHPMyAdmin
- AWS（EC2、RDS、ELB、S3、Route53、IAM）
- CircleCI
- Git/GitHub
- nginx
- 開発環境：Docker, VSCode

### [❷ 夜も眠れない問題](#-howを明確にするための質問と課題５つ)

**※ 現時点で気になっている問題、後から問題になりそうだと思っていることを洗い出す**

- 絵本の情報を取得するためにAmazonAPIを申請するのには、条件があるのか（期間やお金がかかるか）
- エラーに完全に行き詰まる恐れがある
- Webサービスの作り方の全体像が掴みきれていない

### [❸ 期間を見極める](#-howを明確にするための質問と課題５つ)

**※ いつまでに完了するのか？**

- 2020.11.18着手
- 2021.2.18に完成目処
- 以後、転職活動と平行して機能追加
    - 2021.3.1から転職活動を実施
    - 2021.6までに内定
- 12週×30h → Max360h（2020.11.18〜2021.2.14）

→ 2021.8から転職活動を実施していて、理想よりめっちゃずれ込みました。

### [❹ トレードオフスライダー](#-howを明確にするための質問と課題５つ)
**※ 期間、予算、機能、品質のバランスをどうとるのか**

| max | >>> | >>> | >>> | min | 項目 |
|:-:|:-:|:-:|:-:|:-:|:-|
|   | ● |   |   |   | 機能をぜんぶ揃える（スコープ） |
|   |   | ● |   |   | 予算内に収める（予算） |
|   |   |   | ● |   | 期日を死守する（時間） |
|   | ● |   |   |   | 高い品質、少ない欠陥（品質） |

- 期間よりも、品質（学習）を優先

### [❺ 何がどれだけ必要か](#-howを明確にするための質問と課題５つ)
**※ 開発人数、予算を決めておく**

- 開発人数：１人
- 予算
    - AWS関連での費用は月5,000円までを目処
    - Udemy動画、書籍教材などは2,000円程度のものは、必要であれば即購入
    - 必要に応じてメンター契約

# まとめ（感想）
インセプションデッキを作成することで、「なんの課題を解決するのか、どのような状態になればよいのか」という目的が明確になりました。開発時、どんな機能を追加していけばいいか、という具体的な機能を考えていくときにも、サービスの目的を明確にしていれば、進むべき方向がわかるので、大切な工程だったと考えます。

お読みいただきありがとうございました！:bow_tone1:

#### （参考）参考教材
- インセプションデッキについて

https://shop.ohmsha.co.jp/shopdetail/000000001901/

- 要件定義全般について（『独学エンジニア』レッスン３）

https://dokugaku-engineer.com/