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

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

1,352 view

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

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

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

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

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

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

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

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

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

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

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,581 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,220 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,538 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    BtoBサイトにおける「ファーストビュー攻略法」

    2,929 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
    デザインを複数案作る時の心得

    6,404 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る