ログインアカウント登録
Tocalyのデザイナーとスクラムマスターに、工夫とこだわりを聴きました

ブログ

Tocalyのデザイナーとスクラムマスターに、工夫とこだわりを聴きました

Tocalyプロジェクトの立ち上げから実現までを、プロジェクトメンバーが紹介するコラムの第3部。

引き続きプロダクトオーナーの吉本(Anju)と、新たにエンジニアの藤木(Stud)、デザイナーの朴(Enjay)も交えて、Tocalyに込められたこだわりや開発に取り入れた技術・手法について聴いていきます。

話を聴いたメンバー

吉本 安寿 Growth & Business Platform マーケティング責任者 1985年生まれ。TimeTreeでのニックネームはAnju(アンジュ)。新卒でヤフージャパンへ入社して新規広告プロダクト企画や広告商品企画業務に従事した後、13年にカカオジャパンに出向しサービス企画業務を担当。15年にJUBILEE WORKS(現 TimeTree)に入社し、TimeTreeのサービス企画とマーケティングを担当。

藤木 裕介 Webフロントエンドエンジニア / iOSエンジニア 1984年生まれ。TimeTreeでのニックネームはStud(スタッド)。ヤフー株式会社にデザイナーとして新卒入社して、主にモバイル向けのサービスに携わる。独学でプログラミングを学び、デザイナーとしてのバックグランドを持ちながらWebフロントエンド / iOSのエンジニアへ転身。2012年にヤフー株式会社と株式会社カカオジャパンのジョイントベンチャーへ出向後、2014年に株式会社JUBILEE WORKS(現 株式会社TimeTree)を共同設立。

朴 魯宰 デザイナー TimeTreeでのニックネームはEnjay(エンジェイ)。ビジュアルコミュニケーションデザインを専攻してPDAのUIデザインに携わる。2015年にJUBILEE WORKS(現 TimeTree)に入社。ブランドデザイン領域を担当。

聴き手:TimeTree 渡部 晋也(Steve) テキスト:内島 美佳 ※写真撮影時のみマスクを外しています

ブランド名「Tocaly」とUIへのこだわり

——ここまではプロジェクト発足の経緯や企画の作り方を聴いてきました。今回はTocaly自体についてお話を聴かせてください。まず、「Tocaly」というサービス名の由来は何ですか?

Anju 「Tocaly」には「To Your Calendar」という意味を込めています。

日程調整はなにか意思決定をするために必要な行動です。「決まった日程を自分のカレンダーに入れる」という動作を意思決定までの一連の流れの象徴として選びました。プロダクトの性質やミッションを反映した名前にできたと思います。候補は全部で100個くらい作りましたね!

Stud 名付けの理論に基づいてAnjuが案をたくさん出してくれました。

——サービス名が決まるまでにはどういう議論があったんですか?

TocalyでUIデザイン・ブランディングを担当したEnjay

Enjay 自分は英語圏の人が「Tocaly」の「To」の部分の読み方に迷うのではないかという懸念を持っていました。「“ト”カリー」なのか「“トゥ”カリー」なのか。

英語圏の人にとって不便なら、ネーミングの条件のひとつ「グローバルで通用する」を満たせるのかどうかが気になっていました。そのままではブランディングデザインをできる気がしなかったので、色々話し合いましたね。

Stud 3人で話し合う中でサービス名の近くにタグラインを表示する構想が生まれて、そこから「Tocaly」に決まりました。意見を出し合って良い消化のし方ができたと思います。

Tocalyのタグライン”Totally simple clearly easy arrangement”

Enjay ログイン後画面の左上に「Totally simple clearly easy arrangement」とかいてあるのがタグラインです。「Totally」の「To」と同じ発音ということで、これで発音の迷いはなくなるだろうと思いました。そこ以外はいい名前だと思っていたので、解決できてよかったです。

Stud そこからテーマカラーやロゴタイプが決まり、ブランディングが動き始めました。

——Twitterで「カラーをしぼってシンプル」というコメントもありましたが、テーマカラーやロゴタイプのこだわりはありますか?

Enjay どちらもシンプルさを意識しています。ブランドカラーは見る人が解釈しなくてはいけない情報なので、ページの中にたくさんの色を使うと負荷がかかります。実際プライマリーカラーに統一してみたら、複数のカラーを使うよりも読みやすかったんです。カラーが統一されているほうが、他のカラーを使った場合もパワーが出て印象的になりますしね。

Tocaly ロゴ・ロゴタイプのスケッチ

