高橋忍（Microsoft）×轟啓介（Adobe）対談――進化するアプリ開発現場でデベロッパーとデザイナーの関係はどうあるべきか？：2人のプロフェッショナルが語り合う

スマホやタブレットの普及により、業務アプリ開発の環境も変わりつつあるが、それに対応できる体制は整っているだろうか。この対談では日本マイクロソフトの高橋忍氏、アドビシステムズの轟啓介氏が、デベロッパーとデザイナー、それぞれの視点から、今後のアプリ開発における問題と解決策、そして理想について語り合う。

[鈴木淳也（取材協力：BBソフトサービス），PR／ITmedia]

PR

多様化が進むアプリ開発現場に対応するため

　日々変化するアプリ開発の現場。最近ではWeb技術の活用にとどまらず、RIA（Rich Internet Application）と呼ばれるリッチなユーザーインタフェース（UI）やユーザー体験（UX）を備えた業務アプリに加え、iOSやAndroidを搭載したスマートデバイスの急速な普及により、それらに向けたアプリ開発も求められるなど、多様化が進んでいる。

　そのため、従来のアプリ開発スタイルにのっとるだけでなく、これら新しいユースケースに対応できる「魅力的」なアプリの開発や、それを実現する外部とのコラボレーション、特にデザイナーとの連携が重要になってくる。そして増え続ける作業量の削減や連携強化のため、ツールの活用も必須だ。

　今回は日本マイクロソフトから高橋忍氏、アドビシステムズから轟啓介氏の2人のプロフェッショナルにお越しいただき、今エンタープライズ分野のアプリ開発で問題になっていることと、それをどのように解決していくのか、また理想的な開発環境とはどのようなものなのか、開発者に求められるスキルやノウハウについて話をうかがった。

日本マイクロソフト デベロッパーエクスペリエンス＆エバンジェリズム統括本部 クライアントテクノロジー推進部 エバンジェリストの高橋忍氏（左）。アドビシステムズ マーケティング本部 クリエイティブソリューション第2部 ディベロッパーマーケティングスペシャリストの轟啓介氏（右）

導入編――まだまだ遠いデベロッパーとデザイナーの距離

――　昨今はエンタープライズ向けの業務アプリに新しい要素が入ってきて、さらにアプリのデザインについてデザイナーが関わることが増えてきました。こうした中で、どういう問題が起きているのでしょうか？

スマホやタブレットの普及でUIに対する評価は変わっているが……

高橋忍氏（日本マイクロソフト デベロッパーエクスペリエンス＆エバンジェリズム統括本部 クライアントテクノロジー推進部 エバンジェリスト）

高橋　多くのアプリ開発では、デザインのコストがほとんど予算に入っていません。しかし、今のようにスマホやタブレットが普及してくると、UIがちゃんとしていないアプリは評価されなくなってきました。その意味でデザインの業界も変わってきたと思います。こうしたアプリが増えたおかげで、デザインの仕事は増えていますか？

轟　Webデザインにおいてはそんなに変化がないと思いますが、新しく出てきたスマホやタブレット対応のアプリ開発ではそうですね。小さい画面でいかに魅力的に見せ、しかも使いやすくできるか、そこにデザインの力が発揮されるので。水面下の話で言えば、昔Webデザインをやっていた人で、今アプリのデザインをやっている人は結構増えてきたと思います。

高橋　その一方で、特にエンタープライズ系の開発ではデザインの視点が遅れています。例えば、こういったエンタープライズのアプリ開発の現場ではデベロッパーが画面デザインも兼任して行うケースがまだ残っています。「Visual Studio」に多くのコントロールが用意されているので、それらを元に画面の設計を行って、そのまま配置していくだけになってしまうケースもまだあるんだと思います。

　残念ながらこうした現場では、スマホやタブレットが普及した今でも開発スタイルが変化した印象は少ないですね。

轟　こうした案件では、やはりデベロッパー主導で開発が進んでしまうので、そのマインドが変わらないとデザイナーが活躍できる環境が生まれにくいでしょう。

　実際、現状で使いやすい業務アプリはあまりないと思います。例えば勤怠管理システムを見ても「プルダウンメニューが長すぎて面倒」とか、「いちいち画面をリフレッシュさせないと進めない」とか、少し触っただけで気付く問題があるのに、「業務アプリとはこういうもの」と割り切ってしまうところがある。絶対に（アプリを使う際の）作業コストも違うし、モチベーションも違ってくる。いろいろメリットはあるはずなんです。

高橋　これは僕の勝手な思い込みかもしれないですが、開発関係者の中には（例えば）星がきらきらと降ってきて音が鳴ったりとか「いわゆるソーシャルゲームのエフェクトのような効果＝デザイン」と思い込んでいる人がまだいるんじゃないかなと（笑）。

