ヤフー第10代黒帯が語る最新技術動向 ──ネットワーク・セキュリティ、自然言語処理、iOSアプリ、アクセシビリティ、ビジュアルデザイン

ヤフーでは、エンジニアとデザイナーの突出した知識とスキルを持つ優秀な人財を称賛し、新たな活躍の場を提供するために「黒帯制度」を設けています。 今年で10代目となる黒帯たちは社内外でどのような活動を行い、最新技術の動向をとらえているのか。今回はネットワーク・セキュリティ、自然言語処理、iOSアプリ、Webフロントエンド、アクセシビリティ、ビジュアルデザイン分野から、その発表内容をご紹介します。

【1】Privacy Sandboxとはなにか

──ネットワーク・セキュリティ/大津 繁樹

ネットワーク・セキュリティ黒帯の大津繁樹が、今回LTのテーマにしたのは「Privacy Sandboxとはなにか」。プライバシー配慮から利用を制限する動きが出ている3rd party cookie（以下、3p cookie）の代案として、Googleが提唱する「Privacy Sandbox」の最新動向について語りました。

Privacy Sandboxとは、GoogleのChromeで下記の機能を実現することを指し、その目的はユーザープライバシーに一定の配慮をしながら、Web上のエコシステムを（完全にではなく）「ある程度」維持していくことだと、大津は説明します。

Privacy Sandbox が取り組んでいることは下記2つの項目

1. ブラウザフィンガープリントやキャッシュ探索などによる隠れたトラッキングを防止
2. 3rd party cookie の廃止に伴う代替技術群の実現

Googleが主導するPrivacy Sandboxに対し、ベンダーや政府・自治体などのステークホルダーがいろいろなスタンスをとっており、ときに批判が起きたりすることもありますが、いまも標準化を目指し、議論が続けられています。

一方で、Privacy Sandboxは最先端技術の集合体であると言います。

「Privacy Sandboxには、現在使える最先端のWeb技術や情報技術が余すことなく組み込まれています。 実際にChromeに実装し、Origin Trialによって実サービス環境で機能を検証。フィードバックを受けながら機能を改良し、有効性を実証して標準化に持っていくのがPrivacy Sandboxを進めるGoogleの方針です。

最先端のWeb技術や暗号技術、プライバシー技術、データマイニング技術など、技術者の力が試されるものばかり。 Privacy Sandboxが実現されたChromeは、広告プラットフォームの機能が内在したものになり、単なるWebを閲覧するためのブラウザではなくなっていくでしょう」

大津は、数あるPrivacy Sandboxの機能のなかから、「Trust Token API」と「Attribution Reporting API」について、デモを行いながらその構成と仕組みを紹介しました。

「これまでBotによる広告不正対策はCAPTCHAによるHuman判定後、3p cookieによってHuman判定のマーキングを行ってきましたが、その3p cookieが廃止されたことで使えなくなります。 そこで、Human判定時にユーザーとの関連性がわからないunlinkable、しかも偽造もできない匿名tokenを発行して、リクエスト時にHuman判定を継続させる仕組みが生まれたのです」

「Attribution Reporting APIは、anchorタグを拡張して広告クリックの情報をChrome内のデータベースに格納し、コンバージョンピクセルのリダイレクトを検知してコンバージョンを計測。 ノイズを付与して数日後にコンバージョンレポートを送信します。これによってユーザーのトラッキングを防ぎます。」

最後に、Privacy Sandboxの広告テクノロジーとして、ユーザーの興味/関心に基づく広告技術のFLoC、追従型広告技術のFLEDGEについて、デモ動画を用いながら紹介しました。

FLoC技術の詳細については、大津のブログで詳しく解説が書かれているので、興味がある方はぜひご覧ください。
https://jovi0608.hatenablog.com/entry/2021/05/06/160046

【2】「ニュースコメントランキングの取り組み紹介」

──自然言語処理黒帯/小林 隼人

自然言語処理の小林隼人の発表テーマは、「ニュースコメントランキングの取り組み紹介」。 最近興味を持っているという自然言語処理や機械学習、特に文章要約や生成を研究し、コメントランキングの精度向上に取り組んだ成果を紹介しました。

