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

imanishi

こんにちは、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 で共有しているので、エンジニアもいつでも見られます。検討中のもの検討中ということが分かるように、コンポーネントや画面はなるべく作り切るようにします。

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

まとめ

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

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナーを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


imanishi

投稿者 imanishi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをえたりしながら、心地よく使えるデザインを考えるのが好き。