デザインツールを振り返って気付いた今後のデザイナーの役割

広がるデザインツールの役割

2016年はデザインツールのあり方が大きく変わった年でした。スマートフォンが主流になってから、平面な画面をひとつひとつ設計するのではなく、利用者の遷移や UI フィードバックを塾考するようになりました。多彩なデザインツールが出てきているのは、デザイナーの作り方だけでなく、役割も少し変わってきているからでしょう。ひとりの職人が閉じ籠って完成品に近いものを作るのではなく、デザインプロセスを共有しながら少しずつ作るというやり方に変わりつつあります。デザインのブラックボックス化を避けるための手段は今も増え続けています。

従来のデザインツールは、ひとりのデザイナーがデザインに集中するための道具であって、途中経過を共有したり、協力して作ることを得意としていませんでした。現在のデザインツールは複数のデザイナーがひとつのプロジェクトに取り組めるような仕組みが用意されていたり、デザイナー以外がデザインプロセスに参加しやすい機能があらかじめ実装されています。 Sketch にしても、ひとりでジックリ作り込むには物足りないところがあるものの、協働しながら作る場合は強力なツールになります。数多くあるプラグインと、連携できるサービスを使えば、開発者とのやりとりがスムーズになったり、ツールを持っていない人とデザインの方向性を吟味することができます。

デザインツールは、デザイナーが考えるイメージを形にできるものであるべきですが、それだけがデザインツールを選ぶ基準ではなくなってきています。特に Web サイトやアプリに言えることですが、デザイナーがデザインを『納品』して終わりということはまずありません。実装しなければ分からないことも多いので、デザインはリリース前まで続くことがあります。また、デザインの運用も考えなければならないことから、『作って終わり』という仕事も少なくなっていきます。

デザインツールに求められている「作る」以外の役割は何でしょうか。

1. コードへの転換のしやすさ

作ったデザインを開発者が『解読』していては時間がかかってしまいますし、デザイナーの意図が読めない場合があります。デザインをコードに書き換える際の敷居が低ければ低いほど連携がしやすくなります。例えば Zeplin のように作ったデザインの寸法や色を簡単に共有する方法がありますが、Origami Studio、Avocode、Neonto のように作ったデザインをそのままコードに書き出せるツールも出てきています。

作ったものをコードに書き出せるという点では Facebook が公開した Keyframes は強力なツールでした。これは、Adobe の After Effects で作ったアニメーションを座標が入った JSON ファイル付きでアセットを書き出してくれるというもの。細かなニュアンスを伝えるのが難しいアニメーションですが、Keyframes はその課題を解決してくれる可能性があります。

残念ながら、書き出されたアセットはパフォーマンスが良いとは言えず、バッテリーの消費も多そうだったので実装は断念しています（Facebook アプリはバッテリーの消費が酷いことで有名ですが、こういうところも関係しているのかも）。しかし、デザインとコードの間にある溝は徐々になくなりつつあります。

2. テストのしやすさ

プロトタイプツールでは必須とも言える共有機能。作ったデザインを早くから検証するためには欠かせませんが、テストのフィードバックを得るのが難しい場合があります。ツールのほうであらかじめ実装されているコメント機能だけでは、具体的にどのような課題があったのかを把握するには難しいですし、被験者の文脈を汲み取れないことがあります。秘密 URL を発行して、そこからプロトタイプを見てもらうだけではテストをするには十分ではありません。

例えば Proto.io では、UserTesting や Validately といったユーザー調査をするためのサービスと連携がとれるので、作ったプロトタイプを Proto.io で作っても、データは別ツールで収集・検証ができるようになります。テストをしながら作るというワークフローが実践しやすく、別々で管理したりデータを更新するといった手間を省いてくれます。

まだ、プライベートβですが、Google が 10 月にリリースした Galleryも、デザインを共有したりフィードバックを集めるのに使えそうなツールです。

3. アセットの同期のしやすさ

作ったデザインを他の場所で使うというケースが増えてきています。プロトタイプツールはもちろん、チームメンバーと同じものを使ってデザインする場面も増えてきました。様々な場でデザインが使われるようになるということは、それだけ管理が難しくなります。手作業でデザインを更新していては時間はいくらあっても足りません。

Atomic は Sketch のアートボードをレイヤーの状態を残したまま取り込むことができます。同期ができていることから、Sketch で何度もデザインを微調整したあとに、Atomic で作った画面遷移をやり直すといった手間を省くことができます。

ダミー文字や画像を埋め込むことができるのが売りだった inVision の Craft ですが、今はデザインアセットの共有ができる便利なツールになっています。カラーパレットやボタンなど様々な部品を Dropbox や Google Drive などで共有することができます。同じように Craft を使っているデザイナーであれば、いつでも最新のアセットが使えるようになります。

どこまでオープンにする？

ツールを通して、デザインプロセスが徐々に開かれた状態になってきていますが、どこまでオープンにすれば良いのでしょう。Figma のように、デザインを複数人が同時に作業するといったツールも出てきています。Figma はデザインツールでひとりで作業をするという従来の考え方とは真逆の存在です。このようにリアルタイムで複数人とデザインするというのは、今のところ受け入れ難いですが、将来はそういう場面も出てくるかもしれません。

同時に作業ができる機能が目立つ Figma ですが、再利用可能なコンポーネントが作れたり、スクリーンサイズに縛られない可変要素を作るといった今のデザインに必要な機能も揃っています（参考記事）。より早く、より簡単にデザインを共有できるのは魅力です。

現状のワークフローのなかでデザインプロセスを見せる手段も出てきていて、Wake はそのひとつです。ショートカットで作業中のデザインのスナップショットを共有できるサービスで、デザインツールに縛られることなく利用することができます。書き出して、アップロードするといった手間がないので、途中段階を見せる敷居が低くなっています。Droplr も似たようなサービスですが、画面の録画や、ノートを加えたい場合に便利です。

まとめ

近年のデザインツールを見ていると、デザインが個人技からチームプレーになってきているのが分かります。これは今まで以上にコミュニーケーションを要することを意味しますし、ちょっとした調整や模索を早く作って会話を続けるといったスキルが欠かせなくなります。作るための機能が充実しているだけではツールを選ぶことができなくなっているのも、ひとり閉じ籠って作るわけではないからでしょう。

ツールだけでなく、iPad Pro のようなハードウェアが出てきたことで、すべてパソコンでデザインする必要がなくなってきました。ずっとパソコンを使っていた身からすると違和感を感じるかもしれませんし「やっぱりパソコンじゃなきゃ …」と思うかもしれません。しかし、今はスマートフォンで長文を書けますし、写真・動画の編集もできるわけです。デザインにしてもパソコン必須と考えるのは古くなるかもしれません。

「絶対コレでなければデザインできない」という状態になると、チームプレーとしてのデザインがますます難しくなります。結局、自分の手に馴染む長年使っているツールに戻るとしても、大きく変わり始めている数々のデザインツールを回遊して試してみると、今後の作り方を考えるのに役に立つはずです。