ピクセルパーフェクトが話題になっているみたい。こういう職種間の問題は、触れると危険な感じはするけど、論点がそこなのかなと思う部分がある。自分が見かけた範囲では、ピクセルパーフェクトじゃないとダメとか、そうじゃなくてもいいとか議論されていたのだけど、そもそもピクセルパーフェクトで十分なのかな？

重ねてみて揃っていればOK？

ウェブの場合、レスポンシブにしても、リキッドな部分があることが多いし、そこに入ってくるコンテンツも、いろいろなバリエーションが考えられるので、ある特定の環境、特定のコンテンツにおいてピクセルパーフェクトだということでは、十分ではない。「カンプを背面において作ればピクセルパーフェクトになる」といっている人もいるが、それはウェブのデータとしては、全然十分ではない。

重ねてみて揃っていればOKということではなく、どんな閲覧環境でも、どんなコンテンツが入ってきても問題がない状態である必要がある。デザイン側とコーディング側で、それがどこまで想定されているかという部分で、レベルが揃っている必要がある。あるいは、どちらかが、整理する必要がある。単に雑なのは別として、可変部分の多様性の解釈は、カンプだけでは伝わらない部分があると思う。

余白にしても、見た目上の位置が同じでも、paddingにするのか、marginにするのかで、多様なバリエーションのなかでの挙動が違ってくる。この範囲は、色を変える可能性があるので、paddingにしておいてもらわないと困るというようなことも考えられる。あまりいい例ではないが。

そもそもオブジェクトの位置は、背後の構造がしっかりあれば、自ずと決まってくるはずで、そうした構造やルールを決めることが重要なので、カンプを渡すだけで十分なはずはなく、他者にコーディングを任すなら、基準となる部分の数値が入り、どこが可変なのかも示した設計図的なものが必要になるはず。

隙間が生まれつつあるデザインとコーディング

デザイナーが、UX寄りや、マーケティング寄りに重心を移してきて、コーディングも技術的に高度になってきたことで、両者の間に隙間が生まれるようになってきてしまっているという状況は、よくわかる。でも、それが固定化してきてしまったことで、HTML & CSSの知識があまりないウェブデザイナーが出てきてしまっていると思う。企業の研修をさせてもらうことがあるのだけど、たまに唖然とすることがあったりする。

ウェブデザインにおいて、カンプに対して表層的なピクセルが揃っているかどうかって、それで十分ではないし、「ピクセルパーフェクトに作ってもらえたらうれしい」と思っているウェブデザイナーがいたら、認識として、かなり危険。

HTMLやCSSはもちろん、デバイスやブラウザごとの差異も、コンテンツの多様性も、コーダー以上に熟知して計算していて、「深く検討された設計があるのでピクセルパーフェクトにしろ」というなら、カンプを渡すだけでなく、そのロジックの根拠となる設計そのものを開示、提供するべきだと思う。そこが伝わっていないことが問題。

でも、そこまでは理解できていないのなら、より理解している人に任せて、ビジュアル面でのディレクションをおこなったほうがいい。実際のところ、ある程度の知識があっても、実際にコードを書いて、試してみないとわからないことはたくさんある。自分でコードを書かずに、そうした試作をしない状態で、完全な設計をすることが、本当にできるとは、あまり思えない。

ウェブデザインは未来を作る仕事

ウェブデザインというのは、多くの場合、「未来を作る仕事」なのだ。ランディングページとかでは状況が違ってくるが、CMSを使ったサイトでは、まだ見ぬコンテンツのためにデザインをしていることになる。未来には、いろいろな可能性がある。幅広い多様性がある。それを理解して、想像することが重要なのであって、ダミーテキストに揃えることが重要なわけではないと思う。

ダミーテキストで作ったカンプへのピクセルパーフェクトが目標ではなく、まだ見ぬ未来のコンテンツがパーフェクトに表現されることを目指すべきだと思うのだ。