「リリースして終わりじゃない」ユーザーの理想からはじめる仕組みをつくる。【プロダクトデザイナー 都筑智子】

NewsPicksのデザインといえば、インフォグラフィックスや図解、世界観を演出するバナーの印象が強いかもしれません。実際には、アプリやWebでユーザーの使いやすさを追求するプロダクトデザイナーや、広告商品でブランドデザインを担うグラフィックデザイナー、事業の企画や組織づくりを専門にするデザイナーも在籍しています。デザイン領域の違いに加えて、バリューの一つ「異能は才能」を体現する個性豊かなデザイナーがいるのも特徴です。

デザイナーがデザイナー目線でお届けする連載「NewsPicks Designers」にてNewsPicksのプロダクトデザイナーをご紹介していきたいと思います。全6回、初回は2021年入社プロダクトデザイナーの都筑さんをご紹介します。

都筑 智子（つづく ともこ）武蔵野美術大学を卒業後、2016年にヤフー株式会社へデザイナーとして新卒で入社。ヤフーでは広告事業、コマース事業のUI/UXデザインを担当。約5年間の在籍を経て、2021年7月にNewsPicksにプロダクトデザイナーとして入社。🕊 Twitter: @hrimoka

つづく（ひらい）ともこ | mokataaan｜note

ー NewsPicksに転職するキッカケはなんでしたか？

前職に新卒入社してから5年くらい経ち、デザイナーとしてもう少し関われるタッチポイントを増やしたいと思うようになり、転職を考えるようになりました。そのタイミングでNewsPicksからスカウトのお声がけがあり、当時からNewsPicksユーザーで、魅力的なメディアだなぁと思っていたのと、さらにカジュアル面談で当時面接官を担当してくださった吉川さんとお話してみて、お互いの共通言語や熱量が一致しているなと思い、入社を決めました。

ー 前職と違うところはありますか？

当時は担当部署が細分化されていたこともあり、例えば1つのアプリ内でも画面によってデザインを担当する部署が異なるようなケースもありました。
NewsPicksではメインとなるNewsPicksアプリやWebをはじめ、関連する複数事業のデザインに関われる機会があるのが違いかなと思います。

ー フルフレックスという働き方に不安はなかったですか？

前職でも2020年からリモートワーク中心だったこともあり、不安はなかったです。入社後に社内でオフラインイベントも数回ありましたし、画面越しにもリアルでもお会いしたことがある人がほとんどで、仕事のやりづらさはあまり感じませんでした。リモートワークの方が作業しやすいですが、近くにいる人とカジュアルに話せるのはオフィス出社のメリットだと思っています。感染症が落ち着いたら、チームメンバーと話したり、ご飯に行ったりしたいですね。

ー 最近のお仕事はどんなことをしていますか？

現在はNewsPicksのWebサイトの改善を担当しています。
私と、デザインユニットのリーダー、PMの3人で、改善箇所の検討からデザインまでを議論する時間が多いです。議論の中では、疑問点があれば率直に意見を伝えることもありますし、その場でFigmaでデザインに起こして見せてアイデアを出し合うこともあります。デザインの進め方としては、ビジネス要件やデータをもとに大まかな方針をPMが決めて、私が可視化し情報を補うという作業を繰り返して、具体イメージをどんどん詰めていきます。

画面によってはユーザーインタビューをして、サービスの利用の仕方について解像度を高めていきました。対面で実施できない分、オンラインインタビューのナレッジも蓄積できましたし、これを生かして今後も継続的にインタビューは続けていきたいと思っています。

ー エンジニアとはどんなやりとりをしているのでしょうか？

Webサイト改善プロジェクトでは、UIデザインが刷新される箇所が多いため、エンジニアへのデザイン共有手段として、Figmaファイルをそのまま共有するだけでなく、対面で新UIデザインの説明や、エンジニアからの仕様面での疑問を解消するためのミーティングを週2回の頻度で行っています。

また、デザイナーとエンジニアの共通認識としてデザインシステムの必要性を感じています。画面のデザインを作るだけでなく、デザイントークンを随時整備しながら、再利用可能なコンポーネントを作り直し、基盤の構築を進めています。デザインシステムはデザイナーだけで完結できるものではないので、初歩の段階からエンジニアを巻き込んでいます。

NewsPicksのフロントエンドエンジニアは、モダンな開発環境を構築したいという思いはもちろん、ユーザーにとって最適なものを作りたいという思いを強く持っている方が多い印象です。たとえば、デザイナーから「A案とB案で迷っているけど、実装的にはA案の方がシンプルなのでそちらで実装進めましょうか」とコミュニケーションした時に、エンジニアメンバーから「ユーザーにとって使いやすい方でいきましょう！」と言われることもあります。既存の実装で対応できていなかったアクセシビリティ面の考慮も今回のプロジェクトを機に取り組んでいきましょう、と話しています。

ー 大変だったことはありますか？

Webサイトは数年ぶりの改修ということもあって、たくさんの課題をひとつひとつ精査しながら進めていくのに苦戦しました。

情報設計は主にプロジェクトメンバーで議論しつつも、画面によってはコンテンツ制作者に意見をもらいながら進めていました。（たとえば、番組ページに関しては動画制作チーム、記事ページに関しては編集部など）同時にユーザーインタビューで得られた気付きもあったので、それらの意見やアイデアを集約しデザインに落とし込んだときに、最終的に何がベストなのかを判断するのに時間を要したと思います。

ー これからどんなことをやっていきたいですか？

やっていきたいこと、たくさんありますね！
まずは今メインで担当しているWebサイトの改善をやりきりたいです。もちろんリリースできたらOKではなく、継続してユーザーからのフィードバックをいただきながらより良い形にアップデートをし続けていくつもりです。

また、リリース後も定期的にアップデートされていきますので、デザインシステム構築もマストかなと。一朝一夕で完成するものではないと思いますが、礎になるものを年内には築いていきたいです。インタビューは、ユーザーの解像度を上げるためにも呼吸するように実施していける体制や仕組みづくりも取り組んでいきたいです。

それ以外にプロダクトデザイナー全体でもっと発信力を高めていきたいですね。その先に「NewsPicksのプロダクトデザイナーになりたい！」と思ってくださる方が増えたらいいなと思います。

みんなで発信できるようになることが最終ゴールではあるのですが、まずは自分からやらねばと少しずつnoteを書いています。

インタビューを終えて

入社半年で大型プロジェクトのメインデザイナーとして活躍する都筑さん。大きいプロジェクトの最中でも、社内のどんな些細な依頼にも真摯に応えていく彼女に対して、他職種のメンバーからも頼られる存在になっているように感じます。

主体的にいろんな角度でチャレンジしていますが「やりたいことがたくさんある」とバイタリティをビシビシ感じて、今後どんなことにチャレンジしていくのか一層楽しみになりました。

最後までお読みいただきありがとうございました！
次回も異能なプロダクトデザイナーをご紹介していきます。

お知らせ

NewsPicksでは異能溢れるデザイナーを募集しています💪

プロダクトチームの体制や取り組みについてはこちら👇

NewsPicks - Product Design team

インタビュー・編集：吉川亜香音
編集：薄井春香