Wantedlyの開発しているプロダクトの”開発の裏側”をCTOの川崎が聞きつつご紹介する「Wantedly技術座談会」の第二回。

今回紹介するのは、Wantedly Peopleの”話題”機能です。

”話題”機能とは、名刺交換をした相手とのつながりを更に深めるための機能です。名刺交換した相手の会社や業界に関連する"話題"、あなた自身が興味のある"話題"、さらに独自にピックアップした世の中の"話題"を提供します。

コンセプトを納得がいくまで繰り返し見つめ直し、その変化にあわせてUI変更もやりきった3ヶ月。
紆余曲折を経ながらも、Wantedlyのカルチャーの一つ”Code Wins Arguments(机上の空論で議論を重ねるよりも、コードを書こう！)”の精神を貫いたチームメンバーの2人に話を聞きました。

目次

1.名刺スキャンから始まった Wantedly People

2.“話題”機能に込めた思い

3.UIの気持ちよさにもこだわるエンジニアリング

4.ビジネスアプリの中で一番ポップなアプリになりたい

5.全てはユーザー体験をあげるために

■メンバー紹介

多和田 侑(左)

2016年9月入社。iOSエンジニア。2016年12月からPeople iOSチームのリーダーとしてPeopleチームのマネジメントを担当。映画が好き。甘党。今のおすすめは、”うさぎやのどら焼き”と、饅頭発祥のお店である”塩瀬総本家の志ほせ”。

青山 直樹(右)

2015年6月入社。コードも書けるフルスタックデザイナー。プロダクトだけでなく、広告のディレクションなども担当。Wantedly Peopleには立ち上げから参画。合計4人いるデザイナーチーム全体のリーダーも務める。社内でジョジョ立ちが一番うまい。

1.名刺スキャンから始まった Wantedly People

川崎：”話題”機能の説明に入る前に、知らない人もいると思うので、まずは、Wantedly Peopleについて簡単に紹介をお願いします。

青山：Wantedly People(以下People)は、人と人の繋がりを個人の資産として長く活用して欲しいという目的で、去年の11月11日にローンチしました。

Wantedlyは元々人と会社が繋がるVisitという機能を6年前から提供しています。しかし、企業の寿命が人の寿命より短くなると言われるなか、キャリアプランを作る上で、会社から離れ、個人が人脈や評判など仕事をする上での無形資産を管理する必要が出て来ました。そういった時代を生きるビジネスパーソン達を支えるインフラになりたいと思い開発したのがPeopleです。

Peopleは初め、名刺をスキャンする機能からスタートしました。それは、日本においてビジネス上の出会いは名刺交換から始まることがほとんどだからです。名刺交換から出会いを広くしてほしいという思いを込めて、これまでの名刺管理アプリ以上に、まずは、名刺のスキャンを気軽に行えることを目標に開発を進めました。

Peopleの最大の特徴は複数枚の名刺を同時に読み込み、かつ瞬時にデータ化できる、という点です。しかし、つながっただけでは終わりでは、人脈が次に活きる資産になったとはいえません。一方で、はじめて会った人と深いコミュニケーションを取るためのきっかけを作ることが難しいのも事実です。特に自分と異なる業界の話だと、話題を見つけるのも一苦労。

そこで、いかなる場で出会った人でも、その場ですぐコミュニケーションが取れるような”話題”を提供する機能が必要だと感じ、開発したのが、今回開発裏話をさせていただく”話題”機能です。

“話題”機能は、読み込んだ名刺の会社や業界に応じたニュースをその場で提供します。

イメージとしては、初対面同士の人の間に入る情報提供エージェント、といったところでしょうか。

2.“話題”機能に込めた思い

川崎：現在の"話題”機能の形になるまでに、何度かUI・UXの変更があったそうですね。

多和田：そうなんです。今の形になるまで、2回ほど大規模な変更がありました。理想はこうだけど、現実的に開発が厳しかったりして、進みながら方向修正を何度も繰り返しています。作り切って終わりではないので、開発が持続可能かどうかも大切です。

はじめは、ユーザー操作無しの受動的な体験、「眺めるだけ」で話題にキャッチアップできるように、というUIコンセプトで開発していました。そのために記事自体も社内で再編集してダイジェストで表示するUIを理想としていたのですが、編集に時間を割けるメンバーがおらず、工数的に厳しいとなりボツに。

文字にする力が足りないなら自分たちの力が活かせる事をしようということで、次はインフォグラフィックスの記事を作ることにも挑戦しました。ところが実際にやってみたら一つの記事を作るのが想像以上に大変でした。

常に人間のリソースがかかり続けるようなプロダクトにはしたくない、と思っていたので、もっとエンジニアリング的に賢いやり方はないかと並行で複数のコンセプトを検討していく中でたどり着いたのが現在のエンジニアリングによる「話題」の提供という方向です。

川崎：ありがとうございます。読んでいる方も疑問に思っていると思うのですが、他のニュースアプリとの違いはどういったところなのでしょうか？

