デザイナーの意思決定を助けるエンジニアでありたい

竹内 快斗のプロフィール画像
エンジニア 竹内 快斗

1,220 view

制作フェーズでは、デザインチェックに入ると、デザイナーと細かなやり取りをしながらサイトを詰めていくことが多い。ただそれでも、「Figmaで見るのとブラウザで見るのとでは印象が違う」というギャップが生じることは珍しくない。

このギャップは防ぎようがない自然なものだ。そのためエンジニアとしては、デザイナーがギャップを埋める時間の短縮に貢献したい。

例えば、デザイナーが色の僅かな違いや、数ピクセルの違いで悩む時がある。そんな時、ブラウザ上で速やかに比較可能にすることで、デザイナーの手助けができるはずだ。

避けたいのは、デザイナーとエンジニアの間で何度も無駄な指示や修正を繰り返す、こんなやりとりだ。

デザイナー : 「背景色を#F2F2F2から#FFFにしてもらえますか?」
エンジニア : 「#FFFにしました」
デザイナー : 「#F2F2F2のままで文字を#EAEAEAにしたのも見たいかな」
エンジニア : 「#EAEAEAにしました」
デザイナー : 「やっぱり背景を#FFFにするとどうですかね」
エンジニア : 「#FFFにしました」

微妙な差異がある場合、どちらが良いか迷ってしまうのは当然だ。Figmaで見るのとブラウザで見るのと、印象が変わることは非常に多い。

例えば色味の調整であれば、同じ要素を複製して、色を変えたものを縦に並べて見れるようにすることで、デザイナーの「前の色はどうだったか」という迷いを解消できる。比較が容易になり、戻りが少なくなり、決定までの時間が短縮される。

こう考えたきっかけは、以前あるデザイナーさんから「同時に比較して見てみたい」という要望を受けたからだ。それ以降、単に言われた変更を施すだけでなく、必要に応じて比較対象を列挙できるようにしている。

もちろん、実装に時間がかかりすぎる場合は、そもそも実装すべきかどうかを検討すべきだ。ただそうでないのなら、エンジニアとしてはできるだけブラウザ上で確認できる環境は整えたい。

エンジニア、特にフロントエンドエンジニアの仕事とは、ブラウザ上での心地よい体験を実現できてこそだと思うから

関連する日報

    修正する前に「前提」と「顧客の期待」を確認しよう

    297 view

    板垣 琴音のプロフィール画像
    板垣 琴音 デザイナー
    諸行無常のUI改善

    2,459 view

    天野 謙作のプロフィール画像
    天野 謙作 エンジニア
    観察して気づいた、加齢によるユーザー課題

    1,876 view

    中島 碧のプロフィール画像
    中島 碧 コンサルタント
    その場で最適解を出すデザインは破綻する

    4,857 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    目指せ!ビジュアルデザインマスター

    899 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
上に戻る