こんにちは！Helpfeelのデザイナーtakeru（@mountainboooy）です。

この記事はHelpfeel Advent Calendar 2022の11日目の記事です。この記事ではHelpfeel社で取り組んでいるモブデザインについてご紹介します。

‍

モブデザインとは

最近のHelpfeel社、特にGyazoの開発チームの中ではモブデザインを実施しています。モブデザインとは、関係者数人が集まり議論とデザインを同時に進める作業です。レビューと編集作業を同時に進めることができるため、意思決定のための時間を大幅に短縮できるという特徴があります。Gyazoの開発チームではデザイナーだけではなくPdMやエンジニア、場合によってはCEOやCTOまで参加してこのモブデザインを実施しています。

‍

きっかけ

チームでモブデザインを始めたのは最近の話です。それまでは制作と議論は完全に切り離されていました。

自律性の高いHelpfeel社では、デザイナーやエンジニアなどの職種に関わらず、常にUIの改善案が飛び交っています。エンジニアはコーディングでのアウトプットに慣れているため、必然的にGitHub上でのレビューが主な議論の場となります。ところがこの方法だとレビューのやり取りに時間がかかる上、一旦手戻りが発生すれば大きな時間のロスが生じてしまいます。こんな思いをしなくても、ユーザー動線や表示内容など構造に関わる部分は実装前に議論しておけば時間を省けるはずです。

この状況を改善したいと考え、ある時開発チーム内でFigmaの使い方の勉強会を開催しました。内容はとてもシンプルで、ワイヤーフレームの作り方を共有する程度のものです。1時間ほどで終わった勉強会でしたが、きっかけとしては十分だったようです。興味を持ってくれたPdMやエンジニアがその後独自で学習を続け、モブデザインを自ら実施してくれるようになりました。

‍

具体的な事例

例えばGyazoの新機能について検討したときのことです。この時はユーザーの動線を大きく変更する案だったので、CEOやCTOも加わりFigma上で一緒に編集しながら議論しました。

モブデザインでは大抵の場合あらかじめ叩き台を用意しておきます。この時も事前にアイデアを数パターン用意しておき、それらを眺めながら皆で意見を出し合い編集しました。「それならこっちのパターンもあるよね」「この要素も必要になるんじゃない？」と検討を重ね、皆が納得した形で次のフェーズに移ることができました。

またワイヤーフレーム以前に動線だけに特化して議論を進めることもあります。直近ではGyazoのサインアップ動線を検討する際にこの手法を用いました。Figmaのホワイトボード機能であるFigJamを使えばフローチャートを共同で編集できます。サインアップの動線はWebやモバイルなど各プラットフォームに共通する話題なので、関係者が認識を合わせておく必要があります。皆が集まっている場でフローチャートを共有し、足りない要素や動線をその場で洗い出すことができました。

モブデザインのメリット

モブデザインには以下のようなメリットを感じています。

① 時間短縮

関係者が編集しながらその場で意思決定を行うため、従来のレビュー方式に比べて格段にスピードが上がりました。また不要な実装作業が発生しないことによる時間短縮も大きいと思います。

② 意見を言いやすい

従来のレビュー方式に比べ、ネガティブな意見にも角が立ちにくいと感じています。「レビューする側とされる側」ではなく、お互いが当事者として意見を交わす感覚です。

③ 質が上がる

従来のレビュー方式であれば、「これは細かすぎるかな」と意見を控えてしまうこともありました。モブデザインであればその場で編集してブラッシュアップできるため、細かい部分に至るまでアイデアの質が上がります。

④ 実装前にコストを確認できる

実装前に関係者で全体を俯瞰するため、コストを確認しやすいと思います。また足りない要素やクリティカルパスを事前に把握できるため、後になってダラダラと作業が伸びるということが減ります。

‍

課題は判断軸の事前共有

メリットだけはなく、課題も感じています。モブデザインはお互いの意見を反映し素早く意思決定を行うのに優れた手法です。ただそのためには、事前にメンバーの判断軸をしっかりと揃えておくことが重要です。戦略的に何を目指しているのか、ユーザーにどんな体験を提供したいのか等々。もし判断軸を共有することなく作業に入ってしまうとお互いの意見が食い違い、収集がつかなくなってしまいます。

対策としてチームでは、ユーザーシナリオによる事前情報の共有を進めています。また最近ではPdMのyuisekiさんが開発メンバーを巻き込んだユーザーインタビューを積極的に進めており、こうした活動も判断軸の共有に有効だと感じています。

他にも、作り込みすぎないように気をつける、議論したいポイントだけにフォーカスする、 など実施の際に気を付けるポイントも明らかになってきました。基本的にデザイナーやエンジニアは作ることが大好きです。ついつい作り込んでしまうし、アイデアも発散しがちです。「議論のため」と割り切ってアウトプットをする事は中々難しいのかもしれません。この辺りは以前イベントで詳しくノウハウを話したことがありますので、興味があればぜひご覧ください。→ コミュニケーションのためのデザインモックアップ術‍

まとめ

以上、Helpfeel社で実施しているモブデザインの現状についてお伝えしました。メリットと共にまだまだ課題も山積していますが、今後も続けていきたいと思います。

Helpfeel Advent Calendar 2022の12日目はScrapboxのプロダクトオーナーであるshokaiさんが「Elasticsearchを無停止かつ元気よくスキーマやサーバー構成を変更できちゃう開発体制を作った」の記事をお届けします。お楽しみに！

‍

他メンバーの記事はこちら→Helpfeel Advent Calendar 2022