轟啓介氏（アドビシステムズ マーケティング本部 クリエイティブソリューション第2部 ディベロッパーマーケティングスペシャリスト）

轟　それはあるでしょうね。デザインと言っても、そこには情報デザインがあり、UXとUIのデザインがあり、グラフィックスデザインもある。しかし、そういう装飾系デザインのイメージが強いから、予算がかかるなら「いらないかも……」と思ってしまう。

　でも実は開発の最初に必要なのは、前者の情報デザインやUX／UIデザインなので、そういう人たちがいないままスタートしたプロジェクトは、最終に近い段階に来てからデザイナーに助けを求めたりすることがあります。その時点では手遅れなんです。

高橋　その手遅れな作業フローが、いわゆるこれまでのエンタープライズのメインストリームの開発手法で、いまだにそれが脈々と受け継がれいてる現状があります。もう1つは、いざマインドが変わっていろいろやってみようと思っても、そういうデザインに携わる人と出会う機会がないという問題もありますね。

　そうした現場では開発ができる人はいるけど、デザインができる人が身近にいないとか、リアルなつながりがなく、そもそもデザイン的な考えを持った人が入る場所が構造的にないという課題があると思います。

轟　なるほど、今後は僕らがそうしたデベロッパーとデザイナーが出会えるようなイベントを作っていきたいですね。

それでもデベロッパーがデザインをしなければならない現実

高橋　一方、現実問題としてデザインにコストをかけたくても、開発現場は大規模なものだけでなく、個人での対応や小規模な予算という場合もあり、そうなるとデベロッパーがいろいろとやらなくてはなりません。特にスマホやタブレットでは、全部やろうと思ったらデザイナーとしても最低限のことができないといけない。こうしたとき、好きな人は「Photoshop」や「Illustrator」も使うわけですが、そこまで意識していない人もいます。

　ボタンとか標準のUIは素材のパーツが存在するので、典型的なUIだけならばコントロールを配置するだけで作れるのですが、アイコンとかはそうもいかなかったりします。現在のWindowsではアイコンが6種類もあって、それを解像度の数だけ用意しないといけません。例えば、今「Windows ストア」用にアプリのアイコンを用意する場合、解像度に合わせて20数種類以上のアイコン画像が必要になります。

　Windowsの世界になると、これをOS標準のペイントブラシで普通に解像度だけ変えてアイコンを作ったりしてしまう人もいるんです。アイコンの数を考えると、これは大変な手間ですし、仕上がりもよくありません。

「Visual Studio」でアイコンを6種類、解像度ごとに用意した例

轟　その点、Photoshopを少しでも使えれば問題ないですよね。デザインのバリエーションは簡単に作れますし、解像度の変更だけでいいなら、最初に設定しておくと全部自動で処理してくれます。解像度変更後の品質もいいです。

「Photoshop」を使えば、解像度を変えたボタンなどのデザインを自動的に生成することも可能だ。仕上がりも美しい

高橋　世の中にはいいソリューションがありますが、実際にはそれを使わずに苦労している人が大勢います。開発している間は楽しかったりするけれど、最後のそういう作業が面倒臭いというのは結構多いので、こうした便利なツールの活用がポイントになると思います。

解決編――課題の鍵は最新ツール活用とコミュニケーション

――　スマホアプリ開発やリッチなUIがエンタープライズ向けアプリでも無視できなくなり、デザイナーが介在する余地の拡大とともに、増大する作業量や開発手法などの問題が出てきていることが分かりました。こうしたツールの活用や、デベロッパーとデザイナーのコミュニケーションについて、どのように課題を解決していけばいいでしょうか？

デベロッパーとデザイナーの相互理解が必要

高橋　まずはデベロッパーにそういう（面倒な作業を簡略化する）ツールの便利さを理解してほしいです。アプリがどんどんリッチになって、アイコン作成のように、たとえシンプルであっても最低限のことはやらなければいけない。だからPhotoshopの基本的な使い方など、デザイナーの作業についても最低限は知っておくといいですね。

轟　PSD（Photoshop）やAI（Illustrator）のファイル形式で、UIセットのファイルが数多く公開されています。ボタン集とかフォーム集とか、結構いろいろな素材が入手できます。でも、いざPSDのファイルをダウンロードしてきて、運よくPhotoshopを持っていたとしても、次に何をしていいかが分からないといったこともありそうですね。

PSDファイルで提供されているUIキットの例「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％のクオリティを最後まで維持し続けたいですね。そうした点でも、アプリの完成度を高めるために、デベロッパーがデザインに対してより歩み寄る必要はあります。

※本コンテンツの続きはBBソフトサービス株式会社の特設サイトでご覧いただけます