クルマサイト制作 SPA技術でのCV改善事例

REPORT
2020.07.29

嘉手川 有紀 Yuki Kadekawa

2017年入社。プロトソリューション沖縄 Webマーケティング部 SPAチーム/フロントエンドエンジニアとして所属。
HTML、CSS、JavaScriptを使ってwebサイト制作を担う。
担当する業務は中古車販売サイトの制作・運用、LPページ制作、SPA化を行い、UI/UXの向上に従事している。



クルマのサイト制作でSPAを取り入れたきっかけは?



SPAを取り入れたきっかけは2つあります。

1つは、私が所属しているチームでは中古車情報サイトを運用していて、全国で約40万台以上の中古車という膨大なデータを取り扱っていて、当時はクルマの絞り込み検索機能の読み込み速度を改善するためにSPAを検討していました。

2つ目は「新しいことをしよう!」です。

先方のディレクターさんが、新しい技術を取り入れることに積極的で、「SPAいいね。やろうやろう!」という感じで割とすんなり導入しました(笑)



新しいことを取り入れるがきっかけなんですね!ということは、SPA導入はスムーズにいったと?



いえ、それが、、、
始めはクルマの知識もなかったので凄く悩んだ時期もありました。例えばサイト内検索を使うときに、クルマ単体の機能だけではなく、横軸で出てくる機能などもあったのでクルマに詳しくない私からすると理解が難しかったです。

扱っているサイト自体の絞り込み条件がとても多く、何かを実装するにもまずは仕様理解からでしたので、その仕様を把握をすることがとても大変でした。
また車種とモデルグレードなど紐づいてる情報があったりすることも最初は分からなかったので、バグが出ることも多かったです。

そこはもう実際にやりながら覚えていきました!


Vue.jsと相性がいいそうですが、今回使用したフレームワークはありますか?



SPAチームでは主にVue.jsを採用しています。
Vue.jsを採用した理由としては、AngularやReactに比べて学習コストがそれほど高くなかったからです。

他のフレームワークと比べても出来ることはそこまで大きく変わらないですし、Vue.jsは色々とカスタマイズしやすく、初心者には優しいんですよね。
対してAngularはルールが厳格で上級者向けという感じがしますが、プロジェクトに合わせて向き不向きがあると思います。

ただ、学習コストが良いとはいえ、こういったフレームワークは常にアップデートされていくので、その度に「何か業務に活かせないか?」ということは意識しています。




SPAのメリットはどんなものがあるのでしょうか?



早いことが1番のメリットかなと思います。
特に、絞り込み検索などは切り替わるのが目に見えてわかるので既存と比べると速さが体感できて面白いと思います。



数字が絞りこまれていく、あのクルクル~!ってやつですね?



そうです(笑)競合のサイトでもよく使われている技術ですが、サイト全体というよりは部分的な感じで使われていることが多い気がします。

SPAを導入するとしたら部分的に段階を分けて実装していくのが理想ですね。今回導入した中古車情報サイトも『lite』といった部分的での実装になります。



SPAをliteへ一部導入してから、どういった成果が出たのでしょうか?



CVの計測は主に「見積もり」と「電話ボタン」で計測していたのですが、電話ボタンは本家サイトを上回ることができました。

「表示速度が1秒遅れることでコンバージョンが7%低下する」というのを聞いたことがあるのですが、やはり表示速度はCV(コンバージョン)獲得に影響してくるようです。




顕著に表れていますね。SPAの実装は簡単にできるものなのでしょうか?



ものによりますがフレームワークを理解していれば、楽に実装できるかと思います。

ただ私の場合、SPAチームに加入した時はJavaScriptもほとんど書けないレベルで入ったので、分からないことばかりだったのですが、周りのフォローもあってなんとか理解できるようになりました。
そもそもSPA(シングルページアプリケーション)がどういった物なのかもわからなかったですから(笑)

JavaScriptの知識がない状態でチームへアサインしたので、コードを見たときに何がJavaScriptで何がVue.jsなのか判断できなかったのが大変でした。判断できないと調べようにも答えに辿り着けなかったり、辿り着くまでにすごく時間がかかっていたのを覚えています。技術の面でとにかく新しいことばかりだったのでとても大変でした。


大変な中でのモチベーションは?



とにかく大変でした(泣きたくなるような日もあった)。
でも、会社で分からなかったものを、ずっと分からないままが嫌で、自宅で復習をしたり、翌日に会社で先輩に答え合わせしたり。。。その繰り返しでしたね。
とにかくチームメンバーのフォローが手厚くて、期待を受けてチームに配属されたからには役目をこなしたい!その責任もありますし。
ですので、モチベーションを保つというよりはチームに恵まれていたと思います。



今後について



人と一緒に何かを作り上げることが好きなので、今後も沢山の人と関わりながら仕事をしていきたいなと思っています。
今のチームでも、デザイナーさんやお客さまが持っていない知識は私から提供できるし、デザイナーさんが持っている知識は逆に共有頂ける。そこで良いものを作り上げられるのは今のチームで経験できたことなので、そこは今後もずっと大事にしていきたいですね。



新しいことを取り入れる場合、動き始めるまでのエネルギー消耗は大きい。
クルマで言うと「Low」の状態だ。

そんな中彼女は「チームからの期待に応えたい」という想いで、ギアを1段1段着実にシフトチェンジし、ワインディングロードを突っ切っていく。

日々アップグレードしていく嘉手川 有紀に、今後も目が離せない。







icon_福田


icon_福田


インタビュアー:福田 聡樹(ふくだ さとき)
株式会社プロトソリューション Webマーケティング部所属。自社ホームページ編集長。
好きなもの:爬虫類全般、本のにおい。

ページトップへ戻る