ep.7 「UX」向上のためにフロントエンド開発でできること | UIT INSIDE

2019/03/28 に公開1534 views

このエピソードについて

UXデザイナーとしての経歴をもつ @Leonardo-mbc さんとフロントエンド開発における UX への取り組み方について話しました。

キャスト紹介

@Leonardo-mbc

元UXデザイナー
現職 LINE フロントエンドエンジニア

UX とは

大きく分けて CX, DX
HCD 人間中心設計

フロントエンドエンジニアがUXに関わる場面

UXとエンジニアリングの架け橋
エンジニアがUXに貢献しやすい場面

UXデザイナーとフロントエンドエンジニア

両者の視点の違い
なぜ今はフロントエンドエンジニアを選んだのか

クロージング

KV Storage: the Web’s First Built-in Module
- https://developers.google.com/web/updates/2019/03/kv-storage
The worst volume control UI in the world
- https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950

BGM & SE: 魔王魂

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
それではえーUIT INSIDE第7回始めていきたいと思います。

Guest 00:05
まず初めにえ、このポッドキャストはえ、LINEu。手室に所属するカスト者たちが、毎週最新のフロンテの動向について語るためのポッドキャストです。

Guest 00:14
最新のweb標準の録から開発、スレイム枠の編成、また、またやuxに関するようなアップデートまで種の始まりにえ、全週までの内容をキャッチアップしていくことを目的としております。

Guest 00:25
今回はですねえ、いつも通りut所属のjスラーである。私はたとえ同じくえust所属で。今、LINEnewsのフロントエンドを担当されている。レオさんとともにお送りしたいと思います、よろしくお願いしますよろしくお願いします。

Guest 00:40
それではえ、まず、えりおさんの方から自己紹介お願いできますでしょうか。

2. キャスト自己紹介 00:41

Guest 00:45
はい、自分は森はレオナルド県と言いまして。とご紹介に預かった通り、UITでアンドエンドジュニアをやっています。

Guest 00:54
担当文学とは、今LINEnewsで、主にビー、またはリアクトで開発を行っています。

Guest 01:00
全職がサイバーエージェントだったんですが、そこでもフロントエンジニアで入社はしたんですが、

Guest 01:06
サイバーエージェントにゼミ制度っていうのがあって、そこで、僕はユーザーエクスペリエンスのゼミをえー主催してえ、やっていました。

Guest 01:13
で、ユーザーエクスペリエンス。やっぱ面白いなっていうことで、業務にも取り入れたいって思い始めてと、フロントエンドから一旦uxデザイナー

Guest 01:21
の仕事について口を書くというよりかは、スケッチでレイアウトを作ったりと

Guest 01:26
動きのアニメーションをえし、なんか文句作ってやってみたりとか、そういうことの仕事をしていました。

Guest 01:33
はいというところでま、結構あの全色ではフロントエンドエンジンアスタートながらまuxクデザイナーっていうところで、ま。今またラインニュースでフロントエンドって形ですかね。はい

Guest 01:43
ていうところでま、ちょっとそのえー。フロントエンドと密接に結構有合医療器とかって関係あると思うんで、ちょっとその辺聞いていければと思います。

3. UX とは 01:58

Guest 01:58
で、今日の本題なんですけど、ま、結構uxユーザーエクスペリエンスってよく聞くかなと思うんですけど、まあ、結構みんなノリで使ってるというか、まあなんか

Guest 02:07
なんでしょう。自分が使ってて、ちょっと不満があったら、これux悪いよねって言ってみたり、なんかこうバズワード的に使ってるとこあると思うんで、ちょっとまず、

Guest 02:14
そのuxの実態みたいなのが何か。自分もえ、もう1回えなんでしょう。自分の認識が合ってるか、知りたいみたいなとこもあるんで、ざっくりと教えてもらうこととかできますかね。はい、

Guest 02:24
よく言われてるのは、大きく分けてとdっていうものと、cxっていうものに分かれます。dxはそのデジタルエペリエンスっていうんですけど、

Guest 02:33
デジタルの中での表現でま、どういう風に体験を設計するか、みたいなことをやっていて、で、もう一方のcxっていうのは、カスタマイペリエンスといって、

Guest 02:42
そのお客さんとか、あんま一般ユーザーがま。なんかどういうことを体験したらいいかみたいなま、トータルコートみたいなことをする

Guest 02:49
みたいなものが合わさってまuxと言われることが多いです。なので、と、いわゆるあの、結構あるのがエンジェアがあるのがuyを触りながら、

