こんにちは！デザイン戦略部 デザイナーのmochyです。
2024年2月にNewbeesへ入社し、恋活・婚活マッチングサービス「マリッシュ（marrish）」のUI/UXデザインを担当しています。
前職では事業会社にてUIデザイン・コーディング・アクセス解析などを経験していました。
NewbeesではUIデザインをしつつ、ユーザーアンケートの実施などUXの業務にも関わり、幅広くデザインに取り組んでいます。

突然ですが、デザイナーの仕事の進め方って、企業によってかなり違うと思いませんか？
要件定義の段階から関わるのか、他職種との連携はどれくらいあるのか、コーディングはどこまで担当するのか……。
入社してみるまで、なかなかイメージしにくい部分もありますよね。
今回は、私がおもに関わっている「マリッシュ」のデザイン業務を中心に、Newbeesにおけるデザイナーの働き方をざっくりご紹介します！

デザイナーの作業の流れ

クライアントやNewbees発信にてタスクが発生すると、まずディレクターが内容を整理して共有してくれます。
デザイナーはその内容を確認し、デザインの進め方や要件をすり合わせるところから参加します。

1. 要件のすり合わせ

タスクの疑問点や相談事項を洗い出し、他部署も含めてすり合わせをおこないます。
内容によっては、進め方そのものを見直すこともあり、デザイナーが取り組みやすい形でタスクを進められるよう調整しています。
そのあと、担当ディレクターやエンジニア、QAエンジニアへ工数の見積もりや大体のスケジュールを共有して、いつリリースするか検討します。

2. ワイヤーフレーム作成

新規ページ作成や大きな改修の場合、ワイヤーフレーム作成から着手します。
※ワイヤーフレームはモノクロで構成された設計図のようなものです。

要件をそのまま落とし込むのではなく、背景や目的を整理しながら設計していきます。
必要に応じて複数案を作成し、他メンバーに意見をもらうこともあります。
ワイヤーフレームが完成したら、段階的にレビューをおこないます。

まずはデザイナーメンバーに確認を依頼し、情報の優先度やUIのわかりやすさなど客観的にチェックしてもらいます。
次に、ディレクターやエンジニア、QAエンジニアなど他部署にも共有し、要件が満たされているか、実装や構造面で問題がないかを確認します。
内容によっては、クライアントにも共有し、認識のズレがないかを事前に確認いただきます。

▼ワイヤーフレームと、デザイン作成のやりとりの画面

3. デザイン作成

必要に応じてUIライブラリのコンポーネントを使用しつつ、実際にデザインへ組み込みます。 ユーザー/ビジネス視点や技術的制約も踏まえつつ、コンセプトに沿った最適なUI案を作成していきます。デバイスに応じて他サイズの展開をすることもあります。
レビューの手順についてはワイヤーフレームと同様です。

4. コーディングと納品準備

マリッシュではアプリ版・Web版があります。
WebはデザイナーがHTMLとCSSでのコーディングをおこない、エンジニアに動的処理などをおこなっていただきます。
アプリはエンジニアに実装してもらうので、必要に応じて画像を書き出したり、デバイス別の指示コメントに漏れがないかチェックをしたりしています。

新規ページの作成の際は、画面一覧やスクリーン名などの管理情報を更新します。スクリーン名はエンジニアに実装してもらい、リリース後はGoogle Analyticsでページビュー数などを確認できるようにします。

5. 納品

コーディングしたHTML/CSSをGitHubでプッシュし、Figmaのデザインと合わせてエンジニアへ報告します。
その後エンジニア側の開発フェーズに入ります。

6. 納品後の質問対応

開発中やQAエンジニアの検証中などで、デザインの質問や調整があれば対応します。
使用感を確認したい改修の場合は、エンジニアが仮の環境に反映していただいたタイミングで、チェックすることもあります。

とある日のスケジュール

私の「ある一日の流れ」をご紹介します！
日によってデザイン業務が中心の日もあれば、MTGが多い日もあります。

Newbeesデザイン戦略部のチーム分け

デザイン戦略部ではUI/UX、FE（フロントエンド）と幅広い領域をになってます。
今回は私が担当しているUI/UX領域にフォーカスして紹介します！

UI/UX領域

