Webデザイナーが押さえておきたいエンジニアとの連携ポイント by 沖良矢氏

「デザイナーとエンジニアが一緒に仕事をするうえで、コミュニケーションのズレは避けて通れません。今回はその“よくあるズレ”をどう乗り越えるかについて話したいと思います」

そう語るのは、合同会社世路庵の代表でインタラクションデザイナーの沖さん。Web制作に20年以上携わってきた経験から、デザイナーとエンジニアが連携し、良い成果物を生み出すための工夫を、ユーモアを交えながら紹介しました。

LTの冒頭では、まず「デザインカンプと実装された画面が違う」という問題について取り上げられました。

よくあるのが、デザイナーがFigmaやPhotoshopなどで作成したカンプを「完璧だ」と思って渡したのに、実装されたWebページを見て「なんか違う…」と感じてしまうケース。

一方エンジニアは、「指定通りに作ったつもりなのに、なんで！？」という気持ちになる。こうした認識のズレは、互いの立場での常識やツールの違いによって生まれると言います。

その背景には、レスポンシブデザインの普及があります。「PCだけを想定していた時代は、ツールも工程も分業でうまく回っていた」と沖さんは語ります。

しかし、スマートフォンやタブレットなど、さまざまな画面幅への対応が求められる現在、単に「PC用」と「モバイル用」の2種類のカンプを用意するだけでは不十分。「その“間”を誰が設計するのか」が曖昧なまま、トラブルが発生してしまうというわけです。

具体的な失敗例として、幅を縮めたときに要素がはみ出したり、余白が崩れたりする「カンプ外の破綻」が紹介されました。特にデスクトップ用のカンプしかない場合に「よしなにお願いします！」と丸投げされてしまうと、エンジニア側は困ってしまいます。

また、沖さんは「デザインカンプはただのスナップショットでしかない」とも強調します。実際のWebページは、状態によって見た目が変化するもの。例えば「読み込み中」「エラー発生」「データが空」のようなケースも考慮する必要があります。

この点を意識せずに作ったカンプは、実装後のトラブルのもとになりやすいというのです。

「ラベルの文字が長くなったらどうなるか」「ボタンが無効状態のときの見た目は？」といった、よくあるUIの状態変化に対しても、事前にデザイナーが想定しておくことが重要です。

沖さんは「UI Stack」という5つの状態分類（未入力・読み込み中・部分的・エラー・理想状態）を紹介し、「これだけ押さえておけば、だいたい破綻しない」とアドバイスしました。

では、こうした認識のズレをどう防ぐべきなのでしょうか。沖さんは「デザインの意図を明文化することが鍵だ」と語ります。

例えばカンプに対して「この余白は固定」「この色は主要アクション用」といった注釈を加えるだけでも、受け手の理解度がぐっと変わります。Figmaなどのツールを使えば、スタイルやカラーパレットを整理して共有することも容易です。

フォントや画像の扱いも、しばしば問題になるポイントです。日本語フォントを多用しすぎてパフォーマンスに影響したり、書き出された画像の命名やサイズが適切でなかったりと、細かい部分で齟齬が起こりやすいのです。

こうした箇所も「なんとなく」ではなく、設計意図をしっかり伝えることで解決につながります。

このように、デザインと実装の橋渡しをスムーズにするには、単にカンプを作って渡すだけではなく、「一緒にデザインする」という姿勢が大切です。

沖さんは「デザイナーとエンジニアが、お互いの立場を尊重しながら“最終成果物”をつくる意識を持つことが、もっとも重要なポイント」だとして、セッションを締めくくりました。

エンジニアとして仕事をしていると、「このデザイン、どう実装すれば…？」「なんでここ、指定ないの？」と思ってしまうこともあります。

つい防衛反応でデザイナーさんとバチバチしがちですが、今回のLTを通して、「そもそもゴールは同じなんだよなあ」と改めて感じました。

いいプロダクトを作るには、お互いの立場を理解し合って、しっかりコミュニケーションを取りながら進めることが大事ですね。