まず、小林が取り組んだ事例として、Yahoo!ショッピングの商品カテゴリからキャッチコピーを自動生成する機能や、Yahoo!ニュース トピックスの編集ツールに自動生成された見出し候補とともにCTR（クリック率）を予測して表示する機能が紹介されました。

Yahoo!ニュース トピックスの見出しに対し、認識にかかった時間や理解しやすい文字数を検証し、最適な文字数を分析する取り組みにも関わっています。

【参考】Yahoo!ニュース トピックスの見出し文字数を最大14.5文字に変更します
https://note.com/newshack_yjnews/n/n888622ae7043

また、Yahoo!ニュースのコメントの健全化を目的とする「深層学習を用いた自然言語処理モデル（AI）」を利用してコメントを評価するAPIは無償提供しており、「NewsPicks」、「攻略大百科」、「ママスタコミュニティ」、「はてなブックマーク」といった外部サービスにも活用されています。

【参考】Yahoo!ニュース、不適切コメントへの対策として導入している 深層学習を用いた自然言語処理モデル（AI）のAPIを 「NewsPicks」、「攻略大百科」、「ママスタコミュニティ」へ無償提供開始
https://about.yahoo.co.jp/pr/release/2021/05/19a/
【参考】「はてなブックマーク」のコメント表示改善施策として Yahoo! JAPANの独自技術「建設的コメント順位付けモデル」を導入開始
https://about.yahoo.co.jp/pr/release/2021/07/19a/

「基本的には学習データを作り、そのデータでモデルを学習させるという流れになります。ランキング用のスコアは建設度スコアを使っています。建設度はコメントに対して建設的だと思ったユーザー数（得票数）で定義します。 モデルの学習と予測については、現在はListNet亜種を用いています。次の図のように、学習時にはスコアラー（スコア予測器）の予測が正解に近づくようパラメータを更新し、予測時には学習したスコアラーを用いて最終的な予測ランキングを作成しています」

ヤフーでは、BERTベースのListNetやTensorFlow Servingなどを使って検証しながら、モデルの高精度化、高速化にも取り組んでいると小林は語ります。

最後に、訓練用データや評価用データなどの新しいデータの作成や、不正回答ユーザー対策などのエピソードを紹介し、LTを締めくくりました。

【3】ヤフーにおけるiOSアプリのエッジAI活用事例

──iOSアプリ/林 和弘

iOSアプリ黒帯の林は、この1年で取り組んできたヤフーサービスのiOSアプリに対するエッジAIの技術導入について語りました。 エッジAIとは、ネットワークの端点でデータ処理を行う技術。端点とはスマホやIoT機器を指し、この端点で行う処理を機械学習モデルにしたものをエッジAIと呼んでいます。

まず林は、iOSを取り巻く開発者向けのエッジAIツールとして、代表的な「Core ML Framework」をはじめ、Apple製の学習機を使う「Create ML」、Pythonなど既成モデルを変換するため「coremltools」、学習機を自分で作って学習させるコマンドツール「turicreate」の4つを紹介。 アプリ開発者の目線で機械学習の開発、運用開始までの流れに沿って解説を行いました。

iOSアプリのエッジAI技術導入について、林はアプリ内で不適切な内容の投稿があった場合、アラートが表示される『Yahoo!知恵袋』での事例を紹介しました。

「もともとサーバーで運用していたCore ML Frameworkを使った機械学習モデルを、クライアントアプリに持ってきました。ただし、入力中に内容をチェックして問題があればアラートを表示させることはできますが、サーバーと違って積極的に投稿できないようにすることはできません。 そこで、投稿内容が不適切であると気づきを促すUXにしています」
https://techblog.yahoo.co.jp/entry/20200225814995/

もう1つの事例は、「Yahoo! JAPAN」のアプリ内検索について新しい仕組みが紹介されました。こちらは画面操作をデモで行いながら説明。

「検索画面でテキストを入力すると、内容的に関連があるものが表示されます。Core MLを使って実装しており、サーバーと通信はしていません。アプリ内だけで検索を実現しています」

このように、エッジAIを活用した取り組みをしているなかで、通常のアプリ開発やサーバーのモデル運用で考慮が必要な観点が出てきたと林は語ります。主な課題と対策として、下記の課題と対策が語られました。

1.機械学習モデルのサイズ
2.モデルの互換性
3.モデル更新
4.テストとアプリ上での精度

