１年にも及ぶプロジェクト期間を経て、チャットワークは5/8に
史上最大のアップデートをおこないました。
今回はこのプロジェクトの主要メンバー３名に、開発の舞台裏について
インタビューした内容をお届けしたいと思います
写真左から順に
デザイン部マネージャー 新免孝紀
ChatWork社を長年に渡り支え続けるデザイナー。
リニューアルのメインデザインおよびコーディング(HTML/CSS)を担当。
専務取締役CTO 山本正喜
代表取締役山本敏行の弟であり、チャットワークの生みの親。
今回のリニューアルではコンセプトづくり、UI設計、プログラミングまで
トータルに関わる。
技術部エンジニア 渋谷悠司
チャットワークリリース当初から開発を担当しているエンジニア。
音声/ビデオ通話、画面共有ができる新機能「ChatWork Live」の開発を担当。
「慣れている人には便利」から「初心者にやさしい」へ
── 大幅アップデートに至った経緯を教えてください
山本： もともと、プロジェクト自体は約1年前からはじまりました。
当初のゴールはユーザーインターフェース（UI）の刷新。
いままでのチャットワークは社内ツールからはじまったということもあり、
「慣れている人には便利」なUIになっており、初心者に易しいUIとは
かならずしも言えない部分が多々ありました。
また、機能追加につぐ機能追加で、これ以上足すと複雑になりすぎて
「シンプル」というコンセプトから外れてしまうため、
これ以上の機能を増やすことが難しいというジレンマにも陥っていました。
すでに多数の慣れたユーザーの方がいるなかでのUI刷新は
非常に勇気のいることでしたが、ここで踏みとどまっては未来はないと、
一大リニューアルを決心しました。
また、開発を進めていくなかで、WebRTCという技術の存在を知り、
これがあればブラウザ上でビデオ通話機能を実装することが
可能となることがわかりました。
ビデオ通話がチャットワークのアカウントだけでそのまま行えれば、
チャットワークの可能性を大きく拡げることができると考え、
プロジェクトの目玉としてChatWork Liveの開発を行いました。
当初のゴールはユーザーインターフェース（UI）の刷新。
いままでのチャットワークは社内ツールからはじまったということもあり、
「慣れている人には便利」なUIになっており、初心者に易しいUIとは
かならずしも言えない部分が多々ありました。
また、機能追加につぐ機能追加で、これ以上足すと複雑になりすぎて
「シンプル」というコンセプトから外れてしまうため、
これ以上の機能を増やすことが難しいというジレンマにも陥っていました。
すでに多数の慣れたユーザーの方がいるなかでのUI刷新は
非常に勇気のいることでしたが、ここで踏みとどまっては未来はないと、
一大リニューアルを決心しました。
また、開発を進めていくなかで、WebRTCという技術の存在を知り、
これがあればブラウザ上でビデオ通話機能を実装することが
可能となることがわかりました。
ビデオ通話がチャットワークのアカウントだけでそのまま行えれば、
チャットワークの可能性を大きく拡げることができると考え、
プロジェクトの目玉としてChatWork Liveの開発を行いました。
コードネームに込められた想い
── 今回のコードネームは「Biwa」だったそうですね？
山本：
アップデート告知サイトのURLに使われていたので、
「Biwaって何？」と思われた方も多いかもしれません(笑)
http://update.chatwork.com/biwa/
Biwaとはプロジェクトコードネームで、当社の大きなリリースプロジェクトには
このような名前がつきます。
名称の由来は、日本一大きな湖「琵琶湖」からとっています。
チャットワークのモバイルリニューアルプロジェクトでは
「Fujiyama」というコード名でしたが、その由来の富士山と同様、
世界を目指すにあたって、まずは日本一を目指す！という
意味もこもっています。
「Biwaって何？」と思われた方も多いかもしれません(笑)
http://update.chatwork.com/biwa/
Biwaとはプロジェクトコードネームで、当社の大きなリリースプロジェクトには
このような名前がつきます。
名称の由来は、日本一大きな湖「琵琶湖」からとっています。
チャットワークのモバイルリニューアルプロジェクトでは
「Fujiyama」というコード名でしたが、その由来の富士山と同様、
世界を目指すにあたって、まずは日本一を目指す！という
意味もこもっています。
絶対に必要だった通話機能
── アップデートの注目点は何ですか？
山本：
一番の目玉は、なんといってもChatWork Liveになります。
「メールの時代は終わりました」とメールの代替をうたうチャットワークに、
ビデオ通話機能がつくことに違和感を持つ方もいらっしゃるかもしれません。
ですが、私たちにとってチャットワークに通話機能をつけることは、
ごく自然で「絶対に必要なもの」とずっと考えていました。
チャットは、確かにメールよりもずっとシンプルで効率的です。
しかし、テキストでは伝わらない・伝えにくい部分も確かに存在します。
センシティブな悩み事の相談や込み入った案件の説明、
複数人での意見調整、今日のプロジェクトメンバーの調子を確認したりなど。
いままでは、そういったコミュニケーションを行うには、
結局、電話であったり、別の通話ソフトウェアを使う必要があり、
電話番号を聞いたり、ソフトをインストールしてもらって設定するなど、
そこでコミュニケーションの流れが切れてしまっていました。
今回のアップデートでチャットワークにChatWork Liveがつくことにより、
チャットのやりとりの中から、必要に応じてシームレスに通話に
移行することができるようになりました。
プロジェクトメンバーでグループチャットをつくり、
日々のやり取りを行ううちに、必要に応じてChatWork Liveで
ミーティングがはじまる。
そこで決まったことは同じチャットに議事録として流し、
参加できなかったメンバーにもあとで共有できる。
そんなワークスタイルがChatWork Liveによって実現できます。
「メールの時代は終わりました」とメールの代替をうたうチャットワークに、
ビデオ通話機能がつくことに違和感を持つ方もいらっしゃるかもしれません。
ですが、私たちにとってチャットワークに通話機能をつけることは、
ごく自然で「絶対に必要なもの」とずっと考えていました。
チャットは、確かにメールよりもずっとシンプルで効率的です。
しかし、テキストでは伝わらない・伝えにくい部分も確かに存在します。
センシティブな悩み事の相談や込み入った案件の説明、
複数人での意見調整、今日のプロジェクトメンバーの調子を確認したりなど。
いままでは、そういったコミュニケーションを行うには、
結局、電話であったり、別の通話ソフトウェアを使う必要があり、
電話番号を聞いたり、ソフトをインストールしてもらって設定するなど、
そこでコミュニケーションの流れが切れてしまっていました。
今回のアップデートでチャットワークにChatWork Liveがつくことにより、
チャットのやりとりの中から、必要に応じてシームレスに通話に
移行することができるようになりました。
プロジェクトメンバーでグループチャットをつくり、
日々のやり取りを行ううちに、必要に応じてChatWork Liveで
ミーティングがはじまる。
そこで決まったことは同じチャットに議事録として流し、
参加できなかったメンバーにもあとで共有できる。
そんなワークスタイルがChatWork Liveによって実現できます。
はじめての技術への挑戦
── ChatWork Liveの開発は順調に進みましたか？
渋谷： WebRTCを利用して通話機能を作ったのですが、
はじめて触れた技術だということもあり試行錯誤の連続でした。
最近はWebRTCを使ったサービスをちょくちょく見かけますが、
やはりまだまだ情報が少なく、手探りで進めていたという感じですね。
海外のウェブサイトから情報をかき集めたり、
WebRTCを使って動いているサービスを解析したりして
少しずつ形にしていきました。
作った後は色々なOS、ブラウザでひたすらテスト・テスト・テスト。
環境によって動作が違ったりするので、テストには多くの時間を割きました。
18万人のユーザーがいるので負荷の問題だったり、
環境依存の問題についての不安もありましたが、
今のところ大きなトラブルもなくホッとしています。
はじめて触れた技術だということもあり試行錯誤の連続でした。
最近はWebRTCを使ったサービスをちょくちょく見かけますが、
やはりまだまだ情報が少なく、手探りで進めていたという感じですね。
海外のウェブサイトから情報をかき集めたり、
WebRTCを使って動いているサービスを解析したりして
少しずつ形にしていきました。
作った後は色々なOS、ブラウザでひたすらテスト・テスト・テスト。
環境によって動作が違ったりするので、テストには多くの時間を割きました。
18万人のユーザーがいるので負荷の問題だったり、
環境依存の問題についての不安もありましたが、
今のところ大きなトラブルもなくホッとしています。
作っては壊しの繰り返し
── 一番苦労した点は何でしょうか？
山本：
今回、ChatWork Liveのリリースと同時に100以上のアップデートを実施し、
ユーザーインターフェイスを刷新しました。
すでに何十万というユーザーの方が、業務でバリバリと
チャットワークを活用いただいているなかでしたので、
いかにスムーズに新しいインターフェースに慣れていただくのか、
使い易いと思っていただけるかに非常に非常に苦心しました。
リニューアルプロジェクトをはじめるにあたって、まずは
理想的なデザインをゼロベースで考え直そうと言うことで、
新免に画面デザインをおこしてもらったんですね。
そのデザインは社内レビューでも好評で、「これはイイ！」ということで
さっそく実装することになり、完成したバージョンを試用してみたところ、
とにかく驚くほど使いにくかったんですよね。(苦笑)
自分たちで設計したにもかかわらず、わかりづらかったり、
デザイン的にはキレイなのですがクリック数が増えて使いにくかったり。
結局、ほとんど完成していたにも関わらず、そのバージョンは
作り直すことになってしまいました。
ユーザーインターフェイスを刷新しました。
すでに何十万というユーザーの方が、業務でバリバリと
チャットワークを活用いただいているなかでしたので、
いかにスムーズに新しいインターフェースに慣れていただくのか、
使い易いと思っていただけるかに非常に非常に苦心しました。
リニューアルプロジェクトをはじめるにあたって、まずは
理想的なデザインをゼロベースで考え直そうと言うことで、
新免に画面デザインをおこしてもらったんですね。
そのデザインは社内レビューでも好評で、「これはイイ！」ということで
さっそく実装することになり、完成したバージョンを試用してみたところ、
とにかく驚くほど使いにくかったんですよね。(苦笑)
自分たちで設計したにもかかわらず、わかりづらかったり、
デザイン的にはキレイなのですがクリック数が増えて使いにくかったり。
結局、ほとんど完成していたにも関わらず、そのバージョンは
作り直すことになってしまいました。
新免： チャットワークに限った話ではありませんが、
画面にどういう情報が表示されるかによって
デザインの印象ががらっと変わります。
メッセージやタスクの内容を適当に作ってデザインに当てはめるのと、
実際に使ってもらってリアルな情報をやりとりするとでは
全然見た目の印象が違うんですよね。
あとは設計という観点からは正しくても、使い勝手が良くないという場合も
多々ありました。
そんなこともありモックアップ（デザインの原型）をかなり作りこんだものの、
ボツになってしまった時は正直つらかったです（笑）
画面にどういう情報が表示されるかによって
デザインの印象ががらっと変わります。
メッセージやタスクの内容を適当に作ってデザインに当てはめるのと、
実際に使ってもらってリアルな情報をやりとりするとでは
全然見た目の印象が違うんですよね。
あとは設計という観点からは正しくても、使い勝手が良くないという場合も
多々ありました。
そんなこともありモックアップ（デザインの原型）をかなり作りこんだものの、
ボツになってしまった時は正直つらかったです（笑）
新免： 途中からモックアップを作りこむのではなく、
とにかくユーザーテスト(※実際のユーザーに試してもらうこと)を
重視し、何度も何度も小さくリリースしながら検証を進める方針に変えました。
社員全員と業務提携しているKDDIさんに使ってもらいながら改善に改善を重ねて、
ようやく納得のいくものが出来上がりました。
はじめて見てもわかりやすく、長く使っていくと手になじんでいく。
そんなインターフェースにできるよう、工夫を重ねました。
とにかくユーザーテスト(※実際のユーザーに試してもらうこと)を
重視し、何度も何度も小さくリリースしながら検証を進める方針に変えました。
社員全員と業務提携しているKDDIさんに使ってもらいながら改善に改善を重ねて、
ようやく納得のいくものが出来上がりました。
はじめて見てもわかりやすく、長く使っていくと手になじんでいく。
そんなインターフェースにできるよう、工夫を重ねました。
プロジェクト後期のデザイン。色合いや右パネルのUIなどが最終版と異なる。
とことんこだわって生まれた新しいチャットワーク
── ここはこだわったという点はありますか？
新免： 山本も言っていますが「初心者にも分かりやすく」
という部分は非常に大事なので、そこにはこだわりました。
例えば以前は未読の数をオレンジ、自分宛の場合はカッコ付き、
そしてタスクの数は緑という仕様だったのですが、
初めて使った人はその意味がわからない訳です。
そこでアイコンも一緒に表示することによって、
初めてみた人でも視覚的に分かりやすくしました。
という部分は非常に大事なので、そこにはこだわりました。
例えば以前は未読の数をオレンジ、自分宛の場合はカッコ付き、
そしてタスクの数は緑という仕様だったのですが、
初めて使った人はその意味がわからない訳です。
そこでアイコンも一緒に表示することによって、
初めてみた人でも視覚的に分かりやすくしました。
山本： 全体としての統一感にはかなりこだわりました。
当初はjQuery UIやTwitter BootstrapなどのUIフレームワークを使って
UIを構築しよう思っていたのですが、どうしてもベースデザインとの統一感が
生まれにくいのと、細かいカスタマイズができないことがストレスでした。
だったらもう自分たちで作っちゃおうということで、
自前でUIフレームワークを作ってしまいました。
UIフレームワークをゼロから作るのはかなり大変なのですが、
一旦作ってしまえば自由にカスタマイズできるので
結果としては大成功でしたね。
ツールチップやダイアログなどの各種UIパーツと、
ベースデザインが違和感なく融合できているところを見てもらいたいです。
当初はjQuery UIやTwitter BootstrapなどのUIフレームワークを使って
UIを構築しよう思っていたのですが、どうしてもベースデザインとの統一感が
生まれにくいのと、細かいカスタマイズができないことがストレスでした。
だったらもう自分たちで作っちゃおうということで、
自前でUIフレームワークを作ってしまいました。
UIフレームワークをゼロから作るのはかなり大変なのですが、
一旦作ってしまえば自由にカスタマイズできるので
結果としては大成功でしたね。
ツールチップやダイアログなどの各種UIパーツと、
ベースデザインが違和感なく融合できているところを見てもらいたいです。
緊張のリリース当日、そして・・・
── 一番嬉しかったことは何ですか？
山本： リリースした後に、すぐに「使いやすい！」「よくなった」と
多数の声をいただけたことです。
ユーザーテストを繰り返したとはいえ、実際にリリースした時の反響は
まったく予想できませんでした。
1年以上にもわたってチームで頑張ってきたので、
その時は本当に涙が出るほど嬉しかったですね。
多数の声をいただけたことです。
ユーザーテストを繰り返したとはいえ、実際にリリースした時の反響は
まったく予想できませんでした。
1年以上にもわたってチームで頑張ってきたので、
その時は本当に涙が出るほど嬉しかったですね。
新免： がらっとデザインが変わったのである程度ネガティブな反応が来ると
思っていたのですが、予想よりもポジティブな意見が多く嬉しかったですね。
デザインというものは正解がないですし、好みもあるので
誰にでも受け入れられるという事はほぼあり得ません。
そういった難しい面もあるのですが、反応を見る限りは一定の評価を
頂けたのではないかなと思っています。
とはいえまだまだ細かい改善点はあります。
今回のアップデートに満足せず継続的に改善していきますのでご期待ください。
デザインを切り替えられる機能も今後は提供していきたいですね。
思っていたのですが、予想よりもポジティブな意見が多く嬉しかったですね。
デザインというものは正解がないですし、好みもあるので
誰にでも受け入れられるという事はほぼあり得ません。
そういった難しい面もあるのですが、反応を見る限りは一定の評価を
頂けたのではないかなと思っています。
とはいえまだまだ細かい改善点はあります。
今回のアップデートに満足せず継続的に改善していきますのでご期待ください。
デザインを切り替えられる機能も今後は提供していきたいですね。
渋谷： 「ビデオ通話ができるようになったからチャットワークに登録してみた」
という声を聞いた時は本当に嬉しかったですね。
今までは通話機能だけは別のツールを使っていたのですが、
今回のアップデートでそれが必要なくなったことも
自分にとって大きな喜びでした。
あと、リリース当日にYahooリアルタイム検索の注目キーワードに
「チャットワーク」がランクインして、とうとうチャットワークも
一般的な用語になってきたのかなと、感慨深いものがありました。
という声を聞いた時は本当に嬉しかったですね。
今までは通話機能だけは別のツールを使っていたのですが、
今回のアップデートでそれが必要なくなったことも
自分にとって大きな喜びでした。
あと、リリース当日にYahooリアルタイム検索の注目キーワードに
「チャットワーク」がランクインして、とうとうチャットワークも
一般的な用語になってきたのかなと、感慨深いものがありました。
今後のテーマは「モバイル」と「API」
── 今後の展望を教えてください
山本：
先日ユーザーのみなさまにはメールで告知させていただいたのですが、
・モバイルアプリのリニューアル
・APIの公開
の2つを今秋リリースに向けて準備しています。
今回のWeb版リニューアルで実装された新機能や、
新しくなったインターフェースのコンセプトも、
モバイルアプリへと反映させていきます。
APIの公開は非常に要望が高くずっと提供したかったのですが、
ようやく開発体制が整い、リリースの目処がたちました。
APIの公開によって、どんな使い方や便利なツールが登場してくるのか、
とても楽しみにしています。
開発者の方とも、ぜひチャットワークで直接交流したいですね！
・モバイルアプリのリニューアル
・APIの公開
の2つを今秋リリースに向けて準備しています。
今回のWeb版リニューアルで実装された新機能や、
新しくなったインターフェースのコンセプトも、
モバイルアプリへと反映させていきます。
APIの公開は非常に要望が高くずっと提供したかったのですが、
ようやく開発体制が整い、リリースの目処がたちました。
APIの公開によって、どんな使い方や便利なツールが登場してくるのか、
とても楽しみにしています。
開発者の方とも、ぜひチャットワークで直接交流したいですね！
ChatWork社が目指しているビジョンは、「チャットワークで働きかたを変える」です。
インターネット技術やスマートフォンなどの発展によって、
従来ではできない働き方が可能になってきました。
時間と場所にとらわれずスマートに、かつ、
お互いの人間関係を豊かにできるようなワークスタイルを、
チャットワークを通して実現できればと思っています。
これからのチャットワークにも、ぜひご期待ください
最後はChatWorkの頭文字「CW」ポーズで！