多和田：ニュースアプリは世の中と自分の繋がりを作るもの、Peopleの話題機能は特定の個人と個人の繋がりを作るものだと考えています。ニュースアプリの目的は、世の中の一般的な流行りをキャッチアップすること。一方でPeopleの目的は繋がった人と関係を深めることです。

例えば、電機メーカーの人の名刺を取り込んだら、その人のプロフィール画面に、会社や業界に関連する記事が出てきます。また、タイムラインにも業界に関連した情報が出てくるようになります。

(ニュースと話題の違いを説明するデザイナーの青山)

川崎：“話題”機能のタイムラインには、業界に関連するニュースの他に、「People話題部」が編集した独自のニュースと、広告記事が流れてきますよね。もともと、広告を出すことは当初から構想にあったのでしょうか？

多和田：人脈管理機能しかない時から、広告はマネタイズの１つとして検討していたのですが、広告を出すのに適した場所が無かったんですよね。それで、今回の”話題”機能ローンチと同時に広告枠の販売を始めました。

川崎：ユーザー体験を損ねる可能性があるという点で、広告に対し良くないイメージを持つ人も一定数いるのではと思いますが、その点についてどう思いますか？

青山：広告そのものは本来、悪いものではないと思っています。広告をきっかけに、新しいコトに興味が出て知見が広がる様な体験ってないですか？　自分の興味のないことを無理やり見させられるから「広告って嫌だな」と感じてしまうと思うんですよね。

例えば、見ているサイトと全く関連性のない広告が文章の中や、SNSのタイムラインに出て来るとなんか嫌ですよね。そういった広告はクリック率も低いから、クライアントとしても嬉しくない。だから僕たちは、広告を出す時もコンテンツとして価値のあるものにすること、配信ターゲットに適切に届けることを意識しています。たとえ広告コンテンツでもアプリ全体の体験を崩さないは大切にしています。

川崎：話題機能を立ち上げて、実際にユーザーからの反応はどうですか？

多和田：まず、リテンション率が上がりました。以前は名刺を撮る時と、人を探す時にスポットで使われるだけだったのが、日常的に使ってもらうアプリへと徐々に変化しています。実際に数値にもそれが現れています。

また、話題機能だけを使っているユーザーもいて、これには驚きました。記事を提供するための話題部を立ち上げて、良質なコンテンツを配信してきた結果かなと思っています。

3.UIの気持ちよさにもこだわるエンジニアリング

川崎：より開発に踏み込んだ話も聞かせてください。まず、どれくらいの期間で、何人で開発したんでしょうか。

多和田：開発期間は3.5ヶ月で、メンバーとしてはiOSが3人、Androidが2人、デザイナーが1人、サーバーサイドが2人という体制です。Peopleの開発チーム総動員で、コンセプトの検討から進めました。

川崎：特にどの辺りに特に力を入れて開発をしましたか？

多和田：トランジションにすごくこだわっています。複雑なトランジションを入れたときに、全体がクラッシュしないようにまとめるのが難しかったですね。画面間の要素の連動はAndroidだと公式のサポートがあるんですけど、iOSには公式のサポートがないので、方法論を確立するところからやりました。

青山：名刺スキャンのモーションデザインが印象の強いアプリになっているので、「話題」にも共通のアイデンティティ、気持ちよさと完成度を持たせたいと考えました。トランジションのところは、プロトタイピングツールで作ったものとほぼ見分けがつかない再現度で実装されています。

多和田：また、起動時に叩くAPIが増えたため、データ通信量も多くなりました。元々、画面の生成に時間がかかっていたので、その部分を非同期で生成するようにして、起動までの時間を短縮するようにしました。

APIを分割して、サマリーを取得するAPIと詳細を取得するAPIに分けてサーバからのレスポンスが早めに来るような作りにして、実際に画面が表示されるまでの時間が短くなるようにしています。

川崎：起動時のスピードや表示スピードなどのパフォーマンスも大事な体験だから、アプリエンジニアの人には是非注目してもらいたいですね。

川崎：Swiftのアップデートも同時に行ったんですよね。

多和田：そうなんです。People iOSはSwift2から3への過渡期に新規に開発したアプリなので、技術的な負債返済よりも新規機能を開発することを今まで優先していました。

今回は事前の調査も含めて合計2週間ほどの超スピード作業でした。Swift 2.3 から Swift 3系はAPIの破壊的変更が多かったので、新規機能開発でリリースサイクルが長くなるので、このタイミングで実施しました。

タイトなスケジュールでしたが、テストの時間も確保することができたので、このタイミングでSwiftのバージョン移行をすることができて良かったと思っています。

川崎：iOSのアーキテクチャは何を採用しているのでしょうか？

多和田：MVVMをベースにしています。いまは、よくあるレイヤードアーキテクチャに移行している途中です。MVVMのViewModelの下に、もう一層加える形でアーキテクチャを作っています。今、導入しているのは、Interactorという層です。Interactorをしっかり作りこんで、今後の拡張をしやすくしていきたいです。

(多和田のWantedly Peopleのアーキテクチャに関するスライド)

川崎：多和田さんは、開発だけでなく、チームマネジメントもしてましたね。Peopleチームには途中からiOSエンジニアが1人増えましたが、そのときに気をつけていたことなどありますか？

