キャリア Vol.945

「エンドユーザーの評価は“コーディング”に掛かっている!」Webデザイナー3人に聞く、フロントエンドエンジニアへのホンネ

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

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

Webデザイナー
<左>Sさん
前職は教育系の企業で自社サイトのデザインを担当。現職では健康食品のLPや公式HPのデザイン作成に携わっている
<中央>Uさん
前職は文房具メーカーのWebデザインを担当。現在は広告代理店で、主に化粧品会社のLPやバナー制作に携わっている
<右>Kさん
もともとは紙媒体のデザイナーだったが、Webデザインが主流になり始めてから徐々にWebデザインへシフトした。現在は主にチームマネジメントを行っている

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

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

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

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

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

Webデザイナー

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

――指示を守らない?

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

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

Webデザイナー

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

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

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

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

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

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

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

Webデザイナー

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

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

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

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

Webデザイナー

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

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

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

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

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

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

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

Webデザイナー

Uさん:デザインの目を養う方法としては、やっぱりWebサイトをひたすら見ることですね。私たちデザイナーも、「2019年の流行デザイン10選」みたいなサイトを見て都度勉強しています。特にファッション業界や大手企業はブランディングに力を入れているから、最新のデザインや技術が学べると思いますよ。

Sさん:デザイナーはそういったサイトのビジュアルを見てデザインの勉強をしますが、エンジニアはそのサイトのソースを見て、「こういうデザインが来たらこういうふうにコーディングするんだな」と考えてみるのも勉強になりそうですね。

Kさん:そして何度も言うようだけど、とにかく大事なのはデザインだけでもコードだけでもなくて、そのサイトを見るエンドユーザーへの意識。お互いにそこを意識して、協力し合えたらいいなと思います。

取材・文・撮影/河西ことみ(編集部)

この記事が気に入ったらいいね!しよう

エンジニアtypeの最新情報をお届けします

RELATED POSTS関連記事

JOB BOARD編集部おすすめ求人

株式会社システム・リノベイト
記事検索

サイトマップ



記事ランキング

「僕らはVRづくりを急ぎすぎてしまった」VR ZONE、MAZARIAの開発者が描く“VR爆発的普及”への道筋【コヤ所長×タミヤ室長】

「僕らはVRづくりを急ぎすぎてしまった」VR ZONE、MA...

SIerって本当にヤバいの? ひろゆきが語る、業界ごと沈まないためのキャリア戦略

SIerって本当にヤバいの? ひろゆきが語る、業界ごと沈まな...

データサイエンティストとは?平均年収・将来性・目指し方を解説!

データサイエンティストとは?平均年収・将来性・目指し方を解説...

英文メールでよく見る「略語」の意味は?アメリカ&シンガポール企業で働くエンジニアが解説

英文メールでよく見る「略語」の意味は?アメリカ&シンガポール...

『N高投資部』講師がエンジニアに伝えたい「AI時代に数学が新たな人生を拓く可能性」

『N高投資部』講師がエンジニアに伝えたい「AI時代に数学が新...

TAGS

「type転職エージェント」無料転職サポートのご案内