Goodpatchは、2012年12月より、ブレインパッド社のRtoasterという「Webプラットフォーム／レコメンデーションエンジン」のUI設計、デザイン制作、フロントエンド開発に携わっています。このたびリニューアルが完了したこともあり、プロジェクト中のワークフローやユーザーインタビュー、使用したフレームワークなどについて、当時を振り返りながらお話を伺わせていただきました。

 

今回インタビューを受けてくださった会社

株式会社ブレインパッド

ブレインパッド社は、2004年の創業以来「ビッグデータ」という言葉が世の中に広まる前から、大量データの分析を通じてクライアント企業の意思決定支援に取り組んでいます。現在、金融・小売・メーカー・サービスをはじめとする多数のクライアント企業に対し、データ分析およびその関連サービスのパイオニア企業として、分析業務支援からデータ活用のためのソリューション提供までをワンストップで提供しています。

 

今回Goodpatchがリニューアル支援を行ったRtoasterは、プライベートDMP（データマネージメントプラットフォーム）機能を兼ね備えたクロスチャネル型のレコメンデーションエンジンです。Webサイト上でのユーザー行動履歴や顧客属性などの自社データや、様々な外部データをRtoaster内のプライベートDMPに蓄積することにより、広告/Web/メールなどのさまざまな顧客接点で統一されたマーケティング施策を実施することができます。

ブレインパッド社は、他にもリスティング広告最適化ツール「L2Mixer」や大量データ蓄積＆分析PaaS「Cloudstock」など、データに基づくマーケティング施策を行うための様々なサービスを取り扱っています。また、最近では、レシートを撮影するだけで家計簿がつけられるiPhoneアプリ・Androidアプリ「ReceReco（レシレコ）」も開発しており、5ヶ月で100万ダウンロードを達成、App Store無料総合ランキングで1位を獲得、2013年のグッドデザイン賞にも選ばれました。

今回、ブレインパッド社のオフィスにお邪魔して、当時のことを振り返りながらリニューアルのきっかけやプロジェクト中に議論した内容などについてインタビューをさせていただきました！

Rtoasterについて 〜データをストックするサービスを作りたかった〜

ーーまず、はじめにブレインパッドさん（以下、敬称略）はどのような事業を行っているのでしょうか？

弊社は、クライアント企業からお預かりしたデータを分析する、データ分析支援や関連サービスの提供を行っている会社です。その一環としてレコメンドエンジンであるRtoasterの開発・提供も行っています。レコメンド機能にとどまらず、クライアント企業が保有する各種データをきちんとストックし、マーケティング施策に活かすようなプラットフォームを作らないといけないね、というコンセプトをもとに、2006年から製品開発が始まりました。ですので、丸7年が経過したことになります。その他にも自社サービスをいくつか作っていますが、すべて「データ分析」に関連するもので、その軸は変わっていないです。

ーーそうなんですね。7年間でUIの変更は何回か行われているのですか？

全面的なUIの変更は今回が初めてですね。初期段階の画面は外部のデザイナーに委託して作ってもらいました。それから、私たちの方でアップデートを重ね、そのたびにどんどん機能が増え、メニューの追加を行ううちに、結果として画面のレイアウトが縦に伸びていってしまうほど多機能なサービスになりました（笑）。

リニューアルのきっかけ 〜多機能なサービスを使いやすく〜

ーー2年前（2012年）にリニューアルの依頼をいただいたのですが、きっかけは何だったのでしょうか？

はじめは、「Rtoasterの管理画面をAPI化しよう」というのが発端でした。大きな目的は、管理画面をAPI化することにより、他のツールとの連携を容易にすることでした。また、Rtoasterは、多機能で様々なデータを見ることも可能なサービスでしたので、お客様からも、Rtoasterのすべての機能を熟知するには、時間がかかるというお声もいただいていました。多機能であるがゆえ、使い方を理解するためのマニュアルも200ページくらいあり、読むのも大変でした。そこでRtoasterをよりわかりやすくしたいという思いからリニューアルをすることにしました。

ーーそういったきっかけでUIを変更することになったのですね。UIを変更する際にGoodpatchを選んでいただいたきかっけは何だったのですか？

実際にお会いして、Goodpatch の UI/UX に対する強い思いや、UI/UX に対する新しい技術や考え方を知りました。弊社内のプロジェクトチームのメンバーも新しい技術や面白い技術が好きな人間が多く、ぜひ Goodpatch とお仕事をしたいと思い、今回依頼させていただきました。

ーーリニューアルする際は何社か検討して弊社を選んでくださったのですか？

もちろん、数社から提案は受けたのですが、最初にGoodpatchとお話をした際にRtoasterの仕組みを理解した上で、設計・制作をしてくださるというということを聞き、Goodpatchにお願いすることにしました。リニューアルする際は、デザイン重視というより、ユーザーが使いやすいデザインであることを第一に制作して欲しいとお願いしました。

