＊＊＊この記事は、2022年12月12日時点での情報となります＊＊＊

山口　香菜（やまぐち　かな）
オロ中途入社4年目。
クラウドソリューション事業部のフロントエンドエンジニア

経歴：新卒からゲーム会社やWeb制作会社を3社経験したあと、オロへ入社
趣味：ゲーム（特にRPG）、アカペラ

パソコンと触れ合うことが好きだった幼少期

——エンジニアになるきっかけは何だったんですか。

始まりは小学生です。

コーヒーは苦手。

その時からゲームでよく遊んでいたのですが、クリアの為に攻略サイトに足しげく通って、サイトの掲示板でやり取りをしていました。当時は、個人の攻略サイトも多く、今と比べてもサイトごとにデザインや機能がバラバラでした。
自分でも何かホームページを作ってみようと思ったときに、あのサイトのデザインや機能はどうすればできるんだろう、と色々試行錯誤していくのが楽しかったんです。

そんなこんなで周りよりもちょっとパソコンに詳しい人として生きていたので、大学でも情報系に進みました。

そこから新卒でエンジニアとしてソーシャルゲームの会社に入社したのですが、ゲームの物語やコンセプトを作りたいという気持ちが強く、企画職として活躍することも視野に入れていました。
なのでエンジニアとしては成長がやや遅めだったと思います。

ですが、配属になったPC向けFlashゲームのFlashエンジニアとなってからは、Flashの演出アニメーションやロジックの記述などが楽しくなってきて、がっつりFlashエンジニアとして働いていました。
見た目で楽しませるものを作ることが性に合っていたのか、こうして今もエンジニアとして働いているわけです。

オロとの出会いは身近なところに

——オロへ入社した経緯を教えてください！

2社目でもゲーム制作会社に入り、Flashアニメーションの作成をはじめとして、ゲーム内イベントの企画やセリフを考えるなどの、1社目よりも幅を広げて楽しくお仕事をしていました。

しかしその最中に、Flashの終わりのはじまり*が来たのです。

*編集部注：
2010年iOSのFlash非対応をきっかけに、動的コンテンツはHTML5、JavaScript、CSSでの
実現へシフトしていった。

そこからは、アニメーションをJavaScriptへ切り替える作業を任されはじめて、もっとJavaScriptを書いてみたいという欲が出てきたので、Web制作会社へ転職しました。Flashとの別れは寂しくもありましたが、フロントエンドの新たな道を開くきっかけにもなった出来事ですから、思い返せばポジティブな事件だったな、と思っています。

3社目のWeb制作会社で働いていくうちに、もっと規模の大きいシステムのフロントエンドの仕組みづくりをやっていきたいというテーマが湧いてきて、また転職活動を始めました。

偶然にも前職でReformaPSAを使用していたのが出会いでした。
最初からオロに目をつけていたわけではないのですが、会社探し中に、そういえばReformaPSAって機能が多くて面白そうなシステムだったな、あのシステムを作ってる会社ってどこだっけ？　と調べてオロにたどり着きました。

フロントエンドエンジニアとは

――今更ですがフロントエンドエンジニアとは、一体どういったお仕事なんでしょうか？

改めて聞かれると難しいですね…。
一般的なフロントエンドエンジニアというのは、Webサイトやアプリケーション等で、ユーザーさん達が閲覧したり、編集したりする画面等を設計、構築をする職種です。
JavaScript、HTML、CSS等の言語を使って、サービス開発をしていきます。

オロでも同じで、もう少し詳しく言うと大きく分けて仕事が2種類あります。

• 機能を実現するための画面を作る、バックエンドのAPIを呼び出す、など
• 画面を作る時に、作りやすいように共通部分のライブラリやフレームワークを作る

フロントエンドエンジニアしかフロントエンドの開発をしない、という風に技術で分担を決めているわけではありません。「適材適所」でできる人がいれば担当する、という形でやっています。

