1. Qiita FM-エンジニアのキャリアを深掘り-
  2. #62 流され続けて辿り着いた「..
2025-07-08 29:47

#62 流され続けて辿り着いた「全部やる」エンジニアデザイナー【ゲスト:フリー株式会社 UIデザイナー・フロントエンドエンジニア ymrlさん】

spotify apple_podcasts

今回からのゲストはフリー株式会社 UIデザイナー・フロントエンドエンジニア ymrlさんです


<トークテーマ>

・中学生でHTMLとCSSを独学

・HCI研究室での経験と、プログラミングに対する認識の変化

・ソーシャルゲーム企業のインターン

・フリー株式会社でのエンジニアとしてフロントエンド開発

・なぜ“全部やる”なのか?


< ymrlさんX(Twitter)ページ>

https://x.com/ymrl


<X(Twitter)ハッシュタグ>

#QiitaFM


<番組へのメッセージはこちらから>

https://forms.gle/K9HyUGy7phDBGpht7

See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

サマリー

今回のエピソードでは、フリー株式会社のデザイナーでありエンジニアのymrlさんが自身のキャリアやプログラミングの始まりについて語ります。彼はアクセシビリティの重要性についても触れ、複数の活動を通じてエンジニアとデザイナーとしての役割をどのように両立させているかを明らかにします。大学生から大学院生を経て、ソーシャルゲーム会社での経験を通じてエンジニアとしてのキャリアをスタートさせたものの、最終的にはデザイナーとしての道を選びました。特にデザインシステムの構築に取り組み、UIに関する知識を深めることでデザイナーとして活躍できるようになった経緯を話します。フリー株式会社のUIデザイナー兼フロントエンドエンジニアのymrlさんが、エンジニアとデザイナーの二足のわらじを履く中での経験や課題について語り、良いものを提供するというスタンスがその背後にあるモチベーションの厳選であることに焦点を当てます。

