タイミーのUIデザイナーとしての小さな挑戦と成長
こんにちは。
タイミーで主に管理画面のUIデザインを担当している宮島です。
背景とこれまでの経験
私は長年にわたりUIデザイナーとして、主にPCのネイティブOS向けや組み込み製品のUIデザインに携わってきました。しかし、Webデザインにはほとんど関わる機会がなく、コードに触れる経験は皆無でした。
前職ではWeb技術を中心とした開発業務に従事していましたが、デザイナーとエンジニアは完全に分業されていました。デザインの実装確認もエンジニアに1から10まで環境を整えてもらった後に行うワークフローで、デザインとコーディングの間には明確な境界線が引かれていました。
タイミーでの小さな挑戦
タイミーに入社した2023年初頭は、プロダクトデザインの組織は存在しませんでした。
最初のミッションを完了する前後で、私はコーディングスキルがないにもかかわらずフロントエンドチームに所属し、エンジニアと協力してUIデザインのユーザビリティ改善に取り組むことになりました。
フルリモートの環境ながらも、エンジニアと密接にコミュニケーションを取りながら作業を進める中で、エンジニアの後押しもあり私自身がコードや実装の確認ができたほうが生産性向上やチェックの抜け漏れ防止に繋がると実感しました。
「Miyajimaケイパビリティ」の形成
タイミーのエンジニアは皆親切で、この取り組みは「Miyajimaケイパビリティ」と名づけられました。
チームメンバーは進んで私のために環境構築を手伝ってくれたり、初歩的な質問にも親切に答えてたりと心理的安全性がありました。
ターミナルに対する恐怖感は当初ありましたが、いくつかの基本的なコマンドを覚えるだけで、手元でプルリクエストを確認し、実装を確認できるようになりました。
GitHubとVisual Studio Codeのセットアップはたくさんのつまずきポイントがあり、エンジニアに都度確認しながらの作業になるのでちょっと時間がかかると思います。
しかし、実装確認の操作は「いくつかのおまじないを覚えるだけ」で済むので、プログラミングの知識がなくても短期間で習得できると思います。
今回の取り組みは小さな挑戦でしたが、エンジニアと協働するUIデザイナーにとって重要なスキルを、思っていたより少ない学習コストで獲得できました。
学んだ基本的なコマンドと手順
まず、最低限覚えたお作法やコマンドは以下の通りです：
masterブランチを最新の状態にすること
masterブランチで作業しないこと
作業を始める際のブランチの作成方法
現在作業中のブランチの確認方法
次に、プルリクエストを確認するための準備として：
プルリクエストのブランチをfetchする方法
fetchしたブランチへの切り替え方法
最後に、手元の環境でfetchしたブランチとStorybookを実行するためのコマンドを学びました。
成果と今後の展望
エンジニア側の実装確認の準備時間はおそらく5〜10分程度だと思いますが、デザイナー側からの依頼でエンジニアの集中を妨げることがなくなり、エンジニア側もプルリクエストのURLを投げるだけでデザイナーに実装確認を依頼できるようになりました。これにより、お互いのストレスが減り生産性が向上したと思います。
また、GitHubに触れることで大まかな仕組みを理解でき、自分でもコードを修正してプルリクエストを出せるようになりました。さらに、レビュアーとしても積極的に参加することで、プロダクトをより深く理解し、開発業務により深く関われるようになりました。
現在でも大量のコードを書くわけではありませんが、デザインの修正やカラートークンの置き換えなど、できることはわずかですが実装の面からもデザインシステム構築にも貢献できるようになりました。この年齢でデザイナーとしてのケイパビリティが広がったことに自分でも驚いています。
エンジニアへの感謝
初心者でも簡単に実行できる開発環境やサポートを提供してもらえることは、デザイナーとして非常に幸せなことだと思っています。タイミーの優秀でコミュニケーションを取りやすいエンジニアの方々には、いつも心から感謝しています。
今後もエンジニアと協力しながら、プロダクトの改善に努めていきたいと思います。