アンドパッドのデザイナーについて紹介します - どんな環境なの?編

はじめに

はじめまして。
アンドパッドでプロダクトのデザインをしている、きのしたです。

2021年5月に入社し、丸2年とちょっと経ちました。
以前は BtoC サービスのデザインに携わっていて、アンドパッドで初めて BtoB サービスに触れて日々奮闘しています。

2年前、わたし自身が転職活動していたときから思っていたことがありました。
「アンドパッドのデザイナーの情報、あまり世に出てないな」と。

この2年でデザイナーの情報発信は少しずつ増えてきたものの、採用の場面などで「アンドパッドのデザイナーの雰囲気や、組織がどうなってるのかわからない」というお声をいただくことが未だ多いそうです。

そんなアンドパッドのデザイナーについての「わからない」を少しでも解消できるよう、わたしの視点から紹介していきたいと思います。

アンドパッドにはマーケティングやブランドデザインに携わるアートディレクターやグラフィックデザイナーも所属していますが、この記事ではプロダクトのデザイナーにフォーカスしてお話しします。

どんな組織構成なの?

プロダクトのデザイナーは「プロダクト本部デザイン部」という組織に所属しています(そのまんまですね)。
組織は職種別に構成されていますが、日々の業務ではプロダクトマネージャー・エンジニアといった他職種のメンバーとともにプロダクト単位のチームで動いています。

デザイナーは、プロダクトや機能単位でアサインされます。
プロダクトや機能の規模によって、専任で担当したり複数横断して担当することもあります。

アンドパッドは建築・建設業界に特化した SaaS の会社ですが、そのプロダクトは多岐にわたり、工事現場の管理だけでなく受発注・売上管理といった会計の知識が絡むようなものもあります。
また、建築・建設業界と一言で言っても、住宅を建てる会社・ビルを建てる会社・ガスや水道の工事をする会社…といったさまざまな場面で利用されています。

プロダクトによってユーザーやコンテキストが異なるため、必要な知識も変わってきます。また、同じプロダクト・同じ機能であってもさまざまな場面で利用されるため、多角的な業界理解が求められます。
それがアンドパッドの難しいけどやりがいのある部分だと思っています。

どんなメンバーがいるの?

ずっとデザイナーをしてきたメンバーだけでなく、元エンジニアや元営業などいろんな経歴のメンバーがいます。

また、建築・建設業界特化のサービスのデザインに携わるということで、業界に関連した興味を持っているメンバーが多いです(賃貸物件の間取りを見るのが趣味とか、自宅をリノベーションしたとか、工事現場を見るのが好きとか)。

そのうちデザイン部のメンバー紹介記事も書きたいと思っています。

デザイナー間のコミュニケーションはどうやってるの?

日々の業務ではプロダクト単位のチームとのコミュニケーションが多くなりますが、デザイナー間の連携をスムーズにするため以下のようなコミュニケーションの場を定期的に設けています。

Designer All Hands(毎週)

デザイナーが全員集まる定例ミーティングです(All Hands って響きがかっこいい)。
以下のような流れで進行しています。

  • マイトピ
    司会(当番制)が自分の気になるトピックについて5〜10分くらい話します。お互いに興味関心を共有しあい、人となりを知ることができます。最近は、ゲームUIや映画のCGの話題で盛り上がりました。

  • 業務報告
    2〜3人ずつ、10分くらいの持ち時間で最近の業務を報告します。どんなことをやっているのかを共有することで、お互いの業務と担当プロダクトの理解に繋がります。

  • プロダクトウォークスルー(不定期)
    アンドパッドのプロダクトは幅広いので、そのプロダクトの担当デザイナーが実際に画面を操作しながら想定されるユーザーと使われ方を紹介します。

  • 共有事項や相談など

相談したいことはチケットに記載しておきます

デザインシステム駆け込み寺(毎週)

デザインシステムに特化した共有・相談の時間です(デザインシステムについては後述)。
アンドパッドではデザインシステム構築にデザイナー全員が携わっているので、トークンやコンポーネントの定義についてお互い進捗共有やレビューをしたり、デザインシステムを利用する上の困りごとを相談したりします。

チーム夕会(毎日)

デザイン部の中でも、関連のあるプロダクトを担当するデザイナー同士で情報共有する時間です。
進捗共有や、悩んでいるUIの相談が気軽にできる場です。

デザイン部部会(毎月)

デザイナー全員とプロダクト本部長との情報共有の場です。
部長へ質問して回答をもらったり、全員でディスカッションしたりします。

各種勉強会

任意で参加できる勉強会もやっています。

  • OOUIデザイン勉強会(毎週)
    「オブジェクト指向UIデザイン」の本を読む会です。一人だと理解に時間がかかる部分も、みんなで読むと理解を深めやすくて良いですよね。以前読んだことがあったのですが、改めてみんなと意見交換しながら読み進めることで新しい気づきを得られています。

  • Human Interface Guidelines を読む会(毎週)
    iOS エンジニアといっしょに、Apple 社が定めたデザインガイドライン Human Interface Guidelines を読む会です。一人だと理解に時間がかかる部分も、みんなで読むと理解を深めやすくて良いですよね(大事なので二度言いました)。以前はGoogle 先生に翻訳してもらいながら読み進めていましたが、先日ついに公式で日本語訳が追加されたので、より会も盛り上がっています。

