ママリユーザーの声を集め、「本当に使って良かった」と思う商品・サービスをまとめ「ママリ口コミ大賞」として半期に1回発表しています。
3月31日に「ママリ口コミ大賞2020 春」を発表し、4回目を迎えました。今回は、1回目から開発を担当している安達に、ママリ口コミ大賞の技術変遷をインタビューしました。

ママリ口コミ大賞とは？

ママの購買判断を支えることを目的に、ママリユーザーの声を集め全国の先輩ママの「本当に使ってよかった」商品・サービスを紹介する取り組みです。
人それぞれ個性があるように、家族のスタイルもさまざま。2019年に出産したママの3人に1人が会員登録している「ママリ」だからこそ、ママと家族の毎日に真剣に向き合いたいという想いから「ママリ口コミ大賞」は生まれました。
回を重ねるごとに、ママリ口コミ大賞の特徴である先輩ママの口コミを活かし、より「ママと家族のスタイルに合う」コンテンツとなるよう目指しています。

最新版の「ママリ口コミ大賞」はこちらからご覧ください。

前回の反省を取り入れ、開発工数削減や口コミの文字数アップにつながる技術選定や取り組み

今回の発表で4回目の「ママリ口コミ大賞」。毎回、違う技術を使用して開発をしていると伺いました。どういった狙いや成果がありましたか？

今までの技術選定は下記です。

第1回：ejs + webpack
第2回：自作のジェネレーター + pug + Spreadsheet (DB) + webpack
第3回：Gatsby + MySQL
第4回：Gatsby + MySQL（リファクタリング実施）
そのときのリソースや要件などにあわせ、使用する技術を選定しています。それぞれ簡単にご紹介したいと思います。

限られた期間の中で、デザイナー主導で取り組んだ第1回

1回目は今と比較すると部門数も少なく、特集ページもなかったためそんなにページ数がありませんでした。また、プロダクトの立ち上げフェーズということもあり、Webページのデザインを行うデザイナー自身がページの作成までやりきるという形にしたので、難しい技術要素をいれず最低限の仕組みで提供する形をとり、ejs + webpackでHTMLを大量生産していきました。
それでも取り組んでみると、1ページ1ページ手動で制作していくのは大変でしたし、修正があるたびにページごとに修正をしないといけないという苦労がありましたね。

自作のジェネレーターを実装しページの自動生成をした第2回

前回の課題を踏まえ、同じ構成のページを手動でつくらなくていいように自作のジェネレーターを実装しました。第1回、第2回はユーザーの口コミはGoogleフォームで集めており、データがSpreadsheetに蓄積されているという状況を踏まえ、SpreadsheetがそのままDBとなるよう構成しました。第1回と比較すると自動化されて楽になった部分はもちろんありますが、SpreadsheetがDBであることで別の課題も感じた取り組みとなりました。

アプリ「ママリ」内にアンケートフォームを新設。名寄せ作業削減やユーザーの文字数増加に寄与した第3回

第3回よりアプリ「ママリ」内にアンケートフォームを新設し、こちらが想定しているフォーマットでMySQLに蓄積されるように開発しました。今までのGoogleフォームで集める形だとどうしても商品名の表記ゆれなどが多発し、口コミ収集後の名寄せ作業に時間を要していました。
アプリ内にアンケートフォームを新設したことは、ユーザー情報との紐付けや時間があるときに部門や商品を選択して回答できるようになりました。そうすることで、ユーザーが答えたい部門や商品のみを回答することができるので、商品の感想にとどまらず、商品を利用した実体験が付加されることで、口コミの文字数が前回比で40%増えるといった効果もありましたね！

口コミ大賞の特設ページの技術進化としてはアンケートフォームを開発したことにより、DBにデータを格納するようになったのでGatsbyを導入することにしました。今回の開発リソースや技術要件を満たしていたことはもちろんですが、コネヒトのフロントエンド開発では主にReactを採用していることもあり相性がいいと思いました。

Gatsbyについて具体的なよかったことや注意点まとめはこちらのブログをご確認ください。

リファクタリングをした第4回。最低限の開発工数で実現可能な状態に

当初、Gatsbyを使用しての3回目のときの実装を何度も使用する想定ではなかったため、4回目では一部リファクタリングを行いました。リファクタリングを行ったことで、いまの規模感であれば最低限の開発工数で実現可能な状態となっています。

管理画面の開発やリアルタイムに表示してトレンドの商品紹介も？！

次回以降どういった新しい取り組みをしたいですか？

クライアントから受賞商品の画像データや商品説明といったテキストデータといったものを入力する管理画面を開発したいなと思いますね。
Gatsbyを導入したことで、GraphQL経由でDBからデータを取得しページ生成をしているのですが、DBに格納するデータをつくるにあたり人の手を介しての業務が発生しています。画像データをAWSにアップロードしたり、テキストデータなどはスプレッドシートに記載されたものを関数等を使ってSQLを生成し、DBに登録しているのです。スプレッドシートだとデータフォーマットを指定することができないので、管理画面をつくりバリデーションを指定し間違いを未然に防ぐという取り組みをしていきたいなと考えています。

また、将来的な構想でいくとアプリ「ママリ」内の口コミをリアルタイムに表示するようになるといいなと思ったりしますね！
今のママリ口コミ大賞は口コミ募集期間内に集まった口コミデータを表示するという形になっているため、リアルタイムな口コミの表示はまだ実装されていません。Gatsbyは静的サイトのジェネレーターとしては優秀ですが、リアルタイムな情報の表示を実現することは得意ではないので、また違う技術選定をする必要になりますがすでにアプリ内にある口コミをうまく活用していきたいなとは思いますね！トレンドの商品紹介にもつながると思いますし、より購入の意思決定を支えていける取り組みにつなげていけたらいいなと思います。