◯UI
各プロダクトのUIデザインや、コーポレートサイトのUIデザインなどを進めいています。 MTGはUI週例があります。
Newbeesでは、マリッシュ以外にも複数のプロダクトがあり、各プロダクトのメイン担当デザイナーが集まってUI 週例をおこなっています。

◯UX
主にユーザーアンケート、ヒューリスティック評価、ユーザーインタビュー、そして GA4を用いたアクセス解析をおこなっています。
また、UXリサーチの啓蒙活動の一環として、週に1本のUXに関する記事を紹介し、月1回のペースで他部署も交えて輪読会も開催しています。
MTGはUX週例があり、UXリサーチのタスクの進捗共有や相談をおこなっています。
また、デザインタスクに UXリサーチを組み込むかどうかの検討も、この週例で議題にしています。

デザイン戦略部の領域や仕組みについては、詳しく話している記事があるので、よければこちらも見てみてください！

Newbeesデザイナー同士のコミュニケーション

Newbeesのほとんどのメンバーはフルリモートで働いています。
画面越しだからこそ対話を大切にしており、デザイナーでもGoogle Meetを使った交流があります。
年齢やバックグラウンドはさまざまですが、上下関係にとらわれず、誰とでもフラットに話せる雰囲気が魅力です。

1. 朝会での交流

毎日11時に朝会をおこなっています。
メンバーそれぞれの「今日の業務共有」に加えて、雑談タイムを設けています。
健康診断の話や、おすすめの家電やお菓子、お子さんの話など、話題はさまざまです。5分程度の予定ですが、毎回話が盛り上がって延びることが多いです（笑）
仕事中では見えない人となりが知れ、話も面白いので、私はこの雑談タイムが好きです。

▼Google Meetでデザイナー朝会をしている風景

2. おすすめの記事の共有

毎週、デザインやAI、マッチング市場など、業務参考になる記事をピックアップして紹介しあっています。
移り変わりの早いデザインやCSSのトレンドなど、普段だと見落としがちな情報もキャッチできるのが良いところです。

3. PJごとの振り返り

月に1度、プロジェクトごとにデザイナー内で振り返りをおこなっています。
業務を進めていく上で良かったことや、問題点とその解決について話し合います。
Newbeesでは褒め合う文化があり、このタイミングで改めて感謝を伝えることが多いです。

▼マリッシュデザイナーKPTのFigjam

今後やっていきたいこと

最後に、mochyがNewbeesのデザイナーとしてこれからやっていきたいことをお話しします。

UXリサーチのスキルアップ

私は「ユーザーに寄り添ったデザイン」を実現したくてNewbeesに入社しました。
自分の成長のためにも、サービスの改善のためにも、UXリサーチのスキルをさらに高めていきたいと考えています。
まだ経験していないUXリサーチにも挑戦していき、少しでもユーザーの声に寄り添ったデザインを提供していきたいです！

AI導入による作業の効率化

UXリサーチやコーディングは手間がかかることも多いです。
アナログ人間なので細かい手作業は好きですが、漏れがあったり、想定以上に時間がかかってしまうこともあります……。
AIは情報の収集や整理に非常に便利なので、業務にAIを取り入れることで手間を減らし、より多くの成果を生み出せる環境を作っていきたいです。

デザインシステムなどによるマリッシュブランド確立

現在、マリッシュではデザインシステムを構築中で、コンポーネント作成やカラートークンのルール化を進めています。
他にも単語一覧の運用することで、UI用語や社内共通用語の表記ゆれを減らし、共通理解を促進しています。
UIのバラつきを減らし、ビジュアルやインタラクションを統一することで、より信頼感のあるサービスにしていきたいです！

おわりに

ここまで読んでくださりありがとうございました！
デザイナーの作業というと一般的に見た目を整えるイメージがあるかもしれませんが、Newbeesではタスクのすり合わせのフェーズから参加できたり、やりやすいように作業の進め方を変えれたりと、希望に応じて多様に働くことができます。
この記事を通して、少しでもNewbeesのデザイナーの業務がイメージできたのであれば嬉しいです！
もし「Newbeesのことをもっと知ってみたい！」「選考に進んでみたい」と思っていただけたら是非以下より応募いただければと思います！