Adobe MAX Japan 2025 セッションレポート：Web サイト制作でデザイナーがエンジニアと円滑にコミュニケーションを取る方法は？

先日開催された Adobe MAX Japan 2025 には、セッション講師として一人だけエンジニアが登壇していました。長谷川巧氏は、クリエイティブな要素が複雑に組み合わされたデザインの実装を数多く手掛けてきたエンジニアです。そうした経験から、長谷川氏は、デザイナーとエンジニアの円滑なコミュニケーションの重要性をよく理解しています。

“エンジニアが実装したものがデザインの意図を汲み取れていない場合や、想定していた仕様に沿っていない場合、それらを修正するために余計なコミュケーションが発生してしまい、プロジェクト終盤でのクオリティの向上に割く時間を圧迫されてしまうことがあります。”

デザイナーにとって、経験豊かなエンジニアの話を聞く機会は貴重です。長谷川氏は、セッション会場に集まった大勢の参加者に向かって、実装者の立場からデザイナーに伝えて欲しい仕様、仕様をより良く伝えるために利用できる手段、デザイナーも知っていた方が良い基本的な技術知識などを紹介しました。

1. プロジェクトを成功させるという心構え

長谷川氏は、サイト制作プロジェクトにおけるデザイナーのゴールは、デザイン通りに実装してもらうことではないと話しました。より大きな視点から、プロジェクトを成功させるために必要なことを意識して、スケジュール通りに予算内で、制作チーム、クライアント、そしてユーザーが満足できるサイトをつくることを目指すべきという考えです。

ただし、これはデザイナー個人が頑張ったからといって実現できることではありません。プロジェクトの要件やアサイン次第では、いつも以上にコミュニケーションコストが発生することもあるでしょう。そのため、チーム全員が「足りないものをチームとして補い合い、現実的な落としどころを探りつつプロジェクトを進行する」という意識を持ち続けることが大切だと長谷川氏は強調しました。

2. エンジニアが Web サイトを実装するときに気にする点

エンジニアが web サイトを実装するときに気にする点を知れば、デザイナーがエンジニアに伝えるべき項目がわかります。セッションでは、「ルールと共通パーツ・UI」「フォント・タイポグラフィ」など、カテゴリ別にエンジニアが気にする点が紹介されました。例えば、「ルール」であれば、「コンテンツ同士の余白やフォントサイズに規則性があるか？ルール化は可能か？」、「共通パーツ・UI」であれば、「使いまわせる UI があるか？コンポーネント化できるか？」といったことを思考しながら、長谷川氏は実装を進めているそうです。

また、web サイトには動的な側面が存在するため、デザインカンプは「特定の状態のスナップショットでしかない」と長谷川氏は指摘します。エンジニアは、サイトを実装する前に、実際に発生することになる様々なサイトの状態の変化を網羅的に仕様に落とし込む必要があります。デザインの動的な側面を理解すれば、エンジニアが知りたがっている点をよりよく理解できるはずです。

3. エンジニアとの共通言語

エンジニアと技術的な仕様について会話をする際、技術用語を使えるとやり取りがよりスムーズになります。とはいっても、実装者レベルの知識を持つべきという話ではありません。サイトの見た目や挙動に関連する主要な技術の基本を覚えるだけで、エンジニアとの会話はずっと効率的になるそうです。

長谷川氏は、これだけ覚えておけば、エンジニアとのやり取りのコストが減らせる上に、実装しやすいデザインができるかも知れないと、 OS・デバイス・ブラウザごとの挙動の違いや、フォントの種類、CSS の一部の仕様などを、実際の例も交えつつ紹介しました。

4. やり取りの際に意識した方が良いこと

最後のセクションは、伝え方に関わる件です。話さされたポイントのその 1 は、「なるべく具体的に伝える」です。もちろん、どこまで詳細にデザイナーが伝えて、どこからエンジニアに任せるのかは状況次第です。例えば、始めてチームを組むエンジニアや、まだ経験の浅いエンジニアと働くのであれば、通常よりも「なるべく具体的に」が重要になります。

テキストだけでなく、リファレンスサイトも示せば、視覚的に伝えることができます。また、アニメーションの指示であれば、絵コンテや映像が有効です（映像作成は手間のかかる行為ですが）。長谷川氏は、実際にコメントや絵コンテが書き込まれたカンプを紹介し、どのような指示が与えられると、エンジニアとして嬉しく感じるかを語りました。

意識した方が良いポイントのその 2 は、「後で参照したいものは参照しやすい場所にストックする」です。一般的なコミュニケーションツールでは、書き込んだ内容がタイムラインを流れて消えてしまいます。一方で、人間は忘れる生き物です。そのため、後で言った言わないにならないように、とにかくログを残すことが大事だと長谷川氏は言います。

ログは、参照しやすい場所に集約することで、検索時間を節約できます。ただし、保存場所は、情報の種類によって使い分けた方がよいと長谷川氏は話しました。デザイン修正のタスクであればタスク管理ツール、UI のリファレンス URL はデザインデータに直接記述、決定した仕様は Wiki、のようにルールが定まっていれば、複数個所にログが存在していても問題ないそうです。

まとめ

デザイナーとエンジニアのコミュニケーションは、プロジェクトの進行や制作物の質に大きく影響を与えます。デザイナーとしては、実装時に必要になる情報を知り、実装に関わる技術の基礎知識を身に着けることで、コミュニケーションコストを減らせるだけでなく、より質の高い制作物をつくれる可能性があります。

当日の資料が公開されていますので、興味のある方はぜひダウンロードしてご覧ください。きっと今後のプロジェクトの役に立つと思います。