ヌーラボニューヨーク子会社でUXリサーチャーを務めるChrisです。2009年のベータ版リリースから始まったCacooは、9年間大幅に変わることのなかったユーザーインターフェース（以下UI）を、2018年6月28日に一新しました。

「Cacoo Redesign Project」という名前で立ち上がったフルリニューアルプロジェクトは、UXリサーチャーの私と4人のデザイナーが、Cacooの根本的な価値である「図を描く」というユーザー体験の原点に立ち戻るところから始めました。

そもそもひとは“なぜ”図を描くのか？ Cacoo Redesign Projectはこうした問いから始まり、その答えを見出すために「UXリサーチ（ユーザー体験調査）」という手法を採用しました。その結果、単なるUIの改善だけでなく、Cacoo全体を通したユーザー体験の再定義とCacooのあり方の再構築にもつながりました。

本記事では、「ユーザー体験（以下UX）」をテーマに、Cacooがなぜフルリニューアルを行ったのか、どのように進められて、何が変わったのか、また今後のCacooの展望をお届けします。

なぜCacooは9年の歳月を経てフルリニューアルをしたのか？

Cacooは2018年でサービス開始から9年目を迎えます。その期間、細かいデザインのアップデートや技術基盤をFlashからHTMLに移行するといった、小規模なリニューアルは実施していましたが、ダッシュボードやエディターなどのユーザーとダイレクトに接するインターフェースデザインの大規模なリニューアルは実施していませんでした。

“誰もが使えるビジュアルコラボレーションツール”をコンセプトに、サービス開始からさまざまな機能を実装してきました。しかし、9年という歳月で蓄積されたCacooの多機能なUIは、「図を描く」というユーザーの根本的な目的や行動を叶えるためには、少々複雑になってしまっていました。

そこで、私たちは複雑化してしまったCacooをよりシンプルにするために、“ユーザー中心設計”の導入を決めました。「ユーザーの視点を通して『図を描く』ことを理解し直す」ことを目的に、UXリサーチの手法を採用してユーザー理解に努めたのです。

フルリニューアルはどのように進められたのか？

私たちはCacooが提供できる価値とユーザーがCacooに求めることを再定義するために、以下の被験者を対象にして、UXリサーチを実施しました。

【被験者】

• ニューヨーク在住の19名
• 偏らないように以下の要素でセグメント
  • プラン（有料・無料・初めての利用）
  • 作図ツールの利用頻度（Cacoo以外も含む）
  • 役職や役割
  • 産業・業界

【調査手法】

• ユーザビリティテスト
• プロトタイプの作成
• A/Bテスト

ユーザビリティテストの取り組み

ユーザビリティテストには、デスクトップパソコンとラップトップパソコン、マイクを用意しました。19名の被験者に実際にCacooを操作してもらい、どんな小さいことでも感じたことを述べてもらうような形で実施しました。

ユーザビリティテストで使用したパソコンやツール

ユーザーには、Cacooのダッシュボードやエディターを操作してもらいました。さまざまな職種や業種の被験者を集められたこともあり、デジタルマーケターの被験者には普段の業務で使用する頻度が高いワイヤーフレームを作成してもらい、エンジニアの被験者にはネットワーク構成図を実際に作成してもらいました。

また、この時にCacooのテンプレートを使用して図を作成するパターンと、テンプレートを使用せずに一から作成するパターンの2通りを試してもらいました。

Cacoo上でのユーザーの行動はもちろん、リアルな目の動きなども確認するためにも、すべての行動は複数のカメラを使って記録しました。

デジタルマーケターの被験者にモバイルアプリのワイヤーフレームをテンプレートから作成してもらい感想をヒアリング

デジタルマーケターの被験者にモバイルアプリのワイヤーフレームを一から作成してもらい感想をヒアリング

ユーザービリティテストを通じて、被験者にある共通性が見られました。それは、Cacooに対して「複雑なアイデア・プロセス・システムを、整理したり、視覚化したり、伝達したりする」体験を求めている、ということです。

