日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか

（この記事の読了目安：5分）

先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。

国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。

目次

• これはプロトタイピングツールではない
• 特筆すべきはシームレスな操作感
• 全員がMVPまで作れる時代
• まとめ

これはプロトタイピングツールではない

まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場しました。何の事前情報もなしにSTUDIOを開いてみると、確かにそれらのプロトタイピングツールの派生系に見えるでしょう。しかし、すこし触ってみるとこれが従来のプロトタイピングツールと設計思想からして全く異なるということがすぐに体感できます。実際にSTUDIOのUIに触らないで理解するのはなかなか難しいのですが、できる限りどういうことか説明してみます。

まず、アプリやWebサービスにおけるUIデザインは大まかに分けて4つのステップに分かれています。

1. ワイヤーフレーム
2. プロトタイピング
3. グラフィックデザイン
4. プログラミング

このうちプロトタイピングとグラフィックデザインは順序が前後する可能性もありますが、主だったポイントはこんなかんじではないでしょうか。これまで世の中に登場してきた代表的なツールに当てはめると、Prottはワイヤーフレームとプロタイピング。Sketchはグラフィックデザインの領域を得意としており、互いのツールを連携することで優れたUIをデザインすることを補助しています。

ではSTUDIOはこれらのステップのうちどこを得意としているかというと、私が触った印象としては１〜４の全ての工程をSTUDIOひとつで完結させようとしていると感じました。馬鹿げていると思いますか？しかしこれが事実であることは、STUDIOのサービスコンセプトが物語っています。STUDIOが目指している世界は「コードを書かずにサービスが作れる世界」すなわち、GUIでプログラミングまで含めたアプリ制作が完結する世界なのです。

これに気付いたとき、ワクワクせずにはいられませんでした。かつてGUIによってOS操作を実現したように、画面上でグラフィカルかつ直感的に要素を配置するだけでアプリやサービスが出来上がる世界がもうすぐそこまで来ているのだと。

具体的にどのような部分でそれを感じるかというと、まずXcode(アップル公式の統合開発環境)ではおなじみAuto Layoutが、しれっとGUIで実装可能になっています。この時点で結構な驚きです。まだβ版なのにAuto Layoutを優先して実装してくる時点でSTUDIOがXcodeに頼らず開発する未来を目指していることがよく分かります。

そのほかにも、Sketch等グラフィックデザイン支援ツールではお馴染みのレイヤー表示順の概念とグループ化がSTUDIOでは(おそらく)意図的に実装されていません。これは、最終的にアプリとして出力(β版では出力機能はありませんが)される際にデータ構造を正常に保つためだと思われます。ちなみに、わざわざ自分でグループ化やレイヤー順変更しようと思わなくても見た目上でブロックの中に配置されたオブジェクトは自動的に正しい順序が保たれた入れ子のツリーのような状態になるため、コンポーネントの区切りを意識することなく想像以上に快適に操作することが可能になっています。

なにより決定的なのが、要素に対してGUI上でAPI接続させる機能が標準で備わっていることです。ここまでで紹介した特徴だけではちょっと変わったプロトタイピングツールという認識になってしまいますが、β版の時点でAPI接続までサポートしようとしている時点でSTUDIOが本気でアプリ制作の全工程をカバーする気だということがひしひしと伝わって来ます。とりあえず、サンプルでspotifyのAPIを叩いてビートルズの名盤のジャケット写真を表示してみました。すげえ。

ここまでの紹介を読んで皆さんに誤解して頂きたくないのは、コードを書かなくてもサービスが作れる＝エンジニアが不要になるということではないということです。プログラミングはデザインと同じく非常にクリエイティブな作業であり、ツールがあるからといってエンジニアの思考無しには成り立ちません。あくまでコードベースではなくGUIベースで組めるようになる点が革命的ということです。

コードベースでなくなることの何が良いかというと、ビジネスメンバーやデザインメンバーがエンジニアと同じ目線でサービスを作ることができるということでしょう。ビジネスメンバーやデザインメンバーはエンジニアの書いたコードを理解することができませんので、デザイナーが形にしないといけないわけなのですが、デザイナーもエンジニアの実現したいことが100%理解できるかというと、そううまく行くことばかりではないと思います。

つまり、エンジニアが素晴らしいアイデアを持っていたとしても誰にでも理解できる形にする手段が無いため誰にも理解されないまま埋もれてしまっているのです。その点において、GUIで機能と見た目を同時に作れることは非常に有効であると言えるでしょう。従来のプロトタイピングツールは、サービスづくりの「デザイン」の領域についてビジネスチームやエンジニアチームを巻き込んだ開発を可能にしてきました。STUDIOは、それらの特徴に加えて世界で初めてサービスづくりの「プログラミング」の領域についてエンジニア以外のメンバーを巻きもうとしているのかもしれませんね。

特筆すべきはシームレスな操作感

ここまでSTUDIOのコンセプチュアルな部分を紹介してきましたが、ここからはSTUDIOのUI/UXにフォーカスして紹介していきたいと思います。STUDIOを開発するオハコプロダクツ社はUI/UXデザイン会社であるオハコからスピンオフしたということもあって、こちらのプロダクトもインターフェース、特にインタラクションの部分について非常に細部までこだわって使用感が作り込まれています。

