こんにちは。LINE証券のフロントエンドを開発している片山です。
先日、LINE証券のフロントエンドエンジニア全員でオフラインのワークショップを開催しました。今日はその日のことについて話したいと思います。
LINE証券のフロントエンドチームは東京と福岡のフロントエンドエンジニアで構成されているため、基本的にフルリモートで働いています。
リモートワークは私たちのワークライフバランスを向上させますが、コミュニケーションはオフラインでの作業と比べると気軽に行うことができません。
そのため、プロジェクトで関わっていないメンバーとのコミュニケーションが不足してメンバー間の相互理解ができていなかったり、個人が抱えている課題の共有ができていなかったりしていました。
また、LINE証券はCOVID-19の歴史的大流行の少し前にリリースされたため、私たちのチームはこれまでチーム全員が集まって顔を合わせたことがありませんでした。
このような経緯から、私たちはチームのエンゲージメントの強化と、チームが潜在的に抱えている課題や改善点を洗い出すために、オフラインでのワークショップを開催することにしました。
ワークショップは2日間で開催しました。私たちは対面で顔を合わせるのはこれが初めてなので、まず1日目はチームビルディングで行うようなワークを通してメンバー間のアイスブレイクを行いました。
そして2日目は、「LINE証券を作り直すなら？」というテーマで終日ディスカッションを実施しました。
1日目: チームビルディング
Wevox values Cardで相互理解を深める
まずは、Wevoxさんが提供しているバリューカード（Wevox values Card）を使って各メンバーの価値観を可視化・共有してみました。
バリューカードはオンラインでもできますが、せっかくなので実物のカードを購入してオフラインでわいわいやることにしました。
バリューカードはさまざまな価値観が書かれたカードの中から自分に合った価値観のカードを選別していくゲームで、個々人の価値観を引き出すことができるカードゲームです。
ゲームはまず、手札5枚からスタートし、山札又は捨て札からカードを1枚引きます。そして6枚の手札の中から一番自分の価値観から遠いものを捨てます。この手順を、山札がなくなるまで参加者全員でローテーションします。
捨てるカードは、簡単に決められることもあれば、何を捨てるか悩むこともありました。また、他の人が捨てた札を拾う人も結構いて、メンバー間の価値観の違いが目に見えてわかったのは面白かったです。
ゲームが終わったあと、「最後になんのカードを手札に残したのか」、「なぜその手札を残したのか」をメンバー間で共有しました。
実際に口に出して自分のカードの説明をすることで、自分が何を大切にしているかメンバーに明確に伝えることができただけでなく、自分が何を大切にしているのか再認識することができたと思います。
もし、皆さんもチームビルディングを検討されているようであれば、楽しく、メンバーの価値観を可視化できるバリューカードは本当におすすめです！
プログラミングしりとり
次に、プログラミングしりとりというゲームを行いました。プログラミングしりとりは、簡単にいうと、チームでモブプログラミングをしてお題のアプリを一から作るゲームです。
具体的には次のルールでお題のアプリをチームで開発します。
- Codesandbox live sessionを使って、みんなで1つのコードに対してプログラミングをしてアプリを作る
- 1人5分、順番にコーディングする。制限時間になったら次の人にバトンタッチ。次の人はそのつづきからコーディングを行う
- 誰かがコーディングしている間は、他の人はコードを触るのはNG。ただし、アドバイスはOK
- ライブラリの利用、既存のコードの修正は自由
- 最低限の機能を実装する
- 好きなアイデアを組み込んでOK
私たちは2チームに分かれて、次のアプリを作りました。
- シンプル音楽プレイヤー
- 五目並べ
制限時間5分のコーディングは短くて思っていたよりも難しかったですが、2チームとも時間内にアプリを完成させることができました！
また、プログラミングしりとりを通じて、コーディングがとても早い人、実はCSSめっちゃ得意な人がいたりと、普段リモートで働いていたらわからなかったメンバーの一面を見ることができたのはとてもよかったと思います。
みんなもくもくとコーディングしています
プログラミングしりとりの最終成果物
マメ知識共有会
少し時間が余ったので、急遽開発に役立つマメ知識のLT会を実施しました。Visual Studio Codeの便利ショートカットや拡張機能の話が多かったですが、それ以外にもChromeや社内ツールの便利機能の紹介もありました。
こういうマメ知識は普段はあまり話す機会がないので、改めて共有会をやってみるといろいろなことが知れて面白いですね。
ちなみに私は次の２つのTipsについて紹介しました。
- Visual Studio Codeで、特定のインデントの位置で開閉するショートカット（cmd + k → cmd + [数字]）
- Chromeのカスタム検索機能を使って、Jiraのチケットや社内Wikiの検索を簡単にする方法
2日目: ディスカッション 〜LINE証券を作り直すなら〜
2日目はチームやプロダクトが抱えていると思う課題を抽出するためにディスカッションを実施しました。
ディスカッションはLINE NEWSのチームが実施していたワークショップを参考に、「LINE証券を作り直すなら？」をテーマに実施しました。
ディスカッションは、AチームとBチームの2チームに分かれて実施しました。ディスカッションの進め方も、LINE NEWSのワークショップを参考に、このような流れで進めました。
- 午前の部
- 課題の抽出・深掘り
- 午後の部
- 中間発表
- 課題への取り組み
- 最終発表
午前の部
午前中はブレインストーミング的に、各自がそれぞれ考えている日頃の問題点やアイディアを抽出する時間としました。
この作業では、例えば、「利用しているライブラリの効率的なアップデート方法」、「テスト環境の改善」といった普段の業務の改善ポイントや、
「Turbopack使ってみたい」、「Redux-Sagaよさそう」(LINE証券ではRecoilを使っています)といった技術的なチャレンジや、
「こんなキャンペーン面白いかも」、「この機能LINE証券に欲しいよね」といったプロダクトの企画に関連するアイディアと、色々な意見を抽出することができました。
午後の部
午後の部では最初に中間発表として、お互いのチームの成果の共有とフィードバックを行いました。
それから「課題への取り組み」として、各チーム何かしらの課題に対しての解決案を考えてみるワークを行い、最後に各チームの最終的な成果の発表を行いました。
Aチームは午前中に上がった課題を発展させて、「フロントエンドエンジニアが普段何に気を配っているか」をテーマに「LINE証券のフロントエンドが行っている工夫をなくしてUXがとても悪いサイトにしてみる」という試みを行いました。
具体的には、下記のような工夫をなくして、今のLINE証券を改悪したサイトを作ってみました。
- コード分割をやめる
- レイアウトシフト対策をしない
- APIレスポンスのキャッシュをやめる
私たちエンジニアは、現状の問題点をいかに改善するかを考えて日々業務をおこなっていると思います。そのため、「プロダクトをあえて悪くしてみる」という取り組みはとても斬新で、非常に興味深い取り組みだと思います。
また、この取り組みは本来、他チームへフロントエンドの取り組みについて理解してもらうことが目的でしたが、この取り組みを通じて私たち自身も「自分達が普段何を大切にしているのか、それがどのようにプロダクトに貢献しているのか」を再認識することができました。
Bチームは午前中に抽出した課題の中から「フロントエンドで扱っているパッケージをアップデートしやすくするには？」という課題を取り上げました。
まず最初に、「なぜパッケージのアップデートがしにくいのか？」の要因分析を行い、次の２つの仮説を立てました。
- 動作を担保するためのテストコードが十分ではない
- QAチームとの意思疎通・連携が十分ではない
「テストコード」については、私たちのチームのテストコード作成に対する取り組みがまだ足りず、自分達が作成したテストコードへの信頼が取れていない点が課題になるのではないかと思います。
よって、私たちは「テストに対する取り組みや体制を強化していく」ことが今後重要になってくるのではないかと思います。
「QAチームとの意思疎通・連携」については、私たちがQAチームがどのように検証作業を行なっているか見えづらく、またテストにかかる工数や検証規模がわからないため、アップデートのようなフルリグレッションが必要なテストをお願いしづらいという問題があるのではないかと思います。これは、私たちエンジニアチームとQAチームのコミュニケーションが不足している可能性が高いと考えています。
冒頭でも述べた通り、私たちは業務のほとんどをリモートで行なっています。同じチーム内であれば、リモートでもある程度コミュニケーションを取りますが、他チームになってくるとなかなかその機会を作ることが難しくなります。
これを解決するために、まずはエンジニアチームとQAチームの間のエンゲージメントを高めてお互いの業務への理解をもっと高める必要がありそうです。
課題やアイディアは付箋を使って抽出しました
ワークショップを開催してみて
今回、2日間に分けてワークショップを開催しました。この2日間はあっという間でしたが非常に濃い時間を過ごすことができました。
1日目では、チームビルディング的な取り組みを通じてチームのエンゲージメントを高める時間に費やしました。特にValues Cardは個々人のマインドセットを、楽しく可視化することができたのでとても面白かったです。
2日目は、1日全てを費やしてディスカッションを行いました。1日の業務時間全てを使って密にディスカッションをすることは、これまで経験したことがありませんでしたが、自分達が抱えている課題について深く向き合うことができて非常に有意義な時間であったと思います。
流石に普段からこのように時間をとってディスカッションすることは難しいですが、年1回や2回くらいはチームでこういった時間をとって自分達の課題を深掘りして議論してみるのもいいのではないかと思います。
フルリモートでの作業は、雑談のような気軽なコミュニケーションがの機会がなかなか取れないので、メンバー間のエンゲージメントを高めていくことはオフラインでの仕事と比べて難しくなります。
私は今回のワークショップを通じて、改めてオフラインでのコミュニケーションの大切さ・強力さを感じることができました。今後も定期的にオフラインワークショップを開催していけたらと思います。
また、今回はフロントエンドチームだけのワークショップでしたが、他チームと合同のワークショップも開催してみたいです。そして、チームだけではなく組織としてエンゲージメントを高めて日々の業務の改善をしていけたらいいなと思います。
最後にブラウンの前で記念撮影をしました