アプリはどうやって作るの?
本連載では、毎回UI/UXにまつわる身近な話をしているわけですが、今回は若干趣向を変えて、普段あまり聞く機会がない、アプリ開発の現場の声を皆さんにお伝えします。ずばりテーマは「プロトタイピングツール」について。おそらく皆さん聞いたことのない単語だと思います。これはいったい何をするためのツールなのでしょう? ちなみに、アプリ開発の現場で最近よく聞かれる言葉でもあります。
その答えを教える前に、いきなり専門的な話をしてもわかりづらいと思うので、まずはアプリがどのような過程を経て作られているのかを簡単におさらいしましょう。
アプリを作るといっても、もちろんさまざまな進め方があるのですが、ざっくりと「アプリの企画構想」→「設計/構成」→「デザイン/プログラミング」に分けることができます。
ここで質問です。筆者のような「UIデザイナー」はどこの部分を担当すると思いますか? 普通に考えると「デザイン/プログラミング」の部分ですよね。もちろんこれも正解で、UIデザイナーがそこを担当する場合は大いにあるりますが、最近は一番初めの「アプリの企画構想」の段階から関わることが多くなってきています。
通常、それぞれの工程をそれぞれの専門職(デザイナーやエンジニアなど)にまかせるわけですが、それだとデザイナーとエンジニアのコミュニケーションにとにかく時間がかかってしまう。それゆえ、デザイナーやエンジニアが企画から開発まで関わりをいかに効率的に持つのかが、今のアプリ開発における課題だといえます。そんなときに力を発揮するのが、冒頭のプロトタイピングツールなのです。
アプリ開発の共通言語
プロトタイピングツールを使えば、プログラミングを行わずに実際のアプリのような操作をPCやスマートフォン上で実現できます。それにより、実際の使い心地をアプリを作る前に試すことができるわけです。
実際に現場の声を聞いてみましょう。プロトタイピングツール「プロット(Prott)」を開発している株式会社グッドパッチへお邪魔して、代表取締役CEO・土屋尚史さんに「プロトタイピングツールを使うことのメリット」についてうかがいました(1)(2)。
「弊社は以前、エンジニアが少なく、外部の開発会社と一緒にアプリ開発をしていました。その過程で、どうしても彼らとのコミュニケーションに難が出てくる場面がしばしばあったのです。具体的にいうと『こちらの指示の内容がエンジニアに伝わりにくい』『こちらの指示どおりに作っているのにアプリが使いにくい』『こちらが指示した内容に対して、やり直しを依頼しにくい』といった問題ですね」
こうした問題を解決するために土屋さんが見つけたのが、当時海外で出始めていたプロトタイピングツールだったそうです(3)。
「プロトタイピングツールは、いわば『アプリ開発における共通言語』です。エンジニアに依頼をする前の段階でスマートフォンで確認ができれば、各職種の領域を超えて、チームの皆が「いちユーザ」として接することができるため、平等に意見が出せるのです。また、そこにアプリの動かし方の正解が出てくるため、指示を出す立場の人間も直感的な理解ができます」
グッドパッチではいち早く海外でリリースされた「フリント(Flinto)」というプロトタイピングツールを導入したところ、それらの問題が一気に解決し、アプリ開発の効率が大きく高まったそうです。その一方で、使っていく内に不満も出てきたといいます。
「フリントをはじめとする海外のツールのほとんどは、個人で使うことが想定されており、チームで使うのには向いていませんでした。アプリはチームで作るものだと思っていますので、もういっそ自分たちで作ってしまえと(笑)。それで完成したのがプロットです。目指しているのは『チームでの作業効率の向上』です」(4)
2014年10月にローンチされたプロットは、今や世界で4万人のユーザ数を誇り、国内でも大手IT企業が数多く導入を決めています。
一方で、海外におけるアプリ開発の実情はどうなっているのでしょうか。土屋さんにうかがってみました。
「海外ではもはやプロトタイピングツールの導入が当たり前になってきています。たとえば、UIデザイナーといえど多くの工程に横断して関わっていますし、アニメーションを作ればコードも書くなんて人も中にはいます。目に見えるものすべてを使えるのが海外のデザイナーですね。国内ではどうかというと、海外と比べると、ツールの導入はまだまだ進んでいないのではないかと思います」
(1)株式会社グッドパッチは東京・渋谷とドイツ・ベルリンにオフィスを構える、WEB/iOS/アンドロイドなどのマルチデバイスアプリケーションのUIデザイン会社です。天井は吹き抜けで、オープンなオフィス空間でした。【URL】http://goodpatch.com/jp
(3)海外のプロトタイピングツールは、グッドパッチが使っていた「フリント」(https://www.flinto.com/)や、「インビジョン(Invision)」(http://www.invisionapp.com/)が有名です。
(4)プロットは、誰でも簡単にワイヤーフレーム(アプリの構成図)が作成でき、よりスピーディーなプロトタイピングが特徴です(https://prottapp.com/ja/)。
これからのUIデザイン
アプリ開発における「プロトタイピングツール」という存在は近年生まれたものですが、ものづくりにおいてのプロトタイプを作る文化は古くから存在しているものです。たとえば、自動車に目を向けてみると、デザインの過程でクレイモデルと呼ばれる粘土で作った立体イメージを作るのが一般的でした。掃除機で有名なダイソンはというと、なんと5000個以上のプロトタイプを作って、繰り返し細部を見直し、やっと製品の完成にこじつけたそうです。
こうしたものづくりの先例を踏まえると、アプリ開発もものづくりですから、ここにプロトタイプの文化が組み入れられるのは非常に自然なことだといえます。
日本でiPhoneが発売されてから7年が経ち、アプリという市場はすでに成熟を迎えているといっていいでしょう。いかに細部への磨き込みができるかがポイントであり、差別化に重きが置かれるでしょう。ユーザのアプリに対する要求も年々高まっていくわけで、それに応えるために開発者も腕を上げていく必要があります。
そのためには「プロトタイピング」という、過程を大切にしたうえで、現状に満足せず試行を繰り返すことがこれからのアプリ開発のやり方の1つなのだと思えます。
「プロットは、誰にでもアプリが作れるようにと思って生み出したものです。ただ、簡単に作れすぎてしまうと、作った感動が薄れてしまうかもしれないですよね(笑)。とはいえ、開発のサイクルをいかに繰り返すかが成功の秘訣なので、そのハードルを下げることは良いことだと思っています」
【COLUMN】海外のプロトタイピングツール市場
今、海外のプロトタイピングツールの市場がとても盛り上がっています。国内でこそ今回取り上げたグッドパッチ社のプロットくらいしかありませんが、海外では、同社も当初使っていたフリントを始め、「インビジョン(InVision)という世界シェア1位のツールが2100万ドルの資金調達をしています。また、つい先日、「ピクセイト(Pixate)」というプロトタイピングツールを作っていた会社がグーグルに買収されて話題になったのも記憶に新しいです。そのほかにも元アップルのエンジニアが開発した「プリンシプル(Principle)」というツールも今注目されています。
【UIデザイン】
アプリにもそれぞれ目的があり、フェイスブックやツイッターは、設定アプリとはまったく違う目的をもったサービスであグッドパッチはプロットだけでなく、アプリのUIデザインも行っています。「グノシー」や「マネーフォワード」といった人気アプリのUIデザインを手がけたのも同社なのです。
【料金】
プロットは無料で使える「Free」プランを含め、「Starter」「Pro」「Team」「Enterprise」の5つのプランで構成されています。Proプランの30日間無料トライアルを行っているそうなので、興味のある方はぜひ。
文●宇野雄
ヤフー株式会社にてUI/UX設計、デザイン、コーディングなどを担当。まったく新しいモノづくりよりも、すでにあるモノを新しい視点で捉えるデザインが好き。