これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！
まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。
そもそもUIとは何か
UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中でUIは人間のインプットの手助けをし、わかりやすい形でコンピュータのアウトプットを伝えるという役割を担っている。そう考えていくと、もちろんカラースキームやGUI(Graphic User Interface)が良いことはもちろんだけど、それ以外にも考えていくべきことがある、ということがわかるのではないでしょうか。先日話題になったFacebookのデザイン案なんかが良い例ですね。
確かに見た目はかっこいい。けれどこれが実際使いやすいか？と考えてよくよく見ていくと、必ずしも使いやすいわけではないと思います。ただ見た目の良いデザインを作れば良いUIが出来るわけではありません。UIは人間とコンピュータの関係性を考えて設計していくものなのです。
今までデザインカンプが有効だった理由
photo credit: raneko via photopin cc
以前は人間とコンピュータの関係は変わらず、利用者環境もある程度想定しやすかったけれど、スマートフォンやタブレットの登場によりその状況は大きく変わります。昔は誰もがパソコンの前に座り、ある程度大きなスクリーンからWebサイトを見ているという前提がありました。そのような時代であれば、スクリーンショットを見れば誰でもだいたいの出来上がりが予想できたのです。
しかし今はどうでしょうか。ユーザーは立ったまま、または歩きながら、時には走りながら閲覧しているかもしれない。クリックだけではなく、スワイプやピンチなどと言ったジェスチャーもある。さらにそのデバイスのサイズもタブレットやスマートフォンでそれぞれ異なり、最近では27インチのタブレットも出るなど、その種類はどんどん多様化し、それによってユーザーの振る舞いも異なります。ただもらった情報の配置を考えればよい、というわけではなく、小さなスクリーンに表示するために、何を削りどれを残すかまで検討していかなければならないのです。カンプでは良さそうに見えたのに、実際に出来上がったものを見てみたらイメージしている動きと違った、最新型の違うサイズのデバイスで試してみたら見え方がおかしい、ということも起こりえるでしょう。さらにGoogle Glassのようにこれまでとは全く異なったデバイスが出てきています。このような時代に今まで通りカンプを作るやり方では、とても追いついていけないのではないでしょうか。
未来を踏まえ拡張性のあるUIを作る
カンプの問題としては、まず見ることは出来ても触れることはできないという点です。インタラクションを静止画で伝えるのは難しい。さらにスクリーン上でタイポグラフィやレイアウト、導線などデザインの全ての問題を解決しようとしているのも問題です。デザイナーも大変だし、クライアントもそれだけたくさんの情報を一気に見せられたら大変。そうやって一気に見せると、デザイン提案とは関係ないところ、例えば「ロゴが小さい」とか言われるわけですよね。そこで提案したいのがプロトタイプを作ること。その方法をツールと共に紹介しましょう。
ペーパープロトタイプ
photo credit: lucamascaro via photopin cc
名前の通り、紙に描いてプロトタイプを作ります。ペーパープロトタイプのメリットとしては、
・その場でのアイディアの共有が出来る
・誰でも参加できる
・作ってすぐに評価できる
・専門知識が必要ない
・コストがかからない
などでしょうか。紙であればクライアントとの打ち合わせ中に描いてすぐにアイディアを共有することができます。打ち合わせ後にPhotoshopでデザインしたものをメールで送って評価してもらうよりも、いちはやくクライアントの反応を見ることができます。また絵が下手という人でも、丸や四角くらいは描けますから、誰でもそのプロセスに参加し、意見を言うことができますよね。デザインはデザイナーのだけのものではないし、良いものには人によって違います。なるべく多くの人に共感してもらえるものを作るためには、誰でも意見を言えるオープンなデザインプロセスにしていくべきです。
ただ紙と鉛筆を使って描いていっても構いませんが、UI StencilsやマグネットシートにUIパーツを印刷して配置してもいいでしょう。こういうのは探せばいくらでも出てきますから、上手に使ってみてください。
もちろんペーパープロトタイプにはデメリットもあります。
・インタラクションが分かり辛い
・その場にいないと共有できない
・ビジュアルの影響を評価できない
やはり紙ですから、動きを伝えるのには向いていませんね。他にも例えば、紙に描いたものだと分かりにくい印象を受けるボタンでも、目立つ色を付ければ実際にはわかりやすいということもありますが、そういった要素はペーパープロトタイプでは伝えられません。
HTMLプロトタイプ
photo credit: Jamais Cascio via photopin cc
実機で動かせるものを作ってみる。これは正直やらない理由がありません。成果物と同じ環境を再現することが出来るので、デバイスごとの見え方を予測することができます。 さらにサインアップなどの利用フローの検証にぴったりですね。今ではjQuery Mobileなど、プロトタイプを作るのに便利なツールがたくさん揃っていますから、実際にデバイスで動かせるものを作って検証していけばいいわけです。ただ誤解しないで欲しいのは、1個プロトタイプを作って完成というわけではありません。僕の場合だと5、6個くらいは違う種類のプロトタイプを作っていますね。
使えるツールを紹介すると、例えば
・Bootstarp
・Foundation
・jQuery Mobile
・Junior
・Hammer
・Mixture
などが考えられます。
こういったツールを使ってデザイナーがマークアップをしなければいけないのか、と疑問に思うかもしれませんが、そうではない。ではHTMLプロトタイプを作っている間にデザイナーがするべきことは何なのか。それは雰囲気をデザインすること。レイアウト以外のデザイン、色やタイポグラフィ、写真や動画について考えていくのです。
プロトタイピングツール -Prott
現在は、プロトタイプを簡単に作成するための、プロトタイピングツールやアプリが多く出ています。これらのツールでは、ペーパープロトタイプを画像として取り込み、画像の特定の箇所と他の画面をリンクさせることができます。つまり、コードを書かなくても、画面遷移を確認することができます。Prottは、Goodpatchが開発したプロトタイピングツールです。Mac・Windows対応のデスクトップ版アプリと、iOSアプリがあります。
Prottの特徴としては、
・プロジェクトを作成し、チームでコミュニケーションをとりながらプロトタイプ作成を進めることができる。
・ピンチやスワイプ、ダブルタップなどの指の動きを指定でき、また、スライドやフェードアウトなど、ページの動きについても指定できる。
・リンクを共有して、簡単に外部からプロトタイプを確認することができる。
ということが挙げられます。プロトタイプをワークフローに取り入れるという文化を、率先して築いていくために開発したので、是非取り入れてもらえればと思います。
それぞれ出来ることや学習コストは異なってくるので、目的や、プロジェクトの段階に応じてうまく使い分けることができたら良いですね。
（前編ここまで）
いかがでしたでしょうか？今回はデザインカンプをやめてプロトタイプを作るべき理由、そしてそのやり方についてでした。次回はデザイナーが次にすべき雰囲気をデザインすることについての詳しい内容や、具体的なフローの部分についての記事になります。お楽しみに！