UI/UXデザイン会社のフロントエンドエンジニアの役割

こんにちは、神谷です。

今回はUI/UXデザイン会社であるARCHETYPのフロントエンドエンジニアとして大事なこと5つをご紹介！

1. 効率的な実装を行うための実装設計

Webサイトやダッシュボードを構成していくにあたって、効率的で安定的に保守性の高い実装を行うための設計が大事です。
デザイナーと協業しながらコンポーネント、拡張コンポーネントなどアトミックデザインの概念を理解しながらUIの設計をしていきます。

2. 気づきを与えるUI実装（演出・モーション）

要素の表示タイミングやモーションなどを駆使してユーザーが迷わずに操作できるように、行動を促す演出・アクションの実装を行います。
過剰な演出を入れることでUXを損なうこともあるので、チームで議論を繰り返しながら最適なUIを組み込むことが必要になります。

3. 操作性の高いUI実装（インタラクション）

操作（アクション）に対する、リアクション（インタラクション）の実装を行います。
PCであればオンマウス / クリック、スマホであればタッチ / タップなどの状態を見た目や音で認知させる工夫が必要です。
ずっと触っていたくなるUIが作れた時はニヤニヤですネ。

4. バックエンドとの連携

バックエンドとフロントエンドはAPIで連携することが多いです。
非同期での通信が多く発生するため、通信状態管理や通信状態に応じたUIの操作などの制御実装が求められます。
バグが発生しやすい部分なので、連続した処理を単純化しひとつずつ丁寧に組み上げていくことが必要です！

5. UIに対するアンテナ

そして、なにより大事なのは世の中にある様々なUIに興味を持つこと！
日常的にGood UI / Bad UIの引き出しをためていくことで、自分で開発する際にもGood UXを提供できるUIが作れるはずです。

ちなみにわたしはゲーム（SwitchやPS5）のUIをよく参考にします！
イージングやカーソルが当たった時のインタラクション、背景とUIのバランス、画面遷移など参考になる部分が盛りだくさんです。

今回は技術的な内容ではなく意識的な部分を書いてみました。
人が触るUIは感覚的な部分が多いのも事実。
UI作りにおいてはUIに対する愛をいかに持てるかが大事で、愛が深いアウトプットは見る人も惹きつける魅力を持つはず❤️

ARCHETYPではUIを愛しているフロントエンドエンジニアをお待ちしております！