Webデザイナー３人に聞く、フロントエンドエンジニアへのホンネ

2019.09.30 スキル

「指示書通りに実装しているつもりなのになぜか繰り返し修正依頼をされる」「デザイナーの指示が分かりにくい」……コーダーやフロントエンドエンジニアとして普段仕事をしていると、Webデザイナーとの意思疎通に困ることは少なくないだろう。

そこで今回は、広告代理店でWebデザイナーとして働く３人に、エンジニアとの仕事で困っていることや、意識してほしいことなど、思っていることを赤裸々に語ってもらった。

細部の指示を無視されるのは悲しいけど、どこまでこだわるべきなのか……

――コーダーやフロントエンドエンジニアとの仕事で、どんなことに困っていますか？

Kさん：やっぱり自分がつくったデザインに対して、コーディング後に全く違うものが上がってきたときは、困るというか、残念だとは思いますね。

Uさん：デザイナーって基本的には、ユーザーに与える印象だとかバランスを考えた上でフォントや色、文字の行間などを組み上げているので、一つ一つのデザインに意味があるんですよ。それがコーディングを経て崩れてしまうと、「うわぁ！」という気持ちになります（笑）

Sさん：ただ、「ここの行間が５pxだと読みづらくない？」という感覚を世の中の全員が持っているわけではないから、エンドユーザーにとって自分のデザインが正解とは言えない部分もあって。妥協するところと、妥協しちゃいけないところの線引きは、デザイナーとして葛藤します。

Kさん：コーディング後にデザインと異なるものができ上がってしまうときって、原因が２つあると思うんですよ。一つは、エンジニアが指示を守らなかった場合。もう一つは、デザイナーやディレクター側の指示不足ですね。

――指示を守らない？

Uさん：守らないというか、そもそも指示書を見ないという人も多い気がします。ベースとなるCSSデータを自前で持っていて、デザインを見てフォントやサイズは反映させるけど、細かいところは調整してないみたいなことは実際よくあって。あとは、自分の感覚で気持ちの良い行間やフォントに変えられちゃうということも結構ある。

Kさん：デザインをするときって、「こっちの文字は〇pxで黒色だけど、こっちは少し柔らかい印象にしたいから△pxでグレーにしよう」とか、細かい部分まで調整しているんだけど、そういうエンジニアはそこまで見ていないんだろうなと思います（笑）

Sさん：この場合はおそらくコーディングしたデータとデザインデータを見比べるということもしていないですよね。見比べても、「こことここが違う」ということに気付けないとか。そういう人はデザインにあまり興味がないのかな。

Uさん：「ソースコードが綺麗だったらOK！」みたいな感覚があるのかもしれない。でも、今の時代のWebコンテンツはビジュアルとして綺麗であることも重要になっているから、エンドユーザーとしてどう見えるかというところまで考える意識は持ってほしいですね。

表現の幅が無限大になった今、互いの領域への“気遣い”が欠かせない

――なるほど。もう一つの「デザイナーやディレクター側の指示不足」についてはどうでしょう？

Kさん：先ほどはエンジニア側の意識の話をしましたが、実際、トラブルの多くはこちらが原因だと思います。僕たちの指示が至らないことも多々ありますし、デザイナーとエンジニアの間にディレクターや制作会社が入る場合は、その人の指示の出し方によってこじれてしまうこともよくありますから。

Sさん：スマホが普及してからリキッドデザインやレスポンシブがごく当たり前になってきましたけど、デザイン自体は固定の画面幅で表現するから、動き方の部分まで指示が至らないことは多いですね。例えば、PCでブラウザのサイズを大きくしたり小さくしたりするときに、キービジュアルをブラウザに対して100％で表示するのか、それとも一定のサイズで固定にするのかとかまで考えなくちゃいけなくて。

Uさん：指示がちゃんとできていないと、「大きい画面で見たらキービジュアルがめちゃくちゃデカくなっちゃった！」みたいなことになる（笑）。こういう時は、こちらの指示が足りなかったなと、ただただ反省です。

Sさん：デザインはもちろんですが、最近はCSSもかなり発達してきていろんなことができるようになったから、コーディングで求められることも多くなりましたよね。今まではフォトショップで画像パーツを作って、それを並べればWebサイトが作れたけど、最近はオファーボタンや写真のトリミングも全部CSSで指定しますし。アニメーションのパターンも増えてきたから、表現の幅も無限大になって。だからこそ、デザイナーとエンジニアの意思疎通が一層必要になってきたなと思います。

Kさん：うまく連携をするためには、お互いに気を遣うことが一番大事。エンジニア側に最低限のデザイン知識はあってほしいけど、同時に僕らもCSSでできること、できないことを知っておかなければいけないし。エンジニア泣かせのデザインを組んでしまうこともよくあるから、そういう時は「ごめん……」って気持ちを忘れないとか（笑）

Sさん：あと、慣れているエンジニアだと、こちらの指示が甘くても意図を汲み取ってくれたり、質問したりしてくれますよね。「こういう指示をもらっているけど、後々ここがネックになるからこういう調整をしてもいいですか？」というふうに。

Kさん：そうですね。そういうふうに、ただ指示の通りに実装するだけじゃなくて“自分も制作の一部のパートを担っている”という心構えで、自分なりに考えて取り組んでくれる人は、やっぱりやりやすいです。

Uさん：コーディングって末端の作業みたいなイメージがあるかもしれないけど、最終的な部分を担っているからこそ、そこで形をつくり上げないと今までの努力が全て崩れてしまう。だからこそ、「自分の目でジャッジするぞ！」という意識がある人の方が信頼できますね。

Web制作に最も大切なのは、デザインでもコードでもない

――「自分の目でジャッジするぞ！」という意識を付けたり、“デザインの目”を養ったりするためにお勧めの方法はありますか？

Uさん：やっぱりまずはデザインに興味を持つことでしょうか。エンジニアはいろんな案件に携わっているはずなので、毎回「なんで今回はこういうデザインなんだろう？」と考える練習をするといいかもしれません。

Kさん：エンジニアって最新のCSSとか、技術面については意欲が高いと思うんですが、最新技術だからって何でも使えばいいわけではないし、「その技術をどういうふうに使ってどう表現するとかっこいいのか」というところまで興味を持たないと、宝の持ち腐れになってしまう。

Sさん：僕らも同じですよね。いくら流行っているとはいえ、デザイン全てにアニメーションを入れたらかっこよくなるかといったらそうではないし。

Kさん：「エンドユーザーの目線で見ること」が大事ですね。ただし、エンジニアの中には制作するコンテンツよりもプログラミングをすること自体に興味がある人も多いと思うから、そういう人には求め過ぎなのかもしれない（笑）。でも、「より良いものをつくりたい」という気持ちが大きい人にはぜひ参考にしてほしいです。