00:04
こんにちは、takejuneです。この番組は、デジタルプロダクトの作り手をゲストにお招きして、フムフムと知識を増やしていくトーク番組です。
今回のゲストは、ランキャリアデザイナーのかなさきさん、LINE福岡のデザイナーのすすみさんです。よろしくお願いします。
よろしくお願いします。
今回のゲストのお二人は、私が働いているスマートバンク社で、副業という形でデザインファイルのリファクタリングに関わっていただいているお二人という形でお招きしております。
簡単に自己紹介をお願いしてもいいでしょうか。さきさんからお願いします。
私からは、ワンキャリアでURUXのデザインをメインにやっています。あと、クリエイティブディレクションもウェイトとしては多く担当して働いています。
前職でも似たようなことはやってたんですけど、主にアプリだったりウェブだったり、他にもやっぱり希望が大きくなかったので、いろんなクリエイティブバナーを作ったり、ユーザーさんにお届けするための放送みたいなものを作ったりみたいなことをやっていたんですけど、
1月にワンキャリアに前職をしまして、今までやったよりも大きいプロジェクトを任せてもらっているので、そろそろ1年経つのにずっと仕込み期間が多いですねっていう感じの仕事を今はしています。
すごい楽しくやらせてもらっているので、デザインチームもちょっとずつ今増えて、そろそろ仕込んでいたものも出そうで、とても楽しみです。
私、自己紹介ずっとあるんですよね。ちゃんと書いておけばよかった。
大丈夫です。全然大丈夫です。
ワンキャリアさん、先ほども裏でお話ししてましたけど、上場おめでとうございます。
ありがとうございました。
腹に勢いよく引き締めてって感じですね。
でもあれなんですね、今回上場関係でもいろいろ作ったりとか忙しかったっていう話があったんですけど、まだ仕込み中の案件がたくさん控えているっていう感じなんですね。
そうですね。仕込んでるよっていうのは全然言っても大丈夫です。
ちょっと問題があればカットしようかなと思います。ありがとうございます。
もう一方がLINE福岡のデザイナーの鎮見健太郎さんです。よろしくお願いします。
よろしくお願いします。
自分自身はLINE福岡に2019年にUIデザイナーとして入社して、今は管理職の方をやっています。
もともと僕のデザインのキャリアは大学で工業デザインを専攻して、家具や家電のデザインに将来取り組みたいなと思って入っていたんですけど、結果的にはそういう工業デザインとは違うところに落ち着きました。
03:16
大学の時はドイツに留学1年半ほどして帰ってきてから、その後にウェブとかこういうインターネットの世界面白いなと思って東京のSIなベンチャーにインターンから入社して、その後フリーランスをやって、
その後に福岡でイギリス人が立ち上げたスタートアップに入社して、台湾の子会社を立ち上げたりして今の現職LINE福岡に入社しています。
グローバルだ。すごい。
今の聞いて私もう一回やり直せばよかった。すごいしっかりしてる。経歴ってそういうことですよね。そうだよね。
何か補足ありました?
実は多分顔合わせの時に言ってるけど、私も大学の時工業デザインをやってたんですよね。
そうなんですか?
そうなんです。大体結構似てる。そこは別は似てて。
ちょっと盛り上がりましたね。
盛り上がりましたね。一緒なんですよっていうのを言ってたっていうのを思い出しました。
私は大学の4年の時にひょんなことからキャンドルっていう企業さんに拾われまして、
副社長にいいじゃん、着ないよみたいな感じで経験ないのに出てもらってやり始めたら工業デザインってリリースしてから100点のデザインってやっぱできないとは思いつつも
出してからもっとこうがよかったにも手を出せないじゃないですか。
そうですね。
それが最初Webのデザインをしてた時に検証しながら進められるとか改善ができる。
ユーザーの行動を見てユーザーに届けているそのもの自体に改善ができることに感動して結局今EYXのデザインをしているっていう。
分かるなそれは。
僕も新卒の時によくキャンペーンページを作るみたいな仕事をやってたんですけど、それを出した瞬間数字がガガガと積み上がっていって売り上げが上がっていくみたいなのを見た瞬間に即時フィードバックの面白さみたいなのと自分が出したデザインによって金を稼げているみたいなアドレナリンが出まくる。
体験してハマっていったっていうのがありましたね懐かしい。
私もだからインターンの時は神経治療法だったんで出して結果見てすぐ閉じてみたいなのばっかりだったんですけど、全職でかなり検証とかを回しながらやってるのがめちゃくちゃ面白かったです。
06:07
もしかしたら工業デザイナーはそういうカッチリとした構造家だったりとか、そういうところに目が行ったりとか得意な面があるのかもしれないですね。
実現可能性は厳しいかもしれないですね。
そんなお二人を今回のプロジェクトでは副業という形でチームに入っていただいて、我々が運営しているB43というサービスのデザインファイルをリファクターしていくということをやっていったんですけど、
お二人に依頼する前のチームファイルの状態で、結構画面数的には多いんですよね。サービス的に。
意外と機能があって、アートボードの数で300以上とか、実際の画面数でも100以上ぐらいあって、結構画面的には多かったんですけど、
メインで使用している井戸とか、フォントを何となく一つの単一のファイル上でスタイル化していたりとか、
初期に作っていたUIパーツを一つのファイル上で何となくコンポーネントにしていたりとか、ゆるくまとめている状態ではあったんですけど、
状態別にバリアンツ化も全くされていないし、というか僕はバリアンツがどういうものかよく分かっていないみたいな感じで、どう設定するのかもよく分かっていないし、
オートレイアウトとかも全く使われていないみたいな感じの状態で、おそらく使っているデザインパーツというかコンポーネントに揺れがものすごくあるみたいなことも分かっていたし、
マージンとかが結構ガタガタずれているみたいなことも分かってはいたんだけど、初期って分かりながら進めていくしかないみたいなのもあって、
直したいなと思いつきてしまったのをこのタイミングでどうにかしようと一念発起してやることにしたという感じの状態だったというところでしたね。
僕のほうで目指していたこととしては、そういった色とか書体とかアイコンとかボタンとかのUIのパーツが一つのファイルではなくて、
コンポーネント管理用のファイルに適切に分割されていて、いろんなファイルからちゃんとライブラリーとして読み込めるようになっているというふうにしたいなと思っていたのと、
09:08
それだけでも結構大きいっちゃ大きいんですけど、もう一個はたくさんある画面をデザインしているUIのファイルのほうに作ったライブラリーをちゃんと適応して、
きれいなクリーンな状態になっているのを目指したいというので、最初に相談させてもらったという感じでしたね。
案件の中身としてはこんな感じだったんですけど、
もともとは一人の方にお願いしようかなと思って考えてはいたんですけど、軽い気持ちでこういった形の案件で副業で入っていただけるデザイナーが募集していますというツイッターに投げたんですよね。
そしたら思ったより反響があって、割とそうですね、たくさんのデザイナーの方からご連絡いただけたんですけど、その中で反応いただけた中にさきさんとすみさんがいらっしゃったという感じでした。
僕の視点からすると、そんな感じでプロジェクトを始めてたんですけど、さきさんはそのツイートを見ていただけたのかなと思うんですけど、見たときってどんなことを思って、なんで連絡くれたんですか?
どんなことを思って、結構懐かしい話だなっていうレベルの記憶なんですけど、当時ちょっとまず副業というか、やっぱりさっきも言ったみたいに仕込み長いものをやってたりとか、前職でもずっと同じものをやってたときの楽しいは楽しいけどちょっと他のことをやりたい欲みたいなのを副業と考えてました。
別に会社を辞めたわけでも、別のプロジェクトに切り替わりたいわけではなくて、副業でもちょっとスキルもアップしつつ、他のことをやってみたいなみたいなことをちょうど考えてました。
ツイートを、多分その当時竹枝さんをフォローしていたわけではなくて、何かにツイートが誰かのイネの中で回ってきてたんですよね。
見たときにフィグマのデザインシステムの構築っていうのを見て、応募したときも書いたんですけど、結構今までいろんなデザインとかをやってきて、それこそ新規事業とかでゼロから自分が作るときとかって、
ある程度枠作るけど、やっぱりさっき竹枝さんが言ったように最初ってガハッと作るしかないで、保留になっちゃうとか、しっかりそれこそそういうもんだなとは思ってて、自分もそうだったし、
12:02
リプスのデザインを知ったときとかも、どんどん新しいコンポーネントが増えていくけど、これの整理でいいんだっけみたいなことを考えながらもそこに着手できないみたいな状況を思い出して、ガッツリそれをちゃんとやってみたいってめっちゃ思ったんですよね、ツイートを見たときに。
で、ちょっと会社のスマートワークさんのやつを見て、雰囲気も、私多分いわゆるお堅い会社合わないんですよ、卒業でやるにしても一緒にできないんですよ。
一緒に働けそうだし、自分がちょうどもっと勉強してみたいとか、ガッツリやってみたいって思えることで募集されてるのがいいなと思って、当時の印象で言うと、デザインシステムを構築したことがある方って書いてあって、やばい、やってないってなって、でもやらせてくださいって言いましたんですよね。
やったことないけどやりたいみたいな、ネットにだけで送るっていうことをしましたと。
その後応募が結構あったから、何でしたっけ、もう一回メールか何かで送ったんでしたっけ、何かを自分の今までの知的か何かを送ってくださいみたいなことを言われたかなくなったんですよね。
一人二人連絡くれるかなと思ったら、結構二周年くらい連絡きたんで、ちゃんと先行させていただかないと皆さんに失礼だなと思って、もうちょっとヒントになる情報をいただいたっていう感じでしたね。
それで言われて焦って、ネットにだけで送っちゃったけどってなって、いろいろこういうことはやったことがあるけど、ここが自分がデザインシステム全くって言って、ちょっとは初期の段階で作ったけど、ここが自分の中でやりきれなかったですみたいなことをメールしました。
それとプラス今までこういうデザインとかやってきましたよみたいな、キッズとかも作ったりしてて、今はワンキャリアでウェブもデザインをしてますよみたいなことを作ってたんですよ。
多分次の日だか何かかな、後悔して、あれ多分サラッと書きすぎてるって思って、なんか追いメールをしたのを覚えてます。
私は本当にこれが課題だったんじゃなくて、これを課題だったから、今回これを機にちゃんと勉強しながら勉強するっていうか、やりきりたいんだみたいなことを多分メールにいつも送ってたんですよね。
いただきました。
っていうのが、なんかその応募というか、お願いすることがありましたって連絡くるまでの私の思い出ですね。
あれは一つの決め手でしたね。
熱意だけで押し通しました。
15:01
すみさんはどんな風に見てくれてたんですか?
僕も多分竹順さんのお名前は知ってたんですけど、直接フォローしてるわけじゃなくて、誰かのリツイートとかいいねとかで知って、わ、なんか面白そうだなと思って。
自分も会社でそういうので関わったときに、自分が知ってることが果たして局所的なもので、本当に一般的に通用するものなのかっていうのがわからなかったので。
かつ、やられてるのがフィンテックっていうことで、面白いなと思って。
最初はスルーしたんですけど、次の日とかにもう一回見に行って、どういうものなんだろう、実際プロダクトどんな感じで、どういう人たちがやってるんだろうっていうのを見て、やっぱりこれ応募しなきゃと思って応募させてもらったって感じですね。
ただあれでしたね、僕もちょっとさきさんと似てるんですけど、プラスアルファで結構条件をつけて送ってしまった気がしてて。
実際に今の副業でそんなに手を動かすっていうのが今の業務上できないから、やりたいけど実務員じゃなくて設計部分っていうか、頭を使うとこだけ良かったらさせてくれないかみたいな、そういうことを送らせてもらったって感じですね。
実際にそういうふうに、これじゃあ多分こう送ったもののすごい初対面なのに質問を質問で返すというか、こういう人できる人いませんかっていうのに対して、こういうのでありですかみたいなの初対面で言うのもちょっと失礼かもなと思いつつも、どうせやるんだったらこういう形で関わりたいなっていうのでご提案させていただいて、結果的にいい形で関わらせてもらえたかな。
そうですね。
何人かやっぱり他にもすごく良さそうな方いらっしゃったんですけど、すごい現実的なところで稼働がそんなに取れないっていう方もやっぱりいらっしゃったりとかはしていて、それなりに稼働できる方っていうのがまず1個。
最初の先行というかこちら側でお願いするにあたってやっぱり見てはいたりとか、でもやっぱりそれだけではなくて、これまでの経験の中でデザインシステムを構築したことがあるっていうのももちろんプラスなんですけど、
どういったお仕事をこれまでされてきたのかみたいなところで、やっぱりCM系のサービスを継続的にグロース含めてやられてきた方っていうのは1個魅力あるなっていうふうに思ってて、僕実は結構Lipsはかなり見てたんですよね。
18:13
Lipsのデザインってすごいよくできてるなと思って、結構研究してたサービスだったんで、それを作ってらっしゃる方がご連絡くれたので、純粋に一緒に働いてみたいなっていうのが結構気持ちとしてはあったんで。
そうですね、それがまず1個ありましたね。なんかご連絡したら結構やる気持って、冗談的にやってくれそうな感じがしたんで、これはと思ってちょっとフィーリングで入れさせていただいたっていう感じだったんですけど、
つつみさんも連絡いただいてコードフォリオとか見させていただいたときに、今回ご縁がないともったいないなっていう感じがあって、先行させていただかないといけないというので、さきさんにご連絡したんですけど、
普通はそれを送った瞬間にちょっと待てよと思っていて、1人じゃないとダメなんだっけっていう、と思って、なんかレビュアという形で入っていただくっていうのは、もしつつみさんが良ければアリなのかもしれないというインスピレーションで、どうですかっていうのを送らせていただいて快楽してもらったという感じの流れでしたね。
ありがとうございました。
そんな感じですね、お二人にこのプロジェクトに入っていただいてスタートしていったわけなんですけど、始まってみての最初のインプレッションというか、プロジェクトに着手して思ったこととかってありましたか?最初始まってみてどんな感じでした?さきさんとかどうですか?
まずなんか始まって触ってみて、本当に全然整理されてない状態なんですみたいに言われてたんですけど、全然綺麗じゃんって思ったのは覚えてます。
本当ですか?
そうですね、めっちゃ綺麗じゃんって僕も。
めっちゃ綺麗じゃんって思ってましたね。だからもうちょっと元々の範囲よりやりますよとかも全然やっちゃったっていうのもあるんですけど、結果的に増えちゃったんですけど。
確かにコンポーネントとかにはなってないけど、あれってルール化はされてるとは思ったんですよね、データ見た時に。
これって同じコンポーネントなんだろうな、これ一緒にできそうだなっていうのがすっと入ってきたんで、作業しやすかったなっていう印象でしたね。
21:11
嬉しい。
ファーストインプレッション。
すみさんもどうでしたか?
そうですね、僕が入った時にはすでにさっきさんが勧めていただいたところだったんですけど、データ見せてもらって、これ整備されてないって言ってたんですけど、オートレイアウトとバリアンスは設定されてないけど、明確な思想みたいなのは全てに適応されてたので。
そんなに整備整頓されてるなっていうのが僕も第一印象でしたね。
これは嬉しいですね。
なかなか他の会社の方にデザインファイル見ていただくこととかないので。
ないですね。
むずがいう嬉しいところではあるんですけど。
実際にファイルいじり始めて、このあたりがプロジェクトの肝だなみたいなところとかって思う部分とかってありましたか?やっていて。
やっていてで言うと、それこそFigmaのオートレイアウトだったりバリアントだったり、スペースを揃えるみたいなところだったりっていうのを、多分これデータ作るだけじゃなくて、こうやった方がいいよみたいなのを共有していくべきだなみたいなのは結構肝だなとは思いましたね。
ルール化みたいなのとかは。
運用面を考えるみたいなのは大事だなって思いました。
もう一個で言うと、最初アトミックでやろうとしてたんじゃないんですか?確か。
命名のルールとしてなんとなくレベル1、レベル2、レベル3みたいな。
で、整理しようと思ってたんですけど、スツミさんともお話をして、今の形にしてたんですけど、やっぱりそれってあんまり意外と使いやすくはないよねっていう。
あそこで結構初期に決めて進められたのは良かったなと思っていますね。
私もこれでいいんだっけって思いながら、それこそレビューで入ってもらった利点ですよね。
でも違うと思うんですよっていうのを背中を押してもらって、一緒に3人とビーティングした時に決めれるっていうのが良かった。
その上で一応、レベルっていう名前じゃないけど、私の方で3段階にさせてほしいという。
24:05
どこまで汎用を広げるのかみたいなので、今回ファイルを分けてるんですけど。
結構そこの実態も含めてできたのは良かったなと思っています。
肝っていうとちょっと離れちゃうんですけど、めっちゃ良かったのは、そのベストタイミングでめっちゃFigmaのデザインデータ公開された時期だったじゃないですか。
各社のデザインシステム。
ありましたね、コミュニティが充実してきたタイミングが。
めっちゃ出されて、めっちゃ良いタイミングすぎると思って、出てるやつ出てるやつ毎日めっちゃ見てコピーしてきて触りまくってみたいなのをやってたんですけど。
あそこもあって、いわゆる言葉的に、手法として凄い出てたAtomicっていうのが一回外れられたっていうのは良かったんじゃないかなって思いましたね。
あの辺りで公開されたデザインデータの作りみたいなのが結構考え方として判明されてる。
そう思います。
なんか、厳密さと管理のしやすさとのバランスどこで取っていくかみたいなところで言うと、厳密なAtomicをやっていこうとすると、それがちょっと管理しづらいというか、メンテコストが高すぎる方に傾いちゃうって感じだったんですかね。
そうですね。メンテコストもそうだし、やっぱりデザイン上で使いやすい区切りと、リスト上で使いやすい区切りってやっぱり違うっていうのはあるとは思いますね。
そこら辺の言語化はね、話し合ったけど、つつみさんの方が上手ですね。
つつみさんの方はどうでしたか、その辺り。
そうですね。肝みたいなところで言うと、さっきのメンテナンス性とか拡張性っていうところが自分も一つあったかなっていうのがあって、できるだけライトになるべくこだわりすぎないようにっていうか、作り込みすぎるとどうしてもメンテナンス性とか拡張性っていうのがどうしても限られてしまうっていうか、
デザインシステムに縛られてプロダクトが成長できないとか、悪い方向に行くっていうのは良くないなと思ったので、
プロダクトのより良い、今だと竹順さん主にメインで一人でやられてたので、そこが2人3人とか10人とかなったときに、共同で作っていくっていうせっかくの良さが死なないようにというか、その良さを殺しすぎないようなところでの、
27:04
そうですね、なるべく作り込みすぎない、ただカオスになるのは良くないから、ある程度最低原理というか、そこでのルールはちゃんと作って、後は手運用になってもしょうがないけど、そこはトレードオフというか、それでカバーしていくみたいな思想でやっていた感じですね。
あとはアトミックデザイン、僕も最初、3,4年前くらいに流行った時からずっと追っかけてたんですけど、どうしても納得できない、デザインデータとして運用していくというか、
どうしてもAさんが考えた場合とBさんが考えた場合で、デザインデータの構造に差ができてしまうポイントっていうか、レベル1とか2とか、それでやっていくと絶対生じてしまうなっていうのがあったので、
- 下から見てて数えていった時の数と上から数えていった時の数がずれるみたいなことが起こりますよね。
- だからそれは、さっきも言ったように縛られすぎるのって良くないなと思って、結局人間がいかに効率よくってところだったと思うので、そこは僕はアトミックデザインに関しては厳格に守る必要はないな。
- アトミックデザインの方、最初に提唱した人もどこかで書いてあったんですよね、厳格さっていうか、そこら辺はうまく吉野さんにやってくれみたいなところが書いてあったんですよね。
- なので、僕の場合は方法論、これ手段なので、管理っていうのは、絶対はないな、正解はないなと思ってたので、組織やプロダクトの状態、ステージによってどうあるべきか変わってくると思って、今回はお話しさせて、キャリングさせてもらって、これぐらいの流度で抑えておくのが良いんじゃないかなと思って、
- 結果的にすごく良い塩梅のデータになったんじゃないかなって思うんですけど、でも僕からすると、やっぱりスミさんに書いていただいて良かったなって思ったのは、僕ももちろん極力した議論に参加していただいて、
- 二人の間で結構相談して進めてくれるみたいなことが成立して、最初の段階で二人でミーティングしておきますみたいな感じで、あ、なんかやってくれてるみたいなのがあって、それがすごい頼もしかったというか、ありがたかったですね。
- そうですね、竹淳さんとも結局、仕事の打ち合わせみたいなのは3回、全部で3回ぐらいですかね。
- 佐紀さんとは、佐紀さんがすごいガツガツやってくれてたので、そんなにポイントポイント抑えてたらもう全部終わってたみたいな感じだったので、僕のポイントポイントを抑えてくれたのは、
30:09
ずっと見てたってわけじゃないんですけど、最初と中間のところでうまく関われたかなと思いました。
- 最初の段階で、竹淳さんに書いていただいて良かったなって思ったのは、僕ももちろん極力した議論に参加していただいて、あ、なんかやってくれてるみたいなことが成立しておきますみたいな感じで、ありがたかったですね。
- 最初のお話の時とかに、もちろん顔合わせっていうのもありつつ、多分今言ってくれた他の人が入ってきたときの拡張性みたいなのとか、私がさっき運用って言い方をしたんですけど、
ここポイントとして抑えたいよねっていうのが、当初からそもそもそんなに意識していなかったんですよね。
- どっちの方がいいのかっていう議論は起こってたけど、多分叶えたいことは一緒で、どの方法がいいのかっていうのと考えがちょっとずれてるから議論するみたいな感じでしたよね。
- そうですね。
- 竹淳さんはどうですか?
- 竹淳さんはそうですかね。
- 竹淳さんは、これがやりやすいんですかって確認をさせてもらって、あとはどうですかってめっちゃ進めるみたいな感じでやらせてもらってたので、よかったです。
私としてはその他社のデザインの、多分私のデザインの方が優しいんですけど、
私としては他社のデザインの 多分私よりもいろんなところを見てきた人で
だから多分 もっと人数が多いチームとかを見てきた中で
こういう方が運用しやすいよねとかのアドバイスをもらえたので
すごい助かりましたね
なんですごいバランスいい感じでね 進められたなっていうのは
そういうのが一番大事だと思うんですけど
そういうのが一番大事だと思うんですけど
でもなんかそのミーティングの数が そんなに多くなくいけたっていうのは
スラックに入ってもらって
なんかこう
完成したタイミングで相談するというよりかは
常になんか相談しながら進めるみたいな感じでできたのも
結構良かったのかなとはね思いましたね
そうですね なんかちょっと疑問があったりしたら
お手伝いをしたりとか
そういうのがあったりとか
そういうのがあったりとか
ちょっと疑問があったりしたら
お互いみんなメインの業務が
佐紀さんも武順さんもあるので
時間帯が必ずしも合うわけじゃなかったけど
深夜に作業したりとか早朝に作業したりした時も
うまくリプライとかで
シンクして
効率よく進められたんじゃないかなと思いました
そうですね
動機めっちゃうまくいってましたね
長くなってきたので後編に続きます
後編ではプロジェクトを振り返っての反省点や
33:00
デザインリファクタリングで気をつけるべきポイントなど
さらに具体的でマニアックなお話になりました
次回をお楽しみに
