linotice

linotice

2021.03.29

技術Blogの受賞エンジニアとCTO藤門が、Yahoo!ニュースのユーザー体験向上への取り組みを語る

画像
ヤフーの技術やデザイン、カルチャーを発信する「Yahoo! JAPAN Tech Blog」。2020年のアドベントカレンダー企画「Yahoo! JAPAN Advent Calendar 2020」では、先端技術、Core Web Vitals、デザインシステム、Kubernetes、サーバーサイド、OSS、画像検索、アクセシビリティ、技術コミュニティなど、さまざまなテーマで25本の記事が公開されました。

そのなかでBest Authorに選ばれたのは、「ユーザー体験を向上!Yahoo!ニュースにおけるCore Web Vitals対応事例」を書いたエンジニアの喜楽(きらく)智規さん。毎年恒例となった、Best AuthorとCTOの藤門が語り合うランチ会ですが、取材時(2021年2月)はコロナ禍により全社的にリモートワークが指示されていたためオンラインで開催。技術からワークライフバランスまで、たくさんの話題で盛り上がりました!

プロフィール

喜楽 智規
メディア統括本部 メディア開発本部
2016年新卒入社。Yahoo!ニュース一筋で約5年、PHP→Java→TypeScriptとわたり歩いて来たJavaScript大好きなフロントエンドエンジニア。Best Authorを受賞した記事は、「ユーザー体験を向上!Yahoo!ニュースにおけるCore Web Vitals対応事例」。
藤門 千明
取締役 常務執行役員CTO
筑波大学大学院を卒業後、2005年に新卒入社。
エンジニアとしてYahoo! JAPAN IDやYahoo!ショッピング、ヤフオク!の決済システム構築などに携わる。決済金融部門のテクニカルディレクターやYahoo! JAPANを支えるプラットフォームの責任者を経て、2015年にCTOに就任。2019年10月より現職。
干場 未来子
コーポレートグループPD統括本部 コーポレートPD本部 採用企画部
2008年中途入社。マーケティングソリューション事業で営業、エデュケーション、プロダクトマーケティングなどを経て、2016年に人事へ異動し、採用ブランディングを担当。

Yahoo!ニュースを改善した「Core Web Vitals」の画期的な点とは?

今年度のAdvent Calendarもさまざまなテーマで記事が公開され、私も興味深く読ませていただきましたが、喜楽さん、Best Author受賞おめでとうございます!そして藤門さん、今年もこのランチ会でお話ができるのを楽しみにしてました(笑)。お二人とも今日はよろしくお願いします!
例年ですと、このランチ会ではBest Authorが藤門さんにお肉をごちそうになるんですが、今回はオンライン開催ということで、ヤフーの社員食堂BASE11で提供している「オンライン懇親会セット」を食べながらお話をうかがえればと思います。

▲社内懇親会や社外の取引先との会食でも利用できるBASE11の懇親会セット。シェフが心を込めてつくったお料理をご自宅などお好きな場所にお届けします(※今回のランチ会ではソフトドリンクセットを利用)。

それでは、さっそくなんですが、喜楽さんはこれまでどんなエンジニアキャリアを歩んできましたか?

プログラミングは高専時代から始めました。大学院卒業後、SIerに就職しようと思ったのですが、自分がスーツを着て仕事するのが想像できなくて(笑)。ウェブ系の会社を探すなかで、ヤフーに興味を持つようになりました。選考のなかで、どの社員からも「課題解決」という言葉を多く耳にして、この会社でなら世の中のためになれる仕事ができると感じたことも決め手になりました。
ヤフー入社後は、Yahoo!ニュースのチームに配属されました。ちょうどシステムのリプレイスをやっていた時期で、ここ数年はそこに注力して取り組んでいます。フロントエンドを触ることが多いのですが、必要に応じてバックエンドを作ったり、保守に携わったりすることもあります。

今回の記事(「ユーザー体験を向上!Yahoo!ニュースにおけるCore Web Vitals対応事例」)では、GoogleのCore Web Vitalsを使って、サイトのUI/UXにかかわる施策を検証し、それを数値化することによって原因と問題点を突き詰めて改善につなげたことを紹介していますね。

表示速度の改善やパフォーマンスのチューニングは、かなり行っています。A/Bテストにも繰り返し関わってきました。テストは企画フェーズから関わることもあります。自分から発信して、こういうテストをやってみましょうと提案することも多いですね。
Core Web Vitalsは一種のトレンドにもなっていますが、藤門さんはCore Web Vitalsをどうとらえていますか?

