デザイナー・コーダー分業体制での意図伝達の課題
デザイナー・コーダーの分業体制でWebサイトを制作する現場では、デザインカンプ（デザイナーが作成したWebサイトの完成図）と1ピクセル単位で完全に一致させる「ピクセルパーフェクト」を重視する場面があります。これは表現の完全再現を目指すアプローチですが、本質的な問題があります1。
重要なのは表現の再現ではなく、デザイナーの意図の正確な実現です。
表現の完全再現が抱える根本的矛盾
375pxの画面幅で完璧に見えるサイトでも、390pxや414pxの画面では崩れてしまう。これは表現の完全再現に固執した結果です。
デザイナーの本来の意図は「どの画面サイズでも適切に情報を伝える」ことのはずです。しかし、特定の画面幅での表現のみを完璧に再現しても、その意図は実現できません。
現代のWebサイトは、スマートフォンからデスクトップまで様々な画面サイズで閲覧されます。375pxや1440pxといった特定の画面幅での表現を完璧に再現するより2、すべての画面サイズでデザイナーの意図を適切に伝えることの方がはるかに重要です。
意図を損なう表現への固執
デザインシステムには「デザイントークン」という概念があります3。これは、余白、色、文字サイズなどの設計値を統一的に管理する仕組みです。例えば「基本の余白は16px」「見出しの下マージンは24px」といったルールを決めて、サイト全体で一貫性を保ちます。
デザイントークンは、デザイナーの意図を体系化したものです4。サイト全体の統一感や使いやすさを実現するための重要な指針といえます。
ところが、表現の完全再現にこだわるあまり、このデザイントークンで定められた値を歪めてしまうケースがあります。「デザインカンプと1ピクセルでも違うから、16pxの余白を15pxに調整しよう」といった判断です。
これは意図を損なう行為です。局所的な表現の一致のために、デザイナーが込めた全体設計の意図を破綻させてしまっています。
意図の理解こそが実装の本質
HTML/CSSによるコーディング（デザインカンプを実際に動くWebサイトに変換する作業）5の本質は、デザイナーの意図を正確に理解し実現することです。表現の完全模写ではありません。
表現の再現とは、デザインカンプの画像と寸分違わぬ表示を目指すことです。一方、意図の実現とは、デザインに込められた目的や狙いを適切に機能させることです。
レストランのメニューを考えてみましょう。料理の写真と全く同じ見た目の料理を提供することが目的ではありません。美味しい料理を作り、お客様に満足してもらうことが目的です。写真は、その意図を伝えるための表現手段に過ぎません。
Webデザインも同様です。デザインカンプは、ユーザーに最適な体験を提供するという意図を表現した設計図です。コーダーの役割は、その意図を正しく理解し、様々な環境で適切に機能するよう実装することです。
デザイナーからユーザーへの意図の橋渡し
デザインの本質は、デザイナーからユーザーへの意図の伝達です。情報を整理し、使いやすい形で提示し、ユーザーが目的を達成できるよう支援する。これがデザインの役割です。
コーダーは、この意図の橋渡し役を担っています。デザイナーが込めた意図を正確に理解し、ユーザーに適切に届ける責任があります。
ユーザーは375pxや1440pxの画面でサイトを見るとは限りません。350pxかもしれませんし、1920pxかもしれません。縦向きで見る人もいれば、横向きで見る人もいます。
表現の完全再現は、この現実を無視したアプローチです。特定の条件下でのみ完璧な見た目を実現しても、デザイナーの真の意図はユーザーに届きません。
意図に基づいた表現手法の選択
デザインカンプの375pxや1440pxは、デザイナーの意図を表現するための一つの手段に過ぎません。これらの画面幅を固定的な完成形として捉えてはいけません。
デザイナーの真の意図は「最も狭い画面から最も広い画面まで、すべての幅で適切に機能すること」にあります。代表的な幅でデザインを作るのは、この意図を効率的に表現するための手法だからです。
現代のデザインツールであるFigmaなどでは、レスポンシブな挙動を確認できる機能があります6。幅を変えた時にデザインが破綻しないか、実際に検証しながらデザインを作ることが可能です。これもデザイナーの意図を正確に表現するための手段です。
コーダーも同様に、デザイナーの意図を理解した上で適切な表現手法を選択する必要があります。時には表現の微調整が必要な場合もあるでしょう。しかし、その判断基準は常に「デザイナーの意図により忠実な実装はどちらか」でなければなりません。
表現手法は意図実現のための手段
ピクセルパーフェクトも一つの表現手法です。しかし、手法が目的化してしまっては本末転倒です。
本来の目的は「デザイナーの意図を正確に実現すること」です。そのために最適な表現手法を選ぶべきです。時にはピクセル単位の調整が意図の実現に有効な場合もあるでしょう。しかし、それが常に最優先事項ではありません。
ユーザー体験の向上、ブランドの一貫性、技術的な持続可能性。これらすべてがデザイナーの意図に含まれています。コーダーは、これらを総合的に考えて、最適な表現手法を選択する必要があります。
まとめ
デザイナー・コーダーの分業体制において重要なのは、表現の完全再現ではなく意図の正確な実現です。デザインに込められた意図を正しく理解し、すべての画面サイズでユーザーに適切に伝える。デザイントークンによる一貫性を保ちながら、持続可能なWebサイトを構築する。これが現代のWeb制作における本質的な考え方です。
- TAKさん: 「悲しいことに多くのオンラインサロンはピクセルパーフェクトをやらせてるけど、大切なのはデザインの意図パーフェクトであってピクパじゃないんだよ。デザイントークンを忠実に反映して生じるズレに対してピクパさせたいからデザイントークンで定められてる余白を歪めるなんて本末転倒だよ。」 / X
- 375pxはiPhone 6/7/8の画面幅、1440pxは一般的なノートPCの画面幅として、デザインカンプでよく使用される代表的なブレークポイントです。
- デザイントークンは、Salesforceが提唱したデザインシステムの概念で、UI要素の設計値を統一的に管理する手法です。近年多くの企業で採用されています。 – Design Tokens – Salesforce Lightning Design System
- Atomic Designやマテリアルデザインなど、システマティックなデザイン手法の普及により、デザインの一貫性を保つ重要性が高まっています。 – Atomic Design by Brad Frost
- この作業は「マークアップ」「フロントエンド実装」「UI実装」など様々な呼び方があります。近年はReactやVue.jsなどのフレームワークを使用することも多くなっています。
- Figmaの「Auto Layout」や「Constraints」機能により、画面幅の変化に応じたデザインの挙動を確認できます。 – Auto layout in Figma – Figma Help Center