こんにちは。株式会社ヤプリで採用担当をしている石村です。

今回は「Yappli」のユーザー体験を左右する、CMSのリニューアルプロジェクトについて紹介します。プロジェクトに関わる3名のエンジニアに、新CMSで大切にしているポイントや、どのようにプロジェクトを進めているか聞いてみました。

【プロフィール】

写真左から
相原 巧人（あいはら・たくと）
プロダクト開発本部 プラットフォーム開発グループ/フロントエンドエンジニア
サウンドクリエイターとして社会人デビューした後、求人メディア系ベンチャーにWebデザイナーとして入社。その後インタラクションの開発実装業務にシフトして行き、2015年11月にヤプリに入社。現在は、React.js、Vue.jsをメインにフロントエンドの開発実装とUIデザインを担当。ライブラリを使わないインタラクション実装が得意。

山影 純也（やまかげ・じゅんや）
プロダクト開発本部 プラットフォーム開発グループ/サーバーサイドエンジニア 兼 フロントエンドグループリーダー
新卒ではSIer系企業に入社し、その後フリーランスとして活躍。その後、中学校時代からの夢だったゲーム業界に飛び込むことを決意。ゲーム開発会社2社で、サーバーサイドエンジニアとしてビッグタイトルのソーシャルゲーム開発に携わる。また、マネージャーも経験した。その後、2018年7月にヤプリへサーバーサイドエンジニアとして入社。入社3ヵ月後には開発プロジェクトのリーダーも兼任している。

鬼木 悠貴（おにき・ゆうき）
プロダクト開発本部 プラットフォーム開発グループ/サーバーサイド 兼 フロントエンドエンジニア
2017年2月にヤプリに入社し、インフラ、サーバーサイド、フロントエンドなど幅広い役割で「Yappli」のCMS開発に携わる。React.js、Vue.jsを経験しており、フロントエンドの中でもFlux部分を中心としたフロントデータモデルの設計・実装を得意としている。

【Yappliについて】
「Yappli」は誰でも簡単に高品質なスマホアプリを制作・運営できるプラットフォームです。直近3年間の導入企業数は300社を超え、国内外の名だたるトップブランドの自社アプリを支えています。

第1弾リリースを終えた、新CMSプロジェクトとは？

－新CMSプロジェクトが始動した背景を教えてください。

相原：旧CMSはUIデザインが機能ごとに分かれていて、ユーザーが初見での操作が少し難しい仕様でした。そのため、ひと目見て分かりやすく操作できるCMSの必要性が高まり、プロジェクトが始動しました。各機能で共通化したUIデザインにすることで、操作性が格段に向上します。その分、ユーザーはアプリ内のコンテンツ制作にかける時間を確保できるため、新たなCMSは『ユーザーの自由度を高められる』と言えると思います。

山影：現在のプロジェクトの進捗度は、1/4というところでしょうか。まずはプレビュー機能を実装したタイミングで、ベータ版としてリリースしました。

相原：新たなCMSの特徴は、ユーザーの感動体験にフォーカスして、しっかり設計に時間をかけてプロジェクトを進めていること。構想のスタートからリリースまで、3年ほどかけて取り組んできました。その中では、新たな技術やナレッジも世に出てきているので、それを活用しながらメンバーと共に開発を進めています。

－プロジェクトの体制や、みなさんの役割を教えてください。

山影：以前、Wantedlyで紹介した増渕がプロダクト・マネージャーとなり、開発メンバーはサーバーサイド、フロントエンド、QA（品質保証を担うエンジニア）、UI/UXデザイナーで合計10名ほどの体制です。私はプロジェクトリーダーとして進行管理をしつつ、サーバーサイドも担っています。最近はインフラ周りの設定をすることもあるので、割と広範囲で関わっていますね。

鬼木：私はフロントエンド全般をリードしています。ボタンを押した後の挙動をはじめとした、UIインタラクション全般を見ている感じですね。

山影：鬼木さんはサーバーサイドもやっていて、サーバーサイドとフロントエンドの橋渡しも担っていますよね。

相原：自分も鬼木と同じくフロントエンドで、主にデザイン面を担当しています。デザイナーが上げてくる鬼のような仕様をですね、なんとか実装する役割です（笑）。ユーザーのアクションに対してどういう動きを付けるか、ということを考え開発に取り組んでいます。例えば、インターフェースのドラッグアンドドロップやスライダーといった『掴んで動かす』ようなインタラクションの実装がメインですね。

山影：相原さんは、OSSをこの間の勉強会で発表していましたよね。

相原：まだ発表まで、ですね（笑）。発表したOSSは、ライブラリを使わないで1から実装するというのが特徴です。公開は、近日乞うご期待という感じで。

『1人1機能』から『1チーム1機能』の開発へ

－普段は、どんな流れで開発を進めているんですか？

山影：週はじめの月曜には先週の振り返りと今週の予定、金曜には今週の成果をチームで共有して開発を進めています。また、毎朝「今日は、これをやります」といったタスク確認と相談ごと、ユーザーからいただくフィードバックも共有していますね。

チームについては、ベータ版をリリースした後に課題点を整理しました。第1弾となるリリースまでは『1人が1機能担当』で開発をやり切るという形だったんですが、「責任範囲が大きすぎるね」とか「プロジェクトが進んでいる感がない」という声もありまして。第2弾の機能開発に向け、『1機能をメンバー全員で開発して、日々チームで改善していく』という形に変更しました。

鬼木：『1人が1機能担当』の場合には期限へのプレッシャーもありますし、1人で開発を進めていくため機能面で気が回らないこともあり、手戻りが多くなりがちだったんですね。

