デザインルールはエンジニアを巻き込んで作るべきだと思う

こんにちは、@Myuji_4 です。
夏ですね。先日同僚のデザイナーさんと飲んでるとつい熱く語り合ってしまいました。きっと夏の仕業ですね。

さて、今日はデザイナーさんとついつい熱くなって語った事を描こうと思います。デザイナーさん、エンジニアさん共にご覧いただきたい内容です!

僕が目指すプロジェクトメンバーの理想像

現在、フロントエンドエンジニアという肩書きでプロダクトと向き合い、ディレクターさんやデザイナーさんと共にプロジェクトに参画しています。

僕のプロフィール詳細はこの記事の下にもリンクをつけています。そちらをご覧いただければわかります通り、Webを仕事にし始めてから約3年になります。

スタートはとても恵まれているとは言えない環境でした。

クライアントのヒアリングからWFを起こしてデザイナーさん(メインはDTP)にデザインをお願いするのですが、デザインは主要ページの一部のみで、全ページお願いしたら嫌な顔されたり、レスポンシブデザインサイトでも、PSのみのデザインを作ってもらい、PS用はレイアウトを組み替えて僕が作るというようなフローでした。

Web1年目から、これでは絶対良いものは作れない。素人ながらに感じていました。

昨今は、デザイナーさんがエンジニア思考を取り入れたアプトプット記事が出てきていたりと、すごくポジティブな傾向を感じています。

プロジェクトに関わる全てのメンバーが、それぞれに歩み寄り、プロダクトを作って行く。これが僕が目指す理想です。

そこで、今日はエンジニアの僕の歩み寄り記事第1号としてこれを描きます!

レスポンシブデザインは誰が作っている?

あなたのプロジェクトでは、レスポンシブデザインは誰が作っているでしょうか?

PC、SPのデザインデータがあればそれはレスポンシブデザインを作成していることになるでしょうか?

デザインデータだけでは表現できない内容が存在します。

僕が経験したケースをひとつご紹介します。

プロジェクトケース
案件:レスポンシブデザインのコーポレートサイト
デザイナーさんには、PCとSPのデザインデータを作成していただきました。
タイトルフォント
PC:36px SP:24px

プロダクトは動的です。ユーザーはみんな320pxのデバイス、1240pxで閲覧するわけではありません。

最大値36px 最小値24pxとして、中間サイズの場合はフォントサイズはどうなのでしょうか?
倍率で求めらるのか?それともブレイクポイントを設けてそこから真っ二つにサイズを分けるのか。タイトル部分はマージンを持っているのかいないのか。

上記の内容などデザインデータからは見えない部分の実装はエンジニアが埋められれば良いのでしょうか?
上記のように相互の意識がすり合っていない状態で生まれたプロダクトは矛盾が生まれやすくなります。

デザインは視覚的な要素だけではありません。
では、デザインデータは細かいデバイス別のデザインを用意する必要があるのでしょうか?

もちろん答えは「No」だと思います。
そこで必要になるのがデザイナーさん、エンジニアさんが相互に認識しているデザインルールです。

タイトル、ボタンなどを、アトム単位のデザインを意識して作成することで、細かい変更などは、デザインルールに沿って行う事で、エンジニアさんだけで行えます。また、デザインの矛盾を減らすこともできます。

デザインルール作成はエンジニアを巻き込む

より良いプロダクトはUXのみならず、運用性などによってもたらされるDXも大切です。DX向上の為にはデザイナーさんとエンジニアさんが共に共通言語として認識しているデザインルールが必要です。

そこで、いきなりデザイナーさんにアトム単位のデザインを意識してもらおうなんて全く考えていません。

デザイナーさんとエンジニアさんとでは、全く思考が異なっているかこそ面白いものが生まれるのだと思っています。

しかも、共通言語は一方的に作れるものでもありません。WF作成時点からエンジニアさんを巻き込んで行きましょう!
デザイン途中にモジュール単位を相談しても良いと思います。

デザイナーとエンジニアの共存を実現する為には、共に尊重し合って、共に歩み寄ることが最も大事です!

良いものを生み出したい。目的はきっとお互い同じはずですしね。

さいごに

こんな感じの話を、熱くできる環境に身を置けている事を本当にありがたく思いました。

デザイナーさんのデザイン再現度を上げるべく、僕は日々技術力を磨かなければいけないなと感じたりしました。

今後も良いプロダクトを、最高のメンバーと最高の関係性と環境で生み出し行きたいですね。

長くなりましたが最後までご覧いただきありがとうございました。
もし良ければ以下のプロフィール記事も合わせてご覧いただければと思います。

@Myuji_4
長崎県出身。現在はUXデザインカンパニーでフロントエンドエンジニアをしています。ゴルフが好きです。
詳しいプロフィールはこちら↓


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートしていただけましたら、ゴルフ費用に使おうと思います。笑

嬉しいです。今後もよろしくお願いします!
4

Yuji Mine

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。