登場人物紹介

名前：土谷光

担当：フロントエンドを中心に開発

経歴：SI 業界で金融や物流企業の基幹システムをJavaで作る仕事からキャリアをスタート。その後 GMOペパボ、 CAMPFIRE を経てone visaに参画。

名前：西垣静

担当：UI デザイン・UX 設計・デザイン全般を担当

経歴：サイバーエージェント、クックパッドなどで様々な新規サービスの立ち上げ、運用に従事。

その後フリーランスとして Stripe.Inc、株式会社マナボ、など多数の企業のプロダクトのデザインやデザイナーの育成に携わる。特技はイラストで、本の挿絵なども手がける。

フロントエンドエンジニアの本音企画後編！

西垣：今回はフロントエンドを中心に開発されている土谷さんにインタビューをしようというコーナーの後編です！

今回は、「デザイナーからみたフロントエンドエンジニア」というテーマで進めていければと思います。

土谷：西垣さんインタビューの時堅い調子になりますよね（笑）

西垣：（笑）

↓前編はこちら

デザインデータは正解ではない。議論を通して完成形を目指す

早速ですが、私と進める上でやりやすいところとやりにくいところを教えてください（笑）

土谷：まるで今なにか問題があるかのような質問ですね（笑）

西垣：問題、ありますか？！

土谷：いまは、ないですね。ないと思っているんですけど（笑）

西垣：ですよね！！よかった〜〜〜

土谷：やりやすいところは、いま開発体制としてデザインの部分と実装の部分が綺麗に分かれていて、そこでの衝突がないというのは非常にやりやすいですね。

西垣：ですね。私のデザインを実装に落とし込む上でのやりにくさは特にないですか？要求水準が高すぎるとか。

前編の方で「フロントエンドは実装とデザインの妥協点を見つけるのが仕事」みたいな話もあったと思うのですが、妥協点を探る上で発生するコミュニケーションのやりにくさはありますか？

土谷：むしろコミュニケーションの面ではすごくやりやすいと感じています。

デザインとしてこうするのが正解というのは示しつつ、実装の観点からするとこういう配置の方がやりやすいとか、こうした方が矛盾がないという提案を僕からすることが多いのですが、かなり柔軟に受け止めてもらえていますね。

西垣：それはわたしも同じくやりやすさを感じている部分ですね。

色々と考えてデザインを作るのですが、それが正解でその通りに実装してほしいとは思っていないんですよ。

私はエンジニアリングのことは詳しくないので、実装の観点から見た組みやすさ等は提案いただけるとそうだなと思いますし、今後運用していきやすいほうがいいと思うので。

土谷：西垣さんが最初に理想像を作って、その後対立するのではなくて、理想像に向かってディスカッションすることができています。それが完成形ではないというのをお互いに理解しているのがいいですね。

プロダクトに向けて話すので激しい議論も引きずらず「1時間経つと忘れている」

西垣：とはいえ、使いやすさの観点から譲れない部分があるケースもあって、そういう時は激しめのディスカッションになることもあるのですが（笑）

土谷：ありますね（笑）ちょっとバチバチするやつ。

西垣：そういう時に、私だけが強く主張するのではなく、土谷さんの方からもしっかり意見が返ってくるのがとてもありがたいです！

どちらか一方が強く主張すると、引かれてしまって何も言えなくなるというのが一番良くないと思っているので。

土谷：そうですね。あの人怒らせたら怖いから黙ってよとか、最悪ですよね（笑）

西垣：きちんとお互いが「これならいいよね」という落とし所を見つけられて、かつその後一切引きずらないようにやれているのがいいです。

土谷：確かに一切引きずらないですね。翌日にはすっかり忘れているという。

翌日といわず1時間で忘れてますね。（笑）

西垣：会話がしっかりと出来ているので、なぜそうなるのかをしっかり理解した上で前に進めるので、不満もたまらないです。

土谷：あくまで人間対人間というよりはプロダクトの方に向かってディスカッションをしているだけなので。当然人格攻撃とかはないですし、だからこそ引きずらないんでしょうね。

西垣：人格を攻撃されたなんて思ったこと一度もないです。（笑）

名前をつけてコンポーネントの粒度を揃える。やはり議論は避けて通れない

西垣：話は変わりますが、ちょっと前に SPA 化の作業をしている時に私と土谷さんの間でコンポーネント*に対する粒度が違うという話があったじゃないですか。

私はどちらかと言うと見た目的にくくりやすいグループでコンポーネントを組みがちで、土谷さんは機能的に似ているものをグルーピングしてコンポーネントを作りがちでと。

