フロントエンドの仕事をしていると、「これって、どこまで聞いていいんだろう」と思う瞬間がある。
デザインは決まっている。
仕様も一応、固まっている。
でも、実装に入ってみると「ここ、どう考えて決めたんだろう？」と引っかかる。
聞けばいい、とは思う。
ただ、毎回それをやっているわけでもない。
今回は、普段は仕事の途中ではなかなか聞けないことを、デザイナーの中村さんに、あらためて聞いてみることにした。
フロントエンドとデザイン。
近いようで、意外とちゃんと話していない、この距離感について。
目次
「聞きたいけど、毎回は聞いていない」
林：
最初にちょっと前提の話をすると、フロントエンドって、デザインが完成してから関わることが多いじゃないですか。
だから、「決まっているものを、正確に再現する」っていう意識で入ることが多いんですけど。
実装していると、
「これ、どういう判断でこうなったんだろう？」
って思うことが、正直あって。
これ、聞きたいんですが、毎回聞いてるかというと、そうでもなくて。
中村：
うん、分かる気がする。
林：
聞かずにどうしてるかというと、自分なりに理由を想像して、「多分こういう意図かな」と判断して進めることも多いです。
ただ、それが本当に合っているのかは、分からないまま終わることもあって。
だから今日は、フロントエンド側の立場でいろいろ聞いてみたいんですが。
デザインの判断は「好き・嫌い」じゃない？
林：
まず一番聞いてみたかったのが、デザインの判断って、どこで決まっているのか、というところで。
外から見ると、「感覚」とか「センス」で決まっているように見えてしまうこともあって。
これは、聞いてみたいんですが、デザインチームとしてはどういう材料で判断していることが多いですか？
中村：
「センスで決めてる」って思われがちだけど、実際は、かなり地味な判断の積み重ねだと思う。
たとえば、
・情報の優先順位
・ユーザーが迷わないか
・前後の文脈とのつながり
とか。
「好き・嫌い」で決めているというより、
「ここで迷わせないために、こうする」
みたいな判断が多いかな。
林：
なるほど。
フロントエンド側だと、完成したデザインだけを見るので、その途中の判断が見えないんですよね。
だから、「なぜここがこうなったか」がブラックボックスになりがちで。
実装して初めて分かる「決めきれてなかった部分」
林：
もう一つ、実装していてよくあるのが、「ここは決まっていると思っていたけど、実は決まっていなかった」ケースで。
これ、聞きたいんですが、デザイン側から見てもそういうことってありますか？
中村：
あるあるだね。
デザインしている側としては、「このくらいなら伝わるだろう」と思って省略している部分が、実装フェーズで問題になることはある。
たとえば、ホバー時の挙動とか、レスポンシブで崩れたときの優先度とか。
林：
そうなんですよ。
フロントエンド側としては、「決めていいのか、聞くべきか」で迷って、結局、自分で決めてしまうこともあって。
あとから「そこは違った」となると、「じゃあ、どこまでが自分の判断だったんだろう」ってなるんですよね。
中村：
それは、
「任せたつもりで、実は任せてなかった」
状態かもしれない。
「任せてほしかった」ポイントはどこ？
林：
逆に、デザイン側として「ここは任せてほしかった」って思うポイントも、聞いてみたいんですが。
中村：
レイアウトの意図を壊さない範囲での微調整とかは、正直、フロントエンドに任せたい部分も多い。
全部を細かく指定すると、逆に動きづらくなることもあるから。
林：
それ、フロントエンド側からすると結構ありがたい話で。
ただ、
「どこからが任せていい範囲か」が共有されていないと、怖くて触れない、というのも正直あって。
中村：
そこは、チームとして言葉にしておかないといけない部分だね。
「感覚だから説明できない」で終わらせると、判断の材料が共有されないままになる。
分けているのは、役割じゃなく「判断」
林：
今日話していて思ったのは、分けるべきなのは役割というより、判断なんだな、ということで。
全部を理解しようとすると詰まるけど、全部を任せきると、今度は判断がブラックボックスになる。
中村：
そうだね。
「ここはデザインの判断」
「ここは実装の判断」
って、あらかじめ線を引くというより、どういう材料で決めているかを共有できているか、が大事だと思う。
林：
それが分かっていれば、フロントエンド側も安心して判断できる。
聞きたいことを聞かずに進めるより、聞いていいポイントをお互いに分かっているほうが、結果的に早い気がします。
この話を、現場に持ち帰るとしたら
林：
今日の話を聞いて、自分の会社に持ち帰るとしたら、まずやりたいのは「聞いていいポイント」をちゃんと確認することだと思いました。
フロントエンドって、実装に入ると「ここは自分で決めていいのか」「一回止めて聞くべきか」で迷う場面が多いんです。
今までは、その場その場で判断して、結果的に合っていればOK、違っていたら直す、みたいなやり方をしてきました。
でも、今日みたいに「どんな材料で判断しているか」を一度ちゃんと聞いておくだけで、その後の迷いは減らせそうだなと感じました。
聞きたいことを毎回全部聞く、というより、
「ここは聞かなくていい」
「ここは聞いてほしい」
の境界を、最初にすり合わせておきたいですね。
中村：
デザイン側としては、
「決めたつもりで、実は決めきれていなかった」
ところを、ちゃんと自覚する必要があるなと思いました。
デザインを作っていると、どうしても
「ここは伝わるだろう」「ここまで言わなくても大丈夫だろう」
と省略してしまう部分がある。
でも、それが実装に入ったときにフロントエンドの判断を必要以上に重くしている、ということもあるんだなと。
会社に持ち帰るなら、「ここは任せていい」「ここは必ず確認してほしい」というポイントを、言葉で残すことを意識したいです。
感覚でやっている部分こそ、あとから振り返れる形にしておかないと、同じズレが繰り返される気がします。
編集部：
この対談で出てきた話は、デザイナーやフロントエンドエンジニアの「一般論」ではない。
中村の話も、林の話も、それぞれがこれまで働いてきた会社や、関わってきたチームの中で、試行錯誤してきた結果の一つだ。
だから、このやり方がどの現場でも正解、というわけではないし、誰にとっても当てはまる話でもない。
会社によって、デザインとフロントエンドの距離感は違う。
人によって、任されたい範囲も、確認したい範囲も違う。
今日の話を、そのまま真似する必要はないし、「こうしなければならない」という正解を見つけるための記事でもない。
ただ、「自分の現場ではどうだろう」「どこで判断が分かれているだろう」と立ち止まって考えるための、一つの材料として受け取ってもらえたらいい。
フロントエンドが全部を理解しようとすると詰まる。
デザインが全部を抱え込むと、判断が閉じる。
そのあいだにあるのは、
能力の差でも、立場の違いでもなく、
判断の前提が、どこまで共有されているか、
という問題だった。
この対談が、普段は聞かずに流してしまっている違和感を、
言葉にするきっかけになれば、それで十分だと思っている。