実際におこなわれたワークフローについて

今回のプロジェクトを進めるにあたっては、まずこの案件に携わるGoodpatchのメンバーがRtoasterを徹底的に使い込み、その後、他社のサービスを含めリサーチをし、現状の課題点を洗い出し、その課題に対する改善点を出し合ってブレインパッドとすりあわせを行いました。その後、改善点をふまえたワイヤーを作り、それをもとにモックアップを作成しました。

ーーGoodpatchを選んでいただき、その後、実際にプロジェクトを進めさせていただくことになったと思うのですが、最初の2ヶ月は、週に2回ほどの両社の定例ミーティングを重ねてUIを改善するディスカッションを行うフェーズがありました。こういったことは、以前から社内においても行われていたのですか？

やっていましたね。基本的に新しい機能を追加する際にはモックアップを作り、それを触りながら意見を出し合い、改善して、問題がなければ作り始めるという感じで行っています。

ーーその定例ミーティングにGoodpatchが加わってどうでしたか？

UI/UXのプロの目、第三者の目が加わることがとてもありがたかったですね。一目で何が悪くて使いづらいかということに長けている方々だったので、そこからUI改善に繋がる良い意見交換ができました。

ーー頻繁にミーティングを行ったことは、フロントエンド側を担当するGoodpatchにとっても良い機会で、 開発側の人たちがどのような視点でサービスを開発しているのかを深く知ることができました。そしてより良いUIになるように両社で議論できたことが、とても良い刺激になりましたね。

弊社には、クライアントから、Rtoasterを使った際の感想を直接聞いていたメンバーが多かったので、UIや使いやすさといったものに関心が強い人が多かったのではないかと思います。

ユーザーテスト

ーーワイヤー設計とモックアップ作成が終わった後、開発に移る前に一回ユーザーテストをしました。ユーザーテストでは、ユーザーの目の動きなど、ユーザーの表情がとても参考になりましたよね。

そうですね。詳細のユーザーテストはこれまで行ったことがなかったので、適切な方法を検討した上で、シナリオを用意し、ユーザーテストの様子を動画で撮影しました。数名の方にユーザーテストを受けてもらい、一人につき3つのシナリオを実施したので、合計2～3時間のユーザーテストになりましたね。

ユーザーテストの流れ

・シナリオを複数用意（今回は3つ用意）
・シナリオにそって作業をしてもらう
・声に出しながら作業をしてもらう
・表情とPCの画面、両方を録画する
・録画したものを見直し、課題をまとめ、改善案を考える

それぞれのシナリオは「あなたは○○をしようとしています。次の手順で設定をしてください」というような内容でした。ユーザーには作業を声に出しながら進めてもらっていたので、悩んでいることやわからない箇所といった重要な意見を直接もらいましたが、困っている表情や、マウスの動きなどを客観的に見た情報もまた改善に繋がる貴重な情報でした。

使用したJavaScriptフレームワークについて

ーー今回、リニューアルするにあたって、使用した技術についてお話したいのですが、一番印象に残っているのがSencha Ext JSを使ったことですよね。

そうですね。これはRtoasterの開発者の一人が「こんなおもしろいものがあるよ」と言ってもってきたものでした。今回のアーキテクチャを実現するのには、とてもフィットしたものだったと思います。このライブラリ一つでたいていのことはできるオールインワンなフレームワークでした。リニューアル後のRtoasterの管理画面ではAPIベースでサーバーとクライアントを分離したのですが、Ext JSはAPI での通信処理が強いフレームワークで、ドキュメントも豊富に用意されており、MVCフレームワークにのっとって開発を行うため、独自フレームワークを構築するより楽に開発することができました。ただ、機能が多く独自の世界観をもったフレームワークであるため、学習コストが高いのが難点です。

ーー触ってみた感じ、デザイン周りのカスタマイズ向きのライブラリではないなという印象がありました。

通信回りの処理が楽に記述できたり、ここまでオールインワンになっているJavaScriptライブラリはなかなかないのでとても良いのですが、万人にお勧めできるものかというと、そうではないですね。他のフレームワークやライブラリに比べて、Ext JS が提供するデザインパーツに自由度がないため、Ext JS で出来ることを想定してデザインを組まなければならないことが多かったです。

Sencha Ext JSの特徴

・コンポーネントが充実しているのでやりたいことがすぐに実現できる
・Ext JSを使ったページでは最初に読み込みを行うので、読み込み後のレスポンスが早い
・APIを読み込みにいって表示させるという機能がExt JSには最初からある
・機能を実装するために必要なコードの量が多い
・独自で用意しているUIがそのまま使用されることを想定して作られているので、デザインのカスタマイズが大変

