開発チームみんなでつくるデザインシステム
ブルーモは一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。
サービスリリース前のシードラウンド期からデザインシステムを構築し、運用している理由や、実際にどのようなシステムを作っているのかなど詳細を紹介します。
また、デザインの品質を担保するために、デザイナーだけではなく開発メンバーのエンジニアがどのように関与しているのかなどもお伝えできればと思います。
インタビュイー
三島 俊輝
東京藝術大学大学院の修士課程を卒業後、三菱電機やquantum、Takramにて事業開発・APP開発・UXデザイン・ブランド開発・ブランディングプロジェクト等をリード。ブルーモではプロダクトデザインとコーポレートブランディングを統括している。
照屋 雄斗
高専卒業後、DeNAにエンジニアとして新卒入社。ライブストリーミング事業部にて既存プロダクトの開発を経験した後に、2年目からは新規プロダクトの企画・開発に関わる。その後、アーリーフェーズのスタートアップにエンジニアとしてジョインし、アプリ開発をリード。また、PdMとしてプロダクト企画も兼務。現在は、「Bloomo」のリードエンジニアとしてアプリ開発を担当。趣味は米国株投資と個人開発。入社エントリはこちら。
ブルーモがデザインシステムを導入した理由
ーーサービスリリース前のシード期からデザインシステムを導入するという判断をした理由を教えてください。
三島：開発チーム全体でプロダクトの品質担保、品質向上、開発生産性を高めるためです。ブルーモのバリューでもある「顧客体験への執着」を体現するためにも、デザイナーだけでなく開発チーム全体の共通言語となるデザインシステムが必要と考えていました。
また、特に創業時はパートタイムのデザイナーやエンジニアが多く、複数人が非同期で開発に関与していました。開発メンバーが迷わず一貫性を担保してデザインや開発をするためにも、デザインシステムの構築は早期に必要という判断でした。
組織によっては「デザインシステムをつくることが目的」になってしまうケースもありますが、ブルーモではプロダクトの品質担保・向上、開発生産性を高めるための仕組みとしてデザインシステムを整備しています。デザインシステムはデザイナーのためではなく、エンジニアやPdMを含めた開発メンバー全員のための仕組みであるべきと考えていました。
加えて、ブルーモはドキュメントカルチャーが浸透しているため、創業期・シードラウンド期でデザインシステムの整備についても特に違和感はありませんでした。
開発チーム全体で使いやすいデザインシステム
ーー実際、どのようなデザインシステムにしたのですか？
三島：エンジニアとの連携も考えて、MUIをベースにしたデザインシステムを整備しています。一部AppleのHIGを参照しているケースもありますが、基本はMUIをベースにコンポーネントの分類や命名規則を整備しています。このあたりはエンジニアが理解しやすいように、より実装しやすいように意識しました。
ブルーモのデザインシステムでは各コンポーネントのみをデータ化するのではなく、各コンポーネントごとに「ガイドライン」を記載したり、プロダクトで実際に利用される「ユースケース」も記載しています。デザイナー以外のロールもデザインシステムのルールや意味合いを簡単に理解しやすいように整備しました。整備するにあたって、デジタル庁が公開しているデザインシステムや国内外スタートアップのデザインシステムも参考にしています。
実際に、VCの方にも「シード期にここまでデザインシステムが整備されているスタートアップを見たことない」と褒めていただきました。一方で、開発を進める中でアップデートが必要な状況も出てきます。そういった際はPdM、デザイナー、エンジニアで連携して変更を検討したり、コンポーネントを追加したりしてデザインシステムのアップデートを続けています。
ーーデザイナーだけに閉じないデザインシステムをつくっていることが特徴の一つだと思いますが、実際エンジニアから見て、ブルーモのデザインやデザインシステムはどのように映りますか？
teru：このフェーズの企業で、最低限コンポーネントが整理されているだけではなく、デザインシステムまで整備している会社は珍しいと思います。私が入社した当時は、今よりもデザイナーとエンジニアの連携に課題がある状態でしたが、デザイナー側がエンジニアとうまく連携していきたいという意思を感じました。
ーー実際どのようなところでデザイナーの意志を感じたのですか？
teru：デザインシステムの話だと、コードに落とし込む前提で設計されている点ですね。MUIを採用した背景からも分かりますが、命名規則やコンポーネントの粒度が丁度よく実装する上で非常に扱いやすかったです。また、それ以外の場面でも、例えばFigmaの細かいコメントひとつとっても「エンジニアがこういう情報があれば嬉しいだろう」と予想したような内容が書いてあって、細かい気遣いを感じました。
私はエンジニアですが「ユーザー体験にこだわったプロダクトを作りたい」という気持ちが強く、デザインにも興味があるので、こういう気遣いができるチームだととても開発しやすいなと思いました。
ーーデザインシステム以前に、デザイナーとエンジニアお互いがいいユーザー体験を追求しようとする姿勢があることも重要ですね。
三島：そうですね。teruさんが言うように、もともとデザイナーも非デザイナーもユーザー体験を追求する姿勢があるチームでした。一方で、デザイナーが描く理想のデザインを正確に実装できない課題もあったんです。アプリのデザインは静的に見たときと、実装して動的に見たときで印象が変わります。静的に見るとキレイでも、実装してみたり動的に見ると違和感を感じたり…。ブルーモでも、デザインデータを正確に実装したり、心地のいいインタラクションや細かいモーションを実装しきれていない課題がありました。teruさんが来てくれてからはその課題が一気にクリアになり、デザイナーとエンジニア間の連携もより密になり、以前より妥協せずにユーザー体験を追求できるようになりました。
いいデザインはいいエンジニアがいるからこそ実現できる
ーーteruさんがジョインしてからの変化について教えてください。
teru：デザイナーがFigmaで定義している通りに実装されるようになったことが、一番の変化だと思います。当たり前のことのように聞こえるかもしれませんが、これがしっかりと出来ている開発チームは意外と少ないです。
最近、特に苦戦したのはポートフォリオを可視化するパイチャートの実装です。このパイチャートは「Bloomo」において象徴となるアイコンなので絶対に表現したいと言う気持ちで、1週間くらい粘って実装で表現できるようにしました。
中村：このパイチャートの角丸を表現することが技術的に難しいと分かってから、実装しやすいデザインに変更するか妥協しかけたんです。でもteruが頑張ってくれたことで、理想のデザインをプロダクト上で表現することができました。
三島：創業期からよく中村さんに「いくらデザインがよくても、いいエンジニアがいないとデザイン通りに実装できない。デザイン感度の高いフロントエンジニアを連れてきて欲しい」と伝えていたのですが、今回のエピソードはまさにいいエンジニアがいたからこそデザインを妥協せずに済んだ事例だと思います。
ーーデザイナーにとってもここまでデザインにこだわるエンジニアがいる環境は魅力的ですね。
三島：デザイナーにとってブルーモはとてもいい環境だと思います。先ほどの事例以外にも、細かいモーションやハプティックフィードバックのようなデザイナー側でも定義しきれていない仕様や意思疎通しづらい要件についても、teruさん側から提案してくれたり、いい感じに実装してくれたりすることもあり、とても助かっています。
teru：普段からどのようなユーザー体験を作りたいかチームで話しているからこそ、作りたいイメージを汲み取って表現できるように工夫しています。エンジニアからしても、リソースが多分にあるわけではないスタートアップでここまでユーザー体験にこだわらせてくれる環境はありがたいですね。
デザイナーがブルーモで働く魅力
ーー最後に、三島さんとteruさんから見たブルーモで働く魅力について教えてください！
三島：前回のブランド編の記事とも重なりますが、ブルーモのバリューにある「顧客体験への執着」をteruさんのようにみんなが体現しているため、デザイナーとして「ユーザーに寄り添ったデザインを妥協せす徹底的にやりたい」と考えている人にとっては最高の環境ではないかと思います。
また、今回の記事にあるように、ドキュメントカルチャーやデザインシステムの整備、ブランドガイドラインの整備がしっかりしてあることも魅力の一つだと思います。
その他、UIデザイン以外でもイラストレーターと協業してイラスト開発や、各種コンテンツのクリエイティブ制作などにも関われます。toCサービスなので、将来的にブルーモ関連グッズも作れたらとも考えています。このあたりは、UIだけじゃなくいろいろなモノをデザインしたい人にとっては魅力の一つではないかと思います。もちろん、UIデザイナーだけでなくコーポレートのデザイナーも募集しているので興味がある方は連絡お待ちしています。
teru：ブルーモでは、PMやエンジニアもデザインにこだわりを持ちつつも、大前提としてデザイナーをリスペクトしている環境で、究極、表層のことはデザイナーに任せる考えがみんなにあります。この環境が当たり前なのは、デザイナーにとって働きやすいと思いますよ。
ーーブルーモは積極採用中です！
ブルーモでは、デザイナー（プロダクトデザイナー）とエンジニアを特に積極的に募集しています。また、コーポレート関連やコミュニケーションをデザインするデザイナーも募集中です。
「Bloomo」の招待制リリースを経て、実際に多数のユーザーの声を聞きながらプロダクトを改善していけるフェーズのため、手触り感を持って開発することができます。
他にも、ご興味とご経験に応じてPdM、事業開発など多岐にわたるポジションを募集しているので、もっと会社やポジションについて知りたい方は以下もご覧ください！