00:04
こんにちは、takejuneです。
この番組は、デジタルプロダクトの作り手を
ゲストにお招きして、
フムフムと知識を増やしていく
トーク番組です。
今回のゲストは、前回に引き続き
ワンキャリアデザイナーの花咲さん、
LINE福岡デザイナーの
すみけん太郎さんです。
なんかそんな感じで、
上手くいったなっていうポイントを
結構あったなって思ったんですけど、
お二人の中で、
言ってる中で、
ここは逆に難しかったなとか、
大変だったな、工夫が必要だったな
みたいなポイントとかってあったりしますか?
逆に。
めっちゃでも、具体すぎて、
説明だけだとめっちゃむずいポイントだけど、
演技化するのは結構むずいですね。
ロゴのやつね。
一番直近だと、
企業のロゴをどう持つかみたいな、
クレーカーのロゴをどう持つかは、
今やってるやつですね。
やつだし、
あと他は、
実装側で画像として持っているデータを
どう扱うかは、
ちょっと難しかったかも。
実装側で画像として持っているデータっていうのは、
チュートリアルの画面で出している絵とかですか?
とかもそうですし、
アイコン周りとかですね。
あれのバリエーションを、
実装じゃなくて、
画像で全部持っている
っていうので、
エンジニアさんが書き出せるような形で
持っておかなきゃいけないかなとかが、
その辺はちょっと難しかったなと思ったりしてますね。
追加していくときにどうしていこうとか。
意外と、
iOSのアプリ用の画像っていう
一つのフォーマットだといいんだけど、
Androidだと微妙にそのピクセルのサイズが違うとか、
サーバーサイドエンジニアが欲しがっているのはまた違ったりとか、
それぞれで命名規則が微妙に異なっているとか、
みたいなことがあったりするんで、
まだそこに関しては、
今すごく使いやすい形で整理していただいているんですけど、
実際運用に即した形にできているのかっていうのは、
また見ながらやっていかないといけないかなって思ってますね。
一応エンジニアさんとも、
あの時ちょっと話させてもらったりとか、
コミュニケーションさせてもらったりもしたんですけど、
もう一個で言うとリストですよね。
リストは結構難しかったですね。
03:01
いろんな情報結構入るし、
セットにした時に同じタイプのものしか入らないわけじゃなかったりとか、
結構イレギュラーなものをどう対処するかとかを考えるのが大変でしたね。
そこは津泉さんも改めてゼロからちょっと考えてみると、
一度やってくださったりとかも出たとは思います。
そうですね。
今さっき話した着物のところの2点あったで、
2点目がやっぱりリストの持ち方っていうか、
そこが自分はさっきさんとも結構いろいろ議論させてもらって、
結果的に良いものになったかなと思ったんですけど、
今のB4さんのユーザー向けの情報の見せ方っていうのは、
どうしてもリスト表示の情報が多くなるので、
そこのいろんな形にリストがなっていくのをどうやって処理しようかなみたいなのは、
2人で結構悩んで。
かなり悩みましたね。
そうなんですよね。
B4さんはあまり複雑化しないようにっていうので作っていったりとか、
なるべくUIの種類を増やさない方向で再利用してやっていこうっていうのを
考えていった結果、
かなりアイコンとテキストの組み合わせを縦に積んでいくっていうような形の
リスト型のUIっていうのをいろんなページで対応していくっていう設計になってるんで、
一番エースなのね。
そこの作法はいいですよね。
それはめっちゃ良かったと思いつつ、
そのタブ情報をどう扱うかが大変だったっていう。
面白かったですけどね。
いろいろ試しましたもんね。
左と右を分けてコンポーネントとして持って、
最終的に1個のコンポーネントにするとかもいろいろ試したけど、
結果的に一番いい形に落ち着いたんじゃないかなと思ってます。
そうですね。
決めきらないみたいな反映性高くっていうのも一つだけど、
人数が増えてきた時に独自の解釈で
ルールにないものが新しくどんどん訂正されてしまうっていうのを
制限するっていうのもコンポーネントで持つ意味としてはあるので、
そこをどれくらいのバランスで持つかみたいなのは結構悩んだり。
そうですね、そういう議論しましたね。
スラックですげえ長くなったもんね。
スラックでめっちゃ長くてさすがに話しますかって。
そうですね。
お互いいろいろスラックでやってるんだけど、
お互い実際に話した方が早いなって話しましたね。
難しくありますね。
06:00
基本は左側にアイコンがあって、
右側にテキストがあるっていう構成なんだけど、
そのさらに右側にアイテムがもう1個付いたり、
そのバリエーションがいろいろあったり、
左側のアイコンがなくなったりとか。
そうですね。
テキスト付いてたり、
金額だとまたちょっとテキストのサイズとか表記が違ったり。
うんうん。
悩みます。
かなりいろんなバリエーションがあるんで、
完成したコンポーネントはかなり表現力の高いアイテムになりましたね。
ありましたね。
でも実際今、
UIスライナーはまだ入社してないので、
あれなんですけど、プロダクトマネージャー1名先月入社しまして、
今2人でフィグマのファイルでUIを作っていく形になったんですけど、
実際ガンガンプロダクトマネージャー側で新しいページも作っていってもらえてますし、
ルールから外れて作られるってことも起きてないんで、
かなり今ワークしてるんじゃないかなって気はしますね。
そうですね。
リストのパワーが発揮されてます。
本来リストはポチポチするだけで完成するを原点ですからね。
そうですね、デザイナー以外もね。
でもかなりポチポチだけで完成するようになっている気がしますね。
良かったです、本当に。
本当にプロジェクト始まる前に目指していた、世界に到達したっていう感じがするので、
大成功の感じだったなと思うんですけど、
お二人はどうですかね?改めてプロジェクトを振り返って、
まだもう少しお付き合いいただいているところもあったりするんですけど、
ここまで振り返ってみてどうですか?
特にすごい良いことを言わせようとしているわけではないんですけど。
働き過ぎちゃったなとか。
めっちゃ楽しくて、さっきもゴリゴリやってくれてたみたいな感じで言ってもらってたと思うんですけど、
後半、私が本教の方で忙しくなってスピードダウンはしてしまったものの、
めちゃくちゃ楽しかったんですよね。
ありがとうございます。
作業の感想っていうのを丸く言うと。
上手くいったこととか難しかったところで、さっき言っちゃったので、
09:01
リストのとこ難しかったり、アイコンのとこ難しかったっていうのがある。
上手くいったではないが、今までやったことなくて、
これはしかも参考があったわけでもなく導入して、
良かったって今自分で自己評価で1個あるやって言うと、
プロトタイプって意味も含めてUIでデータを作ってきたじゃないですか。
だから、同じデザインでこっちにもほとんどのデータが入っていない。
だから、同じデザインでこっちにもこっちにもあるっていうページ、
それこそエラーページだったりとか、チュートリアルの画面だったりとか、
があったと思うんですけど、
あれをページ単位で作業効率用にコンポーネント化したっていうのは、
1個やって良かったって思って。
あんまり今まではやってないというか、
今までは似たようなページだったらこれを使いますとしか
共有しないで結構スルーをしてたんですけど、
あれは良かったなとは思って、
ここまでで言ってない話をしていると。
そうですね、B4さんのコンポーネントのファイルとは別に、
各ページのデザインを格納して新しいページをどんどん増やしていく作業用ファイルの中に、
よく出てくるUIの構成をページ単位でコンポーネント化したものっていうんですかね。
Atomicの一番上の単位に近い感じのものを
置いてくださってるんですよね。
あれでも実際かなり使いやすいですよ。
良かったです。
今回上手くいったっていうのもあるけど、
今後やっぱり流れとかプロトークとか考えるときに、
これをコンポーネントで単位として持っていてもいいなと思ったのと、
ライブラリには含めないものだと思うんですけど、
自分で今回コンポーネント作るっていうのと、
どちらかといえばそれを適応させるっていう時間がめちゃくちゃ長かったんですけど、
持ってきてリスト作るけど、
毎回何回コピペなんだけど、
サンドラックって文字何回見たかなみたいなとか、
セブンってめっちゃ書いてるとかやってたんですけど、
そういうのをやりながら、
やっぱり作る側の気持ちにちょっと近いじゃないですか、
実際に作るときの。
ここのリスト他のページでも使えそうだなってコピーしてきたときの気持ちとかを考えたときに、
この効率化は良かったかもって、
結構自分で今のUI、
12:00
竹内さんが元々作ってくれたものから、
今のに差し替えるときに、
自分でコンポーネントを作って、
スピードアップして作業できるようになったなっていう印象です。
他の場合、今後も自分が何か作るときは、
これ用意してもいいなって思ってます。
あのやり方はね、
いろんな会社のデザイナーの人がパクるといいと思いましたね。
ありがとうございます。
すみさんどうですか?
スピードアップして作業できるようになったなっていう印象です。
今後も自分が何か作るときは、
これ用意してもいいなって思ってます。
すみさんどうですか?
僕はまずはあれですね、
さきさんすげえなっていう、マジで。
すごいですね、ほんとに。
ほんと。さきさんすげえなっていう一言に尽きるかなっていうのは、
こんなすげえやついるんだなっていう。
それね、僕も全く同じこと思いましたね。
マジですか?
この推進力がどこから来るんだろうっていうパワーが。
非同期でやってたっていうのもあるんですけど、
さきじゅんさんも多分スラックとかツイッターとかで書かれてると思うんですけど、
次の日起きたらめっちゃ進んでるみたいな。
プロジェクトが勝手に進んでるみたいなのもすごいなっていうのは感じてましたね。
あとはそうですね、自分でやってて思ったのは、
デザインシステムって結構やっぱ、
抽象的なとこからすごい具体的なとこまで幅が広いので、
そこの行き来をするっていうので、
自分の頭の中がすごい整理されてて、
作業者としてさきさんがいるので、
説明をするときに、コミュニケーションをするときに、
自分でもすごい学びが多かったですし、
実際にその後作業される、
たけじゅんさんとかスマートバンクのEYの方のこととかも考えると、
いろんな軸での、いろんな視点での考えるっていうのがあったので、
すごい学びが大きかったなと思ってます。
ありがとうございます。
今回ね、そんな感じで、
こちらの依頼する側の成果としてもすごく得られるものが大きかったし、
学びも多かったなって思えてるプロジェクトだったので、
副業の方にお仕事をお願いするって、
どんなプロジェクトでもうまくいくっていうわけじゃないかなとは思うんですよね。
ある程度時間軸が合わないといけなかったりとか、
疎結合というか、
他の業務とセパレートした形で進められるようになってないと、
なかなか難しいみたいなところもあったりするので、
15:00
そういう意味でいうと、
フィグマのデザインファクターって絶妙というか、
副業っていう形で入っていただいても成立し得る案件だったのかなと思いつつ、
実際にはデザインを適用していくフェーズに関しては作業量が多すぎたので、
普通の方だったらもしかしたら無理だったかもしれないなって気がしますね。
サキさんだったからやり遂げていただけたっていうところはあるかなと思いつつ。
でも他の会社で結構同じようにデザインファクターに興味を持っている会社の人が
周りに何人か出てきたので、
こういった形で進めるっていうのはお勧めしてもいいのかなっていうのは個人的には思いましたね。
逆にその受ける側の立場として、
そういったもし募集があった時に参加する方に
お勧めだよとかこういったところは気をつけながらやった方がいいよとかあったりしますか。
気をつける方がいいよで言うと、
竹中さんもちょっと大変だった部分一緒にあったかと思うんですけど、
どのタイミングでマージするかとか、
一時期一回コピーしたほうで私の作業用のスペースでガーッと全部作って、
そのコンポーネントを現状内に適用するみたいなフェーズがあったんですけど、
マージさせるときに実際にUIがどんどんリニューアルされていくったりとか、
新しいものが増えていく。
コンポーネントを追いかけて適用させていく。
データをマージさせる。
めっちゃ大変でしたね。
変わってる。
変わってる。
これないんだ今本当はみたいなのとかを追いかけながらやるっていう。
そのあたりは一個は、
僕がもう少しさきさんが作業を完了するのを待って、
フィックスしたタイミングでやっぱり飛び込んでいくっていうのが必要だったかなっていうのは一個反省としてはありますね。
なので早く使いたい気持ちになっても合意を取った上で使っていきましょうっていうのはありますね。
かもしれないですね。
私の方もここのページまではできたんでマージしていいんですみたいに言い方しちゃったんですけど、
他のところでもやっぱり共通化でめっちゃ使ってるやつとかがあったりしたときに、
パッと見の見た目は変わらないけど、それこそレイアウトの設定を変えるとか、
微妙にスペーシングを内側のデータに持たせるかどうかでちょっと変更するみたいな。
見た目変わらないけど微妙に違うみたいなものの修正を結構しちゃってたんですよね。
だからそれこそここの単位は終わりましたって言ったけど、
終わってないみたいなことが起こったっていうのも申し訳なかったなとは思うので、
今後やる人がいたらやっぱりガッツリ全部もうできたよ。
本当になんかここで使ってちょっとコンプレットだけちょっとやりますぐらいのタイミングまではなったほうがいいだろうなとは思いますね。
18:03
スミさん、レビューアーとしてどうですか?
そうですね、まずなんかこれは最初にやっとってよかったなっていうのは、
竹順さんが目指しているゴールみたいなのを確認させてもらって、
最終的にどういうもの、どういう形にしたら使いやすいっていうか、
例えばよくこれ開発とかでもあるけど、ユーザーが望んでいるものと開発者が望んでいるもの、
多分描いているものと企画者が望んでいるものって大抵ちょっとずれてたりするじゃないですか。
なんかそういうのをちゃんとすれ合わせとかないと、
すごい、なんていうんですかね、竹順さんが要求してたのは水鉄砲だけど、
自分で作ってたのは機関銃みたいな、そういうレベル感が合わないものを持ってこられてもたぶん、
それはデザインシステムだけど、私たちが望んでいたものじゃないみたいなことは往々にしてあり得るので、
そこの意識のすれ合わせっていうのはちゃんとしておいた方がいいなっていうのは、
最初のうちにやっとかないと、これは最初にずれてると結局コミュニケーションも噛み合わないし、
だけど前に進んでいくしみたいなんで、そこはちゃんとしておかないとダメかなっていうのは思ってました。
最初のヒアリングを結構ガッツリさせていただいたんですけど、
ちょいちょい聞けたっていうのがやっぱりいいですよね。
すれ合わせ、ここ実体どうなってるんでしたっけとか、こういう意図でやってるけど、
こうですっていうデータじゃなくて、たぶんこういう意図でこうしたんですけど、この意図どうですかみたいな話をさせていただいたんですけど、
そういうのを適宜やっていけると上手くいくんだろうなとは思います。
そうですね。
あと一点は正解みたいなものがないっていうのをやっぱりちゃんとお互い知っておくっていうか、
正解はないので、ちゃんと最適解を常に探すっていうところはやっていかないといけないかなと思ってました。
組織とか、最初の方にも言ったんですけど、組織とかプロダクトの状態とかステージによって最適解っていうのは絶対変わってくるので、
そこは絶対に勘違いしちゃダメだなっていう。
やっぱり世の中にデザインシステムの作り方みたいなのが書籍とかにもあったりするけど、ちょっと学術的なところもあって、
現場レベルで言うと全部をやる必要ないかなっていう。
なので、始められるところからかいつまんでやるとか、そういうのでもいいんじゃないかなと思ってました。
21:10
もしよかったらスマートバンクの印象を教えていただけたら嬉しいです。
実際、メンバーみんなと密にっていう感じではもちろんなかったんですけど、
皆さんがやり取りしてるのを見たりとか、一部やっぱりエンジニアさんとやり取りさせていただいたりとか、
特にかけじろさんとは結構やり取りをさせていただいたんですけど、めちゃくちゃやりやすかったっていう印象です。
もちろん今回のプロジェクトでいうと、すてみさんもめっちゃ助かったっていう感じだったんですけど、
ちょうどいいラフさで相談を投げられる、返してもらえる、すごい素直にここはこうですよねとか、
質問もポンポンもらえたりとか、やっぱり外部から言うと、
そもそも会社だったら暗黙な紹介で分かって、私がポンチンカのこと言ってるかなみたいなちょっと不安もあった中で、
ああ、そういうのありますよねってすごいパラッと言ってもらえる感じとかも入りやすかった。
外部っていう立場としてすごい入りやすかったし、
それはエンジニアさんが最初にコミュニケーションを取ってくれた時にすごい感じましたね。
受け入れられてる感?
きっと一緒に働いたら普通に楽しいだろうなって思ったんで、
ちょっと逆に残念でした。もっと他のメンバーと話してみたかったと思うような感じはありますね。
みんなが話してるチャットだけ見て、なんか雰囲気いいなって思ってました。
ありがたい。
すみさんはスマートバンク見ててどんな会社だなって思いました?
僕は竹順さんのデザインフィードバックの受け方というか、
自分のデザイン作ったものに対して説明して、他を巻き込んでいく方法っていうのが結構好きで、
なんかすごい勉強参考になるなというのは、
昔竹順さんがTwitter投げてたんですよ。こういうふうに自分やってますみたいなんで、
Twitterのスラックのキャプチャーとかであげてたのが、
僕こういうのを作ってるんですけど、皆さんどう思いますか?みたいなフィードバックを受けるっていうところのやり取りのところをTwitterにあげてたんですよ。
そうなんですね。全然覚えてない。
そこのプロジェクトへの第三者への視点の集め方とか、巻き込み方みたいなのが僕はすごい素敵だなと思ってて、
そこがそうですねスマートバンクの良さというか、今回のUIに限らず別のチャンネル見てて思ったのは、
24:02
みんなが同じ視点でプロダクトを成功させるためにとか成長させるために、
フラットにみんな意見してて、別に利害関係もなくていうか、
自分とかサキさんも勝手に混じった時もあったんですけど、
そういうフードはすごい良いなと思ってました。
ありがとうございます。
さっき入った外って言ったけど、外だけじゃなくて上下感とかもなく、
同じ目標に向かう仲間感ありますよね。
めっちゃ良いと思う。
そうですね、よく詰められる。
実は私、知り合いのエンジニアが仕事探してるって言った時、美容さんを勧めるっていう。
スマートバンクを勧めるっていうぐらいに良いと思ってます。
嬉しい。ありがとうございます。
ありがとうございます。
色々良かったところや、もう一回やるとしたらみたいな反省点も出てきましたけど、
ぜひ興味のある方はFigmaのデザインファイルのリファクタリングのプロジェクトを取り組んでみていただいてもいいんじゃないかなと思いました。
最後にお二人から何か聞いてる方に押し出せしたいこととか、何かメッセージとかあったりしますか。
スマートバンクさんもワンキャリアもデザイナーは常に募集しているので、
ご興味のある方は是非会社のリンクを超えないからこっちだってできないんですけど、
是非見ていただければなと思います。
カジュアル面談からでも話します。
ポッドキャストのサイトにはワンキャリアさんのリンクが載っておりますので、ご確認いただければと思います。
ワンキャリアさんは非常に面白いタイミングかなと思うので、僕からのオススメの会社かなと思っております。
スミさんは特にないですかね。
LINE福岡でももちろんUIデザイナーの方募集してますので、そちらの方のリンクを貼らせてもらいます。
ありがとうございます。
すみません、長くなってしまいましたが、今回のゲストはワンキャリアのデザイナーの花咲さんと、
LINE福岡のデザイナーの澄健太郎さんでした。ありがとうございました。
ありがとうございました。
