はじめまして、こんにちは!デザイナーをしているおのです。
普段はnoteにてえもてくマガジンの記事を担当しているのですが、今回はProduct-Teamのメンバーとしてテックブログの記事を書いていきたいと思います。
ーーー
早速ですが、今回はProduct-TeamにおけるUIデザイナーの役割について書いていきたいと思います。エモーションテックでは現在UI/UXデザイナーを積極的に募集しているので、応募してくださる方にとっての1つの判断材料になれば幸いです。
また、他社のアプリケーションのUIデザインの進め方に興味ある方にも参考になる記事だと思います。
UIデザイナーの役割
まず大前提としてエモーションテックのProduct-Teamのデザイナーの主な役割は、EmotionTech CX/EXの画面仕様、画面デザインを決めることです。その役割を細分化したものが下記の内容になります。(EmotionTech CX/EXについてはこちらを参照してください)
- PdM / PMMと共に要件定義(課題整理、UI調査、プロトタイピング...etc)
- UIデザインの作成(ビジュアルデザイン、レイアウト設計)
- UIコンポーネントの設計整理
- デザインガイドラインの作成
- アニメーション/インタラクション設計
同じような役割を持って動いているデザイナーさんも多いかもしれませんが、エモーションテックではデザイナーの人数が少ないこともあり、要件定義から制作までを1人のデザイナーが一通り担当することが多いです。
現在Product-TeamのUIデザイナーは2人いるのですが、別々のプロジェクトを担当しているので、プロジェクトごとに上記の役割を1人のデザイナーが担当していきます。
UIデザインの進め方
大まかな役割は定められているのですが、デザインの進め方に決まったルーティンやフローがあるわけではなく、プロジェクトやメンバーによって随時変化していきます。各プロジェクトに合ったデザインの進め方を考える部分もデザイナーから発信していく仕事の一部です。
今回は私の進め方にフォーカスを当ててUIデザインの進め方について紹介していきます。
プロジェクト毎のUIデザイン制作の流れ
最近ではワイヤーフレームなどのプロトタイピングを取り入れる作業フローは一般化してきているので、多くの会社さんが取り入れている流れだとは思います。私たちも基本はこの流れで作業を行っています。
1. PdM/PMMとプロジェクトの仕様相談と整理
まず、基本的な新機能や機能改善についてはPdM/PMMが各部のメンバーや顧客から情報収集して企画としていきます。この企画がある程度固まった段階でデザイナーはPdM/PMMと相談しながら各機能のイメージを具現化する準備をしていきます。
基本的にPdM/PMMが資料にまとめてくれるのですが、デザインに関しては別途esaなどのドキュメントツールを使って、デザインに必要な情報を整理していきます。この時の整理方法はデザイン仕様書をまとめる場合もあれば、リーンキャンバスなどのテンプレートを使って整理する場合もあります。
2. ワイヤーフレームの作成
次にPdM/PMMと整理した内容を元にワイヤーフレームを作っていきます。ざっくりとしたイメージを作ることで、文字情報だった課題を具現化、次の議論へとつなげる足がかりとしていきます。
作業はFigmaで行っています。
作業はオフィス、もしくは自宅で行います。これはオフィスでの作業風景です。オフィスはフラットな環境で、音楽を聞きながら作業をすることも可能です。
作りながらの相談は逐一行います。今はオンラインが多いのでSlackのhuddleを使うことが多いですが、出社の際には空いている時間で直接会話をすることもあります。
3. ワイヤーフレームを使ったレビュー会
ワイヤーフレームがある程度できると各担当者とのすり合わせがスムーズに行えるようになるので、この段階でレビュー会を行っていきます。
- 要望を出した段階のイメージと擦り合っているか
- ユーザーに使ってもらえるインターフェースになっているか
- 機能はそろっているか
- …etc
上記のような項目を重点的に各担当者と確認していきます。
ワイヤーフレームも仕様を固めていくのに必要な要素の一つとなるので、このレビュー会の結果を踏まえてワイヤーフレームの調整や仕様の調整を話し合っていきます。
ワイヤーフレームを使った議論は調整とともに何度も繰り返し行います。
4. UIデザイン作成
ワイヤーフレームである程度の合意が取れたら、次は具体的なデザインに入っていきます。ワイヤーフレームはある程度の要素やUIの確認でしたが、ここからガイドラインと使いやすいUIの折り合いをつけるための作業を行っていきます。
UIデザインを作るときはデザイナーだけでなく、フロントエンドエンジニアと随時相談しながら進めています。これは定例の相談会の様子です。
基本的に作業の進め方はワイヤーフレームの時と同様です。
5. デザインウォークスルー
そして最後の仕上げを行うために、デザインウォークスルーを行っていきます。基本はレビュー会と同じようにデザイナーの方でPdM/PMM/エンジニア/各担当者にデザインを見せていき、細かいUIやユーザビリティの確認、ワイヤーフレームからの仕様のズレなどが無いかを確認していきます。
実際の色彩やガイドラインに沿った要素が入ることで、ワイヤーとは違った意見が出てくることもあるので、この段階で仕様に変更が出る場合もあります。なので、こちらの作業もワイヤーと同じように何度も繰り返し作業をしていきます。
そして、最終的にデザインウォークスルーを経てPOの合意が取れたら実装に渡していきます。これでプロジェクトのデザイン作成は終わりになります。
ーーー
以上、これがエモーションテックのデザイナーの作業の流れになります。伝わりづらい部分なども合ったかもしれませんが、このような仕事を日々行っております。
この流れが魅力的に映るのか平凡に映ってしまうのかは経験にもよるところなので難しい部分ではありますが、エモーションテックはこのあたりの進め方をデザイナーに裁量をもたせてくれているので、随時変更したり、新しく取り入れることが可能です。
気になることがある部分、こういう進め方が良いなと思った方、ぜひ応募してきてください。カジュアル面談も大歓迎です!一緒に画面設計をしていただけるデザイナーの方がいましたら、ぜひ下記のHERPより募集していただけると幸いです。
それでは、また次の記事でお会いしましょうノシ