【イベントレポート】約300万人が利用する「Cacoo」、フルリニューアルを記念したイベント "新しいUIが生まれた背景とその経緯" を実施
[18/07/20]
提供元:PRTIMES
提供元:PRTIMES
〜ユーザーリサーチをリニューアルにどう活かしたか、新たなCacooは何がすごいのか〜
7月4日(水)に行われた、Cacooのフルリニューアルを記念したイベント「新しいUIが生まれた背景とその経緯」をレポートします。発表資料も公開中!
株式会社ヌーラボ(本社:福岡県福岡市、代表取締役:橋本 正徳)が開発・提供しているビジュアルコラボレーションツール「Cacoo(カクー)」は、2018年6月末に、ローンチ以来最大のUIフルリニューアルを実施しました。このリニューアルでは、ユーザーリサーチ結果の反映が大きな軸となり、結果として、ダッシュボードやエディタの画面レイアウトが大きく変化したり、これまでになかった機能が追加されたり、要望の多かった機能がより強化されたりしました。
実際にどのようなリサーチをどんな風に行い、それらをどうリニューアルに活かしていったか。そして、今回のリニューアルによりどんなことができるようになったのか。私たちは、それらをCacooユーザーのみなさんとシェアしたいと考えました。
そこで、7月4日(水)に行われたイベントが「Cacoo フルリニューアル記念-新しいUIが生まれた背景とその経緯-」。Cacooの開発者が、フルリニューアルの舞台裏を明かすイベントとして企画されました。Cacooユーザーのみなさんと盛り上がったイベントの様子をお届けします。
[画像1: https://prtimes.jp/i/25423/43/resize/d25423-43-908241-0.jpg ]
■Cacooフルリニューアルの裏側と今後の展望について / 平山 真
まずは、Cacooプロダクトオーナーの平山より、Cacooが生まれ変わった背景やその経緯をご紹介。2009年にローンチされたCacooが、9年越しにUIをフルリニューアルした理由や、その進め方、実際に何が変わったのかを、「UX(ユーザーエクスペリエンス)」という軸でお話ししていきます。
[画像2: https://prtimes.jp/i/25423/43/resize/d25423-43-743017-1.jpg ]
私たちは、ただインターフェースのデザインを変更するのではなく、「図を描く」ということの根本に立ち返り、「なぜ図を描くのか」と問うことから始めました。UXリサーチを通し、Cacooの在り方を再定義しようと試みたのです。
ユーザビリティテストやA/Bテスト、一人当たり1時間を費やすインタビューなどを行いました。(*1)その結果、Cacooの主要タスクである「図を描く」ことの阻害要因や、ユーザーが受ける心理的印象など、いくつかの課題の解消が求められていると分かりました。
*1 詳しくはこちら : https://cacoo.com/ja/blog/cacoo-show-you-the-full-renewal-story-after-ux-research/
[画像3: https://prtimes.jp/i/25423/43/resize/d25423-43-892087-2.jpg ]
明らかになった課題を解決していく形で進められたプロジェクト。ニューヨークではダッシュボードなどの開発、UIデザイン、UXリサーチ、マーケティング、サポートコンテンツ制作などが行われ、福岡では、主にエディタの開発や既存アプリケーションの改修が行われました。また、年に一度、福岡本社で行われる社員総会「General Meeting」では、オフラインでのミーティングを重ねました。(なんと、Cacooチームのみならず、全社員に向け、UIリニューアルについての説明会が開かれました。)
会場からの反応が大きかったのは、Cacooチームの新技術への取り組み。モノリシックなJavaアプリからマイクロサービスへ、また、Vue.js と GraphQLというモダンなフロントエンド技術への変更も行いました。新しい技術を取り入れていくことは、より早い改善や新機能の提供、システムの高可用性、技術的負債の精算などにつながり、結果として将来的なUXへの投資と考えているとのこと。エディタのリリーススピードも大幅に早めることができています。
当日の平山の発表資料は、こちらから見ることができます : https://cacoo.com/diagrams/0adJecBaEcgc6BUw
ニューヨークCacooチームよりメッセージムービー
まさに「届きたて」の状態で放映されたのは、ニューヨークのCacooチームからのメッセージムービー。UIデザイナーのPatti、UXリサーチャーのChrisへのインタビューを中心とした内容です。イベントのために製作した力作ですが、日本語字幕がまだついていない状態でした。
そこで急遽駆り出されたのは、Cacoo開発者である山岸。バンクーバー帰りで英語が堪能な彼に同時通訳を行ってもらい、ビデオメッセージを放映しました。
[画像4: https://prtimes.jp/i/25423/43/resize/d25423-43-943627-3.jpg ]
今後、日本語字幕をつけてWebにアップする可能性もありますが、現時点では分かりません。まさに「イベント限定のムービー」となりました!
ここがすごいよニューCacoo / 山岸、国広、川端
[画像5: https://prtimes.jp/i/25423/43/resize/d25423-43-381881-4.jpg ]
続いて、Cacoo開発者の3名より、リニューアルによって生まれた新たなCacooの紹介を行いました。どんなことができるようになったのか、デモも交えてご紹介しました。
Cacooユーザーのみなさんなら真っ先に気付くのが、エディタの大々的な変更です。Cacoo独自のアイコンやレイアウトの複雑性を解消し、より一般的なアイコンやラベリングへの変更、また他プロダクトでも分かりやすい汎用性のデザインシステム構築を図りました。
多くの機能追加、変更が行われた今回のリニューアル。ユーザーの皆さんからの反響が特に大きかったのは、
・iPad対応
・充実した新コメント機能:コメントのパーマリンク取得など
・ステンシルの履歴機能・検索機能
・オートセーブ(自動保存)
・色の保存
・どんな解像度のプロジェクターでも美しいスライドショー
などの機能でした。特に、iPadでのCacooデモでは会場から歓声が上がりましたね。当日のCacoo開発者チームの発表資料は、こちらから見ることができます : https://cacoo.com/diagrams/Si5Hu63OuGSeH3ub/6F409
会場ご提供:株式会社エウレカ様
[画像6: https://prtimes.jp/i/25423/43/resize/d25423-43-780121-5.jpg ]
イベント会場は、株式会社エウレカ様よりお借りいたしました。すばらしい設備を快くお貸しいただき、本当にありがとうございました。なんと当日、急遽オフィスツアーも計画してくださり、希望したイベント参加者の方々に社内を案内していただきました!
麻布十番のオフィスは、柔らかい雰囲気の木目調と、エントランスから余裕のある設計、執務室とイベントスペースがひとつづきになったオープンな空間。対応いただいた社員のみなさんだけでなく、業務に従事していた方々も、とてもフレンドリーに迎え入れてくださいました。エウレカさんのフラットな雰囲気が伝わってくるようでした。
重ねてお礼いたします。ありがとうございました!
ハッシュタグとTogetterまとめのご案内
当日の様子は、Twitterハッシュタグ “#newCacoo” でウォッチすることができます。このハッシュタグは、イベントだけのためではなく、Cacooの新たなインターフェースへのフィードバック、感想、質問などにも使っていただけます。ぜひあなたも発信してくださいね。
また、イベントの様子だけをまとめたTogetterまとめはこちらからチェックすることができます! : https://togetter.com/li/1243806
Cacooユーザーのみなさん、ありがとうございました!
[画像7: https://prtimes.jp/i/25423/43/resize/d25423-43-694183-6.jpg ]
今後もCacooの進化をお見逃しなく!
■ Cacooについて
ダウンロード不要、ブラウザ上で利用可能なCacooは、テンプレートやステンシルを用いて、ワイヤーフレームやAWS構成図、マインドマップなどが誰でも簡単に描けるツールです。複数人で図を同時に編集しても挙動が重くならないのが特徴で、主にチームのコミュニケーションツールとしてグローバルで約300万人に利用されています。
[動画: https://www.youtube.com/watch?v=xgq6jf2fq1k ]
■ Cacooを用いたワークフロー改善について
百聞は一見に如かず--制作物のイメージは、口頭や文章だけで共有するよりも図で共有した方が誤解なく伝わるのは明らかです。Cacooを使えば、テンプレートやステンシルを用い、誰もがワイヤーフレームなどの図を分かりやすく簡単に描くことができます。
また、Web上で複数人が同時に編集できるため、手描きや画像ファイルの添付よりコミュニケーション効率が上がります。具体的には、ミーティング時に複数人で同時に編集しながら図をアップデートしたり、メンバー間で常に最新の図を共有したりといったことがCacooで可能になります。
Cacooをワークフローに導入し、成果を挙げた事例については、こちらからも知ることができます:https://cacoo.com/ja/blog/categories/user-stories/
?? 株式会社ヌーラボについて
[表: https://prtimes.jp/data/corp/25423/table/43_1.jpg ]
7月4日(水)に行われた、Cacooのフルリニューアルを記念したイベント「新しいUIが生まれた背景とその経緯」をレポートします。発表資料も公開中!
株式会社ヌーラボ(本社:福岡県福岡市、代表取締役:橋本 正徳)が開発・提供しているビジュアルコラボレーションツール「Cacoo(カクー)」は、2018年6月末に、ローンチ以来最大のUIフルリニューアルを実施しました。このリニューアルでは、ユーザーリサーチ結果の反映が大きな軸となり、結果として、ダッシュボードやエディタの画面レイアウトが大きく変化したり、これまでになかった機能が追加されたり、要望の多かった機能がより強化されたりしました。
実際にどのようなリサーチをどんな風に行い、それらをどうリニューアルに活かしていったか。そして、今回のリニューアルによりどんなことができるようになったのか。私たちは、それらをCacooユーザーのみなさんとシェアしたいと考えました。
そこで、7月4日(水)に行われたイベントが「Cacoo フルリニューアル記念-新しいUIが生まれた背景とその経緯-」。Cacooの開発者が、フルリニューアルの舞台裏を明かすイベントとして企画されました。Cacooユーザーのみなさんと盛り上がったイベントの様子をお届けします。
[画像1: https://prtimes.jp/i/25423/43/resize/d25423-43-908241-0.jpg ]
■Cacooフルリニューアルの裏側と今後の展望について / 平山 真
まずは、Cacooプロダクトオーナーの平山より、Cacooが生まれ変わった背景やその経緯をご紹介。2009年にローンチされたCacooが、9年越しにUIをフルリニューアルした理由や、その進め方、実際に何が変わったのかを、「UX(ユーザーエクスペリエンス)」という軸でお話ししていきます。
[画像2: https://prtimes.jp/i/25423/43/resize/d25423-43-743017-1.jpg ]
私たちは、ただインターフェースのデザインを変更するのではなく、「図を描く」ということの根本に立ち返り、「なぜ図を描くのか」と問うことから始めました。UXリサーチを通し、Cacooの在り方を再定義しようと試みたのです。
ユーザビリティテストやA/Bテスト、一人当たり1時間を費やすインタビューなどを行いました。(*1)その結果、Cacooの主要タスクである「図を描く」ことの阻害要因や、ユーザーが受ける心理的印象など、いくつかの課題の解消が求められていると分かりました。
*1 詳しくはこちら : https://cacoo.com/ja/blog/cacoo-show-you-the-full-renewal-story-after-ux-research/
[画像3: https://prtimes.jp/i/25423/43/resize/d25423-43-892087-2.jpg ]
明らかになった課題を解決していく形で進められたプロジェクト。ニューヨークではダッシュボードなどの開発、UIデザイン、UXリサーチ、マーケティング、サポートコンテンツ制作などが行われ、福岡では、主にエディタの開発や既存アプリケーションの改修が行われました。また、年に一度、福岡本社で行われる社員総会「General Meeting」では、オフラインでのミーティングを重ねました。(なんと、Cacooチームのみならず、全社員に向け、UIリニューアルについての説明会が開かれました。)
会場からの反応が大きかったのは、Cacooチームの新技術への取り組み。モノリシックなJavaアプリからマイクロサービスへ、また、Vue.js と GraphQLというモダンなフロントエンド技術への変更も行いました。新しい技術を取り入れていくことは、より早い改善や新機能の提供、システムの高可用性、技術的負債の精算などにつながり、結果として将来的なUXへの投資と考えているとのこと。エディタのリリーススピードも大幅に早めることができています。
当日の平山の発表資料は、こちらから見ることができます : https://cacoo.com/diagrams/0adJecBaEcgc6BUw
ニューヨークCacooチームよりメッセージムービー
まさに「届きたて」の状態で放映されたのは、ニューヨークのCacooチームからのメッセージムービー。UIデザイナーのPatti、UXリサーチャーのChrisへのインタビューを中心とした内容です。イベントのために製作した力作ですが、日本語字幕がまだついていない状態でした。
そこで急遽駆り出されたのは、Cacoo開発者である山岸。バンクーバー帰りで英語が堪能な彼に同時通訳を行ってもらい、ビデオメッセージを放映しました。
[画像4: https://prtimes.jp/i/25423/43/resize/d25423-43-943627-3.jpg ]
今後、日本語字幕をつけてWebにアップする可能性もありますが、現時点では分かりません。まさに「イベント限定のムービー」となりました!
ここがすごいよニューCacoo / 山岸、国広、川端
[画像5: https://prtimes.jp/i/25423/43/resize/d25423-43-381881-4.jpg ]
続いて、Cacoo開発者の3名より、リニューアルによって生まれた新たなCacooの紹介を行いました。どんなことができるようになったのか、デモも交えてご紹介しました。
Cacooユーザーのみなさんなら真っ先に気付くのが、エディタの大々的な変更です。Cacoo独自のアイコンやレイアウトの複雑性を解消し、より一般的なアイコンやラベリングへの変更、また他プロダクトでも分かりやすい汎用性のデザインシステム構築を図りました。
多くの機能追加、変更が行われた今回のリニューアル。ユーザーの皆さんからの反響が特に大きかったのは、
・iPad対応
・充実した新コメント機能:コメントのパーマリンク取得など
・ステンシルの履歴機能・検索機能
・オートセーブ(自動保存)
・色の保存
・どんな解像度のプロジェクターでも美しいスライドショー
などの機能でした。特に、iPadでのCacooデモでは会場から歓声が上がりましたね。当日のCacoo開発者チームの発表資料は、こちらから見ることができます : https://cacoo.com/diagrams/Si5Hu63OuGSeH3ub/6F409
会場ご提供:株式会社エウレカ様
[画像6: https://prtimes.jp/i/25423/43/resize/d25423-43-780121-5.jpg ]
イベント会場は、株式会社エウレカ様よりお借りいたしました。すばらしい設備を快くお貸しいただき、本当にありがとうございました。なんと当日、急遽オフィスツアーも計画してくださり、希望したイベント参加者の方々に社内を案内していただきました!
麻布十番のオフィスは、柔らかい雰囲気の木目調と、エントランスから余裕のある設計、執務室とイベントスペースがひとつづきになったオープンな空間。対応いただいた社員のみなさんだけでなく、業務に従事していた方々も、とてもフレンドリーに迎え入れてくださいました。エウレカさんのフラットな雰囲気が伝わってくるようでした。
重ねてお礼いたします。ありがとうございました!
ハッシュタグとTogetterまとめのご案内
当日の様子は、Twitterハッシュタグ “#newCacoo” でウォッチすることができます。このハッシュタグは、イベントだけのためではなく、Cacooの新たなインターフェースへのフィードバック、感想、質問などにも使っていただけます。ぜひあなたも発信してくださいね。
また、イベントの様子だけをまとめたTogetterまとめはこちらからチェックすることができます! : https://togetter.com/li/1243806
Cacooユーザーのみなさん、ありがとうございました!
[画像7: https://prtimes.jp/i/25423/43/resize/d25423-43-694183-6.jpg ]
今後もCacooの進化をお見逃しなく!
■ Cacooについて
ダウンロード不要、ブラウザ上で利用可能なCacooは、テンプレートやステンシルを用いて、ワイヤーフレームやAWS構成図、マインドマップなどが誰でも簡単に描けるツールです。複数人で図を同時に編集しても挙動が重くならないのが特徴で、主にチームのコミュニケーションツールとしてグローバルで約300万人に利用されています。
[動画: https://www.youtube.com/watch?v=xgq6jf2fq1k ]
■ Cacooを用いたワークフロー改善について
百聞は一見に如かず--制作物のイメージは、口頭や文章だけで共有するよりも図で共有した方が誤解なく伝わるのは明らかです。Cacooを使えば、テンプレートやステンシルを用い、誰もがワイヤーフレームなどの図を分かりやすく簡単に描くことができます。
また、Web上で複数人が同時に編集できるため、手描きや画像ファイルの添付よりコミュニケーション効率が上がります。具体的には、ミーティング時に複数人で同時に編集しながら図をアップデートしたり、メンバー間で常に最新の図を共有したりといったことがCacooで可能になります。
Cacooをワークフローに導入し、成果を挙げた事例については、こちらからも知ることができます:https://cacoo.com/ja/blog/categories/user-stories/
?? 株式会社ヌーラボについて
[表: https://prtimes.jp/data/corp/25423/table/43_1.jpg ]