Guest 02:58
このuxいいよねとか悪いよねっていうのは、結構そのデジタルエクスペリエンスの方で、

Guest 03:02
もっと大きく言うと、ま、そもそもこの今作っているショッピングアプリがあったとして、ショッピングアプリの導入から購入まで、お客さんがこう一連として、

Guest 03:12
見ていく。この体験というものを設計するのは、もっと広いマクロな領域で、まあ必要ということで、そこをuxってさしたりしますね。

Guest 03:23
たの、あれですかね。uxっていうのが、まあ広いえ、切り分けとしてあるとしてまそん中のdx分が我々ま、結構エンジニアが言いがちな

Guest 03:32
uxって感じですか。

Guest 03:36
その全体でのカスタマーエクスペリエンスっていうと、例えばcsとかもuxの中に入るんですかね。あ、入ると思います入るって感じですかね、

Guest 03:45
やっぱり、あの時のサポートが良かったとかもありますし。はいはい、その

Guest 03:48
えとhcdっていうと、ヒューマンセンターデザインっていう。人間中心設計っていう分野があるんですけど、はい、そこですと、そのレックスを4段階に分けていて、

Guest 03:58
その中で実際uiを触ってる部分は瞬間的xつ今のuxっていう意味を捉えていて、そのあとにそれこそcsとかは。えと、

Guest 04:08
経験的。エクスペリンって、ユーザーエクスペリンスって言っていて、結局そのあの時よかったよね。みたいな思い返すところまでもユーザープリンスっていう。

Guest 04:16
なるほど、なるほど、じゃあ、やっぱもっと広く捉えていくべきというか、まあ、我々いうとていう状態ですね。なるほど、なるほど、

4. フロントエンドエンジニアが UX に関わる場面 04:25

Guest 04:26
なんかそんな中で、例えばそのuxデザイン、えま、uxの改善みたいなんてやっていくとま、結構特にフロントエンドエンジニアの仕事で結構ま密接に紐づいてると

Guest 04:36
持ってて、触れやすい場所だと思うんですけど、その辺で。まあ、どういったところの触れやすさがあったとか、ま、どういったところ

Guest 04:43
だからこそ、フロントエンドインジアンと関わっていこうと思ったから、逆に自分がまたフロントンで戻ろうと思ったかみたいなんで、ちょっと聞けたりしますかね。

Guest 04:51
最後の質問から言うと、どうやはい、そのエンジアに戻りたかったかみたいなのは、やっぱり唯一デザインとかして、実際に目に見えるものを、こうデザインして作っていくんですけど、はい、

Guest 05:00
作るっていうのが、その実際にほんとに開発して作るみたいなレベルまで、自分はやっていきたくて、そういう意味で、そのフロントエントレンジアだと、

Guest 05:09
とま、こういう風にやったらいいだろうな。みたいに思ったのを、実際に作れるみたいなところが、僕はメリットに感じ、はいはいはい、戻ってきているつもりです。で、

Guest 05:18
それこそそのuiとかそういうの作るのって、やっぱりジーなりフロントエンドエンジニアの仕事なので。はい、あのま、ユクデザイナーとしてま。どう接していくかみたいなところなんですけど、

Guest 05:28
基本的にはやっぱりuxデザイナーって言葉自体。まあ、そういう職種自体があんまり

Guest 05:34
その世の中に普及してないところもあったりするので。はい、結構そのuyデザイナーが一緒になってしまったり、

Guest 05:39
またまあのプロダクトオーナーとかがさやったりするんですけど、そこなんかクデザイナーから見て、その

Guest 05:46
フロントエンジニアって、そのやっぱちょっと距離ができちゃっていて、はい、今日はデザイナーとエンジニアみたいな。よくある柿根の話になってしまっていて、そういう意味でデザイナーって、

Guest 05:55
ユクスエンジニア的なところもできたりすれば、そこの滝根をまうまく繋げたりすることができたりして、はいはいはい、有益な仕事なんじゃないかな。

Guest 06:04
ま、例えば、一例で言うと、spaのローディングとかって、結構フロントエンドから要望が上がってくるとかって、よくあると思うんですけど、やっぱここって実は

Guest 06:13
めちゃめちゃ時間かかるんだよね、とか、逆に一瞬でちょっと終わっちゃうんで、ちょっとここって、その画面パッと変わりすぎて、わかりづらくないみたいなのってあると思うんですけど、

Guest 06:22
そういう話とかって。uxデザイナー、フロントエンドエンジニア感で、一旦何しろ。エスカレーションだったらおかしいですけど、みたいな感じなんですかね。