ロゴもあえてシンプルな文字ベースのロゴにしました。形を見て「ああ、なるほど」って思うようなグラフィックロゴを作る作業も好きですし楽しいですが、シンプルさと読みやすさを強調するために自分を抑えました。

——見る人の負荷軽減つながりで、UIのこだわりはありますか?

Enjay できる限り視覚的な要素をへらすこと、ステップを減らすことにこだわりました。開発との間でも「シンプルにする」というのは意識統一されていましたね。

Anju そこは企画ミーティングでもこだわって話し合いましたよね。やり直したり考え直したり、何度もありました。

Stud UIについては開発からもフィードバックをしていました。作りながら「使いにくいのではないか」と思ったら随時Enjayに伝えたり。

Anju 2日に1回のくらいのペースでこまめにフィードバックしましたよね。

Enjay Tocalyプロジェクトでは、ある程度できあがったデザインモックではなくスケッチレベルでフィードバックをもらっていたので、言いやすかったのかもしれません。

Stud それもあるかもしれませんし、ずっと一緒に企画ミーティングをやってきてEnjayのことを信頼しているので。

——シンプルなUIって、想定通りユーザーが動いてくれるか不安になりますよね。

Stud いくら頭の中で考えても、実際に使ってもらうまでは机上の空論ですからね。動くものをできるだけ早く触ってもらえるよう、プロトタイプを企画ミーティングで見せられる仕組みにはしていました。

Enjay エンジニアからビジュアル的なこだわりを伝えてくれたときは嬉しかったです。たとえばプロモサイトのモバイルビュー対応とか、スクロールバーのカスタマイズをやるかどうかとか。

——UIもそうだし、プロモサイトのデモ画面で使い方を体験できるところにEnjayらしさが出ていた思います。

Enjay なにか物を買うとしたら、その前に説明を見たり実際に触ってみたりしますよね。それとおなじで、Tocalyを使いはじめる前に出せる情報は全部出したいと思ったんです。

Tocalyのプロモーションサイトではアカウント不要ですぐに試せる

Stud これは初期から出ていたアイディアですよね。

Anju プロジェクトとして「すぐに使ってもらいたいプロダクト」というのを掲げていたので、すぐに体験してもらえるかをEnjayも意識してくれたのかなと思います。

スクラム開発で13週間のスピードリリース

——ここからは開発について聴きたいと思います。Tocalyのプロジェクトがスタートしたのが2021年3月1日。13週=約3カ月の開発期間ですが、なぜスピードを重視して進めたんですか?

Anju 完璧なプロダクトをつくってからリリースするよりも、ある程度検証したいコアなものさえできれば世に出して、使っていただける方々に問うというのが会社のスタイルなんです。コアなものができあがればいち早くユーザー届けて使ってもらう。そこでフィードバックを得ながら、より良いものに仕上げていくという方針にしています。

また、今回はマーケットの状態を考えると1日でも早くリリースしたいという思いもありましたね。

——Tocalyプロジェクトでは、今までTimeTreeアプリでは使っていなかった技術を取り入れたと聞きました。それはなぜですか?

Tocalyでスクラムマスターを担ったエンジニアのStud

Stud いちばん最適な技術を選びました。TimeTreeの中の機能として作るならばTimeTreeで使っている技術に則って開発します。今回は別サービスなのである程度自由に技術を選択しました。

他の会社でも使っているものだと思いますし、特別な技術を使ったわけではないです。ただTimeTreeでは今まで使っていなくて知見がなかったので、調べて勉強しながら開発を進めました。やはり技術者として新しいものに触れるのは楽しいですね。その知見がTimeTreeの新しいプロジェクトでも取り入れられて役に立っています。「新しいから」という理由でただ導入するのではなく、サービス同士で知見を共有して循環させるのはよい動きだと思います。

——具体的にどの技術を取り入れたんですか?

Stud Next.jsとOpenAPIです。Next.jsはWebアプリのレンダリング(画面描画のための処理)をブラウザ側ではなくサーバ側で行うためのもので、主に日程調整カレンダー部分の高速化に使っています。

OpenAPIはバックエンドとのやり取りをスムーズにできる仕組みです。バックエンドですべてのAPIの実装が終わらなくても、OpenAPIだけ先に作っておけばフロントエンドはモックサーバーを使って先に開発できます。

——Studは企画にも開発にも関わっていますが、どんな立ち位置なんでしょう?

Anju 今はリリースが完了したので開発の割合が多くなっているけど、リリースまではプロジェクトマネージャーみたいな感じでした。

