プロトタイプに発生する溝と対処法

完成品になれない溝をどう埋める

あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。

例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」という部分を踏まえてデザインを見ることができますが、誰でもできることではありません。

見た目は完成品のように見えるデザインカンプも、実は完成品から離れた存在であることは少なくありません。完成品に見えてしまうことによる誤解やリスクのほうが高まる場合があります。

これは Web サイトだけでなくアプリデザインにも同様のことがいえます。スクリーンに直接触れて操作することから、静止画で判断がつかないところがたくさんあります。スマートデバイスの関わり方はパソコン時代に比べて多種多様なので、誰でも分かる操作方法は多くありません。そこで、静止画ではなく操作ができるプロトタイプを作ることが必須になってきたわけですが、ここでも Web サイトデザインと同じ落とし穴があります。

最近は画像を使った紙芝居タイプではなく、ネイティブアプリとして動作するプロトタイプも出てきています。また、ダミー文字ではなく、リアルなデータをプロトタイプに取り込むことができるようになってきています。

• Craft: Sketch や Photoshop から、直接簡易データを取り込むことが可能
• Sketch Data Populator: JSON ファイルを読み込む
• Parse: Framer にサーバーサイドのデータを表示させる

このように、今まで以上に完成品に近いプロトタイプが作れるようになったものの、どこまでいっても完成品にはなれない『溝』があります。この溝が一体何であるかを理解・共有していないと Web サイトの静止画を作っているときと同じような誤解は発生します。

フィードバックをコントロールする

近年、完成品に近いものを早く作れるようになってきたものの、早く作ればそれで良いというわけではありません。静止画であったとしても、フィードバックの目的を明確にすることで、成果物と完成品の間にある『溝』を埋めることができます。

クライアントや同僚にデザインを見せるときに絶対してはいけないことは「これはどうですか？」というあやふやな依頼を投げないことです。プロトタイプツールには必ずといって良いほど共有機能がありますが、そこで生成される共有 URL を添えて「フィードバックお願いします」とメールかチャットを送るだけだと、求めているフィードバックを得ることは難しいでしょう。

目的があやふやだと、見る側の反応は「この色は違う」「使いにくい」といった個人的な好みに近い感想になりがちです。プロトタイプにしても、デザインカンプのような静止画にしても、何のために作られ、どのようなフィードバックを求めているのかを明確にする必要があります。「デザイン」と大まかに考えず「ブランドに合っているか」「画面遷移は辻褄が合うか」「利用者の目的を達成させるための設計がされているか」など、デザインの何を解決しようとしているのか掘り下げた質問にするべきでしょう。

InVision では、画面にデザイナー・開発者側からの注意書きや使用時に表示させる『ツアー』を追加することができます。

得たいフィードバックについて考えることは、プロトタイプをどれくらい作り込めば良いのかの判断材料になります。もし会員登録の画面遷移のアイデアが技術的に可能かを検討したいのであれば、会員登録の画面遷移以外は作る必要はありませんし、技術的に可能かを検討したい UI だけに絞ることもできるでしょう。動きが課題であれば、見た目に拘らなくても完成品に近い動きが作れるツールを選ぶこともできます。

フィードバックと作る時間がほぼ同時に起こることも最近は増えてきてきました。「こうしたらどうだろう」「これってタップ数が増えて遠くなっているよね」といった会話の中に、5〜10 分くらいで作ったアイデアを投げて方向性を定めることがあります。チャットのようなリアルタイムで共有できる環境であれば、「これってちょっと違うよね」といったあやふやな回答にも、幾つかのアイデアを投げて確認するといったことも難しくありません。

コミュニケーションだけでなく、制作も Web ブラウザ上で実現しようとする Figma。

デザインフィードバックをリアルタイムにすることで、全体工程を早くすることができます。そういう意味では Figma のようなツールが今後どう使われるのか楽しみだったりします。ステークホルダーを含めたプロジェクトメンバー全員が参加することが条件になりますが、早く見せてデザインプロセスをオープンにしていくことで、フィードバックがコントロールしやすくなるでしょう。

まとめ

多くの時間をかけなくても、あたかも完成品に見えるものを早く作れるようになった現在。リアルデータの導入や、複雑な画面遷移が手軽に表現できるようになったことで、プロトタイプの精度はますます高いものになりました。しかし、完成品に近いものが作れるからといって、ツールに頼りきったコミュニケーションでは的確なフィードバックを得ることができません。完成品ではない以上、溝は発生しますし、その溝を埋めるための働きかけが必要になります。

ツールで様々なものが作れるようになったとはいえ、成果物がコミュニケーションの代役をしてくれるわけではありません。プロトタイプやデザインカンプはコミュニケーションを増幅させるためにあって、単体で存在することはないわけです。何のために作るのか、何を伝えなければならなのかを考えることで、そのとき作るべきものの『さじ加減』が分かるようになります。