main image

国内No.1の生活総合情報メディア「ヨムーノ」の成長を支える開発舞台裏

株式会社ロコガイド
2022.6

くふうカンパニーグループが提供している「ヨムーノ」は、2022年に月間利用者数2,200万人を突破した、国内No.1の生活総合情報メディアです。2018年2月に月間利用者数100万人を突破してから4年で20倍超に成長しました。

同じくふうカンパニーグループである Da Vinci Studio はヨムーノの技術的な開発部分を一手に担っており、ヨムーノの編集部やディレクターチームと日々連携しながら開発を進めています。 急成長するメディア開発の裏側を聞いてみました。

yoshikawa
吉川 崇倫(インタビュアー)
Da Vinci Studio 代表取締役
青木 亮太
Da Vinci Studio デザイナー
冨田 和歳
Da Vinci Studio エンジニア
千代谷 怜
Da Vinci Studio エンジニア

小さなメディアから、日常生活でよく見かけるメディアに成長

―― 今日は、どんどんユーザーが増えて勢いのあるヨムーノ開発チームですね。みなさん、自己紹介をお願いします。

青木 ヨムーノのデザインを担当している青木です。ヨーダと呼ばれています。 UI 設計からバナーなどのクリエイティブまでデザイン全般を手掛けています。

千代谷 エンジニアの千代谷です。社内ではパイセンと呼ばれています。ヨーダさんと出身校が一緒です。僕のほうが後輩なのに、何故かパイセンです。 フロントエンドが得意なので、そこを担当することが多いです。

冨田 ヨムーノの開発マネジメントを担当している冨田です。 主な担当はバックエンドの実装で、案件の調整やマネジメントもやっています。

―― ありがとうございます。今日のメンバーは、Da Vinci Studio の兄弟会社にあたる株式会社オウチーノにもともと所属していたメンバーですね。当時から付き合いがあるので、雰囲気も馴染んでますね。

冨田 ヨムーノも、当初はオウチーノで開発を担っていました。Da Vinci Studio が開発するようになり、今はこのメンバーです。

青木 そういった経緯もあって、受託開発とはいえ、雰囲気としてはほぼインハウスに近いと思います。絶賛メンバーを募集中です(笑)。

―― オウチーノで立ち上げた小さなメディアでしたもんね。WordPress から Ruby on Rails への移行は千代谷さんと僕でやりましたよね。

千代谷 そうでしたね。大変でした。WordPress 時代は管理が複雑で大変だったので移行自体は大賛成だったのですが、まさか自分が担当するとは思っていなかったです。

―― お疲れさまでした(笑)。でも、結果としてこれだけメディアも大きく成長したので、移行して良かったですね。
その当時と比べると、ユーザー数が比べ物にならないくらい増えています。何か、感覚的に変わったところはありますか?

千代谷 開発の規模が大きくなった一方で、複雑化してきたなというのを日々感じています。また、日常生活でヨムーノを目にすることが増えたというのは感慨深いです。

―― 最近はテレビで取り上げられることが多々ありますし、スマートニュースでもたくさん見かけます。

千代谷 あとは検索するときに、キーワード候補としてサジェストされるようになってきました。一般化してきたな、使われているんだなという実感があります。

―― くふうカンパニーグループ内外で、ヨムーノを起点にして様々なメディアがクロスする展開も増えてますよね。

トンマナをあえて揃えず実現したトクバイとヨムーノの連携

冨田 最近は、ロコガイドが別に運営する「トクバイ」と機能の連携を始めたりしています。

―― おお、どういうことをやっているんですか?

冨田 直近だと、ヨムーノのユーザーに対して、近くのお店に関連するトクバイのコンテンツを表示する機能を開発しました。

ヨムーノのどのページから、どういう導線で遷移するのが効果的かといったことを考えた設計になっています。

トクバイとヨムーノの連携

トクバイとヨムーノの連携例。トクバイで提供しているチラシやクーポン情報に、ヨムーノからアクセスすることができる。

―― 素朴な疑問なんですが、ヨムーノ側で位置情報を取得しているのはどうしてですか?トクバイで表示する情報のためなら、トクバイ側で取得しても良いような。

青木 仰るとおり、単純に導線だけ設置する方法もあると思います。ただ、それだと外部サイト連携と変わらないので、もう一歩、踏み込んだ連携にしたかったんです。単純にトクバイに遷移して、その後はヨムーノと関係ないように見える体験にはしたくありませんでした。