ウェブサイトを作る人は、誰でも優れたウェブ体験をユーザーに提供したいと考えていると思います。しかし、「優れたウェブ体験」とは具体的にどういうことなのか、みんななんとなく思い描いたものはあるけど、実はいままでそれをスコア化する指標がなかったんですよ。
それをGoogleが初めてスコア化し、そのいくつかの要素をもってユーザー体験に決定的な差を生み出すために登場したのが、Core Web Vitalsという概念です。2020年に発表され、2021年5月からはGoogle検索ランキング要因の一つに組み込まれることが予定されています。
ヤフーとしても、昨年の夏ぐらいからすべてのサービスを改善するために、Core Web Vitalsを中心とした取り組みを強化しています。CTO室でもGoogleと協業しながら、Core Web Vitalsがヤフーのサービスにとって意味のあるものとなるのか、調査を始めていました。
Core Web Vitalsに対する期待は高かったものの、ヤフーのサイト改善にどう活用できるのかは未知数。いくつかのサービスで先行的に改善に取り組み、その事例をもとに、全サービスに一斉展開しようと思っていた矢先でした。そこで真っ先に改善の一手目を打ってくれたのが、今回の「Yahoo!ニュース」と「Yahoo! BEAUTY」と「GYAO!」でした。
さらに、改善までの過程をわかりやすく記事に書いてくれたのが喜楽さん。想定していたことのほとんどを、喜楽さんは対応してくれた。大変ありがたいことです。それほどCore Web Vitalsは、ヤフーにとって重要な指標になりつつあると考えています。

Yahoo!ニュースというユーザー規模が大きなサービスにおいて、Core Web VitalsがKPIに貢献するということを数値で示したことは、社内はもちろん、社外のクリエイターにとっても非常に参考になったのではないかと思います!

▲メディア統括本部 メディア開発本部 喜楽 智規

なんとなくUI/UXが良くないんじゃないかと思っていても、なかなか直す時間がとれなかったり、ほかに優先すべきタスクがあったりすると、ついつい後回しになることがあります。しかし、そこがCore Web Vitalsで数値化され、改善ポイントが明確になると、モチベーションが上がりますね。実際に改善した効果も、数字になって見えるわけですから。
Core Web Vitalsを使った正直な感想は、「Yahoo!ニュースにこれほど改善余地があったのか」という驚きでした。これまでもニュースコンテンツが一番大事だと考えて設計していましたが、見せ方や出し方を少し変えるだけで数字が大きく変わるというのは、かなりインパクトがありました。

UI/UXを改善したほうがいいと提案しても、「改善したらサービスにどう影響があるんだっけ?」「これで本当にPVが伸びるのか、ユーザーが増えるのか」、と社内でつっこまれることも多いですよね(笑)。

なるほど(笑)

エンジニアとしても、このモジュールを改善したらどんな効果につながるのかが不明確でした。改善するといっても、どこをどう変えるかを数字で裏付けできないと、やはり証明することは難しい。Core Web Vitalsは具体的な改善効果が数値化できるので、エンジニアの仕事にもフィットしていると思います。
実はCore Web Vitalsの導入効果が出てきたタイミングで、社長の川邊さんに、ヤフーの全サービスに導入しましょうと提案したことがあったんですよ。すると、川邊さんは「これ、やらない理由はないよね」と言って、即決してくれました。さらに、これはヤフーの習慣にしようとも言ってくれた。
トップの理解を得られたことは大きかったなと。このバックアップを受けて、今年1月に全執行役員に導入指示を出しました。ヤフー全体に導入指示ができたのは、この事例があったからなので、本当に感謝しています。
加えて私がすごく感動したのは、この記事を見た他社のCTO仲間から、問い合わせが殺到したことです。つい自慢げに「このブログの通りやったら、こうなるから頑張って」と返事をしてしまいました(笑)。

ありがとうございます(笑)。実は、改善自体は数十行のコードだったりするんですけど、その数十行のコードがこれだけのインパクトを生んだことは、やりがいもあったし、面白いなと思いましたね。

海外からも注目される記事となっているとうかがいましたが、より多くのエンジニアやデザイナーに読んでいただきたいですね!

はい、海外のエンジニアからも、「この記事は素晴らしいのでぜひもっと世界に出していきましょう」という要望をいただいたため、先日英訳した記事をアップしました。国内だけではなく世界で読んでいただける記事になったらうれしいですね。

こうした地道な改善は、やりたくても簡単にできることではありません。ヤフーが草の根活動的に地道に改善したことをブログなどで伝え、それをきっかけに他社のウェブサービスも改善されていく。それって、インターネットの世界をよりハッピーにすることにつながるんですよね。

▲取締役 常務執行役員CTO 藤門 千明

エンジニアはダイエットもKPIにこだわり、減量効果を計算する

ヤフーはリモートワークになってからずいぶん経ちましたが、お二人はリモートワークが常態化したことで、何か変わったことはありますか?

自宅にいる自分の姿が、社内に丸見えになることでしょうか。飼っている猫が、会議中に横でニャアニャア鳴きだすことがあるので困ります(笑)。

それはかわいくて和むやつです(笑)ところで藤門さん、痩せました?なんだか顔がシュッとした気がするんですけど!(笑)

