制作フェーズでは、デザインチェックに入ると、デザイナーと細かなやり取りをしながらサイトを詰めていくことが多い。ただそれでも、「Figmaで見るのとブラウザで見るのとでは印象が違う」というギャップが生じることは珍しくない。
このギャップは防ぎようがない自然なものだ。そのためエンジニアとしては、デザイナーがギャップを埋める時間の短縮に貢献したい。
例えば、デザイナーが色の僅かな違いや、数ピクセルの違いで悩む時がある。そんな時、ブラウザ上で速やかに比較可能にすることで、デザイナーの手助けができるはずだ。
避けたいのは、デザイナーとエンジニアの間で何度も無駄な指示や修正を繰り返す、こんなやりとりだ。
デザイナー : 「背景色を#F2F2F2から#FFFにしてもらえますか？」
エンジニア : 「#FFFにしました」
デザイナー : 「#F2F2F2のままで文字を#EAEAEAにしたのも見たいかな」
エンジニア : 「#EAEAEAにしました」
デザイナー : 「やっぱり背景を#FFFにするとどうですかね」
エンジニア : 「#FFFにしました」
微妙な差異がある場合、どちらが良いか迷ってしまうのは当然だ。Figmaで見るのとブラウザで見るのと、印象が変わることは非常に多い。
例えば色味の調整であれば、同じ要素を複製して、色を変えたものを縦に並べて見れるようにすることで、デザイナーの「前の色はどうだったか」という迷いを解消できる。比較が容易になり、戻りが少なくなり、決定までの時間が短縮される。
こう考えたきっかけは、以前あるデザイナーさんから「同時に比較して見てみたい」という要望を受けたからだ。それ以降、単に言われた変更を施すだけでなく、必要に応じて比較対象を列挙できるようにしている。
もちろん、実装に時間がかかりすぎる場合は、そもそも実装すべきかどうかを検討すべきだ。ただそうでないのなら、エンジニアとしてはできるだけブラウザ上で確認できる環境は整えたい。
エンジニア、特にフロントエンドエンジニアの仕事とは、ブラウザ上での心地よい体験を実現できてこそだと思うから