多和田：途中から参加したiOSエンジニアが業務でiOSアプリ開発をした経験が少なかったこともあり、初めの1、2週間は自席から離れた場所で隣同士に座って、設計方針に関する相談、コーディングに関する質問や疑問にすぐに答えられる環境を作りました。

また、MVVMに関するサンプルコード、RxSwiftに関する記事やサンプルコードも紹介し、People iOSアプリを開発する上で必要な技術のキャッチアップができるようにサポートしました。

4.ビジネスアプリの中で一番ポップなアプリになりたい

川崎：次にデザイン面での話を青山さんに伺いたいです。個人的に一番気になるのが、ハートのアニメーションです。この着想はどこから思いついたのでしょうか。

青山：無限に「いいね」が押せるデザインは、別段新しいものではないんですよね。ライブ動画系のアプリとかは当たり前のようにやっているし。FacebookのLikeのように、1人1回しか押せないようにしなかったのは、「いいね」の数字よりもタイムラインが”盛り上がっている”という演出を重視したからです。

アニメーションについては、どういったタイミングで、どの向きにハートを飛ばすのかは、多和田さんや他のエンジニアと何度もディスカッションを重ねました。

いくら良い機能を作っても誰も使っていなければ人は集まって来ません。なので、すごくシンプルなインタラクションを通して、画面の向こう側にいる人を感じさせるコミュニケーションを生み出せたらという思いで作りました。

Peopleは個人ベースで、つながりを記録してもらいたいと思っています。そのため会社で仕事をしているときだけ使われるのではなく、日常的に使われるカジュアルなものである必要があるのかなと思っています。だから”話題”機能のUIに関しても、仕事のメディアだからって固くならないように、ビジネスアプリの中ではポップなものを目指しました。

川崎：デザイン面でもう一つ気になったのが、iOSとAndroidのアプリのUIがほぼ一緒ですよね。これまでのWantedlyのアプリには無い取り組みだと思うのですが、その意図を教えてください。

青山：開発の面でも、React Native や Xamarin などでの共通化の手法話は話題になっていますよね。今回はプラットフォームの作法に合わせるために、分け無いといけない部分以外は極力同じUIにしています。クオリティの高いデザインを作るためには同じ時間で2つのものを作るよりも、1つのものを突き詰めたほうがいい。

デザイナーでもモバイルを経験している人が増えてきて、どういうインタラクションであれば共通の画面で開発して良いのかもわかってきてるというのもありますね。

5.全てはユーザー体験をあげるために

川崎：Peopleはユーザーの声をこれまで以上に大切にしているなと感じます。FBグループがあったり、ユーザーミートアップをやったり。こちらの反応はどうでしたか？

青山：やってよかったなと心から思います。やっぱり僕たちはいつもユーザーファーストでありたいと思うし、普段なかなかユーザーと直接話す機会もないので。

多和田：イベントまで来てくれるってことは相当なヘビーユーザーってことなので、すごく良いフィードバックをいただけるんですよね。

青山：パワポで改善案を持って来てくれた人がいましたね！

川崎：そんな方がいらっしゃったんですか。

青山：来てくれた方の中に、Peopleのデザインが好きだっていってくださるおじさまがいまして。お酒を飲んでいたためか、思いっきりハグされました。

多和田：すごい笑

川崎：今後、話題機能をどのようにしていこうと考えていますか？

青山：編集長がジョインして、話題部が発足したので、一個一個の話題の質をさらに上げていきたいです。また、今は１カード１コンテンツなのですが、いくつかの話題を1カードにまとめて文脈を作るとか、そういった編集もできるようになれば良いかなと。

川崎：エンジニアリング的にはどうでしょう。

多和田：UIは挙動を改善しなければならない部分もあるので、使い勝手をさらによくしてユーザー体験を良くしていきたいです。ユーザー同士の交流をもっと深めるために表示される話題の精度もより高めていくつもりです。

青山：他の媒体にはない、「話題」ならではの価値として、ユーザー同士が出会った今、ここにしかない情報を提供して、いきたいなと思っています。

川崎：今後Peopleを伸ばしていく上で、エンジニアもデザイナーも一緒に開発してくれる人を募集していると思いますが、これを読んでいる方に向けてメッセージを。

多和田：細かいところまで、こだわり抜ける体制にしたいので、このデザインやUIをみて「まだまだ荒いぞ、甘いぞ」という人は是非話を聞きに来てほしいですね。

青山：コンセプトが何回か変わったという話があったけど、それは決して悪いことではなく、僕たちのチーム自身でコンセプトのレベルから検討しながら、本当に信じられるものを作っていけるということ。

スタートアップ内スタートアップなので、1人がコミットできる範囲がすごい広いことは、エンジニアとしてもデザイナーとしても本当に面白いと思います。参加するならまだ完成仕切っていない今がチャンスかなと。

多和田：そうですね。自分たちのやることを自分たちで決めていけるのが一番の特徴だと思うので、自分なりの意見を持って、アプリを作りたい人には絶対に楽しい環境だと思います。

少しでも興味ある方は、一度遊びに来てください。