この発見は、ユーザーがCacooに求めている本質的な価値は「図という機能」ではなく、「図から生まれる体験」であることを私たちに気づかせました。

UXリサーチを経てCacooは何が変わったのか

UXリサーチを通じて、ユーザーは「よりシンプルに“図を描ける”体験」をCacooに求めているとわかりました。

では実際にCacooのUIはそのように設計されているのでしょうか？その疑問をチームで話し合った結果、浮き彫りになったのは以下の課題感でした。

• 「図を描く」という主要タスクの阻害要因を解消
• ユーザーが受ける心理的印象を改善
• 新規ユーザーが素早く理解でき効率的に使えるか
• コラボレーションの強化を図る

「図を描く」という主要タスクの阻害要因を解消

被験者からのフィードバックを分析した結果、作図ツールを利用するユーザーのほとんどは複雑なアイデア、システム、プロセスを整理して伝達するために作図ツールを利用していることがわかりました。そこで障壁となっていたのが、図の保存の必要性、図を作るまでのステップ、図の閲覧画面と編集画面が分離していることの混乱といった問題です。

新しいCacooのUIでは、図の保存の工程と図の閲覧ページが排除されています。これにより図を描くまでのステップがより一層簡略化され、描画に素早く取りかかれるようになっています。

ユーザーが受ける心理的印象を改善

約9年間大幅な変更がなかったCacooのUIは、ユーザーに時代遅れなルック＆フィールを抱かせてしまっていることがわかりました。複雑に見えるアイコンやフローティングレイアウト、過度にカラフルな装飾も要因でした。

リニューアル前のCacooダッシュボード

リニューアル前のCacooエディター画面

そこで、新しいCacooのUIでは、よりシンプルで抵抗感なく使える配色とレイアウトにしています。明るい配色と簡略化されたシンプルなレイアウトは、図を描く・情報を整理して伝達する、という本来の目的に集中するのに役立ちます。

リニューアル後のCacooダッシュボード

リニューアル後のCacooエディター

ユーザーが素早く理解して効率的に使えるか

被験者から「やりたいタスクに関連する機能がわかりにくいUI」「すぐに利用方法を理解できるドキュメントやヘルプが不足している」というフィードバックがありました。

複雑さはCacooの根本的な価値である「図を描く」に反します。こうした複雑さに対処するために、図のサムネイル、ラベル、アイコンなど細部にいたるデザインをより単純にしています。

ユーザーが覚えなければならない要素や手順を最大限少なくすることで、より優れたユーザー体験を提供しています。

新しくなったダッシュボード

チームコラボレーションを促す機能

ユーザビリティテストを経て、図に対するコメントやチャット機能が円滑なフィードバックをするのに不十分であることがわかりました。加えて、完成した図を共有するための設定ボタンも一箇所に集約されていなかったり、複数のステップを踏まなければならなかったり、ユーザーが使いづらさを感じていることも発見しました。

そこでCacooの新しいUIでは、コメント機能を刷新しています。以前のコメント機能とは異なり、図のあらゆるところにコメントができたり、返信したりできます。図の共有についても、複数のステップを踏まずにワンクリックで共有できるように簡略化しています。

新しくなったコメント機能の利用イメージ

今後のCacooについて

以上のUXリサーチ施策でCacoo Redesign Projectは進められ、新しいCacooのUIが生まれました。

Redesign Projectはこれで終わりという訳ではなく、現在「運用フェーズ」に入っています。みなさんからのフィードバックをもとに、Cacoo自体のさらなる改善を続けていくことはもちろん、図の利活用を広げる施策や追加機能の開発、コラボレーションやプラットフォームの拡大も実施していきます。

「図を描く」という原点に立ち戻って、生まれ変わったCacooであなたのアイデアや複雑なプロセス、システムを視覚化してみませんか？

Cacooの新しいUIは、旧UIのダッシュボード右上にある「新しいユーザーインターフェースを試す」から体験できます。アカウントをお持ちの方はこちらからログインして、お持ちでない方は以下のボタンから無料トライアルを始めてみましょう。

新しいCacooを試してみる