Cacooは、2018年6月末に、ローンチ以来最大のUIフルリニューアルを実施しました。このリニューアルでは、ユーザーリサーチ結果の反映が大きな軸となり、結果として、ダッシュボードやエディタの画面レイアウトが大きく変化したり、これまでになかった機能が追加されたり、要望の多かった機能がより強化されたりしました。
実際にどのようなリサーチをどんな風に行い、それらをどうリニューアルに活かしていったか。そして、今回のリニューアルによりどんなことができるようになったのか。私たちは、それらをCacooユーザーのみなさんとシェアしたいと考えました。
そこで、7月4日(水)に行われたイベントが「Cacoo フルリニューアル記念-新しいUIが生まれた背景とその経緯-」。Cacooの開発者が、フルリニューアルの舞台裏を明かすイベントとして企画されました。Cacooユーザーのみなさんと盛り上がったイベントの様子をお届けします。
Cacooフルリニューアルの裏側と今後の展望について / 平山 真
まずは、Cacooプロダクトオーナーの平山より、Cacooが生まれ変わった背景やその経緯をご紹介。2009年にローンチされたCacooが、9年越しにUIをフルリニューアルした理由や、その進め方、実際に何が変わったのかを、「UX(ユーザーエクスペリエンス)」という軸でお話ししていきます。
私たちは、ただインターフェースのデザインを変更するのではなく、「図を描く」ということの根本に立ち返り、「なぜ図を描くのか」と問うことから始めました。UXリサーチを通し、Cacooの在り方を再定義しようと試みたのです。
具体的にはこちらの記事でも紹介していますが、ユーザビリティテストやA/Bテスト、一人当たり1時間を費やすインタビューなどを行いました。その結果、Cacooの主要タスクである「図を描く」ことの阻害要因や、ユーザーが受ける心理的印象など、いくつかの課題の解消が求められていると分かりました。
明らかになった課題を解決していく形で進められたプロジェクト。ニューヨークではダッシュボードなどの開発、UIデザイン、UXリサーチ、マーケティング、サポートコンテンツ制作などが行われ、福岡では、主にエディタの開発や既存アプリケーションの改修が行われました。また、年に一度、福岡本社で行われる社員総会「General Meeting」では、オフラインでのミーティングを重ねました。(なんと、Cacooチームのみならず、全社員に向け、UIリニューアルについての説明会が開かれました。)
会場からの反応が大きかったのは、Cacooチームの新技術への取り組み。モノリシックなJavaアプリからマイクロサービスへ、また、Vue.js と GraphQLというモダンなフロントエンド技術への変更も行いました。新しい技術を取り入れていくことは、より早い改善や新機能の提供、システムの高可用性、技術的負債の精算などにつながり、結果として将来的なUXへの投資と考えているとのこと。エディタのリリーススピードも大幅に早めることができています。
当日の平山の発表資料は、こちらから見ることができます。
ニューヨークCacooチームよりメッセージムービー
まさに「届きたて」の状態で放映されたのは、ニューヨークのCacooチームからのメッセージムービー。UIデザイナーのPatti、UXリサーチャーのChrisへのインタビューを中心とした内容です。イベントのために製作した力作ですが、日本語字幕がまだついていない状態でした。
そこで急遽駆り出されたのは、Cacoo開発者である山岸。バンクーバー帰りで英語が堪能な彼に同時通訳を行ってもらい、ビデオメッセージを放映しました。
今後、日本語字幕をつけてWebにアップする可能性もありますが、現時点では分かりません。まさに「イベント限定のムービー」となりました！
ここがすごいよニューCacoo / 山岸、国広、川端
続いて、Cacoo開発者の3名より、リニューアルによって生まれた新たなCacooの紹介を行いました。どんなことができるようになったのか、デモも交えてご紹介しました。
Cacooユーザーのみなさんなら真っ先に気付くのが、エディタの大々的な変更です。Cacoo独自のアイコンやレイアウトの複雑性を解消し、より一般的なアイコンやラベリングへの変更、また他プロダクトでも分かりやすい汎用性のデザインシステム構築を図りました。
多くの機能追加、変更が行われた今回のリニューアル。ユーザーの皆さんからの反響が特に大きかったのは、
- iPad対応
- 充実した新コメント機能：コメントのパーマリンク取得など
- ステンシルの履歴機能・検索機能
- オートセーブ(自動保存)
- 色の保存
- どんな解像度のプロジェクターでも美しいスライドショー
などの機能でした。特に、iPadでのCacooデモでは会場から歓声が上がりましたね。当日のCacoo開発者チームの発表資料は、こちらから見ることができます。
会場ご提供：株式会社エウレカ様
イベント会場は、株式会社エウレカ様よりお借りいたしました。すばらしい設備を快くお貸しいただき、本当にありがとうございました。なんと当日、急遽オフィスツアーも計画してくださり、希望したイベント参加者の方々に社内を案内していただきました！
麻布十番のオフィスは、柔らかい雰囲気の木目調と、エントランスから余裕のある設計、執務室とイベントスペースがひとつづきになったオープンな空間。対応いただいた社員のみなさんだけでなく、業務に従事していた方々も、とてもフレンドリーに迎え入れてくださいました。エウレカさんのフラットな雰囲気が伝わってくるようでした。
重ねてお礼いたします。ありがとうございました！
ハッシュタグとTogetterまとめのご案内
当日の様子は、Twitterハッシュタグ “#newCacoo” でウォッチすることができます。このハッシュタグは、イベントだけのためではなく、Cacooの新たなインターフェースへのフィードバック、感想、質問などにも使っていただけます。ぜひあなたも発信してくださいね。
また、イベントの様子だけをまとめたTogetterまとめはこちらからチェックすることができます！
Cacooユーザーのみなさん、ありがとうございました！
今後もCacooの進化をお見逃しなく！