Guest 06:30
そうですね、やっぱりそのなんていうんでしょう。デザインのモック作った時って、それこそサーバーのロードとかないので、はいはい、的には、じゃあ、ログインボタンを押しましたって

Guest 06:39
と、ローディングも出ずにも、ログイン画面に次移るんですよ。そのテストというか、次のモックに行ったみたいなイメージあっちゃうんで、そこの繋ぎ目って、実は結構ド外されやすくて、はいはいで、やっぱりそこをエンジニアがじゃ実装しました。ってなってった時に、

Guest 06:53
ここ2秒かかる。絶対かかるってなった時には、もうほんとに

Guest 06:58
ローディングガム挟むしかないですよね。みたいなことをで全せ。フロントエンド側から提案しますしで、じゃあ、そのローディングのデザイン作ってくださいってこともできますし、じゃあ、こっちでアニメーションを

Guest 07:08
いい感じに挟みますよってこともできるので、ま、どっちにその

Guest 07:12
そのローディングアムを作る仕事を割り振るかってのもありますけど、結構フロントエンドニアって、ローディング作り慣れてたりするのは、スプラッシュスクリーンがあったとか。なんかまくるくる回るだけじゃなくて、なんかその

Guest 07:24
ボタンだけで完結するローダーとか。はいはいはいろいろおしゃれなものもまあ増えてるので、

Guest 07:29
ま。そういうのをうまく使って、2秒をどう退屈させずに、ユーザーを待たせるか、みたいなのを考えるのはもちろん、デザイナーも得意でしょうけど、フロントにも負けてないところだと思います。

Guest 07:39
なるほど、なるほど、じゃあ結構そういうところは、フロンペンのイジアも貢献しやすいですからゆ、

Guest 07:45
実際実装する立場なのでは。そこはかなり交流できる。

Guest 07:51
先週、UITのイベントも開催されてたんですけど、うちの会社で、ま、その中でも結構その

Guest 07:57
あのリピートに繋がる体験は、フロンペンのエンジニアが携わりやすいように、みたいな。相談されてる方もいて、割とそういう領域って、まあ、フロンペドエンニアだったりま、ユエクスデザイナーっていう

Guest 08:08
立ちをちゃんと用意できるというか、まあ、リソース的に結構その難しいとこもあると思うんですけど、だったら改善していけるべとこなのかなとかって思ったりした。

Guest 08:15
大変そうですね。

5. UXデザイナーとフロントエンドエンジニア 08:19

Guest 08:19
あのおはらさんがま、今回えー

Guest 08:22
1回フロントエンドからウエクデザイナーからまた、フロントエンドへっていうところであったと思うんですけど、まそれぞれの立場から見た、もう一歩への転向みたいな話とか

Guest 08:31
ま、逆にもう片方に立ったからこそ、見えたこととかって聞いたりできますかね。

Guest 08:37
そうですね、そのま、これもまさに自分も今でも感じてるんですけどとuxデザイナー

Guest 08:46
として、まあ、動いてた時に見えていたものと、エンジンヤリングしてる時に見えたものと、結構また変わってしまってて、

Guest 08:53
どっちがいいってわけでもないんですけど、いわゆるそのエンジアリングするってなった時に、作んなくちゃいけないわけですよね。はいえ、もちろん、そのレイアウト的にここにこういうアイコン置いて、こういうフォームを置いてみたいな

Guest 09:05
実装するんですけど、はい、実装してるのって、やっぱそれだけじゃなくて、ここコンポネット分けた方がいいなとか

Guest 09:11
なんかもうちょっとそのなん、再利用できる関数とかにした方がいいなとあいてくると、結構そのついつい忘れてしまうのが、やっぱりその

Guest 09:19
広い目で見た時のユーザープリンスはいてしまっていて、このパターンを押した時のこの押し心地とかをすごい調整したいんだけど、

Guest 09:27
それなんかやってる時間もないなみたいな。はいはいはい、なんかそういうしがらみもあったりして、

Guest 09:31
結構そうすると、uxデザイナーの時は、その実装と返ししまして、さっきも言ったんですけど、多少は実装を考えつか考みつつ入れるんですけど、結構その

Guest 09:41
現場に落ちる前ぐらいのもので、考えることができたので、もっとこうやるためには、ここにここのモジュールがあって、ここにこういうアイコンがあって、ここまで作れたら多分こういう体験ができるだろう。はいはいう、その結構真っ黒な視点が

