ソフト開発未経験チームがオンボーディングでWebアプリ作ってみた

この記事は [DENSO アドベントカレンダー 2021](https://qiita.com/advent-calendar/2021/denso) の21日目の記事です。

# はじめに
社内の [リカレント制度](https://www.denso.com/jp/ja/news/newsroom/2021/20210527-01/#:~:text=%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E4%BA%BA%E6%9D%90%E3%81%B8%E3%81%AE%E3%83%AA%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E7%AF%89%E3%80%81%E9%81%8B%E7%94%A8) （ニュースメディアだと [キャリア転身制度](https://newswitch.jp/p/26996)という表現） でソフト未経験からキャリアチェンジを図り、2021年6月より開発チームにアサインされました。今回は、その配属前に行ったオンボーディングの概要や実践の過程、最終的にできたWebアプリについて紹介しようと思います。

# オンボーディング概要
約2ヶ月で1つのWebアプリを作ることをゴールに、前半の1ヶ月は後半の開発作業に必要な基礎知識・技術をひたすら叩き込みました。そして、後半の1ヶ月はPBL（課題解決型学習）の形式で、課題設定～プロダクト検討～開発～ユーザーインタビュー～改善のプロセスをアジャイルに進め、4人1チームですべてやり切るという実践的教育です。

# 実践の過程
### 課題設定
webセミナーでのコミュニケーションの難しさに焦点を当て、解決するアプリケーションの提供を課題としました。

### 開発着手前のコンセプトスケッチ
最終的な完成まで何度も検討を重ねて、ここからは大きく変わりました。これも、アジャイル開発の面白いポイントです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134812/8116afd6-1bb6-04c4-8b4e-fc738d5de10a.png)

### エレベータピッチ
アプリを端的に説明できるようにまとめた文書です。コンセプトスケッチの次に作りましたが、作成時点でターゲットユーザー・アプリの価値・競合製品との差別化が議論され、プロダクトのコンセプトができてきています。こういったものを最初に作っておくことで、チームメンバー間でプロダクトに対する共通認識も生まれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134812/04e87064-dc57-599e-27a6-edc6d53b047c.png)

ちなみにプロダクト名のSOE.L（ソエル）は、`Sense Of Enpathy, Lively`の頭文字を取ったもので、「共感をリアルタイムに届けたい」という想いで名付けました。

### テーマ選定時の議論
今回、開発テーマは自分たちでやりたいものを決めました。
いくつかテーマ案がありましたが、最終的には以下の想いを判断基準にしてテーマを1つに絞り込んだ結果、上記に取り組むことになりました。

- 今後も使ってもらえるものが良い
- 技術的に難しそうでもチャレンジしたい

後付けの理屈ですが、結果として開発する本人が想いを持って取り組めるアイデアにしたからこそ、最後まで頑張れたと思います。（←ソフト未経験ですからね？しんどいこともありましたよ！）

### 開発1週目 ~プロトタイピング~

プロダクトで大切にしたかったこと

- 聴講者が気軽に講演に対する反応を送れる
- 聴講者の反応をリアルタイムに全体共有できる
- そのリアルタイム共有の見た目は、オフラインセミナーの会場の空気感を表現したものにする

この時点では、下図キャプチャの右下赤枠の様なプロダクトを目指していました。
（キャプチャに`SONTACK`とありますが、これは開発当初のプロダクト名でした。「聴講者/講演者がお互いを忖度する」といった使われ方をするだろうと捉えてそうつけていましたが、開発が進む中でチーム内で認識が変わり、プロダクト名もそれに合わせて`SOE.L`に変更した経緯があります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134812/e7614d17-b592-fe0b-5eed-2cdaba1afbd1.png)

プロダクトのターゲットは、オンラインセミナー講演者/聴講者であり、聴講者1人1人がセミナーの**講演内容に対する主観的な理解度/興味をリアルタイム送信できる機能**を検討していました。（ラジオボタンの部分）
そして聴講者の回答を集計して、聴講者全体で理解度/興味ありの割合を、セミナー講演者/聴講者が共通で確認できる様にアウトプットされ、全体の傾向を見せる機能を検討していました。（表情アイコンの部分）

### 開発最終週 ~完成形~
最終週のプロダクトの姿は蓋を開けてみると、ラジオボタンも表情アイコンも影も形もありません・・・でも、それでよかったんです。

アジャイルに開発する中で、**”小さく作って使ってもらい、そのF/Bからまた小さく作る”**、この繰り返しを経て当初のイメージ通りでなくとも、プロダクトは目的に向かって前進していました。

実際にどんなアプリになったか、gifで是非ご覧ください。

![SOEL_gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134812/8c24d2c8-2d51-b8df-958c-5881bca93bfd.gif)

プロダクトで大切にしたいことへコミットできているか、振り返ってみると、

- 講演に対する反応を聴講者が気軽に送れる
  - 主観的反応をワンクリックで送信可能
- 聴講者の反応をリアルタイムに全体共有できる
  - ボタンクリック後、文字が浮かぶエフェクトは全員の画面上に出現
- そのリアルタイム共有された反応は、オフラインさながらの空気感を表現する
  - 1クリック毎にエフェクトが1つ発生し、参加者全員のリアクションを量で認識可能
 
と、確実にプロダクトの目標に向かって進化させることができました。
 

### 振り返り
不思議なことに見かけは当初のイメージと違っても、やりたかったことを実現できたことに驚きました。今回のオンボーディングで開発に取り組んだプロダクトの課題設定に関して言えば、唯一の正解というものは定義できない課題だったと思うので、そういった領域のプロダクト開発にはアジャイル開発は相性がいいと体験で学ぶことができました。

# 最終的にできたウェブアプリ
gifは再掲しませんが、以下の特徴を持ってます。

- 簡単に使える様に、ユーザー登録不要で使い始められる
- 気軽に使える様に、投稿メッセージは匿名で送信される
- 簡単に講演にリアクションできる様に、1ボタンで楽しいエフェクトが送信される
- 簡単に質問を他の投稿と差別化できるように、チャットボックスの色が質問専用色で送信される

# 社内ユーザーの声
SOE.Lは既に社内公開していて、実際に色んな社内イベントを盛り上げるツールとして使っていただいています。
中には、こんな意見も頂いていたり・・・

> ・通常のチャットツール（Slack等）だと投稿しづらいと感じていたが、SOELだと匿名化＆くだらない意見でも流してくれるので使いやすかった。
・「率直な意見の出やすさ」の観点で、ばっちりのアプリでした！
・匿名で投稿できるため、普段意見を出しにくい人からも反応が得られやすいと思いました。また、リアルタイムに反応を確認できるため意見交換のツールとしてとても便利だと思いました。

自己満足でなくユーザにも喜んでもらえるものが作れました、そうアジャイルならね。

# 終わりに
開発チームにアサインされて改めてオンボーディングを振り返ってみると、かなり実際の開発作業に近い形式で実践させて頂いてたと実感しました。おかげさまでプロダクト開発の進め方に対しては違和感なく配属後もチームの進行についていけている状況です。というところで紹介を終わろうと思います。

本記事を読んでみて、「このWebアプリ（SOE.L）使ってみたいなー」という方いらっしゃいましたら、LGTMでリアクションいただけると嬉しいです。社外の方からもニーズがありそうだなーと感じたら、公開するかも・・・