developer.apple.com

  • Figma 勉強会(不定期)
    デザインツール Figma を使いこなすための会です。
    アンドパッドで初めて Figma に触れるメンバーもいるので、Auto Layout や Variants など利用頻度が高い機能(効率的にUIデザインをするだけでなく、デザインシステムの利用やコンポーネント定義の際にも必要なので)の使い方をメンバー同士で教えあっています。
    また、先日の Config 2023 のような新機能がリリースされたタイミングで、みんなでわいわい Figma を触ったりしています。

…こうやって書き出してみると、コミュニケーションの場がたくさんあることを改めて実感できました。

もちろん、上記のような場以外でも、Slack のデザイン部チャンネルやデザイン部雑談チャンネルで気軽に声を掛け合ったり、ハドルでサクッと会話したりしています。

「プロダクトチームを越えてデザイナー同士ちゃんと連携できるのか」「リモート環境下でコミュニケーション不足になるんじゃないか」と心配されている方が、これで安心できるといいなと思っています。

どんなツールを使ってるの?

よく使うツールをピックアップしてみました。

デザイン

  • Figma
    UIデザインからデザインシステムの管理まで、使わない日は無いです(ビジネスプランを契約しているので、ブランチ機能を利用できるのが便利!)。
    さまざまな機能を使いこなせるよう、お互い教えあっています。

  • Illustrator
    アイコンをつくるときなど、利用頻度はそこまで高くないです。
    デザイナーは AdobeCC のアカウントが付与されるので、Photoshop などももちろん使えます。

デザインシステムのドキュメンテーション

デザインシステムで Storybook を導入しているため、開発者向けのツールも使っています。触ったことがない方もしっかりサポートしますのでご安心を。

  • GitHub
    デザインシステムのドキュメントを管理するのに使っています。

  • Visual Studio Code
    デザインシステムのドキュメントを書くのに使っています。
    もちろん他のエディターでも大丈夫です。ただ、特にこだわりが無ければ VS Code だと他のメンバーと環境が揃っていてサポートしやすいのでおすすめしています。

情報共有

  • Google ドキュメント、スライド、スプレッドシート等
    議事録を取ったり、共有資料をつくったりするのに使っています。

  • Confluence
    プロダクトの仕様をまとめたりするのに使っています。全社ナレッジもここにまとまっています。

コミュニケーション

  • Slack
    テキストコミュニケーションはもちろん、ハドルミーティングもよく使います。
    デザイン部チャンネル・デザインシステムチャンネル・デザイン部雑談チャンネルなどで日々わいわいコミュニケーションしています。

  • Google Meet
    いつものミーティングで使います。日々リアクション機能で拍手やハートが飛び交っています。

  • Zoom
    総会など規模が大きいミーティングは Zoom でやることが多いです。

  • Miro
    チーム夕会や Designer All Hands など情報共有の場で使ったり、プロダクトチームで仕様検討や振り返りに使っています。

デザインシステムにどう取り組んでるの?

アンドパッドでは「Tsukuri」というデザインシステムの構築を、デザイナー全員で進めています(前述の「デザインシステム駆け込み寺」などの場でコミュニケーションしています)。
デザイントークン・コンポーネントを定義し、Figma でのデザイン時に利用するだけでなく、専任エンジニアに実装いただきプロダクトへの導入を開始しています。

現在の Tsukuri については、推進しているデザイナーかわかみさんが先日登壇したイベントで紹介されました。

speakerdeck.com

かわかみさんのインタビュー記事です。

www.wantedly.com

また Tsukuri 専任フロントエンドエンジニア寺島さんの記事も、Tech Blog に掲載されています。

tech.andpad.co.jp

わたし自身、元々 Material Design や Human Interface Guideline といった各社のデザインシステムを眺めるのが好きで、アンドパッドでデザインシステムに携わることができて非常にテンションが上がっています。
例えば、コンポーネントの定義では複数のプロダクトで汎用性高く利用できるかたちを模索しながら進めるのですが、これがとても楽しいです…!

デザインシステムをつくりあげる段階に携われる機会ってとても貴重だと思うので、興味のある方はぜひ今のフェーズを味わっていただきたいです。

デザイナー視点からのデザインシステムの記事もそのうち書きたいと思っています。

おわりに

最後まで読んでいただきありがとうございました!
この記事でアンドパッドのデザイナーの雰囲気が少しでも伝われば嬉しいです。

前職で toC エンタメ系サービスのデザインに6年ほど携わっていたわたしにとって、toB の中でも建築・建設業界に特化したサービスを提供するアンドパッドは未知の領域でした。

どんな環境だろう。どんな人が居るんだろう。どんな仕事をするんだろう。

コロナ禍での転職活動で面接はほぼオンライン、内定者面談でオフィス訪問しても実際に会える人は一握り。
面接や面談で入社意欲は高まるものの、ネット上で「アンドパッド デザイナー」と検索しても情報がほとんどない。正直なところ不安でした。

緊張しつつ迎えた入社日。
建築・建設業界についての基礎知識を身に着けられる入社後5日間の研修。デザイン部配属後も部署内でじっくりオンボーディング。

…いい意味で拍子抜けするくらい、受け入れ体制が整っていました。
不安だったあの時間、要りませんでした。

わたし自身がそんな経験をしてきたので、この記事のような情報を発信することで「アンドパッドのデザイナーのことがわからなくて不安」と感じる方が減るといいなと思っています。

「この記事を読んでもまだわからなくて不安」「もっと知りたい」という方は、ぜひお気軽にご連絡いただければ嬉しいです。

hrmos.co

これからも、アンドパッドのデザイナーについて知っていただけるよう情報発信を増やしていきますので、よろしくお願いします!

ではまた。