現場で必要なデザインツールの見つけ方

ツールは表現から連携の時代へ

制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。

デザインプロセスの理想と現実

  • 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝
  • 要件を伝え、画面設計に落とし込むときの溝
  • 画面設計から適切だと考えられるビジュアル言語を作るときの溝
  • ビジュアルデザインから人々が見て、触れるような状態にするための溝

デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。

Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。前者はデザイナーの表現力を高めるツールで、今まで手作業でやっていたことを自動化してくれたり、表現が難しかったことを形にすることができます。

こうしたツールはデザイナーがビジュアルデザインだけを任されている環境、他の専門家の力を借りなくても完成品を作り上げることができる環境であれば機能します。紙媒体のデザインは、印刷という専門知識が必要になるもののデザインツールのなかで完結しますし、よほど特殊なことをしない限り、エンジニアの力を借りなければ印刷ができないということもありません。

Web サイトやアプリデザインは、デザインツールの中で完結することはありませんし、エンジニアをはじめ様々な専門家の力が必要になります。いくらデザインツールで作り込んだとしても、コードに落とし込むまで『ある特定の状態で見た理想像』を描いているに過ぎません。表現力が高くても、以下をデザインすることができないわけです。

  • スクリーンサイズを変えたらどうなるか
  • コンテンツの量が見た目にどう影響するか
  • マウスオーバーや、タップなどのインタラクションの動き
  • エラーや情報がゼロのときにどう見せるか
  • 一貫性を保つためのルールをどうしていくか

これらが従来のデザインツールでデザインできないので、「良い感じで宜しくお願いします」というあやふやな指示になったり、説明資料を作るといった『溝埋め作業』が発生することもあると思います。実装してから分かるということも少なくないので、いつまでもデザインツール上で作り込んでもいるのも非効率です。

ひとりでデザインできる成果物と異なり、web サイトやアプリは誰かの力を借りなければ形にすることもできないという点が大きく違います。近年、様々なデザインツールが出てきていますが、これらが解決しようとしているのは表現力の向上ではなく他の人たちとの連携です。制作プロセスにある溝を小さくしたり、埋めるための作業を少なくするためにあります。

表現力を高めると連携力を高めるツールデザインツールとひとことで言っても、大きく分けて二種類あります。

昔からデザインは周りを巻き込んで進めていきましょういう論調がありますが、それがデザインツールにまで来ているといっても良いかもしれません。

あなたの現場にある深刻な溝は?

誰とどのように連携すると制作プロセスが円滑になるかは、現場によって違います。先述したようなエンジニアとの連携が難しいところもあれば、彼らと気軽に話し合える距離感で働いているから問題ないというところもあります。連携力を高めるためのデザインツールがたくさん出て来ているのも、現場によって解決しなければならない連携が異なるからでしょう。

以前 XD vs Sketch みたいな比較は意味がないと書きましたが、それぞれ解決したい制作プロセスの課題が違うのも理由のひとつです。Adobe XD だと、本格的なデザインに入る前に画面遷移(情報・操作の流れ)をいちはやく共有するのに長けたツール。設計とデザインにある溝を埋めるのが得意です(2017年11月現在)。一方 Sketch は XD のような手軽さはないものの、エンジニアと連携するための手段が豊富に揃っているので、環境に合わせてカスタマイズして溝を埋めることが可能です。

プロセスの溝をツールによって解決するか。それともコミュニケーション?

Web サイトやアプリのデザインであれば、連携力を高めるための施策が必要だと考えていますが、それが必ずしも最適解ではない現場もあるはずです。そもそもデザイナーに課せられている役割が「お客様の意図を汲み取って素晴らしい表現を作る」ことであれば、連携力を高めようとしているデザインツールはミスマッチです。

近い将来、すべての溝を解消してくれるデザインツールが出るだろうと期待してしまいますが、実現は難しいかもしれません。現場によって制作プロセスが違うので、それらをすべて受け止めてくれる巨大なツールはかえって使い方を制限してしまいますし、ツールとしてのパフォーマンスも落ちる可能性があります。今のように次々とデザインツールが登場することはなく、3, 4 ツールに集約する可能性は十分にありますけど(InVision Studio もその選択肢に入ってきそう)。

まとめ

Web サイトやアプリのようなデジタルプロダクトは静止画でデザインの説明をするのが難しいですし、デザインの運用まで考慮し始めると、理想的な見た目だけ考えれば良いわけにはいかなくなります。ある特定の状態の見た目だけ作るのであれば、表現力が高いデザインツールが適していますが、意思疎通をしながら作り上げることが重要であるならば、連携力が高いツールを選んだほうが良い場合があります。

ツールを変えるのは簡単なことではありませんが、自分にとって楽だからと理由だけで使い続けていると、周りに大きな負荷をかけてしまいます。それが制作プロセスにおける溝のもっともな原因かもしれません。機能表で比べるだけでなく、現場で抱えている課題は何かを見極めた上でツールを選ぶと、周りとの関わり方が変わると思います。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。