様々なメディアサービスを提供しているサイバーエージェントでは、サービスの特長に合わせて現場の技術者が使用する技術を選定しています。

新卒エンジニアは約2ヶ月に及ぶ全体研修を終えた後、各プロジェクトに配属されますが、現場での育成プログラムもさまざま。今回は新感覚SNS「755」チーム独自の若手育成プログラム「モックアップドリル」をご紹介します。

 

「モックアップドリル」に取り組んだ2016年新卒入社の林と、プロダクトオーナー佐々木、クリエイティブディレクター山幡に話を聞きました。

 

 

755_hayashi1

林 眞司
 「755」 iOSエンジニア。2016年サイバーエージェント新卒入社。
 内定者時代にはライブ配信サービスの立ち上げに携わる。入社後、新卒研修を終えて2016年6月より株式会社7gogoに出向し、現職。

 

 

755_sasaki1

佐々木 興平
「755」 プロダクトオーナー 兼 ディレクター 兼 株式会社7gogo 取締役。金融系情報配信サービスやグルメポータルサイトでのサーバーサイド開発を経て、2015年サイバーエージェント中途入社。入社後ポイント交換サービス「ドットマネー」のサーバサイドエンジニアを経て、2016年4月に株式会社7gogoに出向。サーバーサイド開発を担当した後、2016年10月より現職。

 

 

755_yamahata1

山幡 大祐
「755」 クリエイティブディレクター。2012年サイバーエージェント新卒入社。
「Ameba」アプリのリニューアルデザインや数々のコミュニティサービスのデザインを担当。2015年10月より株式会社7gogoに出向し、現職。

 

 

 

 

新卒時代は数をこなすことがスキルアップにつながる

 

ーーはじめに755のチーム体制について教えてください


佐々木:メンバーは全体で13名、私は元々サーバーサイドエンジニア出身で現在はプロダクトオーナー兼ディレクターを務めています。サーバーサイド、Android、iOS、Webフロントエンドは2名ずつで、現在新卒2年目の林はiOSを担当しています。デザイナーはクリエイティブディレクターの山幡ともう1名、テスターと企画職アシスタントがそれぞれ1名います。

 

 

 

ーー「モックアップドリル」はどのような経緯で始まったのでしょうか?


山幡:755では隔週で社長の藤田とのMTGがあるのですが、たとえば新機能のデザインを考えるときに絵ではなくてある程度動く状態で持っていくと藤田もイメージが湧きやすく、話がスムーズに進んでいたんですね。そのため毎回モックアップを見ながら、どういう機能を作り上げるか話していたんですが、いざ実装するときにエンジニア側でそれを再現しなければならない点が課題でした。

そういった中でデザイナーの作るモックアップとエンジニアが最終的に作るプロダクトの差をもっと縮められたらいいよね、という話がプロジェクト全体で出ていたんです。

 

 

佐々木:昨年2016年に新卒研修を終えた林がチームにジョインしてきたのですが、「755」のiOSの技術的負債が結構残っていてさらにコードベースも大きいので一個の機能を作るのに時間がかかってしまいます。

新卒のタイミングでは数をこなすことがスキルアップにつながると思っているので、新しいものを頻繁に作れる機会を与えたいと思っていました。そこで、じゃあたくさんのモックアップを林に作ってもらおうかということになったんです。子どもの頃に取り組んだ漢字ドリルや算数ドリルのように、集中して数をこなすことを目的に「モックアップドリル」と名付けました。

 

 

 

ーー「モックアップドリル」の流れを教えてください


:隔週で実施しているのですが、毎週木曜日の午後にこの3名でMTGを実施してお題を決めます。お題は開発優先度リストから選ぶこともあるし、毎日の夕会でプロジェクトメンバーと話していたときに出てきた「こんなものがあったらいいよね」という思いつきだったりもします。

その後、翌日の金曜日に1日かけてモックアップを作り、月曜の昼にレビューをしてもらい、その後の夕会でメンバー全員に公開するフローです。

 

山幡:こちらから1枚の紙に簡単なデザインを書いただけで、それをお題として渡すこともあるしトレーニング要素はかなり強いですね。

1日で作りきらなければいけないところにも面白さがあると思います。挑戦したいことは色々と出てくると思いますが、期間が1日と限られているので、何を伝えるためのモックアップかを考え、肝となる部分を適切に作らなければいけないなどバランスを考えることも大切です。

 

 

佐々木:レビュー会ではデザイナーとエンジニアからそれぞれ10点満点で点数をつけるのですが、これまでの林の最高点は16点。ちなみに最初は20点満点で6点とかもあったよね(笑)

 

IMG_4158

 

:はい、モックアップでここまでシビアに見られるとは思わず、正直驚きました(笑)例えばデザインではアニメーションイージングは何を使っているのか、そのイージングは何が気持ちよさに繋がると思うかを考えた上で実装しているかという点。また、技術的な部分だとデータの持ち方や設計、モックだけでなく現在の「755」で扱うにはどう実装したほうが良いのかなど、かなり細かくレビューいただきました。

 

 

山幡:コードとUXの両サイドから評価されることってなかなかないとおもうので、その点もおもしろさの一つかなと思います。

 

 

 

 

モックアップドリルがきっかけでリリースした新機能

 

