[Too × Goodpatch デザインプロセスセミナー] プロトタイピングで変わる開発プロセス
セミナーレポート

カーデザインにおけるクレイ（粘土）モデリングや、グラフィックデザインのカンプ、ラフスケッチなど、モノを作る上では、完成形を作る前にクライアントやスタッフ間で確認するためのものが必要です。

そういった完成品のイメージを検証するためのものの中で、実際に動きを確認できる模型や試作品をプロトタイプと呼びます。

特に、スマートフォン向けのサイト／アプリにおいては、その使い勝手、ユーザーインターフェイスが大切なため、プロトタイプにより動きを検証することの重要性が認識されてきています。

そこで、本セミナーでは、UIデザインの専門家でありプロトタイピングツール「Prott」を自社開発した、株式会社グッドパッチを迎え、「プロトタイピングで変わる開発プロセス」と題し、デザインプロセスにプロトタイピングを使用することの重要性や、実例について話していただきました。

日本でも珍しいUIデザイン専門会社「グッドパッチ」

最初に、グッドパッチのアカウントマネージャー／UXデザイナー・佐宗純氏により、グッドパッチの業務内容の案内と、プロトタイプの必要性の解説、Prottの機能紹介が行われました。

グッドパッチの佐宗純さん

グッドパッチは日本でも珍しいUIデザインを専門とした会社です。デザイン会社でありながらプロトタイピングツール「Prott」を自社開発し、日本をはじめ、様々な国で使われています。

グッドパッチの強みは、プロダクトの企画設計段階から関わり、ユーザーヒアリングを通してのコンセプトメイキング、UI／UX設計、ワイヤーフレーム、プロトタイピング、実装まで全てを行えることです。これらは、当社オリジナルのデザインプロセスを通して行われており、チームのコミュニケーションを重視していることが特徴です。

チームのコミュニケーションを重視したグッドパッチオリジナルのデザインプロセス

今までの実績としても、アットホーム様のマンション選びのアプリ「TALKIE」、フィンテックアプリの「マネーフォワード」などのUIデザインを手がけ、UI分野でのグッドパッチの存在感の大きさが分かります。

以下の3項目は、グッドパッチの挙げるプロトタイプの必要性です。

• イメージのズレを防ぎ、認識を共有する
• 使われないものを作ってしまうリスクの低下
• 作りながら新たなアイデアが生まれる

プロトタイプを素早く作って素早くテスト、レビューという環境が作れれば、イメージのズレを防ぎ、作ったあとで「コレじゃなかった」という失敗も防げるとともに、新たなアイデアも生まれやすくなるということです。

プロトタイプで具現化することで、言語化できない部分を小さくできる

誰でも簡単に動くプロトタイプが作れるツール「Prott」

続いて、プロトタイピングツール「Prott」の紹介です。素早く簡単にプロトタイプを作れ、チームコラボレーションを促進するツールです。

手書きのスケッチやワイヤーフレームはもちろん、PhotoshopやSketchで作ったデザインデータをProttに取り込むことで、本物と同様に動くプロトタイプがすぐに制作できます。"Easy to use"を掲げ、デザイナーはもちろん、エンジニアやディレクターの人など職種問わずご利用いただけます。

Prottで手書きのスケッチを元にしたプロトタイプを制作する例

意思決定者やクライアントにフィードバックをもらう際に、本物と同様に動くプロトタイプを元に現状を正しく認識してもらうことができ、ディスカッションが進めやすくなります。

「1000の会議より一つのプロトタイプ」というProttのキャッチフレーズの通り、プロトタイプがあることでチームの共通認識ができ、コミュニケーションも取りやすくなるはずですね。

トランジションには正しい動きを付けるためのリコメンド機能もある

Prottは元々モバイルアプリ向けとして開発されていますが、今ではWebブラウザ、Apple Watchなど様々なデバイス向けのプロトタイプが作れるようになっています。ブラウザ上でWebアプリとして使えるほか、iPhone、Android向けのアプリケーションもあります。

ProttのiPhoneアプリの画面をMacの画面上に表示しての紹介

登録はブラウザから行い、無料の個人アカウントでは1プロジェクトを作ることができます。有償で会社のアカウントが作れ、社内でプロジェクトを共有することでグループワークが可能です。社内の過去のプロジェクトや他のグループのプロジェクトを見ることもできるので、ナレッジシェアとしても利用できます。

「一休.comレストラン」のデザインプロセスにおけるプロトタイピングの重要性

Prottの紹介に続いては、グッドパッチのプロジェクトマネージャー・竹田哲也氏が、「一休.comレストラン」のモバイルアプリのプロトタイピング制作の事例を紹介しました。

グッドパッチの竹田哲也さん

Prottは、プロトタイプを作るときに利用されたのはもちろんですが、既存のスマートフォン用Webサイトの画面をキャプチャして取り込み、予約完了までの使い心地を確認するのにも使われたそうです。

一休.comレストランのiPhone・Androidの両アプリを作るための、コンセプトの決定から新機能のアイデア、ワイヤー作成、ビジュアルデザインまでの制作の流れが紹介されたのですが、プロトタイピングが常にその中心にありました。

iPhone用・Android用とデバイスに合わせてUIが調整された「一休.comレストラン」のモバイルアプリ

「プロダクトのクオリティはコミュニケーション流量に比例する」という言葉が紹介されたのですが、Prottによりプロトタイプを素早く作って素早くテスト、レビューできる環境を持つことで、チームでのコミュニケーションが取りやすくなり、プロダクトのクオリティを上げられることが実感できる事例紹介でした。

Prottはプロトタイピングをチームにインストールするツール

具体的な質問が多く上がり、「気づき」もたくさんあった質疑応答

質問に丁寧に答えるグッドパッチの二人

セミナーの最後には、しっかりと時間を取って質疑応答が行われました。

実際に現場で活躍されている方々が、日々の業務で悩んでいることを質問していただいたおかげで、質問者以外の方にも実のある内容が多かったと思います。

デザイナー、エンジニア、企画、営業、システム管理者など様々な職種の方が集まったことで、いろいろな意見が出たのですが、同じ目的に向かって共有できる共通の課題も多いように感じられました。

「ハートに響くUIを追求するグローバルなUIデザインカンパニー」「1000の会議より一つのプロトタイプ」「プロダクトのクオリティはコミュニケーション流量に比例する」などの良いフレーズをたくさん持っているグッドパッチですが、質疑応答ではそれぞれの質問にストレートな言葉で真摯に答えていたのも印象に残りました。

休憩時間にはProttのデモに人だかりが

Tooでは、今後もProttやプロトタイピングに関するセミナーやワークショップの開催なども企画していますので、ご期待ください。

大勢のお客様にご来場いただき、ありがとうございました。