土谷：そうですね。これの何が問題かと言うと、なにかコンポーネントを作る時に、複数の画面で汎用的に使われることを想定して作るのか、うちのドメインの話でいうとビザの申請の段階を表すことに特化したコンポーネントとして作るのかだと作り方も大分違って来るのですが、この認識がずれがちであったと。

つまり、1個の画面のデザインデータを見た時に、そのコンポーネントが共通的に使われるものか、その画面に特化したものとして使われるのかを実装を担当する側とデザイナーの間で認識をすり合わせて進める必要があったんです。

その認識のすり合わせのために用いたのが、「コンポーネントに名前をつける」という手法で、例えば「step bar」という名前なのか「visa application step bar」という名前になるのかで、ある程度そのコンポーネントが汎用性を持ったものなのか特定の使われ方を想定されているのかが分かると。

西垣：コンポーネントに命名するようになってから割と認識がずれなくなった気がします。

*コンポーネントとは：要素、シンボルなどとも呼ばれる。ここでは、画面の中に存在する要素のかたまりが、複数の画面で共通的に使われるものとしてグルーピングされるのか、特定のページに特化して使われるものなのかの認識が、エンジニアの土谷とデザイナーの西垣の間で異なっているという話をしている

ただ、コミュニケーションが多くなるので、そこを何とかできないものかと、以前 Atomic Design の考え方を参考にしてみたことがあるんです。

Atomic Design：http://atomicdesign.bradfrost.com/

土谷：そうそう、試行錯誤しましたね。僕たちは当時 Atomic Design に「これさえ守ればコミュニケーションをしなくても意思の疎通が図れる」ようなコミュニケーションコストを下げる「銀の弾丸」を期待していたんです。

西垣：Atomic Design は枠組みを提供してくれるけれど、コミュニケーションをなくすようなものではないですよね。

土谷：そうでしたね、原典でもコンポーネントの粒度の話だけではなくワークフローを含むコラボレーションについても触れられています。

結局、会話を避けては通れないというところに立ち戻り、今は最初にしっかり話をしてから進めるようにしています。またコミュニケーションの齟齬を減らすために Atomic Design を参考にコンポーネントの分類を定義して文書化しました。

西垣：対面で一つの画面を見ながらコンポーネントを分類したり、コンポーネントの名前を言い合ってます。これは結構いいです。

土谷：議論から逃げないチームになってきている感はありますね。

チームが直面→解決した課題は「お約束」に記録

西垣：あと、「お約束」というドキュメントにチームで話した内容はまとめられてるじゃないですか。あれ私いいと思います

土谷：一度課題に直面して、解決までたどり着いた方法や、上手くいかなかった方法をまとめる文章を作っています。これは全員の合意を元に作っていますね。

西垣：モーダルについてのガイドラインとかも、結構評判いいんでしたっけ？

土谷：評判といっても数人ですけどね（笑）

one visa の開発ってまだ決まってないことが多いじゃないですか。何が正しいというわけじゃないんですが、こうしたほうが後々やりやすいであろうというものに関しては予め決めておくようにしています。

モーダルウィンドウとか、デバイスのサイズごとの表示をどうするかとか、割と全般的に影響するものに関しては最初の段階でかっちり決めていますね。

一緒に働きたいエンジニア像は「議論から逃げない人」

西垣：今は one visa のフロントエンドは土谷さん1人ですが、新しい人が入るとするとどういうタイプの人が欲しいですか？

土谷：フロントエンドエンジニアって会社によって定義がまちまちなのですが、one visa は SPA を採用していることもあって、担当領域が明確に分かれています。

今だと API を作るバックエンドがいて、デザインを起こすデザイナーがいて、フロントエンドエンジニアは丁度その中間です。

なので、どうしても API 側、デザイン側とのコミュニケーションは避けて通れません。

そこに対して臆さず行く人がいいですね。

西垣：会話をしてくれて、ディスカッションが出来ることは必須ですね。

土谷：あと、one visa はなんだかんだスタートアップで何もかも整備されているわけではないので、すでにあるものに疑問を感じない人ではなく、どんどん疑問を持って変えていける人がいいですね。

スキル的には Vue.js が好きで、 SPA などモダンなフロントエンドを実装したいという人にはうってつけだと思いますね。

大きい会社で働いている方は、部分的な SPA 化を経験している方はいらっしゃるかもしれないですが、全部 SPA で、というのはなかなかないと思うので、面白いと思います。

西垣：一緒におもしろがってくれる人が来てくれるといいですね！

====

最後までお読みいただきありがとうございました！

と、いうわけで、one visaでは現在一緒に働いてくれるエンジニアを大募集中です！

興味がある人はまずは気軽にオフィスに遊びにきてみませんか？

以下の代表インタビューと開発メンバーの座談会記事も是非ご覧ください。