私のお仕事を平たく言うと、メインは主力製品のZACのUI/UX改善に取り組んでいます。ZACの画面はたくさんありますが、現状だと新しいUIと古いUIの画面が混在しています。ですので全画面を新しいUIに置き換えていくプロジェクトを行っていて、早く実現できるようUI設計や進め方などを検討しています。

新UIのZACを見つめてホクホクする山口さん

――オロに入社してから、具体的にどのようなお仕事をしてきたのですか？

最初に任されたフロントエンドの業務はZACの「案件検索画面」（ZAC内の案件データベースを検索する画面）を、新しいUIに置き換えることでした。
画面を置き換えるといっても、古い画面の機能をそのまま引き継いでデザインだけ新しくすればいい、というわけではありませんでした。
この画面の用途としては、案件を見つけ出す以外にも、月々の売上や利益の把握にも使われています。より実用的になるように、1万件の案件データを扱えるようにすることになりました。
自分の勘どころではこれくらいの表示は余裕だろう、と思ってフロントエンドの開発をしてみたところ、APIから取得したデータの表示に10秒以上かかったり、メモリ不足でブラウザが落ちたりしてしまいました。
自分の作ったものだと、200件くらいまでの表示しか耐えられなかったんですね。

フロントエンドの対応策として、一度の描画量を減らすために、ページングや仮想DOM*といった手法を用いるか、ということも検討しました。しかし、それだと「操作回数が多い」や「ページ内検索ができなくて使いづらい」といったユーザーの声もあり、採用には至りませんでした。

*編集部注：
仮想DOMを使うことで、画面に表示されている範囲だけを実体化できるなど、
大量データを扱う時の軽量化手法の一つ。

1つの要望に対して、どこまで何を叶える必要があるのか。その要望を叶える事でできなくなることは、果たして本当になくしてもよい機能なのか。そういったことを検討していきながら、最終的には、検索結果を表示するときに、「件数が少なければ全件を描画し、多ければ折りたたんで集計値だけ描画する」という開発になりました。
つまりは案件を見つけ出す用途と、売上や利益を把握する用途の両方を叶えられる形を取ったというわけです。

大切なことは、完成イメージの共有と進め方だった

——いろいろな方法を試したり、要望の必要性を見直したり、いろんなアプローチで解決したんですね。
大きなプロジェクトに参加してとても苦労されたと聞きましたが、どのようなことがあったのでしょうか？

フロントエンドとして任された2つ目の画面が「利益計画画面」（ZACの最もメインとなる複雑な画面）でした。
2年弱ほどかけて開発して、検証の前に、オロの役員陣にフィードバックを貰うことになりました。するとかなり多くのユーザビリティまわりのフィードバックをいただいて、デザインを一から見直さないといけないのではないかと頭が真っ白になりました。

フィードバックの内容としては、操作の導線が分かりにくかったり、必要な情報が一度に見れなかったり、他の画面と操作の統一性が無かったり、同時に複数の項目を編集できなかったり、といったものでした。

とにかくこのままではまずいと思いました。とりあえずいただいたフィードバックの内容を参考に、改善後のUIや動きがわかるプロトタイプをささっと作って、翌日に再度役員陣に持っていったところ、なんとかそれでUI/UXの方針のOKが出ました。

その際に自分が、PL（プロジェクトリーダー）として続きの開発を進める役割も担うことになりました。

そこから約3、4か月ほどかけて開発を行い、つい先月、無事にリリースすることができました。本当にうれしかったです。

これは後で聞いた話ですが、今回のプロジェクト終盤での大量フィードバックからプロトタイプを提示してOKをもらう流れが、プロジェクトを着実に仕上げるためにとても良い動き方だったそうです。「最初に完成イメージを擦り合わせする」「効果が同じなら、より簡単な代替案を採用する」といった進め方になるよう、メインエンジニアがPLを兼ねて主導してもらう、とあの瞬間に体制ルールが変わったようでした。

——最後はPL（プロジェクトリーダー）となったとのことですが、やってみていかがでしたか？