Guest 09:55
あっても、どっちも大事なんですけど、どっちかしか見えなくなってて、なんか自分は結構その両立が難しそうだなって感じたがした。なるほど、

Guest 10:04
有益デザイナーやってる時は、もっとシェアをフラケアに。というか、

Guest 10:09
そういう意味では広いとこしか見えてなくて、細かいリティールは実は詰めてなかったとかもあったりしますし、なんか、そういう意味ではまどっちかですが、どっちも良いところがあるか。

Guest 10:18
なるほど、なるほど、あの、見る視点を変えたい時には、ま、例えば転校したいなとかっても思ったりするって感じです。

Guest 10:25
ありますね、

Guest 10:26
そのりょうさん個人としては、またじゃあちょっとそのユエックデザイナー的な。もっと見て、その体験的に考えてやっていく側にまた寄っていきたいモチベーションとかってあったりしますかね。

Guest 10:37
それと、ありますねでも、特に今もう色んなそのデザイン系の認定資格とかも取ろうと思って、色々受けてはいたりするんですけど、やっぱそれやった時に、

Guest 10:47
あ、なんかもう1回こう。ユーザーテストとかに触ってみたいなとか、デザインなデザインだけを考える時間もちょっと欲しいなって思ったりするものがあって、

Guest 10:56
なんかやっぱ楽しいんですよね。で、それはなんか隣の芝が多いみたいなとこもあるかもしれないですけど、デザインやってみて楽しいから。じゃあ、デザイナーになってみました。っていうと、

Guest 11:04
やっぱエンジニアが楽しそうだな。実際のスマホの上で動くもの作るのって最高だよね。みたいな考えてみると、やっぱそっちにやりたくなって

Guest 11:12
ま。これは入り戻しているか。はいはいはいまでも、やっぱり結論としては、デザインがにも全然よってきて、はいはいはい

Guest 11:19
じゃ結構まあ、あのあれですかね。ま、どっちかやってるともややっちゃいたくなるみたいなのは

Guest 11:27
これ。エンジニアであるとも、サーバーやりたくなってくるとか。はいはいはい、今度合言語さりたいとかあると思うんですけど、それに近い感じでもない。

Guest 11:35
ちなみに逆にはとはいえ、今ってフロントエンドエンジアでいいかなみたいなとこもあるんですかね。

Guest 11:42
ま、それはありますね、そのロントエンドって結局見えるところは、はい、フロントエンドエンジニアの担当になるので、そういう意味では、なんかデザインもま見えるものを作る。ですし、フロントエンジニアま見えるとこ作ってるので、

Guest 11:53
そういう意味では、フロントにまェーサーであることには、結構誇りも持ってます。はいはいはい、やっぱ作ってデザインもできるみたいのは、やっぱ楽しいですよね。

6. クロージング 12:07

Guest 12:07
えーということで、テンサイドえ、第7回はですね。りさんと一緒に、ユエックについてっていうところでえ、話していきました。

Guest 12:14
LINEにはテスはではですね。え、ま、こんな感じでまえー。開発の話もあれば、まあ、なんかユーザー体験の話とかもあったりとか、まあ、普通にux的な話ももちろんえ

Guest 12:25
交流が行われていてですね。ま、そういったところをええ、まあ、話すためのギット、ハブイッシュがあったりします。と

Guest 12:31
えま、そこで、毎週えまたくさんのえ、収がえ出てくるんでま。例えばえ、先週の分だとまえ実装的な話でまくもですねえ、内部的なモジュール解決

Guest 12:42
みたいなところがま、ちょっと進化してるよって話があったりとか。まあ、実際イエスのは

Guest 12:46
的な話で言うと、まあ、なんかこうあの世界一ダメな音量コントローラーを作りましょう。っていうまあ、ちょっと面白いま、すごくユーザー体験的に悪いコントロラー作ってみたみたいな思考、実験的な演習もあったりとか

Guest 12:58
えして、まあ、結構いろんなコミュニケーションが行われていたりま、それがだ、毎週末、金曜日にですね。ま、jイスラーベン協会っていう形で、ま、ちょっと勉強会形式で

Guest 13:07
意見交換の機会があったりっていうところで、ま、結構え盛んにえ、交流が行われております。

Guest 13:12
ま、ちょっとですね。実際、どういった話題が出てきたかっていうところは、ポッドキャストのノートの方にえ書いておきますので、もし興味があれば、ぜひぜひチェックしてみてください。

Guest 13:20
ということで、今回えゆ。テインサイト第7回ux会というところで、えりょうさんと一緒にえ、お送りいたしましたえ、ありがとうございました。