コミュニケーションとしてのプロトタイプの真価

カンプ2.0になっていないか

プロトタイプを作ることが今日のデザインプロセスにおいて、不可欠になりつつあります。3年前ではなかなか響かなかった話題でしたが、ますます複雑になるアプリ / Web サイトデザインにおいて、いきなり完成品に近いものを作り込むという手法が通用し難くなりつつあります。また、高機能ツールも手軽に使えるようになったことで、とりあえず作って見せるという行為がしやすくなりました。

実機で画面遷移を確認するだけでなく、アニメーションもコードの知識なしで作れるようになった現在。ツールはますますパワフルになっていきますが、プロトタイプツールの目的は実装のための青写真を作るためにあるわけではありません。

ビジュアルデザイン（インタラクションデザインも含）と実装には以前から大きな溝が存在します。デザインカンプと呼ばれる、あたかも完成図のように見える成果物をもとにコーディング（実装）した場合、そこで何かしらの問題が発生します。デザインの際に考慮されていなかったパターンや状態は、どんなに作り込まれていても見つかります。また、運用やパフォーマンスといった制作時には見え難いこともデザインに影響することがあります。

本当のデザインの仕事は実装フェイズで始まる。

— Yasuhisa Hasegawa (@yhassy) February 16, 2016

デザインの次に実装があると思われがちですが、実際のところ実装が始まったところで本格的なデザインの仕事が始まるといっても過言ではありません。グラフィックツールでデザインしているときに見えなかった課題をひとつひとつ解決していく必要があります。システムを導入したとき、又は実機で操作したときといった、完成に近い状態にならないと見えてこない課題が少なくないからです。

プロトタイプは、こうした実装とデザインをどのように実現していくかを考える際につかえる強力なツールです。実装へ『受け渡す』『指示する』ためだけにプロトタイプツールを活用しているとしたら、ツールが違うだけでデザインカンプと変わりありません。デザイナーが考える理想郷を作ってもらうのではなく、実装できる現実的な解を示す必要があります。

利用者がある特定の操作をすることによって表示される画面が設計されていないといったことが、実機で操作をし始めてようやく発見されることがあります。そのときに解決案をいちはやく共有する際にプロトタイプツールが役に立ちます。

現実に近い模索を

先ほど「解決案」と書きましたが、結局のところデザイナーの一存で実装できるかどうか決めることができませんし、本当に目的が達成しているかどうかは実装してみないと分からないことがあります。そのとき、いち早くアイデアを提案できる術が増えてきたわけですが、昨年は大きな動きがありました。

昨年は Pixate、Flinto for Mac、Principle のように、Web ではなくネイティブでプロトタイプが作れるツールが幾つか登場しました。これは iOS や Android 向けにアプリデザインをする方にとっては非常に大きな変化です。Web でも様々な表現ができるようになりましたが、ネイティブアプリと同じような操作感を再現するのは困難です。

あらかじめビューワーアプリをインストールしてもらう必要がありますが、書き出したプロトタイプをメールやチャットで送り、それをワンタップするだけで実際に操作してもらうことができます。
他のアプリも似たような機能があります。

例えばネイティブで動作するプロトタイプツールでアニメーションを作れば、再現するために実装時に近いコードを使用しているはずなので、より現実に近い提案になります（iOS 向けアプリのプロトタイプを作る際に Keynote を勧めているのも似たような理由です）。Web サイトが HTML で実装することによって始めて現実味が帯びてくるように、アプリもネイティブコードによる表現によって始めて現実に近づいていきます。プロトタイプツールがネイティブアプリになってきているのも、より本物に近い提案をデザイナー自らできるようになるために必要だということの表れでしょう。

コードが書けることが必須になるので敷居が上がりますが Framer の評価が高いのも、表現がコード化されているので、実装に近くなるからかもしれません。デザインと実装の溝を埋めことをツールだけで解決することはできませんが、実装の手助けになるデザインツールが増えてきているのは確かです。

印刷向けのデザインに比べて、デジタルプロダクトのデザインプロセスは未だに混沌としています。だからこそ、デザインを手放すのではなく、実装時に一緒に模索できる作り方が必要なのでしょう。

まとめ

スワイプやフォースタッチといったジェスチャーによる操作は、使いやすさや機能の話だけでなく、アプリのアイデンティティに関わります。視覚的に表現できないところを、デザイナーが関与できることは完成品に大きな影響を与えます。そうした部分をテキストによる説明ではなく、実際に動かせるかたちで伝えることができれば、実装の進め方が大きく変わります。

デザイナー自ら XCode や Android Studio を使いこなして様々な表現を実装できるのであれば、それで良いのかもしれません。しかし、必要なことは幅広くたくさんのスキルを習得することではなく、一緒に作る開発者と的確なコミュニケーションができることです。デザイナーが実装に近い提案ができることで、コミュニケーションの質が大きく変わります。