2人のプロフェッショナルが語り合う(2)

高橋忍(Microsoft)×轟啓介(Adobe)対談――進化するアプリ開発現場でデベロッパーとデザイナーの関係はどうあるべきか?

MS×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%のクオリティを最後まで維持し続けたいですね。そうした点でも、アプリの完成度を高めるために、デベロッパーがデザインに対してより歩み寄る必要はあります。

その3へ

ブランドから探す

  • Microsoft
  • mescius
  • Gitlab
  • GitHub
  • Unity
  • mixpace
  • Adobe
  • embarcadero

全製品一覧から探す

  • 全製品一覧はこちら
  • 全製品一覧はこちら

ご購入ガイド

【ご注文について】

お客様の商品等のご注文は、お客様が注文画面上での必要事項の入力後に本サイトにある注文ボタンをクリックすることにより行われます。

-ご注文の流れ-
『STEP1』ユーザー登録
ユーザー登録後は、特別価格で見積もり、ご購入いただけます。

『STEP2』お見積
24時間365日、お客様が自由に見積作成をすることができます。

『STEP3』ご注文
見積明細画面からご注文いただけます。注文情報入力画面にて、請求先、出荷先(納品先)をそれぞれ指定することができます。
弊社にて注文内容確認後「注文確定」となり、製品手配を進めます。

『STEP4』納品
メールまたは郵送にて納品いたします。
(ご注文製品により異なります)

『STEP5』請求書発行・お支払い
メールで株式会社ネットプロテクションズより請求書を送付致します。
納品月の翌月払いにてネットプロテクションズ指定の銀行口座へお振込みください。

【納期】

製品により異なりますが、3営業日~2週間程度要します。詳細はお問い合わせください。

-納品方法-
物理的納品物がない場合には電子メールでのご納品となります。注文ステップでご入力頂いたメールアドレスへご納品となります。

物理的納品物がある場合には、ヤマト宅急便もしくは佐川急便でのお届けとなります。配送業者及び日付・時間指定はできかねますのでご了承下さい。

【発行書類】

以下書類は、全てWEBより印刷可能です。

  • 見積書
  • 注文書
  • 納品書

※請求書は株式会社ネットプロテクションズよりメール送付いたします。

【お支払い方法】

株式会社ネットプロテクションズが運営する「NP掛け払い」となります。
「NP掛け払い」とは、法人/個人事業主を対象とした後払いサービスです。(納品月末締め翌月末請求書払い)
請求書は、納品翌月第2営業日に株式会社ネットプロテクションズからご登録のメールアドレス宛に送付されます。
月間最大300万円までお取引可能です(それ以上は別途相談)
納品月末締め翌月末請求書払いです。 請求書に記載されている銀行口座へお支払いください。
※銀行振込の際の振込手数料はお客様にてご負担ください。 請求代行のため代金債権は同社へ譲渡されます。
※請求書には「締め日(=月末日付)」と「発行日(=第2営業日)」の記載がございます。

ライセンス製品は、お客様各社個別の受注ベースでの発行になります。
ご注文確定後のお客様の都合による変更、キャンセルはお受けいたしかねますので予めご了承ください。

【商品代金以外の必要料金】

本サイトにより掲示される商品等の見積価格には、配送料金および消費税等は含まれておりません。送料をご請求する場合には、お見積書に記載させて頂きます。

  • 消費税および地方消費税
  • 送料 一注文につき全国一律600円

※但し、電子納品や送料無料キャンペーン等、特定の場合を除きます。

【運営会社】

BBソフトサービス株式会社(SB C&S株式会社 100%子会社)

〒105-7511
東京都港区海岸1丁目7番1号
WeWork 東京ポートシティ竹芝

TEL:0120-989-415 / FAX:03-6679-2750
Mailto:front@licenseonline.jp
URL:http://www.bbss.co.jp
営業時間:平日 9:30-12:00、13:00-17:30

ページトップへ