モックアップの作成工数を50%削減！中古車オークションサイト「カープライス」のCacoo活用事例

by Nulab

2018年8月21日

導入事例

仕様やUI(画面)は現行バージョンと異なる可能性があります。
Cacooの最新版についてはこちらからご確認ください。

三井物産グループのカープライス株式会社が運営する中古車オークションサイトの「カープライス」は、モックアップの作成や図の共有ツールとしてCacooを利用しています。IllustratorとCacooを上手に併用したことで「モックアップ作成時の工数を50%削減できた」と語る同社のプロジェクトマネージャーとデザイナーに業務改善の効果をお話いただきました。

写真左から：プロダクトマネージャーミハイル・コリャシキン氏、UI/UXデザイナー竹下洋平氏、代表取締役兼CTO 林耕平氏

導入目的	モックアップ（ワイヤーフレーム、フローチャート）作成フローを改善して、チーム間のコミュニケーションや作業分担を進めたい。
課題	インストール型のソフトウェア利用により、細かい修正やバーション管理などデザイナーに作業が集中。仕事が全体的にうまくまわらない。
効果	モックアップ作成に費やしていた工数が50%削減。ファイルの共有など部署間のコミュニケーションが円滑になったことで作業時間の短縮も実現。

業種	情報・通信（IT）
Cacoo を利用している事業部	全社利用（プロダクトオーナー、プロジェクトマネージャー、デザイナー、エンジニア、マーケティング、オークション）
利用しているヌーラボサービス	Cacoo（チームプラン）

――カープライスについて教えてください。

代表取締役兼CTO 林：「カープライス」は、独自に開発したインターネット・ライブオークションシステムで国内外1,000店舗以上の中古車販売店や輸出業者から入札を募り、オークション最終価格により買い取りを行う、納得感No.1の中古車買取サービスです。

三井物産グループ「カープライス」ウェブサイト

――今日ご同席いただいているお三方の職務と業務内容についてお伺いしてもよろしいでしょうか？

林：私は代表取締役兼CTOとして、カープライスのプロダクト開発全般をチェックしています。

新機能や既存機能、ランディングページの要件定義やリリース前の品質チェックから、プロジェクトメンバーのリソース状況まで全体を俯瞰しています。開発チームからビジネスチームまで広くやりとりをしていますが、特に多いのはプロジェクトマネージャーとのやり取りですね。

ミハイル：カープライスのプロダクトマネージャーを担当しています。

具体的には、開発スケジュールの決定や担当者のアサイン、進捗管理などです。CTOの林をはじめ、エンジニアとコミュニケーションすることが多く、マーケティングやセールスなどのビジネスチームと協力しながら仕事を進めることもあります。モックアップの作成時はデザイナーとやり取りすることもあります。

デザイナー竹下：私はUI/UXデザイナーとして、カープライスのデザインを主に担当しています。

弊社では、ラフ画段階のワイヤーフレームやフローチャートを「モックアップ」と呼んでいます。このようなモックアップの作成から、機能に落とし込んだ時のデザインまで私が担当しており、プロダクトマネージャーやマーケターとコミュニケーションすることが多いですね。

カープライス株式会社 UI/UXデザイナー竹下洋平氏

――Cacooを利用しているプロジェクトは何ですか？

ミハイル：一例ですが、カープライスで紙の契約書をデジタル化するプロジェクトで活用しています。このプロジェクトは、車の売買が決定したタイミングで発生する契約書のデジタル化をゴールに設定しています。

紙の契約書をデジタル化するプロジェクトのモックアップ

竹下：同プロジェクトは、開発チームからマーケティングチームまで幅広いメンバーが関与しているのですが、Cacooは部署や役職を超えたプロジェクトのコミュニケーション手段として活用されています。

――複数人が関与するワークフローのどのタイミングでCacooは利用されるのでしょうか？

竹下：弊社では、新機能などの要件定義が決まってモックアップを作成するタイミングを「スターティングポイント」と呼んでいます。