「一番大きな問題になるのが、機械学習のモデルサイズ。サーバー側で運用する場合と比べ、モデルのサイズはかなりシビアになるため、できれば10M前後に抑えられるといいと思います。モデルの互換性については、変換不可なオペレータはアプリ側で直接実装する必要があるので、それを考慮しておく必要があります。 モデルの更新に関しては、シンプルにサーバー側で学習したモデルを置いてそれを配信するやり方が無難かと。ただし、なるべく早いタイミングで自動テストを使ってアプリ内で試した方がいいと思います」

最後にモデル導入の進め方として、サービスの特定の機能にモデルを使った新しい機能を追加して、小さくテストを繰り返すことや、UXとモデルの開発は平行で進めた方が良い、などのアドバイスを送りました。

【4】WebパフォーマンスとCoreWebVitals

──Webフロントエンド/伊藤 康太

続いて紹介するのは、Webフロントの黒帯を務める伊藤康太のLTで、タイトルは「WebパフォーマンスとCoreWebVitals」。伊藤はまず、視聴者に向けて「Webパフォーマンスは高い方がいいと思いますか？」と質問を投げかけます。

この問いに対しては、多くの人が「YES」と答えると思います。しかし、「Webパフォーマンスはビジネス指標より大事ですか？」と聞き方を変えると、この回答には悩む人がいるのではないかと伊藤。 「今回のLTのテーマであるCoreWebVitalsを考えると、Webパフォーマンスはビジネス指標にも効果があることを伝えていきたい」と、LTをスタートさせました。

良いUXが長期的にサイトの利益につながることはわかっているが、具体的になにが良いUXでなにが悪いUXなのかを示すのは難しいもの。 そこで、Googleが定めたWebの品質を表すための指標がWebVitalsです。そのなかでも特に重要な三つの指標「CoreWebVitals」について伊藤が解説します。

「最も大きなコンテンツがどのくらい早く表示されたかを示すLCP、最初の入力までの遅延を表すFID、画面や広告の“がたつき”などの視覚的なズレでユーザーに不利益を出していないかを示すCLS。この三つの指標がCoreWebVitalsです」

では、これらをどう改善していくのか。下記の三つのステップを踏むのがベターな方法だと伊藤は語ります。

「まず、現在地や改善ポイントを知ることために、LighthouseやPageSpeed Insights、Search Consoleといったツールを使います。改善方法を知るためにはweb.devや社内のドキュメントを参考にします。 そして継続して追い、過去と比較して見るためにLigthouse CIやSearch Consoleを使います。それらを、ユーザーから収集されたフィールドデータ、PCやLighthouse CIなどの特定の環境で計測できるラボデータを計測し、改善していきます」

その結果、CoreWebVitalsのスコア改善やセッション時間の向上など、ビジネスの指標が実際に改善されと伊藤は強調します。Yahoo!ニュースがCLSを改善することによってPV/sessionが15％向上した事例は、web.devやGoogle I/Oで取り上げられました。

「こうした取り組みが広がったことでWebパフォーマンスの向上プロジェクトが立ち上がり、全社プラットフォームの改善や分析のレポート作成、経営陣に対する定期報告など、継続的にパフォーマンスをウォッチする環境作りにつながりました」

ヤフーとしてこうした取り組みをする理由として伊藤は、「ユーザーへ良いUXを提供するため」、「ビジネス指標の向上、SEOへの影響など、やらないことによるリスクを回避するため」などを挙げました。

そして、最初からフィールドデータを持つことができ、理由をつけてパフォーマンスを改善できる環境・風土があること、経営陣がその重要性を理解していることなどを挙げ、ヤフーのエンジニアやデザイナーとして、いまこのタイミングで挑戦しないのはもったいないと熱いメッセージを送りました。

【5】アクセシビリティ最新トレンド

──アクセシビリティ/中野 信

アクセシビリティ黒帯の中野は、広告事業のデザインと、UIガイドラインの運用策定とアクセシビリティの向上に関わっています。黒帯としては、第5/6/9/10代と計4期務めています。

今回のLTでは「アクセシビリティ最新トレンド」をテーマに、規格（WCAG3.0）、法律（障害者差別解消法の改正）、OS（iOS 15 / Android 12）の3点について語りました。

