1. フムフムエフエム by @takejune
  2. Figmaで変わるデザインプロセ..
2021-09-13 30:48

Figmaで変わるデザインプロセスと「デザイナー」が果たすべき役割と - ゲスト: のぶお(@nobgraphica)

spotify apple_podcasts

前回に引き続き、プロダクトデザイナーののぶおさんをゲストにお迎えして、Figmaなどによって変わりゆくデザインプロセスと、その先でデザイナーが果たすべき役割について話をお聞きしました。

00:03
こんにちは、takejuneです。
この番組は、デジタルプロダクトの作り手をゲストにお招きして、
フムフムと知識を増やしていくポッドキャスト番組です。
今回のゲストは、前回に引き続き、プロダクトデザイナーの野道さんです。
Figmaなどによって変わりゆくデザインプロセスと、
その先でデザイナーが果たすべき役割について話をお聞きしました。
よろしくお願いします。
よろしくお願いします。
前回は、メルカリに入ってからの6年間で主にやってきたことだったり、
その中でどういうことを考えて作ってきたかみたいなところについて、
話をお聞きしてきたんですけど、今回はそういった学びを経た上で、
2021年、どういうことを考えていったりとか、
どういった仕事の仕方をしているのかみたいなところを深掘りしていければな
というふうに思っているんですけど、
最初のプロダクトのファーストローンチに至るまでの
情報設計、サービス全体での情報設計みたいなところと、
アップデートしていくにあたって、機能単位での情報設計みたいな
画面遷移だったりとか、ユーザーはどういうふうに移動していくのかみたいなところの設計も
デザイナーのほうで最初に叩きは作っていくような感じのイメージなんですかね?
そうですね。僕は直近だとそうかなと思っていて、
メルペインの立ち上げの時は基本、一緒にやってたデザイナーと、
何も決まってない中で先に画面作っちゃったんですよね。
仕様とか全くないけど、こんな感じになるんじゃないの?みたいなのをまず作って、
それでエンジニアも何作るか最初わからなかったので、
そういうのを見て、どれくらいかかりそうみたいなのを、
なんとか見積もってたっていう状態からスタートしてますね。
なるほど。最初に目に見える形にしてしまって、そこから議論がスタートするというか。
そういう状況を作れたのはすごく良かったなと思っていて、
結局みんながそれを見てくれるので、そこに情報が集まってくるんですよ。
これだとまずいとか、いろいろセキュリティの話とかも考えなきゃいけないので、
これだとちょっとまずいなとか、それぞれの機能単位で作っているチーム同士で、
辻褄が合っていないところとか、メルペイだと2Cと2Bと両面あって、
03:06
Bではこうなっているから、Cでもこういうふうにしてほしいとか、逆のこともあったりとかして、
そういうのを目に見える形になるとみんなが叩きやすくなるので、
そういう状態から全体感の話は進めていったのと、
最終的にはそのストラクチャー自体をQAの方が見て確認している状態だったので、
リリースするときのフローとか、画面が合っているかどうかみたいなのもほぼフィグまで。
作られたそのストラクチャーをベースにやっている状態は作りましたね。
今、すごいいい話だなと思って聞いていて、自分も結構同じようなところがあるなと思ったんですけど、
割とミーティングをしながらフィグマの画面を見せつつ、その場で視聴者さんに見せつつ、
確認するときは直接UIを見てもらったりとか、
みたいな使い方をして進めていくことも結構多くなったかなっていうのもあって。
最近リモートっていうこともあると思うんですけど、
フィグマベースでデザインワークするようになって、
その進め方とかって変わってきている部分とかあったりします?
そうですね、結構コロナ前からフィグマを使っていたから、
どうかな、でも変わったのはちょっと人数的なこともあるかもしれないですけど、
僕自身はフィグマを使っていないので、
メルカリショップに入ったときはデザイナー1人しかいなくて、
PMは僕よりデザイナーより人数多かったんですよね。
だから単純に言うと、この人数、3人とか4人PMが行ったとすると、
この人数から一気にデザインを頼まれると、もう終わるなって思ったんですよ。
全然変わらないんですよね。
だから結構早い段階でコンポーネントだけ作って、
もう自分でデザインしてって言ってお願いしました。
自分でやってって言いました。
あの、何だっけ、
自分でデザインしてって言って、
自分でデザインしてって言って、
自分でデザインしてって、
自分でデザインしてって言って、
オートレイアウトとかにしておいて、
何か足しても勝手にフレームが伸びてくれるようにしたりとか、
そういうのをきちんとやって、
何か分かんないことがあればその都度使い方説明したりして、
今普通にデザインしてますよ。
06:02
フィグマのリファクタリングを副業の方にちょっと入ってやってもらって
ちょうど終わったところなんですけど
そのタイミングでPDMの方1人入ってきてくださったときに
割とそのコンポーネントを使ってUIがしがし作ってくれるので
ワークしてるなっていう感じがあって
それがすごい良くなってきて
すごい良くなってきて
viaプロジェクターのポッキー教育担当のブ・パイラルさんが
新キャラクター1位になるという
うん
んですけど
それで
それがもう
という面白さを
リファクト率をのぼして
離させて
うん
掘り石を安定的にエンジニアで
就是この
フォトキャストやってるんですよ 創造でも
はいはいはい
でその創造のサムネイルとか そのいちいち作りたくないんです
よ 正直 めんどくさいんで
なんかもう自分でやれた方が早い じゃないですか
そのいちいち頼んで待ってるっていう のももったいないから
はいはいはい
だからもうこういう風にして画像 を差し替えればいけるからみたいな
レイアウトのパターンだけ作って 登壇 スピーカーの写真だけ差し
替えられるようにして それで全部 自分で書き出してもらえるように
したりとか コーポレートサイト も全部ノーションで作ってるんですけど
ノーションのニュース プレスリリース とかもPRの人たちが自分でノーション
で書いて画像をアップロードして スーパーのURLとかも自分で設定
できるように全部説明書いてっていう 風にやってるんで 基本デザイナー
じゃないとコーポレートサイト 触れないとか エンジニアじゃない
といじれないみたいな話は一切 ないんで アクセシブルにするんで
誰でもできる状況を作ってある から やれないとは言わせねえぞ
みたいなプレッシャーをかけつつ 誰でもできるようにしてスピード
上げてはいます ビルがある人がやれる状況を作る
方が早く物事って進むと思うので そういう状況をひたすら作って
いいって感じですね
のぶおさんがやりたいところだ ったりとか 注力したいところに
時間を割きたいっていうのがその 根底としてあるのかなと思うん
09:04
ですけど
そうですね それはそうだと思います
仕事していく中で こういうところ に時間を割きたいなとか 割合的
にこういう風な割合で時間割いて きたいなみたいな比率みたいな
どういう感じになってくるんですか ね
基本的には ほぼほぼ未来の部分に 時間を割きたいと思ってますね
足元の施策とかは正直やればいい と思います
やればいいじゃんって思ってます 基本的に
プライオリティ決めてやっていけば いいだけの話で
さっきも言いましたけど PMが ある程度デザインできる状況
を作ってるので ある程度こういう ふうに置けばいいかなみたいな
のは分かってくるわけですよね ここにこういうふうに置けばいいん
じゃないかみたいなこととか
ある程度のお約束とかガイドライン を理解した上で考えるUIってそんなに
ぶれないよねみたいな
そうです なぜかスライドとかに 画像を切り張りして作るとわけ
わからない位置にボタンを置いた りとかそういうなんとなくのイメージ
ぐらいしか作れなかったんですけど 実際にFigma使ってUI作ってもらう
とこういう置き方はできそうみたいな のがもうちょっと解像度上がって
入ってくるわけですよ
ツールが能力を引き上げてきたり とか制約によって
ブレが少なくなるみたいな
割とフロントエンドの組み方ディブ の組み方に近い形でFigmaのオート
レイアウトってできてるじゃない ですか
確かに確かに
だからここに入れたいんだけど なあみたいな時に入れられない
みたいなそういう苦痛ってそれぞれ あるんですデザイナーもそうです
しフロントエンドもそこに置いて ほしくないなとかそこには置け
ないんですみたいな話とかも必然 的にツールがカバーしてくれて
いるので割と変なUIにはならない ようになっている
だからそこのフィルタリングがある ことでスライドで切り張りして
作ってもらうよりかははるかに 精度の高いものがFigma上で上がって
くるわけですよね
なのでそんなにエンジニアから してもそれってできんのみたいな
話にはならない状態で試作が 降りてくるというか共有される
のでなんて言うんでしょうねいいん じゃないっていう状態からスタート
できるわけですよねだいたい
いい意味で我々の仕事が減って いってるというか
僕は別にいいんでそれでいいんで 仕事なくなったら次のやりたい
12:03
ことをやればいいかなって思ってる から全然そのほうがいいかなと思って
いて
でも多分ちょっと話ずれちゃう かもしれないけど社会っていう
かこのデザイナーの仕事全般的に それは言えるなとは思いますね
いわゆる冒頭で分類してたUIデザイナー みたいなのが勝ちって
だってある程度フィグマのツール とかでカバーできちゃう部分がある
からそれだけやってるっていう のだとあまり意味をなさないという
かUIデザインの中で何ができるん だっけっていうかどういうことが
プラスオンでできるんだっけっていう ところが勝ちになってくるのかな
とは思ってはいます
そうですよね最近自然言語から UIを生成するみたいなツールとか
もできたりしてるぐらいだから
どっちかっていうとだから自然言語 からっていうか要はとはいえその
自然言語からアウトプットされる UIはどうするのっていうそのUI
を決める人は必要なわけじゃない ですか
はい定義するというかルールを
どういう情報を食べさせる人ですね AIにそういう人はいるのでどういう
情報を学習させると我々にとって 最適なUIが作っていけるのかっていう
のを作れる人だったらそれは価値 があるなって思うんですけどただ
UI作ってるだけだといわゆるよく 言われるAIに仕事を奪われるみたいな
そういう話になってっちゃう
なるほど
食べさせる情報を考えていくって いうことが未来のことを考える
ような仕事っていうのとニアリー イコールな感じなんですか
それはちょっとずれちゃって単純 にさっき言ってた未来について
考えるっていうのはデザインって 基本的に投資だと思ってるんですよ
僕は
はいはいはい
VCがスタートアップに投資する っていうのと僕は一緒だと思って
てさっきもメルペイの時の立ち上げ の話しましたけどそうやって将来
的に我々が作りたいものって何 なんだっけみたいなところに関
して時間を使ってそれをアウトプット してみんなに共有することでみんな
が作っていくものをお互いに理解 できる状態になったわけじゃない
ですかそういう状態を作るのが デザイナーの仕事だなって思って
15:01
いて試作から積み上げていくと やっぱり積み上げでしかならない
んでペタペタバンドエイドを貼 っていくみたいな状態になりがち
なんですけど未来から逆算する とマイルストーンになるわけですよ
はいはいはいはい
段階的に出していくというか一 気に未来の理想のプロダクトには
なれないにしても逆算して作ってる んでそのゴールには一応近づいて
いる状態を徐々に徐々に作って いくことができるんでそんなに
無駄がない開発になるかなって 思っていてなんて言うんでしょう
ねそういう先々こういうことしたいん だよねっていう道筋を何か可視化
するのが僕はデザイナーの仕事 なのかなって思ってるんでそこに
時間を使った方がいいんじゃない かなって思っている
はいはいはいはいなるほどその 視点がないと短期的なゴールには
近づくんだけど長期的なゴールには 遠ざかったりとか後々遠回りしない
といけないみたいな進め方になって しまったりするような気もする
のですごい意味のあるステップ もちろんスタートアップだったり
どの会社もそうだと思うんですけど 将来的な理想像って常々変化して
くるとは思いつつ現実を度外視 すればこういうふうになっていたい
みたいな未来はあったりするわけ でそういうのを可視化しておかない
とどんどんビジネス都合だったり 会社の状況次第でずれていっちゃ
って本来向かいたい方向からず れていっちゃうんじゃないかな
とかは思うんですよねだからその 辺は折に触れて見直せるものが
あって今状況としてはこうじゃない から理想としてはちょっと変わ
ってるかもねみたいな話は全然 健全な議論だと思っててでもそれ
を確認できる物がないと確認できない じゃないですかだからそういう
のの確認する手段の一つになれば いいなとかは思ってやってます
はいはいはい野望さんの仕事って そのイメージとしてはもちろん
デザインをリードしていくポジション だとは思うんですけど経営者という
18:03
か事業責任者的な人と伴走しながら その人が目指してるゴールに向かって
最短距離を走ってるような形で そのプロダクトとかデザインを
整えていくみたいな感じの動き が多いんですかね
そうですねなんか元々無駄が嫌い なんですよね無駄なことするの
すごい嫌いであとエネルギーが 無駄にかかっているけど全然進ん
でないみたいなのもすごく嫌い なんですよだからすごく電動自転車
みたいな感じで軽い力でスイスイ 進む状態を作りたいなっていう
のは常々思っていてそうすると 電動自転車使ってても道分かんな
かったらすごいいろんな距離走 らなきゃいけないじゃないですか
あっち行ったりこっち行ったり してやっと着いたみたいな感じ
になっちゃうんでそこはなんか もうちょっとナビゲーションになる
何かがあったほうがより早くゴール にたどり着けるしその確率が上がる
と思っていてペダルをたくさん 漕いでるんだけど全然進まない
みたいな状態ってスクリーンに 問題があったりとかするってこと
だからそこはもうちょっとスムーズ に開発進められるようにしたい
なって思うし結論は竹順さんが 今言ってた通り意思を持っている
人に伴奏して意思決定できる材料 をひたすら用意したいっていう
のがやりたいなって思っている ことかもしれないですね
何ていうかもちろん意思を持った 人に材料を提供してどんどんゴール
に到達するスピードを速めていく ような動きって楽しいし自分でも
向いてたりするなとか思ったり する分もあったりするんですけど
時に向かっているゴール自体に対して 意思決定に入っていったりとか
目指すべきゴールはこっちなん じゃないのっていうゴールポイント
自体を決めていくところに入って いきたくなったりとかしません
しますよ その辺のバランスというか
そこ難しいですよね そういう ふうになった時がありました
過去もこうでしょうみたいに思った ビジネスの人ともゴリゴリに一緒に
21:03
ディスカッションしている中で その授業に対しての解像度がバチ
バチに上がっていって絶対こう じゃないって思ってこういうふう
にしたほうがいいとかって思った こともあるんですけど
あるでしょ 全然それは授業会社にもう10年
くらいいるんで何度もあるんですけど 難しいのがやっぱりとはいえお客様
に使ってもらわないと意味がなか ったりするしビジネスとして成り
立たないといけないみたいなところ があるので自分がじゃあいざちょっと
一歩外から全体俯瞰して見ている ような役割でプロジェクトに入っている
ところからガッと自分がいわゆる 天気目に行くみたいな時にじゃあ
誰が全体見てるんだっけとか俯瞰 してるんだっけみたいなところが
デザイン面でいなくなっちゃう っていうか自分が守ってたところ
を守ってくれる人がいたら僕は パーンっていけるんですけど誰も
いなくなっちゃうんですよね誰も いなくなっちゃうと要は偏っちゃ
うんですよ視点が
バランサーにならないといけない みたいなのが自分の中であるわけ
ですね
僕はどうなんだろうデザイナー って結構そういう役割なんじゃない
かなって思ってて開発的なフィジビリティ を渡せるわけじゃないしビジネス
的な要は儲けなきゃいけないとか そういう観点を提供するわけでも
なくひたすらお客様使ってもらう 人たちに寄り添ってこういうふう
な状態だったら使ってくれるん じゃないかって思っているわけ
ですよねその点が訂正的だって よく言われるポイントなんですけど
でも僕からするとお客様に使って もらえないんだったらそれは意味
がないから一番そのお客さんの ことを考えてるデザイナーがそこ
はしっかり考えたほうがいい積 書的にそこのお客様観点で意見
を全部言ったほうがいいって思 っているんでビジネスとエンジニアリング
に対しては中立であったほうがいい って思うんですけど片屋僕がビジネス
寄りになってこうしたほうがいい とか逆にエンジニアリング観点
でこうしたほうが早く済むとか そういう話をしちゃうと誰もお客
24:06
様のことを見てる人がいなくな っちゃうんでいつも怖いっていう
か行っちゃっていいかなみたい に思いつつ行っちゃったりやっぱ
行かなかったりみたいなことが 多いですね
その空っぽのキャパシティにプロダクト っていうところを詰め込んでいく
ことが多いのかなとは思うんですけど 想像とかはコーポレートページ
とかも作ったりとかしてますよね
はいそうですね
そのコーポレートブランディング みたいなところとかも一貫した
感じで作りたいなみたいなのとか もあったりするんですか
自分の仕事の領域ってどこまで として定義現状してるのかとか
その将来的に本当はしたいとか みたいなのってどんな感じなの
かなって
そうですねなんかめちゃくちゃ 理想論を言うともうバチバチに
統一したいですよ
なんかもうブレたくない会社から 出すメッセージとしてプロダクト
もそうだしPRもコーポレートのPR もあったりプロダクトのPRもあった
りリクルーティングのPRもあった りして
想像はIRとかないですけどそういう のってもう社外に出すメッセージ
だからもう何ていうんですか全部 合わせてどういうふうに発信する
かっていうのが僕はブランディング よく言われる意味でブランディング
だと思うしそこのクオリティの バーを設定するっていうのがブランディング
だと思ってるのでそれはもう全部 意図を持ってやりたいっていう
感じはありますねだから別にプロダクト っていわゆるソフトウェアエンジニアリング
が絡む部分のプロダクトにその プロダクトデザイナーがかかる
と思うんですけど自分が会社に 所属している以上は会社全体が
ある種プロダクトだなっていう ふうには思ってるんでこの規模
感だとソフトウェアデザインだけ してると部分なんですよもっと
デザインって横広じゃないですか インターナルコミュニケーション
もそうだし外に出ていくコミュニケーション もそうだし
デザインって言えないものはない ぐらいの感じですよね
だからデザインって最近いろんな ものにデザインってつくのはそういう
理由ですよねだからきちんと設計 するっていうことがいわゆる抗議
27:04
の意味でのデザインだと思うん でそこはもちろん僕が全部できない
プロフェッショナルなわけではない けどどういう設計してるんだっけ
っていうのはちゃんとやりたい っていうか何て言うんだろうな
だからさっき言ったみたいな軽い 力でペダルこいでスイスイ進む
状態にしたいので無駄にすごい パンチ打つみたいなのは嫌なわけ
ですよね 整え対マンじゃないですか
整え対マンですね割と 目に入ったもの何でも整え対マン
じゃないですか そうそうそういう感じですねまさに
僕はもう回ってるものにはいち いち口出さないのでもう別にいい
じゃんってもう回ってるじゃん って思うと別に僕が何かやった
ほうがいいことありますみたいな 感じなので整え対マンですね本当に
でも多分もうすぐ整えちゃうから そんなまた新しいことやっていく
のかもしかもメルカリにいるんだ ったら権力を手にしてほしいですね
僕は全体をまじで整えちゃって 欲しいみたいな整ってくれたと思
うんですけどめっちゃ整ってる と思うけど箱をパンパンにして
欲しいなっていうのをちょっと 思いましたね話聞いたとき
なるほどね確かに ありがとうございます 最後に聞いてくださっているから
ったら何か一言メッセージでも あればお願いしたいんですが何か
ありますか メッセージ難しい何だろう何ですか
ね何か結構デザイナーの人たち 僕リーマンショックのときにデザイナー
になってるんで結構ウェブデザイン っていう領域にすごく恩があって
ずっと還元したいなみたいな思い があるんですけどそれで結構最近
ミーティーとかを使わせてもら っていろんなデザイナーの話を
聞いてるんですよ もちろん一緒に働けたらいいな
みたいに思ってあっている側面 ももちろんあるんですけどどっち
かっていうとどういうところに 悩んでるのかなとかどういうキャリア
に不安を感じているのかなとか っていうのをフラットに僕が聞き
たいっていうのがあるのでもし 今こういうこと悩んでるんですよ
ねとか壁打ちしてほしいですみたいな 人がいたらツイッターのDMでも
30:05
いいしミーティーでもいいんですけど 連絡もらえたらお茶くらいはできる
のでぜひっていう感じです
はいじゃあ早速来週申し込ませて いただこうかなと思います
今めっちゃ話したやんめっちゃ話 したしもう
お気軽にのぶおさんまでツイッター オアミーティーで売れなくていただけ
ればと思います私もやってるので よかったらお願いします
ちょっと後半もすごい長くなっちゃ ったんですがいいお話聞けたかな
と思いますありがとうございます
ありがとうございます
今回のゲストはプロダクトデザイナー ののぶおさんでしたありがとうございました
ありがとうございます
30:48

コメント

スクロール