入社当初はテックリードになろうとしてましたが、今はPM（プロジェクトマネージャー）としても生きていきたいと思っています。

PLの経験をさせてもらったことで、技術そのものを極めて行くよりもレベルの高い人達が伸び伸びとお仕事ができる環境を作ることに対してモチベーションを見出したんです。

また、もともと案件基本画面や利益計画画面改修のプロジェクトでPLをされていた方の背中を見て、やってみたいなと心のどこかで思っていたのかもしれませんね。

PL自体は未経験の領域でしたし、開発兼PLって思っていた以上に大変でした。それでも、自分がその大変な仕事を担うことで、他のメンバーの仕事が円滑に進むのであれば、それが自分にとっての幸せだと感じています。
オロのエンジニアは他の人を思いやって行動・発言する人が多くて、お互いの意見を通そうとするのではなく、他の意見も尊重した上で議論を進めていく空気感があって、色々な面ですごく居心地のいい会社なんです。
だからこそ、この人たちの力になりたい！　って感情が芽生えてきたのかもしれません。

上司が突然持ってきた真っ白のパズル
開発メンバーが休憩がてら遊んでいるのだそう

ZACの未来を担う存在へ

——今後オロでやっていきたい取り組みを教えてください！

はじめの方にもお伝えしましたが、現在取り掛かっているプロジェクトのテーマが、まだUI/UXが刷新されていない画面の切り替えをいかに早く進めるかの検討です。
その取り組みの一環で、まずは、ZACのデザインコンセプトや構成についてを私だけではなく、バックエンドエンジニアにも、ゆくゆくは顧客対応をしている部署など、クラウドソリューション事業部全体で共通認識が根付いている状況を作っていきたいと考えています。

現時点でもデザインコンセプトは当然ありますが、まだまだ整備できていない状況です。まずはしっかりとデザインの交通整理をした上で、各部署に伝えていき、皆さんが「ZACのデザインとは何ぞや」を語れるようにしたいと思っています。

特にエンジニアサイドは、デザインコンセプト・構成が確立していれば、私がいなくても開発を進められる状況になるはずです。

これは私の転職テーマだった、「大規模システムのフロントエンドの仕組みづくり」そのものなんです。かねてからやりたかったことを仕事としてできていて、今が本当に楽しいです。

——その先に山口さんは何に取り組もうとしていますか？

フロントエンドにも様々な領域がありまして、次はさらなるUX（ユーザーエクスペリエンス）の改善に取り掛かりたいと思っています。

例えば、今のZACはメニュー構成をそのままにした状態でデザインを変えていっていますが、そもそもどういう導線があればもっとZACが使いやすくなるのか、であったり、色の区別のつきにくい方も使いやすくなる、といった改修を進めていきたいと思います。
現時点ではやはりその観点の優先度が低いですが、その分析が進んでいけば、より良い開発サイクルができる予定です。

——最後に、オロへの入社を考えている方へメッセージをお願いします！

周りの人はひょうきんで優しい人ばかりだったり、休憩が取りやすかったり、居心地がよくって気づけば4年が経っていました。
難題にぶつかることもたくさんありますが、優秀な上司、同僚の手助けもあり、壁を乗り越えながらエンジニア技術、PMとして、そして人としての成長を実感しています。

今後のUI/UXの刷新プロジェクトをより加速させるために、尖った技術を持った仲間が増えてくれるとうれしいです。

あと、これはちょっと恥ずかしいのであんまり言っていないことですが…。

自分が元々ゲーム会社でFlashを取り扱っていたこともあり、実は入社する前からマーケティングコミュニケーション事業部の中矢さんの隠れファンなんです。

ただ、事業部も違うので入社から4年経った今も挨拶くらいしか交わしたことがなく、未だに緊張してしまって話しかけるに至っていないのです…。
心の中では話したいって思ってるんですけども。

——もったいない…！　これを機に声をかけに行ってくださいね（笑）

が、頑張ります！