ヨムーノには様々なコンテンツのページがあることを踏まえ、全体像を把握するためディレクターに介入してもらいました。「ユーザーは、どのページで何を期待するか、何を有益と感じるか、気づけるか」という観点で情報を整理し、遷移のシナリオをデザインしました。

ユーザーが本来、最も望んでいるであろう「お得な情報をいかに違和感なくスムーズに探せるか」という体験の実現にこだわりました。

―― ユーザーファーストな考え方で良いですね。
またまた素朴な疑問なんですが、トクバイとヨムーノはトンマナも結構、違いますよね。違和感をなくすという意味だと、そこが課題になりませんか?

青木 そうですね。トクバイ側のページのトンマナをヨムーノに寄せるという案もありました。最終的には大きく変えることはせずに、キーワードや画面の構成要素で違和感を減らせるようトクバイ側に調整いただきました。

例えば、トクバイ側に遷移した後も遷移前のヨムーノに戻る導線が常に存在することで、体験がつながっていると感じられるよう工夫しています。

―― トンマナはそのままで、キーワードと構成要素で補完したのか、考えましたね。
たしかに「違和感をなくして一連の体験にする」のが目的であって、トンマナを揃えることは手段の一つですもんね。

ロコガイドのエンジニアやデザイナーと仕事をするようになったと思いますが、どんな印象でしたか。

青木 グループ内のデザイナーは以前から交流があって、一緒に仕事をしたロコガイド側のデザイナーの方も知っていました。

ただ一緒に仕事をするのは初めてだったのと、今回はトクバイとヨムーノの密な連携が必要でしたので、トクバイのデザイナーにも連絡してお互いのデザインを共有しながら進めるように気をつけました。

あとは……そうですね、ロコガイドは規模が大きい会社なので、蓋を開けてみたら関係者が多くて戸惑いました(笑)。普段、少人数で完結してることが多かったので。

冨田 私はロコガイドCTO の前田さんの印象が強いです。すごくフットワークの軽い方で、どんどん進めてくれることに驚きました。

―― そうですね、たしかにプロジェクトの開発メンバーの規模という意味ではロコガイドが最も大きいですよね。CTO のフットワークが軽いのも分かります(笑)。

千代谷 僕は「おさわり会」に驚きました。

青木 あれね(笑)。

―― おさわり会?

青木 新規に開発した機能がある程度できた段階で、試しにみんなで触ってみて感想を言い合う会で、ロコガイドのカルチャーらしいです。

千代谷 最初、名前だけ聞いて戸惑いました。

―― たしかに、中身を知らずにカレンダーの招待だけ来たら驚きそう(笑)。

青木 名前もそうなんですが、普段リモートで開発しているのに、そのときだけリアルで集まっていて、そこも驚きました。僕らだけはリモートでの参加でした。

―― へー、それはどうして集まるんだろう?

青木 みんなが同じ時間に同じ空間で操作するというのが重要なのかなと感じました。そのような場で、おそらくデザイナー・エンジニア・ディレクターと目線の違う人たちが意見を交わすことで、様々な視点に気づけるからじゃないでしょうかね。みなさん触るときにとにかく「ユーザーが」という主語で発言していて、とても印象的でした。こういう取り組みは真似したいですね。

―― なるほど、同じ時間・同じ空間か。ユーザー体験にこだわっているのも含めて良い文化ですね。

一筋縄ではない他サービスとの記事連携

―― ヨムーノは、トクバイだけでなく、他のメディアとの記事連携もやっていますよね。

冨田 やってますね。くふうカンパニーグループのメディアである「おやこのくふう」の他、グループ外では「LOCARI」「おうちごはん」といったメディア連携してます。

―― 具体的にどういうことをやってるんですか?

冨田 他のメディアが発行する RSS から記事を取り込んで、ヨムーノで表示しています。これだけだと簡単そうですが、実際の連携には考慮すべきポイントが多いんです。

一言で RSS といっても各社で細かい仕様があって、それに正しく対応する必要がありますし、規約も異なるので記事の管理を細かく制御するようにしています。

具体的には「アフィリエイトは除外する」「特定の商品やキーワードが含まれるものは非公開にする」みたいなことです。ヨムーノ側で編集できる記事とできない記事があるので、それもフラグで管理しています。さらに、編集できる記事であっても、「タグ付けだけ OK」のように範囲が異なります。そういった条件を制御して、オペレーションミスを防ぐようになっています。

―― すごい、それはヨムーノの管理画面ですべてできるんですよね。当初はシンプルな記事の管理機能しかなかったのに、いつの間にかすごいことになってそう。

冨田 ヨムーノの編集チームはグループ横断でいろいろなことをやってますからね。すごく高機能になっています(笑)。