Rtoasterは、データのやり取りが多いサービスなので、早く動的にデータを扱うことができるSencha Ext JSは相性がよかったと思います。しかし、Sencha Ext JSは独自で用意しているUIがそのまま使用されることを想定して作られているので、デザインのカスタマイズをするのが大変でした。Senchaと類似のフレームワークとしてはSmartClientやExt Coreなどがあげられますが、Senchaは大規模なシステムや通信を多く行うサービスに向いていると思います。

リニューアルを終えて

リニューアル後は、お客様からも「直感的なインターフェースになった」「劇的にユーザビリティが上がった」という声を頂戴することが多いです。Rtoasterは、多機能が故に、設定項目も比較的多いほうなのですが、今までの画面は、ユーザーが「こんな施策を打ちたい」と思ったときに、複数のメニューを設定する必要がありました。リニューアル後は、ユーザーの目的にそって画面遷移が行えるため、多機能なRtoasterの設定に対する苦手意識がなくなったとのご意見もいただいています。
ユーザビリティの向上により、Rtoasterを初めて利用していただく方が管理画面に慣れるための時間を大きくに削減することができており、運用コストの短縮にもつながっています。
また、ポップなUIになって愛着がわいたというご意見もいただいており、開発者としては嬉しいですね。ただ、旧バージョンに慣れているユーザーにとっては、旧バージョンならではの利便性もあり、クライアントからの要望も多く上がってきているため、現在はその対応も行っています。完全に新しいバージョンに切り替わっているのではなく、旧バージョンと新バージョンを管理画面上で切り替えられるようになっていて、完全移行は2014年中旬頃を予定しています。

ーー旧バージョンと新バージョン平行運用の方がユーザーにとっては優しいのかもしれませんね。

確かにそうなんですが、平行運用をしている間に機能追加があると両方に追加しないといけないので、その点が大変ですね。

ーーちなみに現在の移行率はどれくらいですか？

半分くらいですね。ぱっと移る方は移るんですけど、移らない方は旧バージョンが廃止されるまで使い続けるのかもしれません。もちろん、新規のお客様は新しいバージョンを使ってくださっています。

ーーやはりユーザーは普段使い慣れているものを好む傾向にありますね。特に利用頻度の高い管理画面ではUIを変更したことで新しい操作に慣れるまでの学習コストがかかるので、素直に移行できないケースもあると思います。私たちとしては是非とも新しい方を利用して欲しいですが（笑）

管理画面では、一番ユーザビリティの向上を検討し、ユーザーへの負担をどれだけ減らせるかが重要課題ですので、私たちは機能追加や時代の変化とともに常にユーザビリティを改善していきたいですね。

ーーそうですね。現状のUIがこれから先も正解だとは思っていません。機能追加や環境の変化に応じて、改善を重ねていくことで使いやすいUIになると思います。そして私たちはユーザーが使いやすいと考えるUIを作るのはもちろんのことですが、ユーザーだけでなくサービスを提供するクライアント企業も含めて「驚き」を与えられるようなUIを作りたいと思っています。

以上でインタビューは終わりです。今回のインタビューはブレインパッドもGoodpatchメンバーも制作当時のことを思い出しながら、とても賑やかな雰囲気の中、行われました。インタビュー後はブレインパッドのオフィスも見学させていただきました。 インタビューを通して、ブレインパッドで働いているエンジニアの方々は管理画面においてもユーザーの使いやすさを非常に考えながら開発されている印象がとても強かったです。いいサービスを作るにはエンジニア、デザイナーともにユーザーのことを考えながら作ることが大事なのかもしれません。ブレインパッドの今後を楽しみにしています！今回はインタビューにご協力いただきありがとうございました！

今回インタビューを受けてくださった会社

株式会社ブレインパッド

ブレインパッド社は、2004年の創業以来「ビッグデータ」という言葉が世の中に広まる前から、大量データの分析を通じてクライアント企業の意思決定支援に取り組んでいる会社。現在、金融・小売・メーカー・サービスをはじめとする多数のクライアント企業に対し、データ分析およびその関連サービスのパイオニア企業として、分析業務支援からデータ活用のためのソリューション提供までをワンストップで提供しています。

ブレインパッド社の主なサービス

Rtoaster: プライベートDMP（データマネージメントプラットフォーム）機能を兼ね備えたクロスチャネル型のWebプラットフォーム／レコメンデーションエンジン
L2Mixer: リスティング広告最適化ツール
Cloudstock: 大量データ蓄積＆分析PaaS
ReceReco（レシレコ）: レシートを撮影するだけで家計簿がつけられるiPhone/ Androidアプリ

Share on

Goodpatch
Goodpatch公式アカウントです。