前回話した通り、Tocalyでは意思決定のスピードを早めるために企画メンバーを少人数にしぼりました。その代償として、企画ミーティングに参加していないエンジニアに意図を伝えるコストがかかります。その役割をStudが担ってくれました。今回のプロジェクトではすごく重要な動きです。

Stud 自分で意識していたのはスクラムマスターとしての役割ですかね。今までTimeTreeでも軽めのスクラム開発をやっていたんですけど、Tocalyではもう少しがっつりやってみようと思って。スクラム開発の教科書通りに近いんですけど、週のはじめに「今週はこれをやる」と計画を立てて、週の終わりに1週間を振り返ってボトルネックなどを見つける。見つけたボトルネックは常に共有するようにしていました。

——開発をするというより、開発を管理する役割だったんですね。

Stud 自分はコードを書いているときに生きがいを感じる性質なんですが、今回はタスク管理にフォーカスしました。最後の方は我慢しきれなくてコードを書いてたんですけどね(笑)。

難易度が高い部分は他のエンジニアに任せて、集中してもらえるよう細かいサポートに徹するようにはしていました。

——ミーティングや打ち合わせはどのくらいの頻度で行っていたんですか?

Stud エンジニアは朝会を毎日やっていて、Tocalyプロジェクトの夕会も毎日あります。夕会はAnju、朝会は自分が言い出しました。企画ミーティングは週2回です。

Anju 定例ミーティングが週1だとスピードが遅いし、リモートワークも多いので濃度も薄くなりがちです。だから毎日朝晩話してこまめに共有するのは大切だと思います。

特に濃密なコミュニケーションが必要なときはオフラインで、オンラインでできるところはできる限りオンラインでと使い分けていました。オンラインでのミーティングにはオンラインホワイトボードの「Miro」を活用しました。

Stud オンラインでも意外とうまくコミュニケーションできたと思います。今まではオフラインでホワイトボードに書いていたところを、Miroがちょうどいい感じに動いてくれました。

Anju ただ、オフラインより意識合わせが大変だから工夫は必要ですね。

Enjay その分ミスコミュニケーションは逆に少ないかもしれません。正確に伝えようとしないと伝わらないから。

Anju 自分の考えを文字として書き起こすのが結構大事なのかもしれないね。

週2回リリース、URL発行形式からの脱却、モバイル利用…… Tocalyの展望

——Anjuには前回聴きましたが、StudとEnjayの今後の展望を教えてください!

Stud Tocalyはまだ始まったばかりのサービスなので、毎日のように改善をしています。引き続き改善サイクルを速めて、爆速でどんどん良くしていきたいです。週2回リリース出すのを目標にしようかなと思っています。今エンジニアチームはエンジンがあったまっている状態なので。

Enjay 目標が2つあります。ひとつはURL発行形式ではなくもっと良い方法を見つけ出すこと、もうひとつはモバイルで手軽に使えるようにすることです。自分の中でかなり大きな展望で、実現が難しそうですが……。

Anju そんなことないと思いますよ。気持ち次第です! 実現させましょう!

——ありがとうございました! 3回に渡ってお届けしたTocalyプロジェクト特集はこれで一区切りです。引き続きTocalyの今後にご期待ください!

関連記事

CEOの深川(Fred)、プロダクトマネージャーの吉本(Anju)、事業開発責任者の古市(Tony)に新規事業「Tocaly」立ち上げの背景と経緯を聴きました。

TimeTreeの新規事業! 日程調整サービス「Tocaly(トカリー)」立ち上げの経緯を聴きました

2014年の創業以来、カレンダーシェアアプリ「TimeTree」の開発を続けてきたTimeTree。そんな私たちがこのたび、日程調整のための新しいSaaS「Tocaly(トカリー)」をリリースしました。Tocalyは主にビジネスシーンでの日程調整にフォーカスしたサービスです。

TimeTree logo
ブログTocalyメンバーインタビュー
TimeTreeの新規事業! 日程調整サービス「Tocaly(トカリー)」立ち上げの経緯を聴きました

プロダクトオーナーの吉本(Anju)に、Tocalyが作り上げられていく流れを聴きました。

企画も、デザインも、開発も、全部いっぺんに。「Tocaly」プロジェクトの進め方

Tocalyプロジェクトの立ち上げから実現までを、プロジェクトメンバーが紹介するコラムの第2部。

TimeTree logo
ブログTocalyメンバーインタビュー
企画も、デザインも、開発も、全部いっぺんに。「Tocaly」プロジェクトの進め方

© TimeTree, Inc. All rights reserved.