概要

Kaizen Adは、動画広告を作りたい人(広告主や代理店)が、制作指示書(動画の仕様書に相当するもの)を作成して素材データと共にアップロードすると、GH(Growth Hacker)ネットワークに参加するクリエイターが原則5営業日で動画を制作・納品してくれるサービスです。

Kaizen Ad のサービスサイトはこちら: https://kaizenplatform.com/video

制作指示書の部分には、基本情報、納品期日、制作内容、追加オプション、発注内容の確認、という5つのページがあり、これらの項目名と、現在自分がどの画面にいるのかをステッパーと呼ばれるコンポーネントで表しています。

f:id:kaizenplatform:20210623154658p:plain — 赤枠で囲った部分がステッパーです。改修前は制作指示書の各ページの左上に固定されていました。

今回は、このステッパーの改修を行いました。

改修のきっかけ

ステッパーの改修を行ったきっかけは、CS(カスタマーサクセス)の方から

「制作指示書を書いている時に、ページ下部から2つ前、3つ前のページに戻りたいことがある。画面下部に「2つ前に戻る」「3つ前に戻る」ボタンを追加してほしい」

という要望をいただいたことでした。

提案いただいたボタンを増やす方法だと、今後スマートフォン対応をしていく上で画面の多くをボタンが占めてしまう、という問題がありました。一方で、これまでのステッパーには、現在地より前のページタイトルを押すとそのページに戻れるという機能がすでに存在していました。

そこで、今回の問題の解決策として、

ステッパーを画面下部で使えるようにする
現在地より前の各ページタイトルに押せそう感を出す

という改修を行いました。

実装とフィードバック

上記の解決策のうち、1つ目の「ステッパーを画面下部で使えるようにする」については、

左上のステッパーをスクロールに追従するようにする
画面下部に横向きのステッパーを追加する

という2種類を実装しました。また、2つ目の「現在地より前の各ページタイトルに押せそう感を出す」については、色の変更やマウスホバー時に太字にする、アンダーラインをつける等を行いました。これらを一通り実装完了後にPMやCTOと開発環境でデモを行い、実際の使用感を確認しました。

結論としては、縦横のステッパーが一画面に収まると混乱してしまう…ということで、下部ステッパーについては今回は見送りとなり、最終的に以下のような改修に落ち着きました。

f:id:kaizenplatform:20210625101726p:plain — ステッパーをスクロールに追従させることで、画面下部でも利用できるようになりました！

リリース前最後に、最初に要望をいただいたCSの方に実際にステッパーを触っていただくデモ会を行いました。今回初めてユーザーの方から反応をいただく体験をしたのですが、自分の行った改修に「使いやすくなった！」「ありがとうございます！」という声を直接いただけて、めちゃくちゃ嬉しかったです！

その後、下部ステッパーの削除と微調整を行い、無事に本番環境にリリースしました🎉

開発を通して

今回の改修では、まず「要望をどう解決するのが最善か」という視点の大切さに気づかされました。ボタンを増やすのではなくステッパー改修をする、という方向性はPMが決めてくださったのですが、今後自分がエンジニアになる上でこのような判断ができるようになりたいなあ、と思っています。私自身はKaizenでしかインターンをしたことがなく他と比べられないですが、「〇〇を実装して欲しい」ではなく、こういうバックグラウンドから共有してもらえるのはとてもありがたいですし、モチベーションにも繋がります！

また、フィードバックやデモ会などを通して、インターン生である私も対等に意見を言い合えるので、一緒にプロダクトを作ることができるのも魅力的です。実際に、色の変更等で私の意見を採用していただいた部分もあります。