MEMOPATCHの読者の皆様はもうご存知かと思いますが、Goodpatchでは現在Prottというプロトタイピングツールを開発しています。どうして今プロトタイピングツールなのか、その裏話はいずれ掲載する予定ですが、今回はMediumにプロダクトデザイナーJames De Angelisがポストしていた、 “2014: Bringing design to life” という、プロトタイプを作り、実際にデザインを動かすことがなぜ大切なのかということについて書かれた記事を翻訳しました。ぜひチェックしてみて下さい！

（以下、2014: Bringing design to lifeの翻訳）

2014年はプロトタイプの年

静止画のPSDファイルの時代は終わりました。もしあなたのデザインが動かなかったり、インタラクティブでないとしたら、それは何のインパクトも与えることが出来ないでしょう。過去1年間、FlintoやFramer.js、Marvel、そしてXcodeのストーリーボードなどの素晴らしいツールが紹介され、これらはかつてないほどにデザインを動かしたり、インタラクションを付けるのを簡単にしてくれました。さらにここで重要なのは、自分の作ったデザインを事前に試せるようになったという点です。フローがどうなっているか、学習はしやすいか、直感的かどうか、全体的な感触はどうかといったことを確かめるためのテストができるようになったのです。これによりデザイナーは開発者やプロジェクトマネージャー、クライアントと働きやすくなりました。なぜなら彼らは実際に触ってデザインを確かめることが出来るからです。デザインについて伝える際に、最も伝わるのが実際に動くソフトウェアだとしたら、その次に伝えやすいのは良くできたプロトタイプにということになるでしょう。

どのツールを使えばいいのだろう？と疑問に思うかもしれませんが、私は全部使えばいいと思っています。Flintoは初期の段階にぴったりで、Photoshopからカンプを書き出し、すぐにアニメーションで流れを作れます。たった数分で何か動くものを作ることができるのは魅力的です。Xcodeのストーリーボードはさらに一歩進んでいて、入力フォームやラベル、インタラクティブなビューを追加することが出来るので、開発者にとっては作業を始めやすいものになりますが、ビューをカットしたり作成したりする必要があるので時間が掛かります。またFramer.jsとQuarts Composerは本物そっくりのインタラクションを作ることが出来ますが、学習コストはかなり高いものになるでしょう。私はそのツールでしか表現できないことに合わせて使い分けています。

もし本格的に学んでみたいと思っているのなら、Meng ToのXcodeでの作業手順についての記事はこのプロセスについての素晴らしい導入となるはずです。

インタラクションデザインの重要性が高まる

皮肉なことに、iOS 7がビジュアルデザインに最も影響を与えたことは、フラットにし強調を抑えたことで、デザインで差を生み出すことを難しくしたことです。目に見えるもの全てをフラットにするというWebのトレンドと相まって、これによりインタラクションとUXにスポットライトが当たることとなりました。デザイナーにとって、インタラクションとUXを生み出すプロトタイプは手放せないものとなり、プロダクトのストーリーを伝えるための強力なツールとなりました。

静止画のデザインツールの価値は下がり続けている

Photoshop、Sketch、Macawは静的なツールです。プロトタイプの時代において、こういった静的なツールに費やす時間はどんどん重要ではなくなっていくでしょう。もちろんいきなりブラウザからは絶対に始めらませんし、こういったツールはコンセプトやデザインのオプションを考える際には素晴らしいですが、ブラウザやデバイスに当てはめるのは、早ければ早い程メリットが大きいはずです。

Web/デバイス時代における現在のデザインツールのトレンドは、全て効率の問題を解決しようとしています。しかし正直に言って、PhotoshopとSketchで十分でしょう。現在のPSDを作成する流れと比べると、それらは現代のデザイナーの抱えている問題の本当に小さな部分を最適化するだけで終わりにしようとしています。実際、これらは全作業の20%程度であり、インタラクションの作り方を学ぶことは非常に重要になるはずです。私たちは効率よく進めるためには、フィードバックをとにかく早くもらわなければならないと学んできました。そうすることによってより良いサイトやWebアプリ、モバイルプロダクトを作ることができるからです。デザインが適切かどうかは、たくさんの想定をテストし、ある程度の確実性を持って判断することが出来ます。それなのになぜベクターデータを5%でも早く書き出せないかと悩んでいるのでしょうか？

素材とその限界を知ったとき、デザイナーとしてのあなたの仕事は最も高い水準に達するでしょう。そしてそれを知る唯一の方法はコードを書き、作って、自分自身でプロトタイプを作ることなのです。

Photoshopの拡張性

Photoshopはまだ死んではいませんが、2013年にはたくさんのその能力を拡張するものが登場し、デジタルやプロダクトに携わる人たちを助けました。UI parade, Macrabbit そしてPiffleは画像の書き出しや選択したオブジェクトのCSS値の取得などといった問題を解決しました。Sketchや他の競合は、この領域で勝つにはPhotoshopの10倍以上の良さが必要ですが、価値が下がっていく中での学習コストを考えると、それをやる価値はあるのでしょうか？

デザイナーはGitを好きになる

最初は少し怖いかもしれませんし、すごく直感的なプロセスではありません。けれどバージョンコントロールから得られるものは大きく、Webやデバイスのために何かを作ったり、デザインを提供したりするときには、クオリティを保証し、デザインを最新のものにしておくのに役立つはずです。

さらにGitを使えば、最終的なプロダクトのフローや通知などをテストしたりと、Photoshopでは出来ないことが出来ます。最近Railsをインストールすることは簡単になっており、Treehouseや、Codeschoolなどのオンラインスクールでだいたいのことはカバーされているので、ここからGitを学ぶことも出来ます。皆さん、2014年はGitに挑戦してみてはいかがですか？

こんなにプロダクトデザイナーになるのに最適な時はない

2013年が見せてくれたものがあるとしたら、デザインはエージェンシーの枠組みから外れて、真剣に取り組まれるようになったことだと思います。これは本当に大きな変化で、過去10年のデジタルデザインの中で起きた最も大きなことでしょう。クライアントワーク以外で素晴らしいデザインをするオプションができ、それはモデルにフィットしない人たちを解放しました。

私たちより先に進んだ人たちは、Designer Fundのような素晴らしい組織やBridgeのようなデザイナーを世に出すためのプログラムを生み出しました。素晴らしいデザインについての話は、AirbnbやPinterest、Rdio、そしてもちろんAppleと言った会社を通して語られてきたので、今更いかにデザインが重要か人々を納得させる必要はないのです。これがデザイナーのコミュニティにとっていかに素晴らしいことか、伝えきれません。

これによりデザイナーは大企業やデザインエージェントの背後でただ黙ってデザインするのではなく、自分たちでビジネスを行うようになってきています。

最後に、シドニーで最近よくこの傾向を感じているのですが、プロダクトにフォーカスしているデザイナーは本当に数えられるくらいしかいません。そのためフリーランスや従業員として採用されるための競争率はとても低く、2014年はプロダクトデザイナーになる絶好のタイミングになるはずです。

以上、2014: Bringing design to lifeの翻訳でした。いかがでしたでしょうか？以前に『これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう』という記事を書いていますが、これからますますプロトタイプを作る重要性が高まっていくのではないかと思います。Goodpatchが春にリリースする予定のプロトタイピングツールPrott、楽しみにしていて下さいね！

Share on

Goodpatch
Goodpatch公式アカウントです。