画像サイズの不均一をデザインの工夫で解消

―― ヨムーノと何かの連携ということだと、「買えるヨムーノ」もありますよね。

千代谷 ありますね。EC サイトと連携して、ヨムーノでのおすすめ商品から直接 EC サイトに行って購入できる機能です。

買えるヨムーノ
―― いわゆるアフィリエイトですかね?

千代谷 そうですね。ただ、よくあるアフィリエイトだと記事内にアフィリエイトのタグを差し込むだけですが、買えるヨムーノはヨムーノ側で商品の一覧を出してるんですよ。記事とも紐付けています。

―― 商品マスタを持ってるということか。ヨムーノの管理画面、ますますすごいな。

千代谷 そうですね、概念としては商品マスタに近いと思います。ただ、アフィリエイトの仕組みを流用しているので大変なこともありました。

各社のアフィリエイトの規約にちゃんと従わないといけませんし、何より商品の画像サイズに苦しめられました。

―― 商品の画像サイズ?

千代谷 はい。アフィリエイトタグって EC サイトごとに何パターンかあるんですが、そのタグに合わせて画像サイズのパターンが決まってるんですよ。

そのパターンが EC サイト各社で揃っているわけではないので、近いサイズを選んだとしてもバラバラになっちゃうんです。 例えば A サイトの画像は横幅が全部50ピクセルである一方、B サイトは全部60ピクセルというようなことです。

―― なんと!でも言われてみるとたしかに。それで商品の一覧を表示しちゃうとガタガタしちゃいますよね。

千代谷 そうなんです。アフィリエイトの規約があるので、勝手にリサイズするわけにもいかなくて。

―― はーなるほど。それでどう対応したんですか?

千代谷 まず、サイズの偏りをできる限り絞りました。サイズがバラバラとはいえ、ユースケースは共通なので、まるっきりバラバラでもないんです。

それから、各サイトのサイズの誤差が最大で20ピクセル内に収まるようにサイズを選びました。 そして表示領域に外枠をつけて、画像と枠の間に余白を設けることで画一的に感じるようなデザインにしたんです。

これは見たほうが早いかもしれませんね。

商品一覧

左のリストが、買えるヨムーノの商品一覧の例。商品それぞれの画像サイズは異なっているが、それぞれの枠によって統一されたデザインになっている。

―― おおおーーなるほどすごい。画像サイズが違っているのに違和感がない。余白で吸収するというデザインの発想がすごいですね。

青木 買えるヨムーノは、いろいろなデザインの工夫がつまっています。 ヨムーノではサービス共通のスタイルガイドが存在していたのですが、買えるヨムーノはあえて逸脱させています。

これは、ヨムーノが「記事やコンテンツを閲覧する体験」が主であるのに対し、買えるヨムーノは「そこから買える、次(EC サイト)に行ける体験」という、それまでのヨムーノにはない概念を表現するためです。

―― ふむふむ。それって具体的にどうやってデザインの差別化をしてるんですか?

青木 そうですね……いろいろあるんですが、先ほど出てきた枠もそうです。ヨムーノ内では四角の枠組みで構成する要素が、買えるヨムーノ以外には基本的に存在しません。

―― はーーー、あの枠はそういう役割も果たしているのか!デザインってすごいですね。

青木 すごいでしょう。まぁ、デザインしたのは僕じゃないんですが(笑)。 ただ、他の箇所でもカジュアルに枠を使っちゃうと台無しなので、そうした既存のデザインの意図を理解した上で設計しています。

目指すは “他サービスから真似される存在”

―― では最後に、今後ヨムーノでやりたいことを教えてください。

冨田 まずはリプレイス・分離ですね。実は今、他のシステムがヨムーノと同居しちゃっている状態なんです。先ほどの話にもあったように、もともとシンプルな記事メディアのシステムだったのが、様々な機能が追加されて複雑化しています。ですので、一度きれいにしたいです。

千代谷 位置情報を使う機能も出てきましたし、次はユーザー・アカウント管理ですね。 具体的な仕様のイメージまではないんですが、他サイトの連携も増えてきたので、今後、必要そうだなと思っています。

青木 ヨムーノのユーザー数増加の勢いに、デザインの改善が追いついていない側面もあるので、日本を代表する生活総合情報メディアとしてふさわしいデザインを改めて考えていくつもりです。 ブランディングも含め、生活メディアとして象徴的で、他からも参考にされるくらいのデザインにしていきたいです。

―― 本日はみなさん、ありがとうございました!

Da Vinci Studioでは
一緒に働く仲間を募集しています。
詳細はこちら