2016.07.04
デザインとエンジニアリングの垣根を取り払う秘訣とは？～テクニカルクリエイター対談 #03～
より便利に、より使いやすく。コンシューマーに向けてアプリ・サービスを提供するITサービスベンダーは、今、変わり続け、高度化するユーザーのニーズにいかに応え続けるかという難問に直面している。そんな課題に対し「AbemaTV」「AWA」「Ameba Ownd」といった、先進的なサービスを次々とリリースするサイバーエージェントは「テクニカルクリエイター」という新たな職域の概念を設けることで、その解決を図ろうとしている。
本連載では、これまで2回にわたって、サイバーエージェントのチーフ・クリエイティブディレクターの佐藤洋介さんと、デザイン、エンジニアリングのいずれかに軸足を置きながらも、もう一方の領域にまで職域を広げるクリエイターを招いて対談を行い、「テクニカルクリエイター」のあり方について考えてきた。最終回となる今回は、料理レシピサービスとして高い人気を誇るだけでなく、優れたクリエイターが数多く在籍することでも知られる「クックパッド」を訪問。同社デザイナー 木村真理さん、エンジニアの市川勝さんとの鼎談をお送りする。
サイバーエージェントが育成を図る「テクニカルクリエイター」。その詳細についてはこれまでの連載で詳しく取り上げてきたが、その狙いの一つは、「デザイナーがエンジニアリングの考え方」を、「エンジニアがデザインの考え方」を正しく理解することで、より適切な関係性を築いていくという点にある。そんな中で、佐藤さんが「クックパッド」に注目したのは、同社がサイバーエージェントと同様に、エンジニアリングに力を入れている会社だと感じているからだ。
佐藤：「長い時間をかけて改善を続けているクックパッドのアプリ・サービスはもちろんですが、同社の『開発者ブログ』から見て取れる、開発に向き合う姿勢も素晴らしいなと思っていました。ただし、その中身はサイバーエージェントとはひと味違うようにも思います。デザイナーとエンジニアがどんな距離感で仕事をしているのか、ぜひ話を聞いてみたいと思ったんです」
そのクックパッドから登場していただいたのは、主にスマートフォンアプリのUIデザインを担当しているデザイナーの木村真理さんと、クックパッド編集室でiOSアプリの開発に携わるエンジニアの市川勝さんだ。まずはクックパッドの開発スタイルを木村さんに尋ねてみた。
木村：「iOSやAndroidのアプリを例にお話しますと、月に1度、アプリをアップデートすることを前提にスケジュールを組んでいます。そのリリースに向け、課題の洗い出しに始まり、デザイン、実装、レビュー…と進めていきます。クックパッドという大きなサービスの中で、検索や投稿、広告など、それぞれの改善を、複数のチームが並行して進めている、といった感じにイメージしていただければと思います」
クックパッド株式会社 デザイナー 木村 真理
たとえば、木村さんや市川さんも所属する、クックパッド内の「クックパッドニュース」というサービスの改善を担当するチームの場合、エンジニアが2名、デザイナーが1名、ディレクターが1名の4名構成だという。スモールチームゆえに、デザイナーとエンジニアの距離は非常に近い。
木村：「デザイナーは提案の内容に合わせてSketchやInVision、Flinto for Mac、時にはAdobe After Effectsといったツールを使ってモックアップを作るのですが、その内容についてはかなり初期の段階からエンジニアと相談しながら進めています。モックアップツールでは表現しきれない動きや、実装の際に起こるであろう問題点を早めに理解しておくことが大事になりますので」
エンジニアの立場からしても、その開発手法は「歓迎すべきこと」だと市川さんは話す。
市川：「特に動きのあるUIの場合など、実際にSwiftなどで組んでしまったほうが当然わかりやすいですし、そうすることでデザインも深まっていくと感じています。またこの過程を踏むことで、エンジニア側からデザインに関する提案もできるようになります」
クックパッド株式会社 エンジニア 市川 勝
ただし、デザイナーとエンジニアの距離が「遠い」部分もある。物理的な意味での距離だ。クックパッドでは、デザイナーはデザイナーとしてまとまって席が設けられている。建物のフロアこそ同じだが、デザイナーとエンジニアが顔をつき合わせながらプロジェクトを進めているわけではない。この点がサイバーエージェントとは大きく違うと佐藤さんは言う。
佐藤：「一つひとつのプロジェクトの規模も大きく、関わる人数も多いので単純に比較するわけにはいかないと思うのですが、Amebaのメディアサービスのほとんどは、同一のプロジェクトに関わるデザイナー、エンジニアは職種を超えて席を近くに設けて仕事をするようにしています。目の前にいることで、ちょっとした相談や打ち合わせがしやすいとか、進行の様子を確認できるといったメリットがあると考えてのことなんです」
この点について木村さんは、「なるほど」と頷きながらも、現在のやり方がしっくりきていると話す。
木村：「今はむしろ、デザイナー同士が近くにいることにメリットがあると感じています。気軽に相談できたり、時には厳しい意見を言い合うこともできるからです。それにチームは近くにこそ座っていませんが、SlackやGitHubのissue上で頻繁に話をしていますので特に問題は感じないんです」
もともとクックパッドには、課題や提案、その議論の中身、その成果や失敗談にいたるまで、開発にまつわることのすべてを「文字で残す」という文化があるという。会社が得た経験を、“知見”として財産にするための工夫だ。
「アイデアがひらめいたら、まずは過去のissueをチェックする」
これはクックパッドでは当たり前の「カルチャー」だ。企画担当や営業、カスタマーサポートの担当者にもこのやり方は浸透していると言う。
カルチャーといえばもう一つ、全社員に行き渡る、ある行動原理があるという。それは「ユーザーファースト」の概念だ。市川さんは言う。
市川：「たとえば実装が済んだところで、デザイナーから『UIのこの部分を1ピクセル動かしてほしい』という要望が届いたとします。エンジニアからすれば『このズレを取り除くのは意外と大変。工数はこれくらいかかるな』ということがわかるわけですが、そんなケースでも判断の基準は必ず『ユーザーファースト』です。それはデザイナーもエンジニアもまったく同じです」
木村さんは、エンジニアとの間に垣根を感じたことがないと言う。
木村：「デザインとエンジニアリングは異なる分野ですから、お互いの理解度に差があるのは当然のことだと思います。それでも、見ている方向が同じなら根本的なところで齟齬は生じません。ユーザーはどう考えるか。常に答えをそこに探しに行きますので、エンジニアとも、ああでもないこうでもないと議論をすることができるのだと思います」
クックパッドに深く根付く、”ユーザーファースト”のカルチャー。佐藤さんはそこにこそ「発見」があったと話す。
佐藤：「お二人の話をうかがって、デザイナーとエンジニアが共通意識を持つことの大切さをあらためて感じました。クックパッドさんの場合はお互いの職域を理解する以前に、『ユーザーファースト』というしっかりとした下地ができているんですね。だからお互いに理解し合うことはもちろん、正面からぶつかり合うこともできる。我々としても『テクニカルクリエイター』の考え方を、カルチャーとして育んでいくことが大事だと感じました」
サイバーエージェントは、実は、そのステップをすでに歩みはじめている。社内で「エンジニアのためのデッサン講座」や「デザイナー向けのSwift実習講座」などのテクニカルクリエイター研修を開催し、お互いの領域を理解するための素地作りに取り掛かっているのだ。
佐藤：「エンジニア向けのデザイン講座ではデッサンや平面構成、タイポグラフィといった課題を出しています。たとえば『白い紙に黒い鉛筆でレモンが黄色く見えるように描く』といったことに挑戦してもらっているんですよ。みんな最初はその矛盾にキョトンとしていますが、だんだんとデザイナー的な考え方を理解しはじめてくれているようです。実は僕も、デザイナー向けのSwift講座に参加しています。かなり苦戦しているのですが（笑）」
大きな成果を上げる一方で、さまざまな課題を抱える日本のアプリ・サービス開発業界。その先を目指した新たな一歩を踏み出すためには「テクニカルクリエイター」の考え方が欠かせないものになるだろう。本連載はこれでひと区切りとなるが、これをきっかけとして、デザインとエンジニアリングの関係性について、またそのあり方について考えを巡らせ、議論を深めていただければと思う。その先にこそ、日本のクリエイティブの未来があるはずだ。
Photo by 山田 秀隆
企画協力：株式会社サイバーエージェント
本連載では、これまで2回にわたって、サイバーエージェントのチーフ・クリエイティブディレクターの佐藤洋介さんと、デザイン、エンジニアリングのいずれかに軸足を置きながらも、もう一方の領域にまで職域を広げるクリエイターを招いて対談を行い、「テクニカルクリエイター」のあり方について考えてきた。最終回となる今回は、料理レシピサービスとして高い人気を誇るだけでなく、優れたクリエイターが数多く在籍することでも知られる「クックパッド」を訪問。同社デザイナー 木村真理さん、エンジニアの市川勝さんとの鼎談をお送りする。
スモールチームならではの「距離感」
サイバーエージェントが育成を図る「テクニカルクリエイター」。その詳細についてはこれまでの連載で詳しく取り上げてきたが、その狙いの一つは、「デザイナーがエンジニアリングの考え方」を、「エンジニアがデザインの考え方」を正しく理解することで、より適切な関係性を築いていくという点にある。そんな中で、佐藤さんが「クックパッド」に注目したのは、同社がサイバーエージェントと同様に、エンジニアリングに力を入れている会社だと感じているからだ。
佐藤：「長い時間をかけて改善を続けているクックパッドのアプリ・サービスはもちろんですが、同社の『開発者ブログ』から見て取れる、開発に向き合う姿勢も素晴らしいなと思っていました。ただし、その中身はサイバーエージェントとはひと味違うようにも思います。デザイナーとエンジニアがどんな距離感で仕事をしているのか、ぜひ話を聞いてみたいと思ったんです」
佐藤 洋介
株式会社サイバーエージェント
チーフ・クリエイティブディレクター
「Ameba」のクリエイティブ統括室 室長として、スマートフォン向けサービスのデザイナーを統括。
クリエイティブ責任者として各サービスのUIデザインを監修
クックパッド株式会社が自社で運営するブログ。クックパッドアプリの細かい技術・デザインについての解説やイベントの告知、レポートのほか、時には新しい技術を試して記事で紹介したりもする
そのクックパッドから登場していただいたのは、主にスマートフォンアプリのUIデザインを担当しているデザイナーの木村真理さんと、クックパッド編集室でiOSアプリの開発に携わるエンジニアの市川勝さんだ。まずはクックパッドの開発スタイルを木村さんに尋ねてみた。
木村：「iOSやAndroidのアプリを例にお話しますと、月に1度、アプリをアップデートすることを前提にスケジュールを組んでいます。そのリリースに向け、課題の洗い出しに始まり、デザイン、実装、レビュー…と進めていきます。クックパッドという大きなサービスの中で、検索や投稿、広告など、それぞれの改善を、複数のチームが並行して進めている、といった感じにイメージしていただければと思います」
クックパッド株式会社 デザイナー 木村 真理
Web制作会社、スタートアップ企業でデザイナーとしての経験を積んだのち、2015年6月にクックパッドに入社。
主にクックパッドiOS／Android アプリ、料理写真をプライベートに記録するアプリ「お料理アルバム」の サービス改善、UIデザインを担当
たとえば、木村さんや市川さんも所属する、クックパッド内の「クックパッドニュース」というサービスの改善を担当するチームの場合、エンジニアが2名、デザイナーが1名、ディレクターが1名の4名構成だという。スモールチームゆえに、デザイナーとエンジニアの距離は非常に近い。
木村：「デザイナーは提案の内容に合わせてSketchやInVision、Flinto for Mac、時にはAdobe After Effectsといったツールを使ってモックアップを作るのですが、その内容についてはかなり初期の段階からエンジニアと相談しながら進めています。モックアップツールでは表現しきれない動きや、実装の際に起こるであろう問題点を早めに理解しておくことが大事になりますので」
エンジニアの立場からしても、その開発手法は「歓迎すべきこと」だと市川さんは話す。
市川：「特に動きのあるUIの場合など、実際にSwiftなどで組んでしまったほうが当然わかりやすいですし、そうすることでデザインも深まっていくと感じています。またこの過程を踏むことで、エンジニア側からデザインに関する提案もできるようになります」
クックパッド株式会社 エンジニア 市川 勝
ヤフー、ドワンゴでエンジニアとしてiOSアプリの開発に従事した後、2015年3月にクックパッドに入社。
クックパッドニュース、クックパッド料理動画のサービス改善、開発を行う。主な担当領域はiOS
GitHubのissue上で議論する文化
ただし、デザイナーとエンジニアの距離が「遠い」部分もある。物理的な意味での距離だ。クックパッドでは、デザイナーはデザイナーとしてまとまって席が設けられている。建物のフロアこそ同じだが、デザイナーとエンジニアが顔をつき合わせながらプロジェクトを進めているわけではない。この点がサイバーエージェントとは大きく違うと佐藤さんは言う。
佐藤：「一つひとつのプロジェクトの規模も大きく、関わる人数も多いので単純に比較するわけにはいかないと思うのですが、Amebaのメディアサービスのほとんどは、同一のプロジェクトに関わるデザイナー、エンジニアは職種を超えて席を近くに設けて仕事をするようにしています。目の前にいることで、ちょっとした相談や打ち合わせがしやすいとか、進行の様子を確認できるといったメリットがあると考えてのことなんです」
この点について木村さんは、「なるほど」と頷きながらも、現在のやり方がしっくりきていると話す。
木村：「今はむしろ、デザイナー同士が近くにいることにメリットがあると感じています。気軽に相談できたり、時には厳しい意見を言い合うこともできるからです。それにチームは近くにこそ座っていませんが、SlackやGitHubのissue上で頻繁に話をしていますので特に問題は感じないんです」
画像は実際のGitHub issueで行われたやりとり。画像提供：クックパッド株式会社
もともとクックパッドには、課題や提案、その議論の中身、その成果や失敗談にいたるまで、開発にまつわることのすべてを「文字で残す」という文化があるという。会社が得た経験を、“知見”として財産にするための工夫だ。
「アイデアがひらめいたら、まずは過去のissueをチェックする」
これはクックパッドでは当たり前の「カルチャー」だ。企画担当や営業、カスタマーサポートの担当者にもこのやり方は浸透していると言う。
カルチャーといえばもう一つ、全社員に行き渡る、ある行動原理があるという。それは「ユーザーファースト」の概念だ。市川さんは言う。
市川：「たとえば実装が済んだところで、デザイナーから『UIのこの部分を1ピクセル動かしてほしい』という要望が届いたとします。エンジニアからすれば『このズレを取り除くのは意外と大変。工数はこれくらいかかるな』ということがわかるわけですが、そんなケースでも判断の基準は必ず『ユーザーファースト』です。それはデザイナーもエンジニアもまったく同じです」
木村さんは、エンジニアとの間に垣根を感じたことがないと言う。
木村：「デザインとエンジニアリングは異なる分野ですから、お互いの理解度に差があるのは当然のことだと思います。それでも、見ている方向が同じなら根本的なところで齟齬は生じません。ユーザーはどう考えるか。常に答えをそこに探しに行きますので、エンジニアとも、ああでもないこうでもないと議論をすることができるのだと思います」
「ユーザーファースト」という共通言語
クックパッドに深く根付く、”ユーザーファースト”のカルチャー。佐藤さんはそこにこそ「発見」があったと話す。
佐藤：「お二人の話をうかがって、デザイナーとエンジニアが共通意識を持つことの大切さをあらためて感じました。クックパッドさんの場合はお互いの職域を理解する以前に、『ユーザーファースト』というしっかりとした下地ができているんですね。だからお互いに理解し合うことはもちろん、正面からぶつかり合うこともできる。我々としても『テクニカルクリエイター』の考え方を、カルチャーとして育んでいくことが大事だと感じました」
サイバーエージェントは、実は、そのステップをすでに歩みはじめている。社内で「エンジニアのためのデッサン講座」や「デザイナー向けのSwift実習講座」などのテクニカルクリエイター研修を開催し、お互いの領域を理解するための素地作りに取り掛かっているのだ。
佐藤：「エンジニア向けのデザイン講座ではデッサンや平面構成、タイポグラフィといった課題を出しています。たとえば『白い紙に黒い鉛筆でレモンが黄色く見えるように描く』といったことに挑戦してもらっているんですよ。みんな最初はその矛盾にキョトンとしていますが、だんだんとデザイナー的な考え方を理解しはじめてくれているようです。実は僕も、デザイナー向けのSwift講座に参加しています。かなり苦戦しているのですが（笑）」
エンジニア向けのデザイン講座の様子。画像提供：Technical Creator Hub
大きな成果を上げる一方で、さまざまな課題を抱える日本のアプリ・サービス開発業界。その先を目指した新たな一歩を踏み出すためには「テクニカルクリエイター」の考え方が欠かせないものになるだろう。本連載はこれでひと区切りとなるが、これをきっかけとして、デザインとエンジニアリングの関係性について、またそのあり方について考えを巡らせ、議論を深めていただければと思う。その先にこそ、日本のクリエイティブの未来があるはずだ。
Photo by 山田 秀隆
企画協力：株式会社サイバーエージェント