●規格（WCAG3.0について）
ウェブアクセシビリティに関するガイドライン、WCAG（Web Contents Accessibility Guidelines）は、インターネットのための主要な国際標準化機構であるWorld Wide Web Consortium（W3C）のWeb Accessibility Initiative(WAI)によって公開されている。 実質的にウェブアクセシビリティの国際標準規格であり、アメリカやEU、カナダでは障害者の差別を禁止する法律の基準に使われており、日本産業規格のWCAGと完全に⼀致しています。

これまでのWCAG2.1が2021年1月に3.0へバージョンアップし、名称もW3C Accessibility Guidelines (WCAG) 3.0に変わります。2.2が2021年に勧告予定なのですが、それと並行する形でWCAG3.0のワーキングドラフトが公開。この後数年かけてブラッシュアップされる予定です。

中野は、WCAG2.0から3.0になることで、どのような違いがあるのか、ワーキングドラフトやガイドラインなど、主な変更点について説明。

●法律（障害者差別解消法の改正について）
平成28年に施行された障害者差別解消法の観点はアクセシビリティにおいても重要です。同法の正式名称は「障害を理由とする差別の解消に関する法律」。

法律のなかでは「合理的配慮」を提供することを求めています。例えば、イベントセミナーで障害特性に応じた座席を決める、書類の代筆、タブレットの活用、Webサイトやアプリで情報アクセシビリティを担保することなどが挙げられます。

いままでは行政機関は法的義務があり、民間事業者は努力義務だったのですが、2021年5月に民間事業者にも法的義務が課せられる改正案が可決されました。

●OS（iOS 15 / Android 12について）
iOS 15では読み上げ機能や背景音の導入、双方向補聴器のサポートなど、「オンデバイスインテリジェンス」強化のための機能追加が多いと中野は解説します。 一方、Android 12では、「Material You」という新しいデザインシステムで採用されたバリアブルUIや、画面を見ているときだけ反応するアシスト機能「Voice Access」などが紹介されました。

【6】クオリティをワンランクアップするデザイン

──ビジュアルデザイン/岡 直哉

ビジュアルデザイン黒帯の岡は、超PayPay祭やヤフー・LINE統合関連の全社を横断するプロモーション、広告CMのブランディング業務のアートディレクションを担当しています。 また、全社のビジュアルガイドラインやPayPayのガイドラインの取りまとめなども担当。

今回は「クオリティをワンランクアップするデザイン」をテーマに、デザインを作る際の時短＆ クオリティアップさせる小技を紹介しました。


まず岡は、以下のA/B 二つの広告デザインを提示し、どちらがビジュアル的に優れたデザインかと問いかけます。

もちろん人により好みはあるものだが、岡はBがビジュアル的には優れていると言います。
どちらもテキスト情報や色彩設計、構成要素は同じ。では、Bのどこが優れていると思うのか。解説をします。

「実はどちらのデザインも今回のために私が作ったものです。

Aのデザインは夏っぽいフォント選びや商品写真、文字を目立たせるために光彩を入れるなど、デザインのセオリーはたくさん使っています。 なにがいけないかと言うと、足し算しすぎで要素がごちゃごちゃしてしまい、メリハリが少ないこと。また、商品の切り抜きや背景処理、タイトルの扱いなどに時間を要してしまいます。制作時間は30～45分ほどでした。

一方、Bの方は文字周りに空間の余裕があって、テキストに目線がいきやすい設計になっています。商品写真の密度やシズル感もあり、写真も目立つ構成です。しかも制作時間は10～15分とAに比べて格段に短い」

岡は、良い写真をベースにすることで、デザインの品質が担保されるため、配置やデザインに迷う時間が少なくなるとアドバイス。キービジュアルとかバナーを作る上で重要な手法なので、参考にしてほしいとメッセージを送りました。

今回は、すべての黒帯のLTをご紹介できませんでしたが、ヤフーに入社して「黒帯と一緒に仕事をしたい」「黒帯を目指したい」という方の参考にしていただけたらうれしいです。
また、黒帯たちは社内外に専門技術の動向や取り組みを発信しています。ぜひ黒帯たちが登壇するセミナーやSNSでの発信情報などをチェックしてみてください。