2人のプロフェッショナルが語り合う(2)
高橋忍(Microsoft)×轟啓介(Adobe)対談――進化するアプリ開発現場でデベロッパーとデザイナーの関係はどうあるべきか?
・2人のプロフェッショナルが語り合う(1)――導入編
・2人のプロフェッショナルが語り合う(2)――解決編
・2人のプロフェッショナルが語り合う(3)――理想編
解決編――課題の鍵は最新ツール活用とコミュニケーション
―― スマホアプリ開発やリッチなUIがエンタープライズ向けアプリでも無視できなくなり、デザイナーが介在する余地の拡大とともに、増大する作業量や開発手法などの問題が出てきていることが分かりました。こうしたツールの活用や、デベロッパーとデザイナーのコミュニケーションについて、どのように課題を解決していけばいいでしょうか?
デベロッパーとデザイナーの相互理解が必要
高橋 まずはデベロッパーにそういう(面倒な作業を簡略化する)ツールの便利さを理解してほしいです。アプリがどんどんリッチになって、アイコン作成のように、たとえシンプルであっても最低限のことはやらなければいけない。だからPhotoshopの基本的な使い方など、デザイナーの作業についても最低限は知っておくといいですね。
轟 PSD(Photoshop)やAI(Illustrator)のファイル形式で、UIセットのファイルが数多く公開されています。ボタン集とかフォーム集とか、結構いろいろな素材が入手できます。でも、いざPSDのファイルをダウンロードしてきて、運よくPhotoshopを持っていたとしても、次に何をしていいかが分からないといったこともありそうですね。
PSDファイルのスクリーンショット:
UI Kit Dark(by Creativedash Design Studio)
AIファイルのスクリーンショット:
UI Icon Set of 64(by Creativedash Design Studio)
高橋 個人的にも同僚から「このAIファイルをPNGに変換してくれない?」などと頼まれることがあります。これって(PhotoshopやIllustratorの)環境がないと、そのファイルに真っ白いアイコンが表示されるだけなので、中身が何なのか分からない。最低限使えるだけでも違うと思いますし、作業の効率が上がるはずです。
でも、こうしたことが実際にうまくできている会社はどれくらいあるでしょうか。その状態でデベロッパーとデザイナーが同じプロジェクトで顔を合わせたとき、果たしてうまくいくのか疑問に思います。
轟 そうしたケースでは、デザイナーも単純に納品形態の段階から悩みますね。PSDファイルのままで渡していいのかとか。全部(要素ごとに)切り出していったら切りがないですし。
高橋 納品形態も全部の画面要素を作るとして、それをどこまで用意すればいいのかというのもあるじゃないですか。逆にデベロッパーはどれをどこまで発注するかとか、どういう形で発注するかも含め、UIの丸投げが一番いいのかもしれません。機能要件を出しておいて、UI設計の部分からデザインの視点を入れていくやり方です。
轟 デザイナーとしては、どの画面からどのトリガーが発生するなどが示されていればいいですね。
高橋 ただ、こちらのアプリケーションのプラットフォームでの画像の当て方とか、ツールの仕様上ボタンは単独デザインなのか、あるいはまとまったリソースなのか、背景の形式とか、それによって納品の仕方が変わってきます。
しかもWindowsでもMacでもiOSでもAndroidでも環境によって違うので、どうやってデザインされるのかを伝えなければいけません。場合によっては画像ではなく、色のリソースをRGBコードで指定するだけでよかったりもしますが。お互いが認識して情報を共有していないと効率化できません。
轟 それだと互いの領域の作業について理解していないと、まったく会話が成立しないですね。コミュニケーションを対等に取ろうにも、大抵はデベロッパーのほうが力関係が強いため、難しい面もありそうです。発注元との力関係によってはデザイナー側から「明らかにおかしい、使いにくいと思うんだけど」ということがうまく伝えられず、逆にデベロッパー側は「言った通りにやってくれない」と不満を感じたりするかもしれません。
だからデベロッパー側が(PhotoshopやIllustratorといった)ツールの基本だけでも理解していれば、少なくとも会話が成立して、どのくらい工数がかかるかという話もしやすくなるでしょうね。せめてプロジェクトに1人、どちらも分かる人がいると、円滑にコミュニケーションが進むのではないでしょうか。
また、もう少し前の段階に戻ってプロトタイピングをするときに、そこでツールを実際に使って仕様の無理なところを早めの段階で洗い出すことができると思います。
高橋 Photoshopも昔は職人さんがレイヤーを細かく作っていたものが、今ではボタン1つでできたり、ツールの機能でかなり補完されています。それを知って使うだけでも違うでしょうね。デベロッパー側の開発環境も同様で、今ではツールが進化して、UIまわりも簡単なパターン定義でテーマを作れたり、それだけでステップアップできます。その作業が楽しくなり、少しでもいいものを作ろうというモチベーションが出てくる、そういう流れができるといいですね。
デベロッパーとデザイナーを近づけるVisual Studioの「Blend」
高橋 デベロッパーとデザイナーを近づけるような開発環境としては、例えば、今Visual Studioに「Blend」というUIデザイン専門のツールがあります。もともとはFlashのデザイナー向けに作ったもので、そこにデザイン関係の人が入ってきて使ってもらえるといいですね。
参考)Visual Studio で簡単アプリ開発(2つ目のキャラボタンを作ってみる)
デベロッパーもいきなりデザイナーとの交流でPhotoshopのような共通言語を学んでいくのは少しハードルが高いと思うのであれば、慣れているVisual StudioからBlendを使い、デザインに触れるだけで、コミュニケーションが少ししやすくなると思います。
Blendは簡単なプロトタイピング用の機能を持っています。だからベストだと思われるのは、デザインをやられる方がプロジェクトの早い段階にBlendでプロトタイピングをして、コミュニケーションをとっていくのがいいのかなと。Adobe Creative Cloud(CC)にしろ、Visual Studioにしろ、基本になる機能はやっぱり押さえておいてほしいです。
Visual Studioに付属UIデザインツールのBlendのインターフェース
轟 デザイナーがVisual Studioを立ち上げているイメージはあまり沸かないですが(笑)、デベロッパーがそうしたツールからデザインに関わって、そこからAdobe CCに触れると世界が広がるかもしれません。
高橋 デザイナーがVisual Studioを扱えなくても、開発の仕事があったらBlendをちょっと触ってみて、「コードは書かなくてもいいから、これでUIデザインだけやってほしい」とか、そうした柔軟な使い方をしていただければと思います。
Blendのいいところは、PSDとAIのファイルがそのままインポートできることです。PhotoshopでもIllustratorでも、パーツをそれぞれレイヤーで分けておいたものを、納品のために分解せずにそのままインポートで別パーツとして認識されます。
そしてVisual Studioのデザインがもともとベクター(ベクトル データ)に対応しているので、Illustratorのデータをベクターのままで取り込んでラスター(データ)変換せずに作業できます。もちろんIllustratorのグラデーションなどの情報は、ツール自体が持つ機能に合わせて複数のオブジェクトに分解されたりしますが、画面に合わせて拡大/縮小してもデータが壊れないので安心です。
轟 SVG(Scalable Vector Graphics)ですかね?
高橋 そうですね。SVGに少し機能が加わった感じです。既に最新のWindowsアプリの中ではUIがベクター中心になっています。ユーザーの環境が100dpiがある一方で、4KやRetinaディスプレイのような300dpiの環境がある。それら全ての環境への対応を考えたら、品質を保ちながら拡大/縮小だけ対応できるベクターのデータが一番効率がいいです。
これは主観ですが、ファイルやデータを移動する度にクオリティが落ちるのが許せないんです。要はファイルを経由してアプリに入る手間がある度に、せっかくきれいにデザインしてもらったデータがラスターになったり、アプリに組み込んだときにどこかが欠けていたりとか、いつの間にかデザインが劣化してしまっていることがあります。
最近はそういうことは少ないと思いますが、デザインにこだわってコストをかけるなら100%のクオリティを最後まで維持し続けたいですね。そうした点でも、アプリの完成度を高めるために、デベロッパーがデザインに対してより歩み寄る必要はあります。