PLAIDがNode.jsを採用し、5年間で12万行書いてわかったこと

<html><head></head><body>はじめまして。デザイナーの @kazutokojima です。 
KARTEを実際に利用されている方の目線でプロダクトの使い勝手や体験を良くしていく「Kaizen」チームとして活動しています。
今回は、昨今よく聞くコンピュテーショナルデザインの考え方とその取り組みについてお話します。
<hr>
<h2 id="デザインの種類">デザインの種類</h2>
「Design in Tech Report」については、2015年版の最初のレポートから読まれている方も多いと思います。
最近ではTHE GUILD勉強会「Design in Tech Report 2018 を読み解く」でも取り上げられました。 
今回の記事を書く上でとても参考になったのですが、その内容が<a href="https://goodpatch.com/blog/1st-design-in-tech-report-2018-the-guild/" target="_blank" rel="noreferrer">記事として公開</a>されていますので、もしまだお読みでない方はぜひ読んでみてくださいね。
さて、同レポートでは2016年版から「３つの種類のデザイン」が提唱されています。
<iframe src="//www.slideshare.net/slideshow/embed_code/key/3XJKMfA5UIw6Rw?startSlide=47" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe> <div style="margin-bottom:5px"> <a href="//www.slideshare.net/johnmaeda/design-in-tech-report-2016-59530038" title="Design In Tech Report 2016" target="_blank">Design In Tech Report 2016</a> from <a href="//www.slideshare.net/johnmaeda" target="_blank">John Maeda</a> </div>
上記のスライドを参考にそれぞれ見てみましょう。
<h4 id="クラシカルデザイン：">クラシカルデザイン：</h4>
ロゴやポスターや建築、家具などデザイナー自身の意匠により最終的な完成品を仕上げることを目的としたデザインを指してそう呼んでいるようです。一般的に、他者への影響力や受賞歴など外部的な要因が成果となるようです。
<h4 id="デザイン思考：">デザイン思考：</h4>
同レポートではユーザーニーズ（共感）からビジネス上の課題（バイアス）を見つけ出し問題解決するために用いるプロトコル（手順）を指してそう呼んでるように思います。クラシカルデザインとは対象に、複数のステークホルダーとの合意形成など内部的な要因が成果となることが多いです。
<h4 id="コンピュテーショナルデザイン：">コンピュテーショナルデザイン：</h4>
本来は設計などの知的作業をコンピューターに任せる新しいデザイン手法を指すようですが、同レポートでは利用環境や利用者数などの違いからクラシカルデザインと対比して、永遠に持続することを目的としたデザインというように捉えることができると思います。常に変わり続けて完成しないため、成長を続けていることだけが成果と言えるかもしれません。
 
 
と、同レポートに記載されている内容を書き出してみました。
それぞれのデザインの違いと、コンピュテーショナルデザインをどういう文脈で語ろうとしているかについてはご察しいただけたかと思いますが、これだけでは「コンピュテーショナルデザイン」がどういうものかまだピンと来ないですね。
では、どういう文脈でコンピュテーショナルデザインを語ろうとしているかという前提が共有できたものとして、今回の記事の本題に入っていきたいと思います。
<hr>
<h2 id="デザインのScaleの関係">デザインのScaleの関係</h2>
ここから今回の記事の主張に入っていきたいと思います。
さきほどのスライドの図では、よく見ると3つの種類のデザインを「Scale」という横軸をとって並べています。 
その関係性を知ることで、コンピュテーショナルデザインをより立体的に理解出来るようになります。
では、「クラシカルデザイン」→「デザイン思考」→「コンピュテーショナルデザイン」のScaleの関係を整理してみましょう。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/8fcd9593-d113-418d-938e-7571482ff9d2/Untitled---New-frame--2-.jpg" alt="Untitled---New-frame--2-">
<h5 id="→ クラシカルデザイン">→ クラシカルデザイン</h5>
クラシカルデザインで重要なポイントとして「デザインをモノに定着させること」が挙げられます。 
デザイナー自身の意匠により見た人にとって良いと思えるような完成品に仕上げることはデザインにとって最重要と言えます。
まずは、クラシカルデザインのキーワードを「定着」としてみます。
<h5 id="クラシカルデザイン → デザイン思考">クラシカルデザイン → デザイン思考</h5>
本来の「クラシカルデザイン」は才能ある個人による専門領域と言えますが、徐々にチームで対抗するプロセスが生まれていきます。自身の発想に依るのではなく、他者のニーズから着眼点を得る手法は今日ユーザー中心デザインなどと呼ばれています。
天才でなくともよいデザインが生み出せるようになり製品・サービスのコモディティ化が進むと、クラシカルデザインで言う「定着」作業の前段階においてさらに大きな視点で考えよう、という流れが出てきます。
そして、ユーザー中心にビジネス全体を考える「デザイン思考」が大きく注目されます。 
デザイン思考を広めたとされるIDEOのCEOティム・ブラウンは以下のように述べています。
<blockquote>
デザイナーの感性と手法を用いて、顧客価値と市場機会の創出をはかるもの
</blockquote>
デザイン思考は、「定着」作業を除くユーザー中心のクラシカルデザインのプロセスと同じと言えます。 
クラシカルデザインとの親和性はもちろん、デザイナーだけでは困難な規模の「発想」が出来るようになった点に「クラシカルデザイン→デザイン思考」のScaleの関係性をとることが出来ます。
<h5 id="デザイン思考 → コンピュテーショナルデザイン">デザイン思考 → コンピュテーショナルデザイン</h5>
クラシカルデザインとデザイン思考が深く結びついたことで、製品やサービスの品質は今まで以上に向上しています。
ただ、近年スマートフォンなどのテクノロジーが急速に発展を遂げながら個人に行き渡り、たくさんの人たちのコンテクストが実データとして得られるようになると、ユーザー中心に課題を捉えて解決策を形にするというプロトコルは、ユーザーからの情報量の増加に対してアウトプットのスピードが足りない、という事態に陥っているように捉えられるようになります。
そうなると、1つのモノに関わる利用者数の増加やテクノロジーの進歩に対して、ユーザーのニーズを満たす製品・サービスを提供するための考え方が必要とされるようになります。
そして、コンピュテーショナルデザインがそれにあたるのではないか、と同レポートからは受け取れるように思います。コンピュテーショナルデザインの核が、完成を求めず常に進化を続けることなら、別の言い方をすると、持続可能性を担保することとも表現できます。
それを「デザイン思考→コンピュテーショナルデザイン」のScaleにあてはめて考えると、デザイン思考で得た「発想」を「持続」して成長させ続けることができる関係が見えてきます。
 
 
こうしてScaleの関係を整理してみると、3つの種類のデザインには密接な関わりがあり、またそれぞれのデザインへの取り組みが製品やサービスを大きく成長させるために必要だと言えることがわかりました。
KARTEという自社のプロダクトに関わり、大きく成長しようとしている今、まさにこのコンピュテーショナルデザインの「持続」という考え方がぴったりとハマるように思います。そうすると、それをどのように実行していくのかが重要になってきます。
では、コンピュテーショナルデザインの取り組みへの第一歩として、KARTEで具体的にどのようなアプローチを進めているのかを見ていきましょう。
<hr>
<h2 id="コンピュテーショナルデザインの第一歩">コンピュテーショナルデザインの第一歩</h2>
「発想」を「持続」するために何から始めると良さそうか。
デザイン思考のScaleとしてコンピュテーショナルデザインを捉えると、製品やプロダクトのデザイン面だけの成長だけでなく、中期・長期的には組織の成長にも適用していけるように思います。
私個人としては、コンピュテーショナルデザインへの第一歩は将来的には組織・チームとしての持続性の醸成につなげていくためのものと考えています。
少しづつコンピュテーショナルデザイン的な考え方を広げていくために、個人規模で出来ることから探ってみます。 
まず、デザイン思考で上手く行かない部分からきっかけを見つけようと思います。
デザイン思考で「発想」し続けることが難しいと思われる理由に、ユーザー中心デザインの核とも言える「ペルソナ」が機能しないと思える点が多いことが挙げられます。
事実、KARTEのプロダクトにおいても業種や役職など多種多様で、チーム内でのブレない人物像を作り上げることは非常に困難なことです。仮に時間をかけて作成したとして、そのペルソナの行動の背後にある状況については推測が多くなるのが実際で、実データを原動力とするコンピュテーショナルデザインにおいては推測する時点ですでに不適合だと感じてしまいます。
ペルソナが上手く機能しづらい「事実」や「スピード」の要素を補完する他の方法はないかと検索していると、<a href="https://www.intercom.com/blog/using-job-stories-design-features-ui-ux/" target="_blank" rel="noreferrer">こちらの記事</a>で「Job Story」という手法の存在を知りました。
記事の主旨は、ペルソナを使用するユーザーストーリーの代替として、ユーザーのジョブに着目したJob Storyの利点についての説明になります。ジョブという言葉が示すように、クレイトン・Ｍ・クリステンセン氏のJTBDの考え方をベースとしているようです。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/550204c1-a2a9-481f-ae28-8f71e07b462e/Untitled---New-frame--1-.jpg" alt="Untitled---New-frame--1-">
ユーザーストーリーは、ユーザーが実現したいことやユーザーにとって価値があることを簡潔にまとめた文章のことで、アジャイル開発などでよく使われるモデリングの手法のようです。短い期間でイテレーションをまわすアジャイル開発において、ユーザーストーリーはそれ自体が機能要件として扱われることもあるようです。
対してジョブストーリーは、アジャイル開発におけるユーザーストーリーの機能的な側面を持ちつつ、ペルソナなどの推測部分を取り除くことで、ストーリーの因果関係をより明確にすることが出来ると説明されています。
両者の違いとして前者は「誰の」視点なのかにフォーカスしているのに対し、後者は「どういう時に」という状況にフォーカスを置いています。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/3dd5c4a9-5675-428c-9bef-b01326cd5398/Untitled---New-frame--5-.jpg" alt="Untitled---New-frame--5-">
具体的にどういう違いがあるかを書いて比べてみます。
ユーザーストーリー：
<ol>
<li>マーケターとして</li>
<li>ユーザーの個別の行動を知りたい</li>
<li>だからKARTEを使う</li>
</ol>
ジョブストーリー：
<ol>
<li>ユーザー獲得もいよいよ天井が見えてきて、ユーザーごとの売上を伸ばすのが重要になってきた</li>
<li>ユーザーの個別の行動を知りたい</li>
<li>だからユーザーに対して個別にアクションを行え、LTVを高めやすいKARTEを使う</li>
</ol>
あくまで例ですが、フォーカスを置く対象が変わることで、前提条件との因果関係がよりはっきりするように思います。また、同じような規模のサービスが似た状況にあるだろうことも事実に基づいて考えることが出来ます。KARTEで言えば、「似た状況にあるサービスの数」×「LTVを高めるためのアイデアのインパクト」から優先度の決定までスムーズに行えそうです。
「Job Story」であれば、事実に基づき素早く判断して製品やサービスの成長を「持続」させることが出来そうなので、まずは下記の要望・フィードバックフォームを作成するところから始めました。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/65513e5f-0e46-46aa-9f92-148a3924ca2a/----------2018-08-06-22.05.32.png" width="50%">
最初ということもありわりと忠実にJob Storyを再現しています。 
当初は本当に和訳に近い形式で制作していたのですが、チームのメンバーにレビューを受ける中で日本語との違いや、文章の理解にブレが生じやすいことがわかったので、何度か修正を繰り返してこのフォーマットにしています。
現在は、このフォームを手始めに、いくつかある要望やフィードバックを受け付ける際のフォーマットを同じようなものに統一していきたいと考えています。また、チーム内でもジョブの考え方が広まってきており、少しづつユーザーの状況にフォーカスする取り組みが増えてきています。
直近は、ユーザーからの要望やフィードバックに細かな粒度で個別に素早く対応することになると思いますが、このようなフォーマットで要望やフィードバックを積み重ねていけば、本質的な改善を事実に基づいてブレのない状態でチームとしてこなせるようになるのではないかと期待しています。
事実に基づいていれば情報や判断に迷いが無くなるので当然スピードも上がります。また、足し算的な修正ではなく、引き算を含めた本来の意味での改善にも根拠を持って取り組めるようになります。
こうして、コンピュテーショナルデザインの言う常に変わり続けることを「持続」し続ける状態を生み出し、さらにこの繰り返しがやがて本来の意味でのコンピュテーショナルデザインに合流できれば良いなと思います。
<h2 id="終わりに">終わりに</h2>
というわけで、自分なりの考えでコンピュテーショナルデザインの第一歩に「Job Story」を選び、実際にトライをしてみている、というお話でした。
ネット上では、「ペルソナに変えてJTBDモデルにしよう」という記事もたくさん見かけまし、それがベースとなっている「Job Story」自体は非常に有効なのではないかと思っています。
とはいえ、今回ご紹介した要望やフィードバックの集め方は遅効性の高い取り組みで、コンピュテーショナルデザインに求められるデータ駆動のスピードを獲得するにはまだまだ時間がかかりそうに思います。まだまだ工夫が必要そうです。
この記事を読んで、興味を持つきっかけや何かの助けになりましたら幸いです。
<hr>
CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体のデザインに興味がある！というデザイナーを募集しています。
詳しくは <a href="https://plaid.co.jp/recruit.html#designer" target="_blank" rel="noreferrer">弊社採用ページ</a> 
または <a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>
をご覧ください。
もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
 (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "https://platform.wantedly.com/visit_buttons/script.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
<hr>
最後までお読みいただきありがとうございました!
</body></html>

スケールには必要？コンピュテーショナルデザインの考え方とその取り組み