2016.05.24
遠慮しない、妥協しないものづくり。エンジニアがデザイナーに求める知識とは～テクニカルクリエイター対談 #02～
進化を続けるスマートフォン環境におけるアプリ・サービス。変わり続けるユーザーのニーズに、フレキシブルかつスピーディに応え続けることができるか。また海外の優れたアプリにどう対抗しいていくか。国内のアプリ・サービスプロバイダーが共通して抱える大きな課題だ。それに対し、「AbemaTV」「AWA」「Ameba Ownd」といった斬新なアプリ・サービスをリリースするサイバーエージェントは、「テクニカルクリエイター」という新たなスタイルのクリエイターを育成することで、課題解決を図ろうとしている。同社のチーフ・クリエイティブディレクターで、「テクニカルクリエイター」のコンセプトを整理・構築した佐藤洋介さんは、その定義を「デザインまたはエンジニアリングのいずれかに軸足を置き」ながら、「両者をつなぐような、どちらの技術にも明るいスペシャリスト」と定義する。テクニカルクリエイターの実像を明らかにする全3回の本連載、その第2回は佐藤さんとカレンダーアプリ「TimeTree」の開発・提供を行うJUBILEE WORKSの藤木裕介さんの対談をお送りする。
まず前提として押さえておきたいのが、なぜ「テクニカルクリエイター」という役割が求められるようになったのか、という点だ。サイバーエージェントの佐藤さんは、その理由としてスマートフォンの進化を挙げる。
佐藤：スマートフォンが進化してユーザーのリテラシーが上がり、それに応えるためにアプリのネイティブ化が進んだことで、僕らのようなUIデザインを担当してきたデザイナーもインタラクション、つまり“動きの感覚”を織り込んでデザインをすることが求められるようになってきました。動きの感覚を突き詰めていくにはどうしたらいいか。そのためにはやはり、エンジニアリングのことを理解しないといけない。
AbemaTV開発当時のことについて話す佐藤さん。アプリの動きを伝えるために紙芝居のラフモックを制作していた
佐藤さんはそれとは逆に、エンジニアもまたデザインを理解し「テクニカルクリエイターの領域にステップアップしていくべきだ」と考えている。今回、画期的なカレンダーアプリとして人気を呼ぶ「TimeTree」の開発チームに所属するエンジニアである、JUBILEE WORKSの藤木裕介さんに声をかけたのは、藤木さんがもともとはデザイナーでありながら、その後エンジニアに転身したというキャリアを持つ「テクニカルクリエイター的な存在だから」だと言う。
では、デザイナーとして仕事をしていた藤木さんはなぜ、エンジニアになったのだろうか。
藤木：僕は当初ヤフー（株）でデザイナーの肩書きで仕事をしていたのですが、当時は開発がいわゆるウォーターフォール型で、デザイナーの仕事はPowerPointやPhotoshopで仕様書をつくったり、HTMLやCSSを書いたりするところまで、と決まっていたんです。そこから先はエンジニアの領域であり、デザイナーは触ることができませんでした。最後まで関わって動きを実現したくてもそれはできない。そこにフラストレーションを感じていました。
藤木 裕介
自分のデザインに責任を持ちたいと考えるうちに、藤木さんはエンジニアリングの世界に足を踏みいれる。会社にあったエンジニア向けの学習資料に自主的に目を通し、社内のハッカソンイベントなどに参加して力をつけ、入社して4年が経ったところで「名刺に『エンジニア』の肩書きを入れた」と言う。転身からおよそ4年。JUBILEE WORKSで「TimeTree」の開発に携わるようになってからは完全に「エンジニアとして仕事をしている」というが、その経験からも藤木さんは、エンジニアに立脚しながらもデザインのことを理解する「テクニカルクリエイター」と言えるだろう。
そんな藤木さんのいる「TimeTree」の開発チームは、どんな風に仕事をしているのか。佐藤さんが注目していたのもその点だった。
佐藤：TimeTreeの機能の中でも、予定ごとにコミュニケーションスペースがあってチャットや写真の投稿ができるようになっている点が素晴らしいな、と感じていました。実は、今日の待ち合わせにもTimeTreeのチャットを使いましたし、対談が終わったら記念写真を撮って貼り付けておこうと思っているのですが（笑）。この機能を実現するにはUIデザインだけでなく、エンジニアリングの力が欠かせないと感じたわけです。
スケジュール共有アプリ「TimeTree」。1つのカレンダーに複数人のスケジュールを反映させることが可能だ。また、予定に対しチャットや写真を送ることもできる。「App Store Best of 2015」に選ばれるなど海外からの評価も高い
藤木さんによると、開発はデザイナーとエンジニアが膝を詰めて協業する形で進めているそうだ。チャット機能のUIを快適なものにする、その1つをとっても動きを実現するための技術はもちろん、バックエンドの知識も欠かせなかったからだ。
藤木：そもそもスモールチームなんですが、その中でプロジェクトごとにさらに小さなチームをつくって開発を進めています。まずはデザイナーがデザインモックを用意し、それをもとに僕らエンジニアがXcodeでざっくりとしたデザインプロトタイプをつくります。そこからエンジニア、デザイナーの垣根なく議論をしながら開発を進めます。僕の感覚としては、このプロトタイプができたところから、本当の開発がスタートすると思っています。
JUBILEE WORKSには“議論をしながら開発を進めていく”社風があると言うが、その背景にはデザイナーとエンジニアが対等に意見をぶつけ合い、一体となって開発を進めていく素地がある。藤木さんはそれを「遠慮をしない環境」と表現する。
藤木：デザイナーの中にはエンジニアに対して恐る恐る頼みごとをする人もいますよね。「こんなことができませんかね」といった感じで。たとえば画面上の配置を1ピクセルだけ動かしたいとか、スワイプ時の反応をわずかに速くして指に吸い付くようにしたい、といったことを頼んでいいのか悩むのでしょうね。エンジニアが納得できるまで説明ができずに諦めてしまうということもあるかもしれません。うちのチームにはそういうデザイナーはもういません。
この話を聞いた佐藤さんは、「テクニカルクリエイター」という概念を立ち上げた理由はまさにそこにある、と話した。
佐藤：その1ピクセルのズレやスワイプ時のわずかな遅れが、UIの出来を大きく左右することがあります。それを、例えば忙しそうにしている先輩エンジニアに依頼ができるか。工数に合わないと主張するエンジニアを納得させられるか。そこで必要となるのがテクニカルクリエイターなんです。デザイナーにエンジニアリングの知識があれば、あるいはエンジニアがデザインのことを理解していれば議論ができる。それがよりよいアウトプットのための積み上げにつながるんです。
では藤木さんは、デザイナーがテクニカルクリエイターになるために、言い換えればエンジニアとデザイナーとがより良い協業関係をつくり上げるために、デザイナーにどんな知識があればいいと考えるのだろうか。
藤木：Xcodeを使えるようになってほしいとまでは思いませんが、エンジニアがどんな言語やツールを使っていて、それにはどんな特徴があるのか、さらにはアプリがどういう仕組みで動いていて、データをどう引っ張っているかといった“概念”を理解しておいてほしいと思います。ただし、デザインとエンジニアリングの両方を中途半端に理解している状態になるのは良くない。なんとなく相手のことを理解しているといった程度だと、お互い相手に気を遣って楽な方に行こうみたいなことになりかねません。僕はデザイナーの要望は決して断らず、できる限り実現するといった覚悟を持って開発に臨むように心がけています。
佐藤さんが「テクニカルクリエイター」を定義する際に、“デザインまたはエンジニアリングのいずれかに軸足を置きながら”と但し書きを付与するのは、藤木さんの言う「中途半端な状態」を避けるためだ。
佐藤：藤木さんのように自分の領域に責任を持つというスタンスで仕事をすることが何より大事だと思います。だから、テクニカルクリエイターは職種として育てるのではなく、デザイナーやエンジニアが成長していくものだと考えているんです。
藤木さんは今回の対談にあたって、佐藤さんが担当した「AbemaTV」のアプリについて聞いてみたかったことがあると話した。
藤木：チャンネルを変えるUIがすごいな、と感じたんです。スワイプするともう隣のチャンネルの映像が動いていて、音がクロスフェードして入れ替わる。エンジニアの目線から見れば、バックエンドも含めてとても難しいことをしているなというのは直感的にわかります（笑）。
そのUIは、まさにデザイナーとエンジニアが一体となってつくり上げたものだと佐藤さんは言う。
佐藤：AbemaTVは、テレビのようにザッピングしながら見るというコンセプトがありましたから、チャンネルを切り替えるUIには相当こだわってつくっています。スワイプの感覚1つをとってもそうですし、先読みやサーバの安定性についてもデザイナーとエンジニアがやり合いながら実現した部分です。こういった現場の経験の中からテクニカルクリエイターという概念が形づくられてきた、と言えると思います。
佐藤さんは日本のクリエイティブが、海外の魅力的なアプリ開発を行うサービスプロバイダーに対抗していくために、今後多くのテクニカルクリエイターを育てていかなければならないと考えている。
佐藤：これまではデザイナーにエンジニアリングを、あるいはエンジニアにデザインを学ばせるような機会はなかなかなくて、藤木さんのように自発的に取り組むしかありませんでした。そこを改め、機会を設けようと思っています。サイバーエージェントではまず、デザイナー向けのXcode講座を開くというところから始めています。今後はそれをもっと広げていくような形をとりたい、と考えているところです。
佐藤さんは、藤木さんのような、業界の中ですでにテクニカルクリエイター的に活躍されている人たちと、積極的に情報交換をしていきたいと考えているという。
佐藤：すべてのデザイナー、エンジニアをテクニカルクリエイターにしていきたい。
その言葉の先には、日本のクリエイティブの次世代の姿が描かれている。次回で最終回、また別の角度でアプリ・サービスの最前線を走る「テクニカルクリエイター」に話を聞いていきたい。自分の身を重ねながら、また自分の未来を思い描きながら、これからのデザイナー・エンジニアの形を考えてみたい。
Photo by 五味 茂雄
企画協力：株式会社サイバーエージェント
テクニカルクリエイターを生み出した“スマートフォンの進化”
まず前提として押さえておきたいのが、なぜ「テクニカルクリエイター」という役割が求められるようになったのか、という点だ。サイバーエージェントの佐藤さんは、その理由としてスマートフォンの進化を挙げる。
佐藤：スマートフォンが進化してユーザーのリテラシーが上がり、それに応えるためにアプリのネイティブ化が進んだことで、僕らのようなUIデザインを担当してきたデザイナーもインタラクション、つまり“動きの感覚”を織り込んでデザインをすることが求められるようになってきました。動きの感覚を突き詰めていくにはどうしたらいいか。そのためにはやはり、エンジニアリングのことを理解しないといけない。
AbemaTV開発当時のことについて話す佐藤さん。アプリの動きを伝えるために紙芝居のラフモックを制作していた
佐藤 洋介
株式会社サイバーエージェント
チーフ・クリエイティブディレクター
「Ameba」のクリエイティブ統括室 室長として、スマートフォン向けサービスのデザイナーを統括。
クリエイティブ責任者として各サービスのUIデザインを監修
佐藤さんはそれとは逆に、エンジニアもまたデザインを理解し「テクニカルクリエイターの領域にステップアップしていくべきだ」と考えている。今回、画期的なカレンダーアプリとして人気を呼ぶ「TimeTree」の開発チームに所属するエンジニアである、JUBILEE WORKSの藤木裕介さんに声をかけたのは、藤木さんがもともとはデザイナーでありながら、その後エンジニアに転身したというキャリアを持つ「テクニカルクリエイター的な存在だから」だと言う。
では、デザイナーとして仕事をしていた藤木さんはなぜ、エンジニアになったのだろうか。
藤木：僕は当初ヤフー（株）でデザイナーの肩書きで仕事をしていたのですが、当時は開発がいわゆるウォーターフォール型で、デザイナーの仕事はPowerPointやPhotoshopで仕様書をつくったり、HTMLやCSSを書いたりするところまで、と決まっていたんです。そこから先はエンジニアの領域であり、デザイナーは触ることができませんでした。最後まで関わって動きを実現したくてもそれはできない。そこにフラストレーションを感じていました。
藤木 裕介
JUBILEE WORKS,Inc.
武蔵野美術大学視覚伝達デザイン学科卒業後、2007年にヤフー（株）へデザイナーとして新卒入社。スマートフォン版Yahoo! JAPANトップページのデザインや開発に従事。その後社内プロジェクトを機にエンジニアとして転向し、アプリの開発経験などを得る。2014年に株式会社JUBILEE WORKSを共同設立し、共有カレンダーアプリTimeTreeの企画・開発・運営を行う。主な担当領域はiOS
自分のデザインに責任を持ちたいと考えるうちに、藤木さんはエンジニアリングの世界に足を踏みいれる。会社にあったエンジニア向けの学習資料に自主的に目を通し、社内のハッカソンイベントなどに参加して力をつけ、入社して4年が経ったところで「名刺に『エンジニア』の肩書きを入れた」と言う。転身からおよそ4年。JUBILEE WORKSで「TimeTree」の開発に携わるようになってからは完全に「エンジニアとして仕事をしている」というが、その経験からも藤木さんは、エンジニアに立脚しながらもデザインのことを理解する「テクニカルクリエイター」と言えるだろう。
「遠慮をしない」環境をつくれるか
そんな藤木さんのいる「TimeTree」の開発チームは、どんな風に仕事をしているのか。佐藤さんが注目していたのもその点だった。
佐藤：TimeTreeの機能の中でも、予定ごとにコミュニケーションスペースがあってチャットや写真の投稿ができるようになっている点が素晴らしいな、と感じていました。実は、今日の待ち合わせにもTimeTreeのチャットを使いましたし、対談が終わったら記念写真を撮って貼り付けておこうと思っているのですが（笑）。この機能を実現するにはUIデザインだけでなく、エンジニアリングの力が欠かせないと感じたわけです。
スケジュール共有アプリ「TimeTree」。1つのカレンダーに複数人のスケジュールを反映させることが可能だ。また、予定に対しチャットや写真を送ることもできる。「App Store Best of 2015」に選ばれるなど海外からの評価も高い
藤木さんによると、開発はデザイナーとエンジニアが膝を詰めて協業する形で進めているそうだ。チャット機能のUIを快適なものにする、その1つをとっても動きを実現するための技術はもちろん、バックエンドの知識も欠かせなかったからだ。
藤木：そもそもスモールチームなんですが、その中でプロジェクトごとにさらに小さなチームをつくって開発を進めています。まずはデザイナーがデザインモックを用意し、それをもとに僕らエンジニアがXcodeでざっくりとしたデザインプロトタイプをつくります。そこからエンジニア、デザイナーの垣根なく議論をしながら開発を進めます。僕の感覚としては、このプロトタイプができたところから、本当の開発がスタートすると思っています。
JUBILEE WORKSには“議論をしながら開発を進めていく”社風があると言うが、その背景にはデザイナーとエンジニアが対等に意見をぶつけ合い、一体となって開発を進めていく素地がある。藤木さんはそれを「遠慮をしない環境」と表現する。
藤木：デザイナーの中にはエンジニアに対して恐る恐る頼みごとをする人もいますよね。「こんなことができませんかね」といった感じで。たとえば画面上の配置を1ピクセルだけ動かしたいとか、スワイプ時の反応をわずかに速くして指に吸い付くようにしたい、といったことを頼んでいいのか悩むのでしょうね。エンジニアが納得できるまで説明ができずに諦めてしまうということもあるかもしれません。うちのチームにはそういうデザイナーはもういません。
この話を聞いた佐藤さんは、「テクニカルクリエイター」という概念を立ち上げた理由はまさにそこにある、と話した。
佐藤：その1ピクセルのズレやスワイプ時のわずかな遅れが、UIの出来を大きく左右することがあります。それを、例えば忙しそうにしている先輩エンジニアに依頼ができるか。工数に合わないと主張するエンジニアを納得させられるか。そこで必要となるのがテクニカルクリエイターなんです。デザイナーにエンジニアリングの知識があれば、あるいはエンジニアがデザインのことを理解していれば議論ができる。それがよりよいアウトプットのための積み上げにつながるんです。
必要なのはエンジニアリングの概念を理解すること
では藤木さんは、デザイナーがテクニカルクリエイターになるために、言い換えればエンジニアとデザイナーとがより良い協業関係をつくり上げるために、デザイナーにどんな知識があればいいと考えるのだろうか。
藤木：Xcodeを使えるようになってほしいとまでは思いませんが、エンジニアがどんな言語やツールを使っていて、それにはどんな特徴があるのか、さらにはアプリがどういう仕組みで動いていて、データをどう引っ張っているかといった“概念”を理解しておいてほしいと思います。ただし、デザインとエンジニアリングの両方を中途半端に理解している状態になるのは良くない。なんとなく相手のことを理解しているといった程度だと、お互い相手に気を遣って楽な方に行こうみたいなことになりかねません。僕はデザイナーの要望は決して断らず、できる限り実現するといった覚悟を持って開発に臨むように心がけています。
佐藤さんが「テクニカルクリエイター」を定義する際に、“デザインまたはエンジニアリングのいずれかに軸足を置きながら”と但し書きを付与するのは、藤木さんの言う「中途半端な状態」を避けるためだ。
佐藤：藤木さんのように自分の領域に責任を持つというスタンスで仕事をすることが何より大事だと思います。だから、テクニカルクリエイターは職種として育てるのではなく、デザイナーやエンジニアが成長していくものだと考えているんです。
テクニカルクリエイターをどう育てるか
藤木さんは今回の対談にあたって、佐藤さんが担当した「AbemaTV」のアプリについて聞いてみたかったことがあると話した。
藤木：チャンネルを変えるUIがすごいな、と感じたんです。スワイプするともう隣のチャンネルの映像が動いていて、音がクロスフェードして入れ替わる。エンジニアの目線から見れば、バックエンドも含めてとても難しいことをしているなというのは直感的にわかります（笑）。
そのUIは、まさにデザイナーとエンジニアが一体となってつくり上げたものだと佐藤さんは言う。
佐藤：AbemaTVは、テレビのようにザッピングしながら見るというコンセプトがありましたから、チャンネルを切り替えるUIには相当こだわってつくっています。スワイプの感覚1つをとってもそうですし、先読みやサーバの安定性についてもデザイナーとエンジニアがやり合いながら実現した部分です。こういった現場の経験の中からテクニカルクリエイターという概念が形づくられてきた、と言えると思います。
佐藤さんは日本のクリエイティブが、海外の魅力的なアプリ開発を行うサービスプロバイダーに対抗していくために、今後多くのテクニカルクリエイターを育てていかなければならないと考えている。
佐藤：これまではデザイナーにエンジニアリングを、あるいはエンジニアにデザインを学ばせるような機会はなかなかなくて、藤木さんのように自発的に取り組むしかありませんでした。そこを改め、機会を設けようと思っています。サイバーエージェントではまず、デザイナー向けのXcode講座を開くというところから始めています。今後はそれをもっと広げていくような形をとりたい、と考えているところです。
佐藤さんは、藤木さんのような、業界の中ですでにテクニカルクリエイター的に活躍されている人たちと、積極的に情報交換をしていきたいと考えているという。
佐藤：すべてのデザイナー、エンジニアをテクニカルクリエイターにしていきたい。
その言葉の先には、日本のクリエイティブの次世代の姿が描かれている。次回で最終回、また別の角度でアプリ・サービスの最前線を走る「テクニカルクリエイター」に話を聞いていきたい。自分の身を重ねながら、また自分の未来を思い描きながら、これからのデザイナー・エンジニアの形を考えてみたい。
Photo by 五味 茂雄
企画協力：株式会社サイバーエージェント
