こんにちは。デザインリサーチャーのKeikaです。
以前上海へ訪れた際に、現地のデザイナーたちに「GoodpatchではProttを使ってプロトタイプを作る」という話をしても、ほとんどの人に「Prottって何？」という反応をされました。
一体彼らはどんなプロトタイピングツールを使い、どのようにしてプロトタイピングを行なっているのでしょうか？
この記事では、気になる中国のUX・UIデザイナーたちのプロトタイピング方法をリサーチしましたので、その内容をご紹介します。
（「プロトタイピングってそもそも何？何のために行うの？」という人は過去記事をご参照ください。）
実務で活かせる！プロトタイピングの具体的な進め方とは？
プロトタイピングが社内に平和をもたらすのはなぜ？
目次
上海・アクセンチュア｜Axureを選ぶ理由
国際的にビジネス展開している大手コンサルティングファーム・アクセンチュアに10年も勤めているLiandaさん。クライアントワークを中心に、ウェブサイトからアプリのデザインまで多様なプラットフォームのUIデザインを担当しています。そんなLiandaさんに、普段どのようにデザインのプロトタイピングを行なっているのか聞いてみました。
──普段どのようにプロトタイピングを行なっていますか？
Lianda 私たちアクセンチュアのデザイナーの主な仕事は、クライアントへプロダクトのデザインを提案することです。多くの提案で実践しているのは、特定の機能を重視したプロトタイプではなく、アプリの一連の流れがわかるような（画面推移を重視した）水平プロトタイピングを行っています。また、クライアントは私たちから素早い提案を期待しています。そのため、最終的に提出するデザインはローファイプロトタイプ（クライアントとの合意を得るためのワイヤーフレームに近いプロトタイプ）になります。
──プロトタイピングツールは何を使っていますか？
Lianda プロトタイピングツールは社内で統一しているわけではないのですが、ほとんどのデザイナーがAxureというプロトタイピングツールを使用しています。過半数の人が使っているため、連携が取りやすいというのもAxureを選ぶ一つの理由です。
【Axureについて】
2002年5月にVictor HsuとMartin Smithによりサンディエゴにて開発されたプロトタイピングツール。現在世界で25,000社以上が活用しており、2016年の調査によると、中国国内の70%以上のデザイナーがAxureを使っている。
（参照：产品经理必备原型工具优劣势对比 | 人人都是产品经理）
──Axureを用いたプロトタイピングの一連の流れを教えてください。
Lianda 以前、ある製薬会社からWeChatのミニプログラム用にアプリを開発してほしいという相談がありました。その時はクライアントから概要がメールで送られてきて、3日以内に提案してほしいという内容でした。
まずはクライアントから送られてきた機能のリストを参照し、プロジェクトマネジャーと一緒に「必要な機能」と「集約可能な機能」を定義します。
次に、話し合った結果に基づき、フローチャートを作成します。画面フローを考える際には、XMindをよく使っています。生成されたチャートに基づいて制作する画面の数を決定します。それぞれの画面に必要なH1、H2、テキストボックス、チェックボックス、ダイアログ、ボタンなどを整理した後に、Axureのアートボードに当てはめていきます。このようにあらかじめ機能を定義してから、Axureで制作することで、やり直しのリスクを防いでいます。
Axureで制作を進める際に、インタラクションの多い画面については優先的にテストを行い、出た方案に基づいた修正をします。全ての画面のフォームが決まった後に、テキストボックスのインタラクションや、ボタンの優先順位について検討します。
最後にAxureで作成したプロトタイプをHTMLで書き出し、クラウドでメンバーやクライアントにシェアするのが一般的なプロセスですね。
Axureを使ってHTMLに書き出している
コメント機能もあるので、クライアントから直接的なフィードバックをもらうことも可能です。
──Axureのメリット・デメリットはありますか？
Lianda 一番のメリットは、HTMLの書き出しが行えることです（2015年にリリースされたRP 7.0バージョン以降）。Axureを用いる前はPowerPointなどを使用していましたが、デザイナーが作ったスクリーンを実際にエンジニアがコーディングするまでかなり時間が必要でした。Axureを導入して以降は、エンジニアとの連携がより効率的になったと思います。
また、Axureは機能面でPowerPointと似ている部分が多いので、あまり違和感を感じずに移行することができました。
その反面、モバイル対応機能はまだ不十分なので、同僚やクライアントはアプリではなくウェブでプロトタイプを確認する必要があります。私のパソコンがMacBook Pro 15インチのせいか、モバイルの画面を確認する手間を感じています。
案件にもよりますが、未だにメンバーにアイデアを素早く共有したい時はPowerPointを使っています。本当は、紙で行うプロトタイピングが一番早いと思っています。Axureは私たちにとって、プロトタイプを行うための1つのツールでしかありません。
Liandaさんは、アクセンチュアのデザイナーはあくまでクライアントワークの一貫として、「アイデアの共有を行うのが仕事」ということを強調されていました。自社プロダクトを作る企業に比べて、デザインそのものよりもいかに素早く提案できるかが重要とおっしゃっていたことが印象的でした。
企業によって、プロトタイピングを行う際にどの部分を大事にするかは大きく違うのではないでしょうか。
日本ではAxureの知名度は低い印象がありますが、今後効率面を重視した企業が取り入れる可能性も十分にあると感じました。
テンセント｜Keynote、Flinto、After Effectsの機能を兼ね備えたPrincipleを選ぶ理由
上海でお世話になったテンセントQQ本部に所属するUXデザイナーのSisiさん。
主に自社プロダクトであるQQ製品のデザインを国内各地のQQデザイナーと連携を取りながら行なっています。今回は彼女の元で働くUIデザイナーのOrazhangさんにご協力いただき、普段どのようにプロトタイピングを行なっているのか聞いてみました。
──プロトタイピングではどのようなツールを利用していますか？
Sisi 会社でツールを統一するのではなく、その都度案件によってデザイナーが何のツールを使うかを選択しています。クライアントの要件を満たしていれば、どんなツールを使っても良いので、社内のプロトタイピングプロセスに対する自由度は高いです。
メンバーへの共有だけが求められている場合にはKeynote、Flinto、After Effectsで素早くプロトタイプを作ります。KeynoteとFlintoは画面推移の多い水平プロトタイプを作成する際に活用します。ある特定の機能にフォーカスした、アニメーションを重視した垂直プロトタイプではAfter Effectsを使用します。
上で挙げたソフトの機能を全て兼ね備えたツールがPrincipleです。社内のデザイナーのほとんどが、ユーザーにプロトタイプを見てもらう際や自社プロダクトのβ版をリリースする際にPrincipleを使っています。
プロトタイピングは早く質の高いものでアイデアを共有することが必要だと考えています。ですが、コスト面も考慮しなくてはならないので、プロトタイピングのフェーズではそこのバランスを考慮しています。
【Principleについて】
多くの有名企業が活用しているプロトタイピングツール。信用度が高いですね。
Sketch→Principleの使い方はこちらに詳細に記されています。
PROTOTYPING WITH SKETCH AND PRINCIPLE
──Principleのメリット・デメリットはありますか？
Orazhang Principleの良いところは、簡単にアニメーション設定ができることです。例えば、画面推移を設定すると、イーズイン・イーズアウト効果が自動で適応されます。これは、画面が水平に動くと人間は本能的に違和感を感じてしまうため、自然なプロトタイプを簡単に作れるように考慮して作られた機能です。
一方で導線が多いプロトタイプの制作には適していません。レスポンシブデザインへの対応もされておらず、ウェブでの確認が一般的です。
Principleは先ほどのAxureと比較すると大幅に機能が整理されていて、使いやすさを感じます。また、アニメーションに特化しているツールであると感じました。
高速でありかつハイファイなものを作るというのは、非常に難易度の高いプロトタイピングであると思います。ほとんどの企業ではここがネックとなり、ローファイプロトタイプを繰り返し制作するプロセスになりがちです。また、柔軟に最適なツールを案件に基づいて選択することは、良いプロダクトを生み出すことに直結していそうですね。テンセントのように顧客の心を捉えるプロダクト制作にこだわっている会社は、プロトタイピングにも力を入れていることが伝わってきました。
ISUX｜独自ツール「Demoo」を開発した理由
先日インタビューを公開したISUXを取りまとめるジョナサンさんに、ISUXではどのようにプロトタイピングを行なっているのか聞いてみました。
──プロトタイピングではどのようなツールを利用していますか？
Jonathan プロトタイピングツールは自社プロダクトのDemooを活用しています。はじめはウェブ上で提供されている様々なツールを試していたのですが、すぐにどれもスピードが遅く、機能的にも不十分であることがわかりました。私たちは自社でより簡単で効率の良いプロトタイピングツールを開発することにしたんです。2日でプロトタイピングツール「Demoo」のβ版を作り上げ、QQ音楽5.xというアプリのプロトタイピングに応用しました。
徐々に社内で行われている他のプロジェクトにもDemooを使ってもらえるようになり、たくさんのフィードバックをメンバーからもらいました。他の会社からもツールを使いたいという連絡を頂いたので、私たちは市場で使ってもらうために「小さく美しく」というコンセプトを持ちながら、社内から寄せられたフィードバックをもとに安全性と安定性を磨きました。そして2015年のクリスマスの日に、社内メンバーとクライアントにDemooをプレゼントしたんです。
──Demooを用いたプロセスの一連の流れを教えてください。
Jonathan Demooを用いたプロトタイピングでは、主に4つのステップがあります。
- SketchでデザインしたUI画面をDemooへ移す
- 画面と画面を線でつなぐ
- 画面推移の方法を設定する
- ウェブ上でQRコードをシェアをして、フィードバックをもらう
（この後QRコードが生成される）
──Demooのメリット・デメリットはありますか？
Jonathan Demooの優れている点は、ツールをダウンロードするのではなく「ウェブ上でプロトタイプを制作」できるため、仲間とシェアしやすいことです。また、ほとんどのプロトタイピングツールが有料かつ複雑なのに対し、私たちは無料で簡単に使えるDemooを提供しています。もともと社内での行うプロトタイピングのために制作されたツールなので、チームでの同時編集に適しています。写真もドラッグ&ドロップでアップロードできますし、ページ間の推移も安定性を保てています。
モバイルアプリを制作するツールとして生まれたツールなので、WebやiPadのデザインに適応するにはまだ改善すべき点が多くあります。社内でWebデザインをする際には、Axureを使用しています。また、アニメーションが多く用いられるプロトタイピングには、Principleを使います。
自社プロダクトを使っている点は、ツールに対するフィードバックをすぐに改善できるため非常に効率が良いと感じました。「簡単かつ高速」にモバイルアプリのプロトタイプを作れるという観点からすれば、AxureやPrincipleよりも魅力的です。今後ウェブやiPadに対応するのであれば、コンセプトは失わずにより包括的なツールになってほしいと思いました。
まとめ
今回のリサーチで、3社とも使っているツールも、プロトタイピングへのこだわりも異なっていることに驚きました。あくまでもアイデアのシェアにPrincipleを利用しているアクセンチュア。高速かつアイデアが明確に伝えられるハイファイプロトタイピングにこだわるテンセント。そして、今回ヒアリングした中で唯一自社プロダクトであるDemooを利用し、独自のプロトタイピングを行なっているISUX。
すべての企業において、一般的に使用するツールはあるとしても、必ずしもそのツールを使わなくてはならないという決まりのない点が良いと思いました。ツールという面でデザイナーに自由度の高い選択肢を与えることは、発散されるアイデアの向上にも繋がっています。また、現代は便利なツールがありふれている時代です。違うツールに触れ、最適なものを選択することでデザインの幅も広がりそうですね。
みなさんもプロトタイピングを行う際に色々試してみてはいかがでしょうか？
