コーディング経験のあるUIデザイナーのフロントエンドとの連携

こんにちは、Gaji-Labo UIデザイナーの今西です。

UIデザインに携わるようになってしばらく経ちますが、わたしのキャリアはWeb製作会社から始まりました。
コーディングまわりでは、商品のプロモーションサイトやLPのコーディング（HTML + CSS、たまにjQuery）、Webサービスのデザイン実装ベースとなる静的なHTML + CSSコーディングの経験があります。学生時代から少し触っていたくらいの素地からレスポンシブまで対応できるくらいにはなっていたのですが、あくまで静的なページを作るレベルです。

現在私が動いている領域はUIデザインですが、この経験がどう活かせるかを考えてみました。

デザインデータを整える

UIのデザインは自由に画を描くのではなく、実際にヒトが触るもの・動かせるものをつくります。データを見せる情報としての観点と触る・動かす体験をつくるUXの観点がインターフェイスづくりで必要なことだと考えています。
感覚はデザインとしてのビジュアルづくりで使いつつ、UIを構成していくのは結構理詰めです。

自分がコーディングしていた頃のあるあるですが、スペーシングを感覚で作っていると自分でもどのように管理していたかを忘れて、その場のコーディングでよしなに対応してしまうことがありました。
普段からきちんとサイズや位置を揃えたデザインを作っておかないと、後から調整が増えてその手間がもったいない。

感覚だけで作ったデザインカンプからフロントエンドが実装していくのは辛いのは自身の経験でもわかっているので、実装できる現実度やスピード＆工数は気にしながらデザインを進めています。

現在 Gaji-Labo では「手ざわりのいいUI」を届ける取り組みとして、フロントエンドとUIデザインの連携を重視しています。

フロントエンドとの連携のために、UIデザインとして日々のデザイン業務のなかで気をつけているのは、下記あたり。

• 途中経過（WIP、Draft）、決定（FIX）、最新版のデザインは明確に分ける（バージョン管理）
• カラーパレット、テキストスタイルはパターンを整備する
• スペーシングの数字を揃える
• レイヤー感覚を揃える（フローティングメニュー、モーダル）
• ブレークポイント
• デザインの動きに関する箇所は注釈をつける

…などなど。
ディスカッションを通して、UIデザインとフロントエンドの連携ポイントをまとめながら気をつけるポイントが見つかることもあります。

基本的にはデザインカンプとして見て実装を進めづらいものは作らないようにしています。
デザインは Figma で共有しているので、エンジニアもいつでも見られます。検討中のもの検討中ということが分かるように、コンポーネントや画面はなるべく作り切るようにします。

あとはいつでもエンジニアや実装者と相談やすり合わせができるようにしています。
相談やすり合わせ課題ポイントは、レベルは違いますがコーディング経験によって話はしやすくなっているのではないかなと思います。実装で難しそうだったりコストがかかりそうな部分がなんとなく見えているような。

まとめ

今後もフロントエンドと連携を深めながら、スムーズにインターフェイスを制作〜実装できるようにしていきたいと考えています。

デザインと実装を一人で一貫していると、自分の感覚中心で動いてしまうところがありました。一人だったのでなんとかなっていましたが、チームで動くとなれば別。
誰が見てもわかりやすいデータをつくること、相談できる体制でいることは大事にしていきたいと思います。