具体的には、ワイヤーフレームやフロー図などのモックアップのラフ画を作成する作業ですが、私がデザインを担当しています。だいたい2日ほどかけて、Cacooでモックアップを作成し、プロジェクトマネージャーやビジネスチームに共有して内容をブラッシュアップしていきます。

アプリのモックアップをCacooで作成

ミハイル：カープライスにはレビュー文化が浸透しており、機能のモックアップは部署を超えてレビューする文化があります。レビューに費やす時間はケースバイケースで、レビューがまとまったタイミングで、竹下が細かいデザインに落とし込む作業に着手します。

モックアップ作成をIllustratorからCacooに切り替えたことで工数を50%短縮

――Cacooを利用する前はどういった作図手法をされていたのでしょうか？

竹下：以前はモックアップの作成に、Adobe社のIllustratorを利用していましたが、インストール型のソフトだったので、全員が必ず使えるというわけではありませんでした。デザイナーは、Illustratorをインストールしていたのでデータを送り合えましたが、Illustratorを持っていない開発チームやビジネスチームは元データを開けないので、PDFで書き出して、メールで送ったりプロジェクト管理ツールにアップロードしたりしていました。

ミハイル：加えて、Illustratorで作られたファイルはサイズが大きいので、ファイルをアップロードする時間がかかっていました。また、メールで送ってもファイルがすぐに埋もれてしまい、共有性の悪さをエンジニアから指摘されることも。

カープライス株式会社プロダクトマネージャーミハイル・コリャシキン氏

林：PDFファイルはバーション管理も大変でした。修正依頼があった時はタイトルに1,2,3と数字を振って最新のファイルをわかりやすくしていたのですが、これがいちいち細かく大変な割には、ファイルの識別がしづらいという問題がありました。

――Cacooに切り替えた後の効果はいかかでしょうか？

ミハイル：オンラインで図を共有できるので、ファイルサイズを気にしなくて良くなりました。共有性の面でも、図のリンクを送るだけで共有できるのが便利ですね。

Cacooはフォルダに図を追加するだけでプロジェクトメンバーが自由に閲覧・編集できるので、その点も楽です。おかげさまで、エンジニアとの情報共有もだいぶ円滑になりました。

Cacoo導入でエンジニアのコミュニケーションや情報共有が改善されたとミハイル氏は語る

竹下：他にも、モックアップの作成や管理に費やしていた時間を半減できました。マーケティングやビジネスチームもモックアップにアクセスできるようになったので、文言を変更するなど簡易な修正は各部署でお願いできるようになりました。あとメールの打ち返しに費やす時間も半減できたのも嬉しい効果ですね。デザイナーとして本来時間を割くべき、UI/UXの改善業務に打ち込めています。

――以前と比較して、モックアップ作成時にどのような効果がありましたか？

竹下：ワイヤーフレームの設計には電子申込み書などのフォームが多いのですが、Cacooのステンシルやテンプレートが活躍しています。全体的に操作も楽になったので、以前と比較すると、フォーム作成に費やしていた工数は50%削減できたと感じています。

――図のバージョン管理という観点ではいかがでしょうか？

林様：同一ファイルが乱立したりバージョン管理に時間を費やしたり、という手間が大幅に改善されました。以前あった「最新バージョンどれだっけ？」という質問が圧倒的に少なくなりました。

加えて、経営者的な観点だと、竹下さんが本来の業務であるUI/UXの改善に集中できるようになったのは嬉しい効果でした。経営者としては社員の時間的なリソースを最大限効率化したいという思いがあります。デザイナー以外でもできる作業が竹下さんに集中しなくなったので、デザインに集中できる環境が作れたというのもCacooのメリットだと思います。

雑務が激減したことで社員の時間的なリソースを最大限効率化できたと話す林氏

――ありがとうございます。ちなみに現在、Cacoo以外にもデザインツールを使われているのでしょうか？その場合ツールのすみ分け方を教えてください。

竹下：デザインのワークフローは3段階に分けられると考えています。第1段階は、色を使わないモックアップの段階で、全体の約90%の割合でCacooを利用しています。第2段階は、スタイルを調整したりビジュアルを整える段階で、このときはSketchを使っています。最後にプロトタイピングとして動かす時はInVisionを利用していますね。