こんにちは。株式会社ビルディット 採用広報担当の大木です。
弊社ではデザイナーとエンジニアがチームを組み、同じ空間で協働しています。 そしてチームやお互いの立場などの枠組みに囚われることなく、日常的に両者が相互の観点でレビューしあい、それはリリース前のピリピリとした空気の中でも途切れることはありません。
そうすることで、UI・エンジニアリング・デザインと全ての観点において完成度の高いプロダクトになり、それが弊社が大切にしている行動指針である「真摯に技術と向き合い、手段を目的として腕を磨き続け、つくり手が幸せに働ける居場所を作る」の持続的実現に繋がると考えています。
異職種同士がうまく協働してプロダクトの開発をスムーズに行うために、どのようなコミュニケーションを取っているのか、デザイナーとエンジニアの双方から現場の話を聞いてみました。
目次
左：斉藤(shunta):リードエンジニア 右・石崎( id:uniq ):リードデザイナー
登場人物紹介
━━ 改まって自己紹介するのはなかなか恥ずかしいので、お互いに「他己紹介」お願いします！
エンジニア斉藤(以下、shunta): 僕がuniqさんを紹介する？
━━ ハイ(笑)
shunta: なるほど(笑) じゃあ、こちらはデザイナーの石崎さんです。社内の呼び名はuniq(うに)さん。この対談中も「uniqさん」で通しますね。
デザイナーだけどエンジニア寄りなこともできる人で、最近は手を動かす仕事が多いみたいですね。マークアップよりのことがかなりできるし、HTML・CSSだけじゃなくJavaScriptも知ってます。DIST *1 や PyConJP などイベントの運営側をよく手伝っていたりして活動範囲広いですよね。勉強しているなと思う。 使いやすさを主軸においたデザインができるデザイナーさんです。
キャリア面でいうと、ドワンゴとか大きい組織の経験があって、自分にはないので参考にさせてもらうことも多いです。 プライベートでは「犬一色」。ビルディット入社後に飼い始めたと思うんですが、それ以降Facebookの投稿がほぼ犬になってます(笑) 埼玉在住で、社内では通勤が一番遠いんですが、自分も地元が埼玉で同郷です。そのほかに楽器をやることとか共通点が多い人です！
━━ 予想以上に詳しくありがとうございます！では逆に、石崎さんから斉藤さんを紹介してください
デザイナー石崎(以下、uniq): はい、フロントエンドエンジニアの斉藤さんです。社内ではshuntaさん。私も対談中shuntaさん呼びでいいでしょうか。
shuntaさんは前職がデザインに強い受託開発会社出身。 私がビルディットに入りたいなと思って調べていたときに、「社長がバックエンドエンジニアなのでエンジニアリング優先の環境なのかな？」と少し心配に思ったんですが、shuntaさんの前職の紹介を見て、そこは心配しなくても良さそうだな〜と思ったのを覚えています。 実際は社長もわかってくれる人だったんですけどね。
UIデザインについて、デザイナーのツラミややりがちなミスも察して先回りして対応してくれる、本当に有り難い存在です。 フロントエンドっていうとJavaScriptばかりかと思いきや、バックエンド、ミドルも知識が深くて、フロントエンドのくくりでいいの？！と思いますね。 仕事でいろいろ調べたりするときに、和訳されたまとめサイトの情報じゃなくて原文(一次情報)を辿っているのがすごいと思うところ。外国語のドキュメントに対してハードルを感じてないように見えます。
あと、エンジニアって「何事もググれ」という文化だと思ってましたが、学生アルバイトさんにしっかりレビューするし、質問されたことの回答だけじゃなく周辺情報も含めて幅広くアドバイスしているのをよく見かけるので、良い先輩エンジニアだと思います。
仕事以外だと、とにかくめっちゃ食べるし食べるのが大好きな感じ。 ランチは皆で行くことが多いですけど、自分がお店の提案するときは斉藤さんが満足する量かどうか気にしちゃいますね。あとゲームと音楽に詳しい。
いま八王子に家を建築中だから本人の興味はいま家のことに集中しているのかな。奥さんとすごく仲良しでたまに出るエピソードがほのぼのしてます。
━━ すごい！こちらも詳しい！これ二人を知らない人でも人物像描けそうですね(笑)
現場で起こりがちなことは？
━━ さて本題です！ デザイナーとエンジニアで共同で案件を進める機会は多いかと思います。「協働」して作業を進めるにあたって実際にどういう所が難しいのでしょうか？課題やそれに対する対処など、あるあるな具体例を聞かせてもらえますか？
二人: まあ色々ありますよね(笑)
uniq: デザイナーとしては、エンジニアさんのタイプによっては、この大きさ・幅は何ピクセル、スペースは・・とデザインの全てを一個ずつ書き出して指定しないと、見た目を綺麗に実装してもらえないことがありますね。 パーツは一応全部入っているんだけど、レイアウトが全然違うとかね。
shunta: エンジニアの視点からは、UIが揃っていない、デザインの段階でUIが決まっていないことも結構ありますよね。 あと少し昔には画像が無いとかよくありましたね。これはZeplinやFigmaとかのツールが解決してくれて、今はほとんど問題は起こらなくなってきましたけど。
あとWeb画面のビジュアルを「アプリみたいにしたい」って簡単に一言でいうのとか。
uniq: あるある！デザインだけを考えていると、アプリだとできるからWebでもできるでしょと思いがちなんですよね。 ある程度実装をやったことがあれば、アプリと同じようなUIをCSSとHTMLとJavaScriptで作るのは結構難しいってことが分かるんだけど。 Webでは見た目をそれっぽくUIを作ってもOSやブラウザによっては想定通りに動かないということも結構あるし、環境ごとに見た目の崩れやアニメーションの挙動の確認などをやらなくちゃいけないので大変...
shunta: そうそう、元のデザインは一枚の絵みたいなものなんだけど、それをベースにしてPCの画面、サイズ毎のスマホ画面、縦と横で見る場合、処理速度の遅い古い端末の場合、、とエンジニアはそれらを考慮して実装をしないといけないから。
uniq: 画面遷移の仕方やその間のインタラクションなんかは、曖昧な指示にせず、統一性をもってデザインする必要がありますね。 ただデザイナーにしてもエンジニアにしても、各種のガイドラインを読み込んでいたり、色んなサービスを触ってる人はそんなに違和感のある実装にはならないですよね。
━━ 次々に出てきますね(笑) 今の話から、両者ともお互いの作業の過程について理解することが大事なんだというイメージが湧いてきました！
越境するとどうなるか
━━ 最初にshuntaさんがuniqさんを「エンジニア寄り」と言っていたとおり、uniqさんはエンジニアの視点も持っていそう。実務ではどうですか？
shunta: 実装しやすさを考えてデザインを作っていますよね。 例えば文章量が可変になる場合でも違和感の無いコンポーネントのデザインをしてくれてたりします。
コーディングに参加しない・実装を全然知らないデザイナーさんとは、「文章がはみ出る場合にはどうなんですか？」なんていうやりとりがしょっちゅう発生するんですが、そういった手戻りがかなり少ないですね。 あとコーディングするときに繰り返しで済むようにデザインを作ってくれますね。
でも逆に、実装面を優先してデザインを作るというのは、デザイナー的な楽しさは減るんじゃない？という気もするんですがどうです？
uniq: たしかに実装を知らないからこそ、自由に発想できるというのはあるかもしれないですね。 私は実装自体が結構楽しくて好きなので、それに縛られて嫌という感覚はあまりないけど。
実装がわかるメリットは他にも、デザインを考える時に全くのゼロベースからよりは実装ありきで必要な枠の中で考えられるから、早くデザインを上げられるようになるということもあります。
ただ、プロダクトによっては、デザインを考える上で枠を取っ払ってとにかくアイディアを出して発想を広げることが必要になるタームもありますね。 そういうときはちゃんとそうするようにバランス持ってやりたいですが、どこかで「枠」は意識しちゃっているかもしれない。
━━ uniqさんからみて、エンジニアshuntaさんのデザイナー視点はどんなところ？
uniq: 最初に言った「デザイナーのツラミややりがちなミスを分かってくれて先回りして対応してくれる」ということが大きいかな。 細かい部分を作り込まずに全体を作る時、空白部分とか細かいところの部分がどうしても甘くなるんですよね。そういうところをいちいち確認せずとも「よしなに」やってくれたり、スマホのビューをデザイナー側で作らなくても、作ってくれたり。 デザイナーによってはPCとスマホの両方をしっかり作れない人は結構いるんですよね。
shunta: 自分は「よしなにやろう」って結構言うんですけど。 PC、スマホなど多様な画面サイズでのマージン指定などを、きっちりデザイナーさんがやりきるのは時間が足りなくなるので、判断できる部分はエンジニアが "よしなに" 対応すると良いのかなと思います。
エンジニアのスタンスとして、ちゃんとデザインを作ってくれないと開発に全然着手できない、だとアウトプットが遅くなってしまうので、作りながら調節していけるように考えています。
uniq: 斉藤さんの「よしなにやる」はほんとに頼りになるんですよ！ ちょっと聞きたいんですが、Sketchで画面を作ったとしてもブラウザで見れるわけではないし、そのまま実装できるわけではないですよね。実際ブラウザで表示させたら違和感ある場合もあるし。そんな時に斉藤さんはどんな風にやってます？
shunta: 基本的にはデザイナーさんが作った通りに実装するんですけど、ちょっとした誤差なんかは各デザインガイドに則ってやることが多いですね。「よしなに」は感覚ではなくて、そういう知識や経験のベースに基づいてやっています。 逆にデザイナーさんによってはOS別のデザインガイドを把握していないこともあって、指示通り作ると違和感がある場合はちゃんと確認します。
共通言語はデザインガイド
shunta: 最近はAtomic Designのような、再利用性を意識したデザインをしていただける事が多くなってきたかなと思います。
uniq: 再利用できるというのは大事ですよね。 斉藤さんはデザインガイドもよく知っているし、UIデザインの全体的な知見があるし、デザインとの距離が近いですよね。
shunta: フロントエンドエンジニアなので、Webにも応用の効きそうな、マテリアルデザインガイドは一通り読みました。 AndroidとWebはマテリアルデザインガイド、iOSはヒューマンインターフェイスガイドライン（HIG） とか、OSごとにそれぞれの哲学があるからデザインガイドもそれぞれで、一緒でしょという人もいるけど自分はそんなに甘くないと思ってる。
uniq: その通りで、必要なことはデザインガイドを見れば全部書いてある…んだけど、実はUIデザイナーでもデザインガイドをちゃんと全部読んでいる人は少ない気がしますね(汗) エンジニア向けの内容かもしれない！ 私は必要に応じて必要な箇所をその都度読んでいる感じですけど、エンジニアさんにデザインを説明する時にどう表すか、デザインガイドがかなり参考になることに気づきました。 デザインガイドは共通言語になりますよね。
shunta: そういう共通言語を使って、お互いの領域を超えて知っていくことで良いものを作れるってことなのかなと思いますね。
越境に踏み出した、それぞれのきっかけ
━━ エンジニアなのにデザインの知見を広げ始めたことに、何かきっかけがあるんですか？
shunta: やっぱり知っていたほうが仕事がしやすいから。。でもそんなの無くてもいいという人もいるし、実際はそれでも仕事はできないわけじゃない。 自分はデザインのことに限らずですが、色々知りたくなって勉強してます。もともとの性質的に探究心が強い傾向があるみたいで、それが関係している気がします。 以前に自分の強みを知れる「ストレングスファインダー」をやった時に、探究心とか収集癖がとくに強い傾向が出てきて、なるほどなと納得しました。
あと一番初めのきっかけは、２社前に勤めていた会社の上司と実は折り合いが悪くて、、エンジニアの仕事をあまり振ってもらえなくてデザインの仕事をさせられていた、というのがベーススキルになっている気もする(苦笑)
━━ uniqさんが実装もするようになったのはいつから？なぜですか？
uniq: 前に別の記事のインタビューでも話したことがあるんですが、ドワンゴでの経験からですね。自分がデザインしたものに最初から最後まで関わりたくて、やりたいやりたいと言っているうちにこうなりました(笑) 最後まで関わりたいと思うようになったきっかけは、デザインしたものが実装されたら全然違うものになっていた経験です。自分がいいと思ったものをちゃんと作りたいなと。
shunta: そこですよね。 それぞれの領域内の知識から一歩も出なくても仕事はできる。 でも、自分の思うものをより良い形で作りたいとか、もっと仕事をやりやすくしようと思ったら、領域の外に一歩踏み出して知識を取りにいくべきだと思う。
あとエンジニアだったら、常にデザイナーと一緒に仕事する環境ばかりでもないですからね、コミュニケーションとりにくかったり、そもそも実装の段階ではデザイン作ったデザイナーがすでに離れていることもある。 その時にいちいち細かいことまで時間かけて確認したり、毎回ゴリゴリコミュニケーションして、だと自分も辛い。わかっていれば自分で判断できる範囲が広い。
越境コミュニケーションの現場
━━ ビルディットではデザイナーもエンジニアも同じ空間にいてスムーズにコミュニケーションしていますよね。一緒に開発しているし相互にレビューもしている。 でもそうする中で、自分の範疇に領域外の人から意見されると嫌な気持ちにならない？どんな感じですか？
uniq: わたしはありがたいな〜と思います。ただ自分はレビューするのに結構気を使ってしまうから苦手意識があって、ちゃんと言える人のことは関心してしまいますね。 実際、デザイナーがエンジニアのコーディングについて意見するなんて場面はほとんどないんですが、デザイナーからデザイナーへのレビューも、チーム外からのレビューも、緊張しちゃいますね。
shunta: いや、uniqさんは場数踏んでるから伝え方すごい上手いと思いますよ(笑)
uniq: ありがとうございます！ 結構気を使いつつ、自分がレビューする場合は、自分の立場とか向かうべきゴールとかタイミングを意識してレビューするようにしています。 デザイナーからエンジニアの場合、ロードが遅く感じる、画面の切り替えがキビキビしてないとかが気になったとしたら「早くしたい」とかの結論は言わずに、「ここのユーザー体験をよくしたいけど、何か良い手立てはないか？」という聞き方をするとか。
shunta: さすが！自分もデザイナーさんに対してデザインへの意見をいうことは実際ほとんどないですね。プロフェッショナルの部分には信頼を置いてます。手が回らないところを手伝うスタンスです。
━━ お互いに適度に配慮しつつのコミュニケーションも、良い議論の一要素なんですね。そして適度に配慮ができるのも、相手の技術への理解があるからこそ。
協働の現場だから生まれる、共感と創造
━━ では、今はuniqさんとshuntaさん、別のプロダクトを担当していますが、一緒のプロダクトを作るとしたらどんなの作りたいですか？
shunta: お互いに仕事の効率が上がるようなツール、プロジェクトやタスク管理ツールに結構興味がありますよね。
uniq: ですね！Sketch、XDのプラグインとか、、「こういうプラグインあったらいいな」っていうイメージを私が作って、shuntaさんが実際にそれを作ってくれるとか！ 私はデザインの仕事しなくていいかもしれない(笑) プロダクトのランディングページを作ろうかな〜
shunta: 自社事業としてそういうのやれるとかっこいいですよね。
uniq: やってみますか！
ありがとうございました！ いま二人は同じプロダクトに携わっているわけではないのですが、同じ空間にいて、境界を踏み越えた知識で切磋琢磨しているからこそ、ビルディットの協働しあう空気がさらに濃くなったいるんだなと実感しました。
こんな空気感で一緒に成長したい仲間を少しずつ増やしていきたいと思っています。 ご興味をお持ちくださった方、ご応募・問い合わせお待ちしています！
*1:Uniqが運営スタッフとして参加しているDIST（ディスト）は、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティとして定期的に勉強会などを企画開催されています。運営指針に共感し、この11月からビルディットもスポンサーとして協賛しています dist.connpass.com