▼これまでに作ったモックアップの一部
トークルームのデザイン変更(2017年5月25日リリース)
・投稿詳細画面の遷移UX改善
・動画からサムネイルを切り出すUX改善(1日で作りきれず…)
・ホームインタラクション(いまいちの出来で最低点の6点…)
・ローディング

 

佐々木:たとえば投稿詳細画面の遷移改善は一度モックアップを作ってもらったときに良いものが出来たので、仕様を詰めて近いうちにぜひ出したいなと思っています。

これまで作ってもらったモックアプリの中で実装まで進められたのが、2017年5月25日にリリースしたトークルームのデザイン変更。もともと構想自体はあったのですが、インタラクションをどうしようか悩んでいてお題に出してみたんです。

 

山幡:「755」ではユーザーが自由にトークルームを作れるのですが、その中で同じ趣味を持った人を見つけ、755発のつながりがたくさん生まれたらと思っています。そういった中でトークルームの壁紙やテーマカラーを自由に変えられるのは個性を表す上での第一歩になるので、ぜひ実現したいねと以前から話していたんです。

デザインモックアップツール上では作っていたのですが、なかなかインタラクション的に納得のいくものが出ない中で林が素晴らしいモックアップを作ってきてくれました。それを藤田に見せたところ、これならいいねということになりそこから皆で詰めきってリリースに至りました。

 

 

:他のサービスもたくさんチェックして参考にしながら、使い勝手にこだわりました。壁紙のみ変更する際にはテーマカラーを表すヘッダー部分を固定させることで、同じテーマカラーでも壁紙が変わるとイメージが違うことを分かりやすくしたり。

フリックで全部見られるようにしたり、画像サイズや吹き出しの形、コメント出し入れのジェスチャーなど細かな部分も合わせてチューニングしました。

また、実装面では様々なライブラリやプロジェクト内のコードを踏まえた上で、汎用的かつこれまでのコードとの矛盾がないような実装を心がけました。

 


山幡:「モックアップドリル」がなければ、自分がつくったシステムっぽいデザインのままリリースされていたと思います。林のモックアップのおかげで、より楽しく操作できるUIになったし、デザインモックアップからの限界を突破したなと感じました。

 

IMG_4147

 

佐々木:今回トークルームのデザインが変更できるようになり、細かなジェスチャーも改善されたことで、トークの読み心地はかなり良くなったと感じています。事業的には、この改善で1ユーザーあたりのセッション時間がさらに伸びればと思っています。

 

 

 

 

日常的に誰でも気軽に使ってもらえるサービスに

 

 

ーー「モックアップドリル」を通してどういったことを学びましたか?


:以前も、自分の中でデザインやインタラクションの意味を理解してはいましたが、誰かと議論するということはあまりありませんでした。

今回「モックアップドリル」に取り組むことで、デザイナーから具体的にアドバイスをもらえたことがすごく良かったと思います。こういう風に考えれば良いんだということが分かりましたし、通常の開発でデザインをもらったときにもデザイナーの意図を汲み取れるようになりました。デザインがこう考えてるから、クライアントはこういう処理にしようって考えたりとか。

また、自分でどう実装したらいいか考え、調べた上で作りきるフローを繰り返すことで様々な実装のコツを掴むことができました。自分自身の実装スピードの向上や、実装する上の実現方法の選択肢が広がったと感じています。

モックアップを作りながら、悩んだり苦労したことでこうやって深い意味まで理解できるようになり、デザイナーとの共通言語が増えたことは貴重な経験でした。共通言語が増えたことで、自分からコンセンサスを握りにいけるようになったと思います。

 

 

佐々木:モックアップがあることで、プロジェクトの皆も意見が出しやすくなり、短い時間でさらに深い議論ができるようになったのは良かったですね。より良いコミュニケーションのきっかけにもなりました。

 

山幡:短期間にぎゅっと詰めてフィードバックしたことで認識合わせができるようになったので、後から通常の開発を進める上でも非常にスムーズになりました。

「モックアップドリル」に取り組んでから、絶対にずれてはいけないポイントや徹底的なユーザー視点がわかるようになってきたんだなと林の言葉の端々から感じます。

 

 

 

ーー最後に今後「755」をどのように成長させていきたいか、またご自身の展望もあれば教えてください


佐々木:今までの「755」は著名人が使っているサービスというイメージが強かったと思います。気軽に使えるものではなくて、著名人に「755」内で話しかけて、返信をされたら嬉しいというところで体験として終わってしまっていた方々も多いと思うんですね。

今後は同じ趣味を持つ人との交流など、日常的に誰でも気軽に使っていただけるようなサービスにしていきたいです。

 

:日常的に誰でも気軽に使っていただきたいので、モックアップの段階でもユーザーテストで見ていただくなど、ユーザーのみなさんの声をどんどん吸い上げていきたいと思っています。

また今回の取り組みを通して、自分でも企画や仕様決めの段階から関われる機会が増えてきたので、自分からももっと積極的に新機能を提案していけるようになりたいですね。

 

IMG_4196

 

山幡:「755」はリリースから約3年半を迎えた現在、より多くの皆さんに使っていただけるようインタラクションや使い勝手など細かな部分まで徹底的にこだわることで、サービスの磨き上げを行なっている最中です。先日リリースしたトークルームデザイン変更の機能もその一つです。

サービスとして最も大事なのがトークルームなので、そこで一人一人が趣味や個性を出すことができ、趣味が近い人と仲良くなれるようなつながりを「755」きっかけで増やすことができればと思っています。