実は4~5キロ痩せました。去年の正月にスキーに行ったのですが、ゲレンデで転んでしまって、それがいつもよりとても痛かった。これは体重が増えたせいだと思って、それからジョギングを始めました。 エンジニアの悪い癖で、何キロ走ればどれぐらい痩せるか、つい計算しながら走るんです。いろいろ調べて試した結果、ランニングの減量効果はだいたい「走ったキロ数×体重」なんですね。

体重が重い人の方が、同じ距離を走っても痩せやすいということですか。

そうなんです。計算通りに痩せたんですよね。KPIを設定しないと改善できないのは、日常生活でも同じですね(笑)。

こんなに成果が可視化されるなら、私ももっとジョギング頑張ります(笑)。

僕も任天堂のリングフィットアドベンチャーをプレイしたり、食事を自炊にして低カロリーの食事を心がけたりすることで、3キロぐらい痩せました。持続可能なダイエット、いまも継続中です(笑)。

まさにCI(継続的インテグレーション)の発想ですね(笑)。

「技術の無駄遣い」をしても怒られない社内ハッカソン「Hack Day」

ところで、3年前のヤフーのハッカソン「Hack Day」のBuzz賞作品を覚えていますか?

はい。喜楽さんは、忘れたいことをトイレの水に流す「心のトイレ」を作ったんですよね。(※Hack Day 2018

あああ!あのトイレの便器を持ち込んでいたのは喜楽さんだったんですね!

覚えていてもらえてうれしいです。その時、藤門さんは審査委員長だったので、直接お話させていただきましたよね。

Hack Dayのためにトイレの便器を買ってきたと聞いてすごい人だなって思ったので(笑)、特に印象に残っていました。今回、Best Authorの名前を見たときに「あれ? もしかしたら…」と思って調べて、やっぱりと(笑)。

Hack Dayは内定者時代から参加していて、いまのところ皆勤賞です。技術の無駄遣いだって言われてますけど、とにかく楽しいんですね。

実際、社内のHack Dayで、審査委員長は出場できないのに勝手に自分の作品を披露しちゃったこともありました。ヤフーのメディアサービスで掲載されている画像に対して類似画像検索を行い、それと似たYahoo!ショッピングの商品を紹介するっていうものでしたが(笑)。

技術の無駄遣い最高じゃないですか!藤門さんも本当は審査する側じゃなくて出場者として参加したいんですね(笑)。世の中の皆さんも、きっと藤門さんに出て欲しいと思ってると思いますよ(笑)。

でも、すごく評判良かったですよ。社内のハッカソンのための作業は業務時間を使ってもいいし、作ったものはちゃんと評価される。たとえ技術の無駄使いだとしても、そういうヤフーのカルチャーが好きです。

インターネットサービスの持続可能性に、エネルギー問題は避けて通れない

最後に真面目な質問です。藤門さんがこちらの動画で、「未来は予測するものではなくて、創るもの」と言っていますが、藤門さんにとって創りたい未来とは何でしょうか。そのために、いまどんなインプットとアウトプットをしているのか聞きたいです。

自分たちが大事だと考え、こうあるべきだと強く願って創ったものが、将来のデファクトスタンダードになることは、人生でも最高に楽しいことですよね。いま、創りたいと思っている未来の一つは、持続可能なインターネットサービスです。
インターネットサービスは、大量の電力を消費します。ユーザーがパソコンやスマホで使う電力もそうですし、サービス提供側もかなりの電力を使っている。AIを活用するにも、膨大な消費電力が必要です。そのエネルギー源のことまでしっかりと考えなければいけない。ヤフーとしても、事業で使用する電力を2023年までに100%再生可能エネルギーにすると宣言しています。
宣言時に「3年以内」としたのは、インターネットは10年以上先のことは考えても仕方がないということもありますが、なによりこれはかなり頑張らないと実現できない目標だから。それでも、次の世代にいまよりも広く深くインターネットサービスを享受してほしいから、そんな未来を創りたいと思っています。

たしかにブロックチェーン一つとっても、便利になる反面、膨大な電気やコンピューティングリソースを使いますよね。

エンジニアは、限られたリソースをうまく使うという発想も大切です。どうするのがいいのか、正解はないけれど、私もプログラムを書きながらそんなことを思ったりしますね。
一方で、少ないメモリで動作するようにプログラミングした方がいいなと思いつつ、作り手としてはそんなメモリ管理なんかしたくない。だから、メモリ管理は言語側に預けて、メモリをじゃんじゃん使うようにプログラムを書きたくなる。エンジニアは面倒くさいこと嫌いだし(笑)。

たしかに、メモリはあればあるだけ使い切っちゃいますね。メモリに限らず、コンピューティングリソースもあればあるだけ使ってしまいますが、今後はそのあたりもより深く考えてゆきたいと思います。

今日はCore Web Vitalsのお話、ダイエットからのCIの話まで、いろいろとお聞きできて楽しかったです!これからもダイエットはそれぞれ頑張りましょう(笑)。お二人とも、貴重なお時間をいただきありがとうございました!

採用情報 公式SNSアカウント

このページの先頭へ