オンラインホワイトボード「Strap」を開発

大竹智史氏:グッドパッチの大竹です。グッドパッチは、「Strap」というプロダクトを作っています。いわゆるオンラインホワイトボードというジャンルで、海外製品の「FigJam」「Miro」といったプロダクトが競合になります。

作り始めて2年半が経ちますが、個人作業の資料作成や、会議で使っていただくことが多いです。業務時間の8割のドメインを占めるかたちで使っていただいています。業務時間で一番使うところなので、ユーザーによっては人生の中で一番使っていただく領域のプロダクトです。

個人作業や会議で使うところで、AIのベータ機能を出しました。主に資料作成や、コミュニケーション文脈でコラボレーションを加速させるAIの機能を5つリリースしました。

「アイデアを出して」というかたちで、あるテキストデータに対してアイデアを発散する機能や、同じようにタスクを設計する機能。また、「コメントして」というかたちで何かしらのコメントが出される機能と、比較表というかたちで判断軸を整理する機能。(スライドの)右下は「名前を付けて」というかたちで、いわゆる要約ができる機能を出しています。

設計はかなりシンプルです。OpenAIのAPIを使っていて、JSON形式で構造化されたデータを介してこちら側で描画するという機能になっています。

複数の付箋のデータを基にコメントをしてくれる「コメント機能」

今日は、一番反響のあったコメント機能を中心にお話できればと思っています。コメント機能が具体的にどういうものかというと、「LLMの未来はUXにある」という言葉に対して、(スライドを示して)こういったかたちでコメントされるというシンプルな機能になっています。

(スライドを示して)複数の付箋のデータを基に何かしらのコメントをしてくれます。例えばこの右側に書いてあるように「UXに特化した学びを提供しよう」「フィードバック文化を育てよう」「失敗を恐れずに実験しよう」など、わりとありきたりなコメントをくれる設計にしています。

あとは、これは同じ機能なのですが出力を少し意図的に変えています。(スライドを示して)このように斜め上から見ているようなコメントをしてくれたりもします。例えば「UXなんて、流行語に振りまわされているだけじゃないの?」とか「開発環境? そんなもの必要か? 手でプログラミングしろよ」とか、「LLMの未来? どうでもいいんじゃないの?」みたいな、比較的厳しめなコメントもしてくれるのが、このコメント機能です。

ユースケースは、出してみての反響です。定量的なデータは出せないものの、一番この機能の反響が多いです。

具体的なところでいくと、コミュニケーションやミーティングの文脈で、例えばこのN1なんですけど、画面OFFでおとなしいメンバーの参加が多いミーティングをやっており、これまでは話題の起点にファシリテーターが困っていました。どうしてもそのチームの中に太鼓持ち的な役割だったり、意図的に質の低いコメントやアイデアを出してくれるメンバーがいなかったので、そういった文脈でこのAIのコメント機能がその役割を買ってくれると評価いただいています。もちろんこれを出してみてわかった部分もありつつ、意図的に設計したところもあります。

「コメント機能」設計のポイント

この体験の設計のポイントについてお話できればと思います。全体像として、本当にいろいろなことがLLMの技術によってできるので、どういった機能を顧客にデリバリーするべきなのか? というところをまず考えました。顧客にデリバリーするべきものと、R&D的に開発内部で進めるものと、着手すべきでないものを分けています。

UXの価値基準と、インプットデータで6軸に分けています。それぞれに対して、今の段階で実装するとコストがどうなるのか? という話と、最終的に今はOpenAIのAPIを使っていますが今後はAzureを使うか? Googleが追随した場合どの技術を使うか? という話もあるので、そういった場合に独自のデータをチューニングすべきか? という観点ないし、お客さんのデータを使う場合に市場のリテラシーとしてお客さんに受け入れられるか、という観点であったり。

あとは、最終的にテックジャイアントやグローバルのスタートアップが同じことをすれば良いのか? というところで、今やるべきなのか、今後半永久的にやるべきではないのか、コストが見合うタイミングでやるべきなのかというところで、今は研究開発に留めるような機能を設計しました。この中で、比較的今実装可能な領域が(スライドの)左のほうにあるので、この5つの機能をリリースしました。

優れたユーザーインターフェイスの条件とは何か

体験のブランドデザインについて。優れたユーザーインターフェイスの条件として、同じ入力で異なる出力がされるようなものがあるなと思っています。コンテクストのデータによって最適な操作を計算したり、動的な制御をしたり、学習のコストは低いけれども多様なユースケースを同じアクションで結果として返したりするものが、優れたユーザーインターフェイスだと考えています。

なので、今かなりケアしているのが、できる機能が増えてきた時の機能の肥大化です。いわゆるメニューが無限大に増えていったり、データに応じて機能を分けるという学習コストを上げてしまう機能は避けようと考えています。

例えば(スライドの)左の付箋に対しては、アイデア発散する機能が使えますが、右側の作図したテキストデータに関しては使えないという振り分けはやめようと考えています。

とはいえ、入っているデータや、これまでどういう人がこのデータを扱っていたのかなど、複数のいろいろなデータが僕らのプロダクトの中では取れるので、そういったデータをプロンプトと一緒にある程度モデル化した上で提供して、成果物を動的に出すということを全体で意識しています。

なので、このテキストのデータを蓄積してモデル化して、それをプロンプトと一緒に出して、動的な各振る舞いも最適なかたちで出していくことがどうやったらできるか? というところをケアして考えています。

AIの出力によるデータを明示するためにキャラクターを活用

ここからはわりと具体的な話ですが、たいていの設計としてキャラクターを使っています。なぜキャラクターを使っているのか。これはAIの出力によるデータを明示したいという意図があります。AIが、出力したデータに対して選択すると動的にレコメンドを出すというのを今後はやっていきたいので、データとしてフラグも追加しています。

このデータに対して、AIが作ったデータの品質が足りなかったというところをシステム的な話だけではなく、ユーザーに明示的に伝えていったほうがいいので、このキャラクターを使っていたり、データとしても色を変える設計をしています。

入力の自由度に関しても工夫をしています。例えば(スライドを示して)こういったかたちで付箋や図形などいろいろなエレメントが付いたデータがあった時に、組み合わせでさまざまな出力ができるように、複数のデータからAIを活用するというところを共有するための入力のデータの自由度を設計しています。

コメント機能に関しては、複数のキャラクターを使用しているのですが、回答のデータの精度がまだまだ担保できないところがあったり、ランダム性を許容したほうがいいと最終決定をしたので、体験のデザインを合わせるかたちで複数のキャラクターを使っています。回答の質が低かったとしても、ユーザーの期待値に合う体験設計ができるキャラクターを意図的に作っています。

これはラベルの設計も同じですが、批評家的なコメントをしてくれるタイプと、名言風のコメントをしてくれるタイプがいます。実際にプロンプトで指定している内容は、「名言を出して」とか「批評してくれ」というかたちにしているのですが、意図的にラベルをコメントというかたちにすることで、期待値のギャップを設計しています。

最後に、私たちもエンジニアを絶賛採用中なので、興味があったらぜひ応募してみてください。以上です。