まず最初に気付くのは、ブロックを配置しようとしたときの挙動の面白さでしょう。こればかりは文章で説明するのが難しいので、STUDIOの公式サイトの「やってみよう」から体験して頂きたいです。左右上下辺からの距離によって要素の座標と大きさを決定するこのUIはプレスリリースによると特許出願中のようで、これまでのどのツールにも無かった独自の操作感を提供しています。実際に触ってみると非常に直感的かつスピーディに要素の配置をすることが出来ることに驚きます。これからドラッグ＆ドロップで要素を配置する系のツールのデファクトスタンダードUIになりそうな予感がしますね。

β版ではまだLPで紹介されているスマートフォン同期プレビューは実装されていませんでしたが、それでも通常プレビューのシームレスさには驚きます。画像の再読み込みなどが極力走らないように工夫されているのか、一切の途切れなくまさにシームレスにプレビュー状態に移行します。画面遷移を行なっても画像の読み込みはほとんど感じられません。というより通常編集モードですでにプレビューと同等の操作(横スクロールなど)ができるので、プレビューの概念が揺らぎます。

他にも、要素をグリグリ動かすとalignがよしなに調整されてくれたり、画面上で順序を入れ替えるとレイヤー(ツリー)側の順序も入れ替わったり、色んな操作がシームレスに繋がっている感覚が新鮮でした。操作しているというよりもデュエットしているような感覚に陥ります。なんだその恥ずかしい表現。

これだけ色々なことができるツールでありながら、テキストによる説明一切なしで直感的に使えるのはすごいと思いました。ユーザーに学習させてから使わせるのではなく、触りながら学習するというのはUIにおける理想の状態だと思っているので、もっとこういう説明に頼らないUIが増えると良いなぁと思ったのでした。各UIの操作感については、β版を終えて改善が進んだ製品版の方が出た段階で改めてレビューさせていただこうと思ってます。

全員がMVPまで作れる時代

STUDIOがプロトタイピングツールではないことと、誰でも直感的に扱えるツールであることを紹介してきましたが、ではSTUDIOによってアウトプットされるものは一体何なのか？というと、MVP(Minimum Viable Product)であると考えられます。MVPについて改めて説明はしませんが、ここではプロトタイプとMVPとの明確な違いは何かということについて考えてみたいと思います。

MVPもプロトタイプも本開発に入る前のテスト段階でユーザー検証のために用意するもの、という漠然とした認識だと思うのですが、私はこの2つで明確に違う点があると考えています。それは、MVPは「最小限の価値」を確認するための試作品であり、プロトタイプは最終形も含む「状態」を確認するための試作品であるという点です。MVPは最小限という制約があるため、作り込むことに重点を置いていません。一方、プロトタイプは複雑に入り組んだサービスの後期段階でも用いられることから分かるように、最小限にすることに重点を置いていません。両者は包括関係にあるといっても良いでしょう。というより、Prott等のトランジション再現型のプロトタイピングツールもプロトタイプという大きな枠の中のごく一部分(画面遷移)しか試作できないため、厳密にはプロトタイピングツールと呼ぶのは相応しくないのかもしれませんね。MVPにはプロダクトと名がつくくらいなので、基本的な画面遷移に加えて最小限の価値を得られる「機能」が必要であり、機能が入って初めてユーザーは画面から「価値」を体験することができます。『ここで音が出ます』とか書いてあっても、それは本来のユーザー体験ではないですよね？音が出ると決めたらちゃんと音を出すことが、MVPにおいては重要になってくるのです。そして、MVPを作ることはサービスのスタート地点に立つことと同義です。こう考えると、STUDIOは最速でサービス開発のスタートを切らせてくれるツールと言えるかもしれませんね。STUDIOによって、非エンジニアも含めてメンバー全員がMVPまでは爆速で作り上げられる世界が作られることを期待しています。

まとめ

以上、一通りβ版STUDIOを触り倒してみて感じた率直な感想ですが、画面遷移の整合性チェックなどを素早くチェックするのが目的なら私はProttを使うなという印象でした。なんと華麗な手の平返し！やはりプロトタイピングという目的に特化したツールにはそれなりに工夫が詰まっており、使いやすいです。また、ビジュアルデザインについてもSketchの方がやはり出来ることが多く使いやすいと感じます。しかし、これらのツールはUIデザインの特定ステップに限定した場合に使いやすいのが特徴であるため、最終的なMVPの出力まで一気にやるようなケースではSTUDIOで作った方が総合的には早く形になるのだろうなということを強く感じました。STUDIOはまだβ版なのでこれから改善を繰り返していく段階であり、これからの動向が非常に楽しみなツールだと思います。

ところでわざわざこんな長文レビューを書いている理由ですが、古巣のプロダクトということは実は全く関係なく「コードを書かずにサービスが作れる世界」というコンセプトに純粋に惚れ込んでいるためです。私自身が何度かプログラミングに挑戦しようとして言語を覚える段階で挫折を繰り返している身なので、GUIベースのアプリ統合開発環境を切望しているのです。

もしこの記事を読んでSTUDIOにすこしでも興味を持っていただけたのであれば、一度触ってみてください。触ればこのコンセプトとすごさが実感できます！そして、思ったことは良いことも悪いこともバシバシフィードバックしてあげてください！ユーザーとして一緒に作りましょう、コードが必要でなくなる世界を。