こんにちは。hacomono UX部エンジニアの yasu です。
hacomonoでは、フィットネスクラブ・インドアゴルフ・24hジム・スイミングスクールなどのウェルネス領域の店舗運営を支える会員管理・予約・決済システムを提供しています。
この記事では、hacomonoでUXエンジニアという職種を定義するに至った背景から、その役割や求めるスキルなどをご紹介します。
なぜUXエンジニアという職種定義が必要になったのか？
hacomonoのプロダクト開発本部では、「プロダクトエンジニア」の定義は存在していましたが、UX部が求めるエンジニアの定義については明文化されていませんでした。
そこで今回、ユーザー体験に対して責任を持つ技術職として「UXエンジニア」を定義しました。これは次の理由からです。
- 育成方針・評価軸の明確化：UX部エンジニアの成長を体系的にサポート
- 開発組織内での役割明確化：UX部エンジニアの役割を明確に発信
- 組織拡大への準備：スケーラブルな組織運営の基盤構築
hacomonoのUXエンジニアの定義
hacomonoにおけるUXエンジニアを次のように定義しました。
プロダクトが生み出すUXの質に責任を持ち、技術とデザインを橋渡ししながら、hacomonoらしい再現性のあるUI/UXを追求するエンジニア
この定義のポイントは次の2つです。
- UXの質に責任を持つ：ユーザー体験の向上に直接的に貢献
- hacomonoらしい再現性のあるUI/UXを追求：ブランドの一貫性を保ちながら、スケーラブルな開発を実現
デザインシステムやガイドラインが整備され、デザイナーとエンジニアが円滑に協働できる仕組みが構築されれば、UXエンジニアの直接的な橋渡しは不要になります。
UXエンジニアは仕組みづくりに注力し、必要に応じてサポートする役割に徹することが理想の状態です。
UX部の使命
このようなUXエンジニアが所属するUX部には2つの大きな使命があります。
1. UXの継続的な向上
- 顕在・潜在ニーズの深掘りに基づくUI/UX改善の提案と実装
- ユーザー行動の定性・定量分析に基づく仮説検証サイクルの推進
- アクセシビリティやレスポンシブ対応など、利用環境を問わない体験の担保
- デザインデータだけでは伝わりにくい動きや操作感の表現
- 状態管理やパフォーマンス最適化など、使いやすさと信頼性を裏側から支える実装
- 継続的なUIテストやビジュアルリグレッションテストなど、品質保証の仕組み化
2. hacomonoらしさの全社的な再現性の確保
- デザインシステムやUIコーディングガイドラインなどを整備
- 開発者・デザイナーが一貫したUI/UXを再現できる仕組みの構築
- 他チームへの技術支援・レビュー支援によるhacomonoらしさの浸透
これらの使命を実現するために、UXエンジニアは日々どのような活動を行うのか、具体的な取り組みをご紹介します。
具体的にどんなことをやっているの？
UXエンジニアの活動は大きく分けて2つの軸があります。
ユーザー体験を良くする活動
まずは、実際にユーザーが使って「いいな」と思える体験を作ること。
例えば、フィットネスクラブの予約画面で「レッスン予約」ボタンが小さすぎて押しにくいというフィードバックがあったとします。そんな時、私たちはユーザーの行動データを分析して、ボタンのクリック率やコンバージョン率を確認し、改善点を特定します。
そして、ボタンのサイズを大きくするだけでなく、色を目立つように変更したり、配置を調整したりして、より使いやすいUIに改善していきます。
また、デザイナーが作ったデザインだけでは伝わりにくい「動き」や「操作感」も大切にしています。ローディング中のアニメーションや、エラー時の振る舞いなど、細かい部分までこだわって実装します。これらの細部の積み重ねが、ユーザーにとって「価値のある」体験につながります。
チーム全体で良い体験を作れる仕組みづくり
もう一つは、自分だけでなく、チーム全体が良いUI/UXを作れるようになるための仕組みづくりです。
具体的には、デザインシステムの構築やガイドラインの策定を行います。これにより、誰でもhacomonoらしいUIを再現できるようになります。また、他チームのエンジニアとモブプロやペアプロを行い、フロントエンドの技術力向上をサポートすることもあります。
このように、目の前の改善だけでなく、組織全体のレベルアップにも貢献するのがUXエンジニアの特徴です。
求めるスキル
UXエンジニアに求められるのは、見た目の美しさだけでなく、体験全体の滑らかさ・一貫性・再現性を支えるための技術的スキルと設計力です。
また、プロダクト全体を俯瞰しながら関係者間の認識を揃え、適切に情報を伝達・翻訳できるコミュニケーション能力も求められます。
UXを支える技術力
まずは、フロントエンドの技術力。HTML/CSS/TypeScriptを使って、アクセシブルでレスポンシブなUIを実装できることは必須です。フレームワークでの状態管理やコンポーネント設計も重要です。
但し、フロントエンドだけにとどまらず、UX改善のためにAPI設計やバックエンドとの連携、インフラやCI/CDについても理解し、必要に応じて、自ら改善や提案ができる力が求められます。
UI・インタラクションデザインの理解と再現力
デザイナーが作ったデザインを正しく理解し、実装に落とし込める力も大切です。Figmaなどのデザインツールを使いこなして、設計意図を把握できること。
また、アニメーションやトランジションを使って、デザインだけでは伝わりにくい「心地よさ」を実装できることも重要です。ユーザーが「気持ちいい」と感じる体験を作るには、細部へのこだわりが必要です。
情報設計・構造化スキル
ユーザーの目的や行動を把握し、それをもとに画面構成や情報の階層構造を設計できる力も重要です。表示する情報やUI要素の関係性を整理し、意味の通った一貫性ある体験を設計できること。
また、UIの再利用や他画面への展開を考慮した設計を通じて、保守性・拡張性の高い仕組みを作れることも大切です。
デザインツール活用力
Figma等を用いて、設計意図の理解、試作、実装連携を一貫して行える力も求められます。インタラクションや操作フローを簡易に再現し、関係者との認識合わせに活かせること。
また、早い段階で試作品を作成し、ユーザーやチームからのフィードバックをもとに素早く改善できることも重要です。
情報伝達・連携スキル
技術とデザインの橋渡し役として、多職種との協働が欠かせません。デザイナー、エンジニア、PdMなど、異なる視点を持つ人たちと円滑にコミュニケーションを取れることが大切です。
時には、技術的な制約をデザイナーに説明したり、デザインの意図をエンジニアに伝えたりすることもあります。そんな時、言葉だけでなく、図や試作品を使って分かりやすく伝える工夫が必要です。
求めるマインドセット
UXエンジニアには、技術力だけでなく「どのような姿勢でプロダクトと向き合うか」も重要です。ユーザー体験の質を高めるためには、細部への感度や改善への探究心、チームでの協働姿勢が不可欠です。
以下に示すマインドセットは、UXエンジニアとして価値を発揮するために重視される考え方です。
ユーザー中心思考
「この機能、実装しやすいからこうしよう」ではなく、「ユーザーにとってどう感じられるか」を最優先に考えられること。
例えば、フィットネスクラブの予約画面で、ユーザーが迷わずに操作できるか。エラーが起きた時に、ユーザーが混乱しないか。そんな細かい部分まで気にかけられる思考です。
細部へのこだわり
「このアニメーション、ちょっと違和感があるな...」とか「このボタンの押し心地、もう少し良くできそう」とか、普通の人が気づかないような細かい部分にこだわれること。
小さな改善の積み重ねが、大きな体験の向上につながることを理解していることが大切です。
技術によるUXの実現志向
「実装が完了した」で終わりではなく、「ユーザーが気持ちよく使えるようになった」ことに喜びを感じられること。
新しい技術や手法を学んで、それをUX改善に活かすことに積極的な姿勢を求めます。
再現性と仕組み化への意識
自分だけでなく誰もが"hacomonoらしさ"を再現できるようにルール化・共通化できること。
属人化せず、チーム・組織に展開できる形でUI/UXの知見を残すことを意識し、再現性の担保がスケーラブルな開発・運用に直結するという視点を持ちます。
越境と協働への意欲
職種や役割の枠を超えて、体験を良くするためなら柔軟に領域をまたいで動けること。
デザイナー・エンジニア・PdMなど、異なる視点をもつ関係者と協働する姿勢を大切にし、「どこまでが自分の仕事か」ではなく、「何をすれば体験がよくなるか」で動きます。
UXエンジニアがもたらす価値
UXエンジニアがいることで、以下のような価値をもたらすと考えています。
ユーザー体験の向上
細部へのこだわりや、ユーザー視点での改善により、ユーザー体験の質が向上します。これにより、プロダクトへの信頼性が高まり、ブランド力の強化にもつながります。
開発効率の向上
デザインシステムやガイドラインの整備により、開発効率が向上します。統一されたコンポーネントを使うことで、一貫性のあるUIを素早く実装できるようになります。また、保守性も改善されるので、長期的な開発にも対応できます。
チーム間の円滑なコミュニケーション
技術とデザインの橋渡し役として、デザイナーとエンジニアの間のコミュニケーションを円滑にします。これにより、プロジェクトの成功確率が高まり、より良いプロダクトを作ることができます。
まとめ
hacomonoのUXエンジニアは、技術とデザインの架け橋として、hacomonoらしいUI/UXを創り出す役割です。
ユーザー体験の質に責任を持ち、技術的な実装力とデザイン理解力の両方を活かして、プロダクトの価値を最大化する——これがhacomonoのUXエンジニアの本質です。
UX部では、このような価値観とスキルを持つUXエンジニアが、hacomonoらしいUI/UXを追求し、プロダクトの品質向上に貢献しています。
💁 関連記事