ゲストの紹介
日本最大級のエンジニアコミュニティQiita、プロダクト開発部部長の清野俊文です。
この番組では、日本で活躍するエンジニアをゲストに迎え、キャリアやモチベーションの話を深掘りしながら、エンジニアの皆さんに役立つ話題を発信していきます。
ということで、今回からのゲストは、フリー株式会社 UIデザイナー・フロントエンドエンジニアで、ウェブアプリケーションアクセシビリティ協調者、ymrlさんです。よろしくお願いします。
よろしくお願いします。ymrlです。
最初に軽く自己紹介をお願いしてもよろしいですか。
フリー株式会社というところで、エンジニアなのかデザイナーなのか、多分今日その話をすると思うんですけれども、一応所属的にはデザイナーをしています。ymrlと言います。
ウェブアプリケーションアクセシビリティという本の協調者で、そっちだと山本玲さんなので、そっちでもしかしたらフォドキャストの案内とか書いたほうがいいのかもしれないみたいな、どっちのほうが名前が通るか分からないですけれども、書いた本のタイトル通り、アクセシビリティのことを結構やっていて、
そっちの活動で結構よく登場しているんですけれども、一応フリー株式会社では先ほど申し上げたとおりデザイナーっていう立場をやっていて、デザインシステムを作るっていうことをしていて、デザインシステムを作るっていうことはデザインをするということでもあるし、フロントエンドの結構コードをがっつり書いてたりとか、そういうことをしていますというぐらいですかね。よろしくお願いします。
よろしくお願いします。本当に山原さんいろんなことをされていると思うので、今日はいろいろお話を伺ってください。山原さんとお送りする1回目のテーマは、流され続けてたどり着いた全部やるエンジニアデザイナーです。
ということで、1回目は山原さんの今までのキャリアみたいなところをぜひいろいろお伺いしたいなと思っております。
最初は自己紹介のところで、今のお仕事というところは軽く触れていただけたかなと思うので、そもそもなぜ今デザイン業務をやりつつ、アクセシビリティの方でもありつつ、エンジニアでもありつつという感じで結構いろんなことをされていると思うので、どうして今そういうところまでキャリアとして来ているのかみたいなところですね。
いろいろお伺いができたらなと思っております。
話すと長くなりますよ。
お願いします。
まず最初に聞きたいのが、プログラミングですね。
やっぱりエンジニアとしてプログラミングをもちろんされているかなと思うので、プログラミングはいつから始めたのかというところのきっかけを最初にお伺いできたらなと思っています。
そうですね、プログラミングというよりかは、多分入ったのはホームページを作りたいみたいな、ホームページを作るみたいな、要はHTMLを書く、CSSを書くみたいなのが多分この世界の入り口だったなという感じで、それがもう中学生の頃とかなので、
中学生。
2000年とか2001年、中学生の頃だと2001年とかですね。
そこからだんだんウェブというもの、HTMLというもので、当時セマンティックウェブみたいな話も盛り上がっていたので、そういうのに興味を持つうちにだんだんプログラミングができるとウェブサービスみたいなのが作れるぞっていうのは、
そこでちょっとやり始めてみたりとか、もともと最初はだから、これすごい老人会トークになっちゃうんですけど、掲示板とか、それからブログのシステムをレンタルサーバーに置いてみるみたいなところから、だんだんそれって自分で作れるじゃないかって思ってやってみるっていうのをやってみたんですけど、実はその時はあんまりできなくて、
そうなんですね。
いろんな言語とか、当時そんなに種類はなかったんですけど、言語とか開発環境とか試してみたけど、作りたいものがあんまりなかったみたいなのが中学高校生の頃かなっていう感じで、でも大学受験で数学苦手だったので、数学の点数を稼ぐのにプログラミングの情報がだいたい大門一つだけあるんですよね。
そこだけむちゃくちゃ活躍してましたね。ベーシックが。
そうなんですね。なるほど。本当に最初の頃はいわゆるウェブサイトを作りたいみたいな。
ウェブサイト、そう。
もう中学生の頃やってたってことですよね。
そうですね。
もともと中学生の時にそのウェブサイトを作りたいなって思ったきっかけは何だったんですか。
すごい黒歴史の方行きますね。
別にウェブサイトを作りたいとか、そういうすごい強いモチベーションがあったというよりかは、そういうのをやれると面白いらしいぞっていう。
当時そんなにインターネットに人いなかったっていうのがあって、いろんな人のホームページがあってそこに人が集まっていて、
いろんな交流ができたりとか、面白い文章を書いてあったりとか、それからちょっとかっこいいビジュアルが作ってあったりとか、
そういうのがあったので、自分もそういうちょっとかっこいいなって思ってやってみるみたいな。
ちょっとこの話、話題振られると思って考えてたのが、バイクに乗り始めた人みたいな。
要はバイクに乗り始めて好きな人ってバイクのカスタマイズとかメンテナンスとかしてるじゃないですか。
そういう感覚だったんですよね、多分。
なので自分で作るっていうことがうまくできなかったっていう。
でもホームページを作るぐらいのことはできて、それを綺麗にするみたいなのが楽しかったみたいな、そういう感じでしたね。
そこからより深みのプログラミングに行こうとしたけど、そのタイミングではちょっと挫折しちゃったんですか。
大学での成長
そのタイミングでは、やっぱり入門コンテンツに、当時って入門コンテンツも今ほどないんですよね。
別に本気でエンジニアになりたいとかそういうわけでもなく、ただ中学生、高校生でちょっと放課後に暇な時間に2,3時間でできる範囲のことをやるっていうと、
そこでできることとすごいプログラミングしてアプリをリリースしてる人、ウェブサービスやってる人とのギャップがすごいんですよね。
なのであんまり面白くないなってなっちゃったのかなっていう。
なるほど、ありがとうございます。そこで一旦プログラミング自体はやめちゃった感じなんですかね。
そうですね。大学受験っていうどの方向に進むかみたいな、どの進路に進むかみたいなところで、得意科目で言ったら、実はすごい生物っていう科目が得意だったんですよ。
そこで生物が得意で数学が苦手っていう、たぶん高校の先生からするとむちゃくちゃ扱いづらい成績の状態で、当時バイオプログラミングみたいな、バイオサイエンスで情報系っぽいことをやるみたいな、
そういうのをやってる研究とかを見て、それはそれでウェブの世界とすごい近いなと思って、ふらふらと自分の行きたいところがどこなのかわからないまんま、たまたま情報方面に強いとある大学に入ってっていうところで、
一旦挫折したというよりかはよくわかんないなってなってたものが、ちょっと自分の進む方向として方向づけられたみたいな、きっかけになったみたいなのが大学に入ったっていうところっていう感じですね。
なるほど。じゃあふんわり触ったり触らなかったりしたところから、大学の中でもそっちの方面に先行と進んでいったってタイミングだったんですね。
そうですね。だから大学が全員パソコン持ってくるような、学内に無線LANが、これ2007年の話なので、当時としてはすごい珍しい環境だったんですよね。
全員がインターネットにつながった端末を持っているっていう。そこでプログラミングの授業とかもあるし、いろんなことを自由に学んでいいみたいな中で、やっぱり面白そうなことを選んでいくと情報系の方になっていって、そこで授業とかでもう1回プログラミングっていうものをやってみたら、お題があるとできるんですよね。
こういうものを使って、レギュレーションみたいなのがあって、これを使って何か作品作ってくださいみたいな、そういうのがあると、これを使ったらこういうふうにしたら、当時やったものだと、結構カメラの入力を使って何か画像処理して何かしてくださいとか、
カメラの映像の中で手で動かしたものがちゃんと動くみたいなものを作るとか、そういうところで、作れるな、できるなってなっていったっていうのがプログラミングができるなっていった経緯みたいなのの、最初のきっかけはそこかなって。
そうなんですね。じゃあ改めて先行として、大学で学び始めて、そこのいわゆる授業というか、その仮定の中でまたプログラミングのことをいろいろ勉強してやれるようになって。
プログラミング関係の授業、情報、いわゆる情報技術とか、計算機科学に近いようなものとかを授業でやってたっていうのと、あと当時、もともとインターネットで知り合った人たちっていうのはずっといて、結構やっぱりプログラマーコミュニティみたいな近い人たちみたいなのがいて、
その人たちがやってることっていうのは、仕事でやってる人たちであったり、趣味でもすごいアプリ作ってる人だったりなんですけど、なんかちょっと自分がそういう人たちのところに少し近づけた感覚みたいなのがあって、
だんだん崖に見えてたものが階段になってきたみたいな、そういうところがあって、だんだんいろんなことができるようになってきたっていう感じですね。
なるほど、ありがとうございます。そこから実際、次は大学から社会人になっていくと思うんですけど、そのタイミングでやっぱり大学の中でプログラミングとかもやってたからこそ、必然的にというか自然とエンジニアの方面に行こうかなみたいな思ってた感じだったんですか?
そこもエンジニアっていうものがよく分かってなかったかなっていうのが、当時の感じですね。なんか当時、Human Computer Interaction、どちらかというとデザイン寄りみたいなところもある研究室にいて、そこですごくプログラミングができる人みたいな、
一番できたとは言わないんですけど、一番できた人、某社CTOとかいるので、そういうところにいて、プログラミングができる人ではあったけど、エンジニアってなんだろうって思っていたまんま、
エンジニアとしての始まり
大学部生の最後、大学院まで行ってたので、大学院、学部生の最後から大学院の間ずっとソーシャルゲームの会社にインターン、インターンというか、なんか謎のアルバイトみたいな、好きなことをさせてるというよりかは、
そこもやっぱり、学生にこういうことをやってみてよみたいな、ちょっと投げかけるような、こういうことをやりたいと思ってるから、ちょっと試しに作ってみたいな、そういうことをやってたんですね。
そこにそのまま、新卒の時は入社して、一応エンジニアっていう肩書になったっていう、そういう感じですかね。
なるほど。じゃあ、エンジニアになるぞっていう気持ちを持ってキャリアを進んできたというより、結果的にまず最初のファーストキャリアとしてはそっちの方向に行ったみたいな。
そうですね。もう流されに流されてますね。わかんなかった。就活っていう概念がよくわかってなくて、周りが結構、当時多分2011年、学部の卒業は2011年で、大学院の卒業が2013年で、冷静に考えると結構氷河期の最後みたいな頃で、
すごく周りが就活をやってる、就活就活って言ってる中で、何をする人がいるかよくわかんなかったんですよ。なので、入れるところに入ったみたいな、本当に流されていました。
なるほど、そうなんです。実際その流されて入った会社での仕事というか、その中では結構充実はしたんですかね。
いや、面白かったですよ。やっぱりゲームっていうものを作るっていうのが、ゲームって本当にいっぱいいろんなものを実は作らなきゃいけない。
自分は結構アイテムの管理画面とか作ってたんですけど、そこにやっぱり面白くなるように、飽きさせないように、ちょっとした演出のアニメーションを入れたりとかそういうのがあって、
人が面白いな、楽しいな、かわいいな、かっこいいなみたいな感情に訴えるものみたいなのを、そういう要素もありつつ、プログラムとしてちゃんと動くものを作るっていうのは面白い仕事ではあったなっていう感じなんですけど、
ただ割とすぐやめちゃったっていうのがあって、やっぱり面白いんですけど、ゲームってどうしても一つの世界に最後しなきゃいけないんですよね。面白い一つのものっていうのを作んなきゃいけないので、いっぱいいろいろ頑張ったものがどんどん削り取られて最後の1個のゲームになるみたいな感じで、
リリース、自分の作ったものがそんなにリリースされるわけではないみたいなところに、自分がやりたいこととこれは合ってるんだろうかみたいなのがようやく芽生えて、そこで今のフリーカオシ社に転職したっていう感じですね。
フリー株式会社への転職
そうなんです。ちなみにフリーさんに入ったきっかけってどういう。
これも流されてるんですけど。
ちょっといろいろ当時お世話になった人にちょっと面白い会社があるから行ってみなよって言われて、当時はアザブジューマンかなのオフィスに遊びに行って、社長とCTOが出てきて話して、自分が結構学生時代に作ったものとかをプレゼンテーションみたいにしてこういうのやってきましたっていう話をして、
他のエンジニアの人とかと話をしたりして、意外と面白い会社だなって、あとは結構やろうとしてることがすごくいいなって思ったんですけど、
そしたらその後すごく社長から次いつ来ますかってむちゃくちゃ言われて、で次に行ったら内定なんでじゃあいつ入りますかって言われるみたいな流されてるんですよね。
なるほど。
じゃあもうそれでその流れで入って。
流れで、もともと前の会社をちょっと辞めたいなって思っていた時期ではあったので、じゃあいつ辞めるかみたいな感じではあったんですけど、いきなりそんな一社だけすると入っちゃっていいのかみたいなのもありつつ、でもいつ来ますか、じゃあこういう日にします、じゃあそうしましょうみたいな感じで入社したっていう。
なるほど、そうだったんですね。
今フリーさんに入るまでのきっかけもお伺いできたかなと思うんですけど、そのタイミングではエンジニアとして入社されてるんですよね。
そうですね。
そこから今いろいろ肩書きを持ってらっしゃると思うんですけど、いわゆるデザイン業務というかデザイナーとして働き出したみたいなのはどのタイミングだったりするんですかね。
だから入って5年ぐらい、その少し前に遡るかなとは思うんですけど、当時アクセシビリティをやろうとか、フロントエンドの結構いろんな問題意識があって、スタイルシートがすごいもう肥大化に肥大化を重ねていたとか、
あちこちの見た目が違うとか、いろんな問題があったんですけど、いろんな問題をどうにか解決しようとして、こういう大きなサービスって絶対どっかで作り直すときが来るから、それを作り直すときにいいものが作れるようにデザインシステムを作ろうっていう。
当時デザインシステムって言葉知らなかったんですけど、デザインシステムというよりかはデザインのシステムを作ろうとしたんですね。
それがよくよく後からいろんな会社の話を聞くと、これデザインシステムって呼んでいいものなんだって後から分かったみたいな感じではあったんですけど、デザインシステムというかコンポーネントシステムというかみたいなのを作るようになって。
もともとやっぱりHCI、Human Computer Interactionやってたとかもあって、やっぱりユーザーさんがどういうふうにこのアプリケーションを使うのかとか、これを使った結果ユーザーさん何を得るのかとか、どうやったらもっとよくなるのかとか、すごいユーザーさんが何をするのかみたいなのを気にしながら作ってたので、
UIのことやりたいなっていう気持ちがその辺でやっぱりすごく強くなってたんですけど、UIのことをやりたいでフロントエンドの問題が何とかしたいみたいな、そういうのでどんどん仕事の比重をUI寄りにしてもらってたんですね。
UIの改善プロジェクトをやらせてもらったりとか、そのデザインシステムを作り始めたやつをどんどん作っていく仕事をしてたりとかしてて、ちょっと一緒にやってたデザイナーが辞めちゃうっていうタイミングがあって、じゃあこれからどうしようって思ったときに自分がデザイナーっていう肩書きを持てば進めやすいんじゃないかみたいな、
そこまですごく計画立ててやってたわけじゃないんですけど、結構勢いだったんですけど、これ自分がフルタイムでこのデザインシステムのことをやったほうがいいなって思って、デザイナーのチームに行きたいですっていう話をして、そのときは単純に社内移動させてもらったっていう感じでしたね。
デザイナーとしての成長
なるほど、じゃあもうそこから本当に転身というか、肩書きとして自分もデザイナーというのを背負って、そのデザインシステムというところに対してコミットしていくっていうのをそこから始めたってことですね。
そこで1個気になるのが、肩書きがついたら突然デザインができるわけではないじゃないですか。当たり前ですけど、なかなか本業でデザイン業務をやってらっしゃる方もいる中で、そこら辺のキャッチアップってすごい大変そうに感じちゃうんですけど、そこら辺はどうだったんですか。
そうですね、もともとデザインシステム、コンポーネントシステムを作ってたっていうところがベースとしてそういうのが分かるとか、学生時代とかにもいろいろ変なものを作ったりとかで、いられなかちょっとしたものを作ったりとかしてたとかもあるし、そういうグラフィックみたいなところももともとやってたのもあるんですけど、
結構自分がすごくデザインの部署に行きたいですっていう話をしたときにすごく印象に残ってるのが、山原さんはデザイナーやれるんじゃないっていうのを、デザインやってきてるでしょみたいな感じにすごく言われたんですね。
なんでかっていうと、エンジニアのチームの中で画面遷移図とかを作ってたんですね。それは別に画面遷移図がプロセスとして必要とか、商人プロセスみたいな作んなきゃいけないものとして作ってたというよりかは、ユーザーさんがこの機能を使ってどういう形でこの仕事をします。
この機能はどういう形のものですみたいなのをいろんな人に説明したりとか、あとは本当にUIをデザイナーが作ってくれる前に先にそういう資料を、いろんなドメインナレッジを紐解いて、そのときって法律とか行政の文書とかいっぱい読んで、こういう届けてってどう作るんだみたいなのをむちゃくちゃ詳しくなった上で、
画面遷移図みたいなのを作って、これでどうですかみたいな仕事をしてたので、確かに今思えばそれってすごく言い方で言うとあんまり好きじゃないんですけど上流下流の上流なんですよね。
そこの上流のデザインをやってた人だから別にデザイナーって名乗っても全然おかしくないって多分思ってくれてたんだと思うんですよ。
なるほど。実際、デザイナーとしてまたそこで仕事していくってなったときに、実際期待されていた通りのアクションは取れてた感覚はありますか、最初から。
そうですね、デザイナーっていう肩書きを得たことで、やっぱり他のデザイナーに対して対等にデザイナーとしてこうですよねっていう話ができるようになったっていうのはすごい大きかったかなと思っていて、
やっぱりデザイナー、エンジニアがUIに対して何か言ってるぞっていうのってちょっとデザイナーの中ではあんまり重みを持たないみたいなところもあって、
デザイナーとしてUIコンポーネントの元々やってた人からデザインツールの上でのビジュアルのものも受け継いでいて、しかもその動きを実装していて、それの使い方とか全部詳しいので、声画面ではこういうふうにしたほうがいいですっていう答えが出せるようになってたんですよね。
だから、そのままデザイナーとして他のデザイナーに対してこうしたほうがいいですよねとか、そういう話ができるようになってたっていうのがあったので、できてたんじゃないかなと思います。
これ当時働いてた人に怒られるかもしれないですけど。
ありがとうございます。なるほど。
エンジニアとデザイナーの経験
実際そんな感じでエンジニアとして、そしてデザイナーとしていろいろここまでやってきていらっしゃると思うんですけど、実際その二足のわらじっていう表現が正しいのかわからないんですけど、どっちもやっていく中での今こうやってきたから得られたものみたいなお話を伺えたかなと思うんですけど、逆にそれによって失ったものというか、
それ今どっちもやってるからこそこれはできなくなっちゃったなみたいなもしあるならお伺いしたいなと思ったんですけど、どうでしょう。
そうですね。自分の感覚から言うと全部やってるなんですよ。
要はUIっていうユーザーさんから見たソフトウェアの姿の一番手前側をやってるのがデザイナーだとしたら、そのちょっと後ろ側をフロントエンドエンジニアがやっていて、どんどん深くなっていくみたいなイメージで、
ただ自分はその中で言えばデザイナーとフロントエンドエンジニアっていうユーザーに近い側を全部なるべく全部やろうとしてるみたいな、そういうイメージなんですよね。
だからそれで言うとやっぱりそこから遠ざかってる、それこそDBのチューニングとか、そういうのはやる機会がなくなったっていう感じがしてますね。
ただまあ、それって単純にやる機会がないってだけで、もしそれをやんなきゃいけないってなったらやると思うんですよ。それはもう全部やるつもりでいるからこそ。
なので、全部やるつもりがあるのでやるんですけど、やる機会がなくなってしまったのでやんなくなったので、できるかわかんなくなってるっていうのが一番失ってるものですね。
なるほど、ありがとうございます。すみません、1個って言ったんですけどもう1個だけ聞いていいですか。
はい。
全部やるっていうその、なんていうんですかね、いわゆるスタンスみたいなのって厳選は何なんですかね。
厳選、いや、良くないものをリリースしたくないんですよね。
うんうん。
やっぱり、アプリケーションを作る会社にいてアプリケーション出してる以上、そのアプリケーションってなるべく完璧に近いものであってほしいのに、ユーザーさんから見た姿が、それビジュアルの話かもしれないし、機能の中身の話かもしれないですけど、良くない状態になってるっていうのが嫌なんですよ。
だから、良くない状態になってるのが何でなのかを全部知りたいし、改善できるものなのかを知りたいんですよね。
で、本来改善できるはずなのに、みんながこれでいいやって思ってるのが許せないんですよ。
っていうのが全部やるスタンスの厳選かなって思います。
なるほど、じゃあ本当にとにかく良いものを良いに届けていただける。
良いものを提供するスタンス
そうですね、もうそれだけですね。
なるほど、ありがとうございます。
山原さん今日はありがとうございました。
ありがとうございました。
まだまだお話ししたりないので、次回も山原さんとお送りします。
はい、ということで今回は山原さんの今あるキャリアについていろいろお伺いをしてきました。
ありがとうございました。
最初の肩書きだけ聞くと、本当に広いことをやってらっしゃるなっていう印象だったんですが、実際お話をいろいろ深掘ってみると、本当にやっぱり良いものを作りたいっていう、結構モチベーション自体がすごいシンプルかつ、すごい明確なんだなってお話聞いていて、すごい感じたところです。
自分も話しててそう思いましたね。
ありがとうございます。
なので今後も多分山原さんいろんなことをやっていくとは思うんですが、そこも多分モチベーションの厳選は変わらないかなと思うので、そういうところも僕も引き続き陰なる落ちさせていただけたらなと思っています。
ありがとうございました。
さてこの番組では、完成や次回ゲストへの質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
XではハッシュタグKiita FMをつけてポストしてください。
表記は番組名と一緒でQFMが大文字、残りは小文字です。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
Kiita株式会社はエンジニアを最高に幸せにするというミッションのもと、エンジニアに関する知識を記録、共有するためのサービスKiita、市内向け情報共有サービスKiitaチームを運営しています。
ぜひカタカナでKiitaと検索してチェックしてみてください。
来週も火曜日の朝6時に最新話が更新されます。
番組のフォローをして最新話もお聞きください。
お相手はKiitaプロダクト開発部部長の清野俊文と、フリー株式会社エンジニアデザイナーの山本がお送りしました。
29:47

コメント

スクロール