2024年にやってよかったプロダクトデザインの取り組み
こんにちは！株式会社10X プロダクトデザイナーの @suuminbot こと日比谷です。しばらくnoteには投稿していなかったけど、今後10Xのプロダクトデザイナーとしてnoteを再開することにしました。スタートアップの1人目デザイナーとして、シニアデザイナーとして、子育てと仕事を両立する1人として、様々な情報発信をしていきます。
フルタイムで働くデザイナーの数が1名になったこと、新規事業に取り組みはじめたこと ― この2つが2024年の10Xデザインチームにおきた大きな変化です。（10Xという企業におきた変化については、代表の矢本さんのnoteを是非ご覧ください。）
既存事業の開発チームでやらねばならないこと・やりたいことも多々ある中、新規事業の立ち上げにフルコミットせねばならないし、そもそもフルタイムで稼働できる人員は自分しかいない―そんな状況下で大幅な「選択と集中」が求められました。
慌ただしくがむしゃらに動き回った一年ではありましたが、「これまでのやり方・考え方じゃ回らない」という状況になったからこそ変えられたことが多々ありました。
2024年を締めくくる最後の仕事として、そんな私が取り組んでよかったデザインの取り組みについてまとめようと思います。
一部のUI制作を手放した
既存事業の改善施策のうち、フロントエンド上大きな論点がない施策についてはUI制作を自ら行うのは止め、各施策を担当するプロダクトマネージャーやソフトウェアエンジニアにお任せすることにしました。
完全にノータッチなわけではなく、要所要所では壁打ちに参加したりレビューも行います。例えば、後戻りがしづらい情報設計やUIのモデリングに手をいれる場合はまず同期的に議論をさせてもらい、その後のUIについてはお任せ。実装が終わった段階でレビューをさせてもらい、気になるところを軽く調整してもらうといった具合です。
「最後の砦意識を持つ」という10年以上大切にしている自分の行動規範があります。これは、デザイナーとしてお客様が手に取るものの全てに対してきっちり責任を持つ、ということです。前職も今の会社も1人目デザイナーとして入社しているので、とにかくあらゆるタッチポイントや開発物のデザインにデザイナーが関わらねばという気持ちが強くあったのです。
いつの間にか、この規範の自分にとってのその意味合いが変化しており、すべてのものを自分（含むデザイナー）が作らずとも、これまで作り上げてきたアセットを活用してもらえば良いのだ、と信頼できる開発チームの仲間にがっつりと背中を預けるようになりました。
結果として、大きな問題なくワークしている（と私目線からは見える）し、デザイナーもより自分たちが求められるイシューに集中することができ、とても良かったと感じています。
一部のクリエイティブ制作も手放した
UI制作に続き、一部のバナー制作も完全に手放しました。
手放したのはアプリ内で使っているCRM用のバナー。いくつかのパターンをテンプレート化し、後は色と文字と画像を差し替えればいい、という状態を実現。なんとこれをBizDevチームの皆さんに運用してもらうことにしました。
一部認識齟齬があり、意図せぬ形でテンプレートが使われてしまったという出来事もあったのですが、コミュニケーションの結果新たにテンプレートを増やす対応を行い、今はばっちり運用してもらっています。（忙しいだろうからと思ってと依頼を自粛させてしまっていた…反省。）
大変心強く、ありがたいです。
自分たちの身の丈にあったコンポーネントライブラリを集中的に作り上げた
新規プロダクトの複数立ち上げにともない、新しくコンポーネントライブラリを作りました。作りながら新規プロダクトの体験やUIも考えねばならず、秋頃は本当に忙しかったし追い込まれていましたが、結果として複数プロダクトを同時開発できる・既存プロダクトもこのライブラリを使って刷新PJを進められるようになり、最初にがっと集中して取り組んで良かったと思います。
テクニカルな話は10Xプロダクトブログに書いたのでこちらをご参照ください👇
デザインパターンを導入した
これまで、ミクロなコンポーネントは一貫しているけれど、言語化不足や担当者によるブレによってUXは一貫していない、という状況が度々発生していました。
例) オブジェクトの新規作成をモーダルでやるのかページでやるのか、新規作成や編集完了のフィードバックはどうするのか等
新規プロダクトではこれまでのこういった反省を踏まえ、えいや！でデザインパターンを決定しFigma内に定義。
こうすることでこのパターンはこれ、というのがエンジニアとも共通認識がとれ、
デザイナーが細かくすべてのデザインを作らずともエンジニアが実装できる
「ここがパターンとは違う」というフィードバックをエンジニアから受け取ることができ、一貫した体験を守れる
といった利点がありました。
デザインシステムにVariablesを取り入れ、実装に近い形でFigmaを運用できるようにした
10Xではモバイルアプリの開発にFlutterを採用しており、1コードでiOS/Android/Webのアプリケーションを提供しています。
これまでは基本iOS用のDesign TokenをベースにUIをデザインしていましたが、10Xが提供する店内業務・配達用アプリ（通称スタッフアプリ）はAndroidで使われることがほとんどです。
本来ならAndroidでの表示を念頭に置いて具体のUIをデザインしたいのですが、これまでのデザインシステムではText StylesでAndroidのサポートを出来ていませんでした。
2024年4月のConfigでFigmaがVariablesにてTypographyをサポートする機能をリリースしたことにより、modeを切り替えるだけでiOS/Android/WebそれぞれのText Stylesを切り替え、各デバイス・OSでの見た目に近づけることができるようになりました。
これを10Xのデザインシステムにも取り入れ、今ではTypographyのデザイントークンに対してModeを3種持ち（iOS/Android/Web）各端末での実際の見え方をより簡単に確認しながらUIを作れるようになりました。
（ちなみに、つい最近更に改善を加え、Figma上でぱっとアクセシビリティ設定で文字を大きくしたときの見え方を再現できるようにもしました。また別記事に書こうと思います。）
FigmaのDevモードを導入した
これまで「実装してもらったけどデザイン通りじゃなくて、意図した形のデザインにしてもらうためのコミュニケーションのやり取りが結構ある」ということがたびたび起きていました。
ある日エンジニアさんのFigmaを画面共有してもらい見たところ、ただのViewer権限だとFigmaで定義されたプロパティやコンポーネントの設定がとっても分かりづらいことに気づきました。これまで気づかなくて本当にごめんなさい…（分からなくはないがどこをどう見る、という慣れが必要）
今後新規プロダクト開発もありフロントエンド実装時の双方のコストを下げたいという気持ちで、FigmaのDevモードをテスト利用開始。エンジニア・デザイナ双方の確認コスト削減に大幅に寄与することが分かったので導入を決定しました。
結局のところ、自分が今何に集中すべきか、そのためにどう働く場を整えるか、に尽きる
もう10年以上も前の話ですが、社会人1年目の時、当時の上司（Tさん）とのやり取りで未だに思い返す場面があります。
「おい日比谷、仕事ってな、自分が成果を出せるように自分で場を整えていく必要があるんだよ」（一言一句このままじゃないのですが、こんな雰囲気のことをおっしゃっていました🙏）
次から次へとタスクが舞い込んできてなかなか本来すべきことに集中できない。思うような成果が出せない。―そんな時、つい愚痴を吐きたくなることもあるのですが、「じゃぁどうしたら自分は成果を出せる環境を作れるかな？」と考えその環境を自ら作ることを意識しています。
現在10Xにデザイナーという技術職のメンバーはフルタイムで自分1人と、業務委託で週2日手伝ってくれているメンバーの1人しかおりません。
そんな我々が、求められる成果を出すために作るべき環境とは、と考えた際、重要なのは次の3つだったなと思います。
任せる領域を決めること
アセットづくりを行うこと
より効率的にUI制作・開発を行える環境を作ること
こんな状況下であっぷあっぷしていた私から各種「任されて」くれた会社の同僚には本当に感謝しています。
最後に: 2025年に待ち受けていること
2024年は全社的に大きな変化があり、デザイナーである自分視点ではとにかく「今デザイナーが集中せねばならないこと」をぐんと狭める1年でした。
そんな仕込み期間だった2024年ですが、2025年には新規プロダクトのリリースと改善、さらなる新規プロダクトの仕込みが待っています。
今はまだフルタイム1名という状態なので引き続き「選択と集中」モードが続きますが、チームの拡大がもし出来たなら新しく入ってくれた仲間とともにデザイナーの価値を発揮し事業貢献するフィールドをより広げていけたらと思っています。
プロダクトデザイナー、絶賛募集中
プロダクトデザイナーのポジション、現時点では1名だけ募集しています…！
スタートアップでマルチプロダクトの立ち上げに関わりたい方
幅広く領域を染み出してプロダクト開発に関わりたい方
小売（スーパーマーケット）という人々の生活に密接に関わる領域でプロダクト開発をしたい方
表層のUIだけでなく、全体的にプロダクトデザインをしていきたい方
こういった機会を求めている方、是非一度カジュアルにお話しましょう！YOUTRUSTのカジュアル面談にご応募いただくか、XのDMから話しかけてください！