デザイナー不在のスタートアップでやったこと
最近エンペイというFintechスタートアップで副業していたので、何をやったかをまとめていく。UIUX関連のプロダクトデザイナーが足りない状態で、どうやってプロダクト開発をしたかの参考になれば幸いです👋
きっかけ
元同僚でエンペイCTOをやっている田野さんからのお誘いでした。
昨年夏頃に「デザイナーがいなくて困っているから助けて欲しい」といった相談があり、副業という形でお手伝いすることになりました。
Figmaへの移行
これまでエンペイでは、Adobe XDでUIデザインを制作していたのですが、今後はよりオープンに情報共有しながら進めたいので、これからはFigmaを使いたいと熱望されました。
全ての画面をAdobe XD→Figmaに移行することになったので、効率的にUI制作を進めていくために、最低限のデザインガイドラインを作成してから、量産していきました。
デザインガイドラインの作成
当初CTO田野さんから「Smart HRさんみたいに立派なデザインシステムを作りたい」と言われたのですが、今のエンペイでは早すぎるとやんわり諭しました。
Design Tokens（カラー・タイポグラフィ）の定義
まずはトークンの整理から始めていきました。元々実装ではVuetifyのデフォルトカラーをそのまま使っていたので、現行のものと照らし合わせながら、カラーやフォントサイズを定義しました。
UI Components （ボタン、フォームなど）の定義
プロダクト画面のスクリーンショットをFigmaに貼り付けまくって、共通で使い回せそうなコンポーネントを見定めていきます。
最初から全てのコンポーネントを作りきるのではなく、ボタンやフォームといったものから少しずつコンポーネント化しました。
デザインプロセスの整備
エンペイでのデザインプロセスは、Figmaを前提とした進め方にしました（参照：クックパッドのFigmaの運用）
新しくプロジェクトを始める際は、プロジェクトごとにFigmaファイルを作成します。UIを作る場合は、Masterファイルから該当画面をコピペし、トークンやコンポーネントはライブラリー連携するようにしました。
Masterファイルやライブラリーを用意することで、デザイナー以外でも手軽にUIを作りやすい環境に整備していきました。
デザインレビュー文化の醸成
副業で限られた時間での関わり方だったので、デザイナーがボトルネックになってプロダクト開発が滞ることがおきないよう、
小さなエンハンスの場合は、PdMやエンジニアが素案を作ってみて、必要に応じてデザイナーがデザインレビューをしたり、相談に乗るといった進め方にしました。
一方で、要件定義するのが難しい施策に関しては、デザイナーが最初から手厚めに相談に乗ったりと、重要度や難易度に応じて、緩急つけたリソース配分で進めてみました。
とりあえずUIデザインで迷ったときは、デザイナーに気軽にSlackメンションしてみるといった習慣が根付くように日々働きかけていきました。
デザイナーの採用・育成
正社員のプロダクトデザイナー採用を模索しつつも、中々うまくいかない状況が続いていたので、もはや育てたほうが早いのでは!?という感じになり、大学生インターンを数名受け入れることにしました。
サービス・UX理解
デザインをする上で、誰のために（Who）、どんなサービス作るのか（Why/What）を意識してもらいたかったので、UIデザインをする前にペルソナやユーザーストーリーを作ってもらいました。
UIトレーニング
実際に手を動かしながら、学んでもらいたかったので、手書きのラフワイヤーを用意して、それらのモックアップ作成をお願いしてみました。
モックアップ作成を通じて、Figmaの使い方をレクチャーしたり、各種スタイリングや余白などをレビューしていきました。
ちなみに参考文献を紹介して、専門用語や設計周りの基礎知識のインプットを推奨しました（参照：一人前のUIデザイナーになるための成長計画テンプレート（β））
最後に
これまでプロダクトデザイナーが不在だった組織で、限られたリソースで動かざるを得ない状況で、私がとった行動は、デザイナーがいなくても、他メンバーがプロダクト開発が進められるように環境を整備していくことでした。
今回はFigmaを使いましたが、それはあくまでツールです。
デザインはデザイナーのものだけにせず、
誰でもアクセスできるようにしてフィードバックしあったり、
デザインルールを可視化していくことで、より良いプロダクト開発に向き合いやすくなれたのかなと思っています。
PS.
副業ながら、自由にやらせてもらえて、とても楽しかったのですが、諸事情でエンペイは4月末で辞めることになりました。短い間でしたが、大変お世話になりました！（採用募集中らしいです：Wantedly, Meety）
美味しいラーメンを食べて、明日への糧にします🍜