現在の開発スタイルは一見スピードが落ちるようにも見えるかもしれませんが、様々な視点から改善を行なうことで、結果的にはより良い機能をスピーディーに開発できています。あとは、チームで取り組んでいるため一体感も醸成できますよね。

山影：たくさんの“目”があるので、アウトプットの正確性が上がりましたよね。ほかにも、ペアプログラミングをテストするなど技術力の底上げにトライしています。私自身も最近触っているインフラ周りで、メンバーに聞きながら技術のキャッチアップができました。

好循環が生まれている…という意味でもうまくチームがワークできているのではないでしょうか。第2弾の機能がリリースできた時にどんな振り返りがあって、どのような想い・体制で第3弾の開発に臨んでいくのか、今から楽しみでもありますね。

ユーザー視点での開発を加速させるため、技術的負債の解消にも取り組む

－まずは、第1弾の機能がリリースされた新CMS。どんな点を大切にして機能を実装したんですか？

相原：今回のリリースでは、特にプレビュー機能を強化しました。アプリを作成する際に「自分が今、何を作っているのか」をリアルタイムに分かりやすく表示することで、より感覚的に制作を進められるようになりました。

山影：CMSはアプリを作成するお客様が常に使用する機能なので、ユーザー目線に立って使いやすさを重視しています。「どこに何を入力すればいいか」と悩む場面でも、ラベル表示されるので分かりやすくなりました。UI面は大きく変わりましたね。

相原：フロントエンドは文字通り、ユーザーが最初に触る機能を実装します。ユーザーにストレスのかからないUIデザインを実現するためには、快適な操作性や色味を調整することがマストです。そのため、新しい機能を実装する時にはまず試用版を作成し社内でユーザーテストを実施。メンバーからのフィードバックを踏まえてバランスを調整しながら、リリースできるまで機能をブラッシュアップします。

－では、開発を進める上で大切にしていたことを教えてください。

鬼木：初めて開発に携わるメンバーでも仕事がしやすいよう、『チームに合わせた設計にする』ことを意識しました。旧CMSの開発は「とにかく進めていく」というスタンスでした。しかし、サービス自体は各機能やデザインが共通化されていることもあり、共通理解のもとでスピーディに開発を進めていくことが大切だと思っています。今はコードの書き方も全員で話し合って進めるようになりましたし、チーム全体でのドキュメント化も積極的に進めています。

山影：「Yappli」は元々、CTOの佐野が創業時に1人でつくり上げたんです。なので、必然的に佐野しか分からないことがありますし、当時の技術で構築しているため技術的負債もあります。そこをチームとして再構築している感じですね。

相原：プロジェクトを進めていく中で、メンバーが導入したい技術をそれぞれ持ち寄って形にできた点は、モチベーションに繋がりました。ヤプリは、新しい技術を持ち込むことをポジティブにとらえる傾向があります。ロジカルに提案できれば、NGとなることはありませんし。

－新CMSプロジェクトの技術選定はどのように進めたんですか？

鬼木：最初の技術選定は、自分と相原で2週間くらいかけて進めました。プロトタイプを作って、プレゼンして。「こっちの方が使いやすいよね」と周囲の理解をもらった上で、佐野に提案したら「いいよ！ やっちゃえ、やっちゃえ」と（笑）。

相原：佐野はポジティブに物事をとらえるタイプなので、「これ、いいんですよ」と提案すると、多くの場合「いいじゃん、やろうよ！」と（笑）。知識が豊富で頭の回転が速いので、一瞬で考えて答えを出してくれます。

山影：みんなで新しい技術のキャッチアップをした結果、技術選定もチームに任される場面が増えてきました。だんだんと、信頼が生まれてきていると思います。「この技術、Yappliに合いそうだから使いませんか？」という提案など、メンバーは課題解決の目線から頻繁にアイデア出しをしていますね。

『感動体験』を提供するために

－それでは、今後のプロジェクトに向けての意気込みをお聞かせください。

鬼木：私は大きいCMSの中でも専任的な箇所を担っているので、新たな技術をどんどん取り入れていきたいと思います。フロントエンドからサーバーサイドまで、技術・設計的に魅力のある仕様にしたいですね。また、機能開発と並行してリファクタリングにも時間を割いて「Yappli」のシステムをさらに良くしていきたいと思っています。

相原：私はシステムパフォーマンスの改善です。「Yappli」はWebブラウザで使用するツールなので、データ量が多いクライアントだとどうしても処理速度が落ちていきます。その辺りをもっとサクサク操作できるように、改善していきたいと思っています。もう1つ、新CMSはほとんどのインタラクションがライブラリなしで実装しているんです。なので、よりコアな部分をOSSに置き換えてメンテナンスがしやすいようにしていきたいと思っています。

山影：自分は、全部の機能を早くリリースしたいです。早くリリースすれば、その分技術的負債を返し終わっている状態になります。その頃には、メンバーみんながシステム全体の見通しがつけられるようになっているはずなので、機能の追加がしやすい状態になります。ユーザーへの感動体験をより速く、広く提供していきたいですね！

そのためには、新たな仲間をさらに迎えていきたいです。このフィードを見て「やってみたい！」と思った方がいれば、お問い合わせください。チャレンジし続けられる環境で、ぜひご一緒できれば嬉しいです。

－みなさん、ありがとうございました！

これからのヤプリを一緒に創りませんか？

現在株式会社ヤプリでは、エンジニアを始めとする複数ポジションを募集しております。これからの「Yappli」はもちろん、組織やチームづくりも一緒にチャレンジいただける方、ぜひお気軽に一度話を聞きに来てください。

おまけ
インタビュー後みんなでネコの鑑賞会