ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所で快適に操作できるUIを作るといったインタラクション分野の研究をしている山中です。 この記事では、リンクやボタンの大きさに基づいてタップの成功率を推定するモデルについて解説します（国際会議ISS 2020で発表した研究成果です [1]）。 このモデルを活用すると、アプリやウェブページのデザインをするさいに、デザイナーが経験的にボタンやリンクの大きさを設定するのではなく、「リンクがこの大きさであれば95％の確率でタップできるから十分だ」などと操作性に基づいてユーザインタフェース（UI）を設計できるようになります。 タップの成功率を推定できると何が嬉しい？ スマートフォンやタブレットPC向けの

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。サイエンス統括本部でデータ分析による社内サービスの課題解決支援をしている関口です。 ヤフーではたくさんのABテスト（※1）が常に行われており、サービス改善に活かされています。しかしながら実際には、さまざまな理由からABテストができないことがよくあります。本記事では、そのような場合にどのようにして施策の効果を評価・推定するかについて、具体的なケースからアイデアを紹介していきます。 なお今回はYahoo!ショッピングを題材にしたケースばかりですが、アイデア自体は汎用的なものとなっています。 ※1： ABテストはウェブサービス上のUI改善、機械学習モデル改善、機能追加etc.といったさまざまな施策が、KPIにどれくらいのイン

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で社内プラットフォームを開発・運用している本田です。普段は大阪オフィスで働いています。（新型コロナウイルスの影響でここ1年はずっと在宅ワークが続いておりますが） 私は2020年度後期の6カ月間、ヤフー大阪オフィスが運営しているオープンコラボイベント「Mix Leap」にスタッフとして初めて参加しました。そこで「フロントエンドのテストに関する勉強会」を企画から入って開催し、結果200人を超える参加応募がありました！ 今回はヤフーでのアソシエイトという働き方と、イベント企画から開催までを通した中での出来事や学んだことをお話しします。 ヤフーの技術コミュニティーとアソシエイト ヤフーでは東京、名古屋、大阪、福

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような

実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのシステム部門でUXリサーチ、情報設計、UI設計などを担当している、UXデザイナーの近藤です。今回は、ヤフー社内で有志が取り組んでいる、デザイン思考の普及・推進活動についてご紹介します。 活動の背景 ヤフーは「UPDATE JAPAN」をミッションに掲げ、情報技術のチカラで日本をもっと便利にすべく、ユーザーファーストを意識したサービスづくりに日々取り組んでいます。 つくり手の思いつきや思い込みに頼らずお客様に問いながらものづくりを進めていくため、現場ではさまざまな手法やフレームワークが実践・推進されていますが、その中の一つがデザイン思考です。 デザイン思考とは簡単に言うと、ユーザーファーストで問題解決をするための

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの森川です。 ヤフーのデザイナーと言えば、Yahoo!ニュースやYahoo!ショッピングのデザインを最初に思い浮かべると思いますが、ヤフーには、社内システムを作っている部署（システム統括本部）があり、13名のデザイナー（2019年8月現在）が所属しています。 性質上、表に出ることが少ないため、今回は社内システムを作っているデザイナーについて前半、後半の2回に分けて紹介したいと思います。 前半：社内システムをデザインするやりがい ～ デザイナーの環境と事例紹介（この記事） 後半：社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介 ヤフーの社内シス

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、YJ-CSIRTの中村です。 皆さんはCSIRT（シーサート/Computer Security Incident Response Team）という組織名を耳にしたことがありますか。 CSIRTは、組織内の情報セキュリティインシデントを専門に扱う、インシデント対応チームです。 CSIRTについては、7/11のtechblog記事「守れサイバーセキュリティ～SOCとは？ ヤフーにおけるその役割」でも紹介されています。 こちらの記事では、CSIRTと関わりが深いSOCについての説明をしていますので、ぜひご一読ください。 ヤフーの組織内CSIRTであるYJ-CSIRTでは、情報セキュリティインシデントが発生したときだけでは

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ 　インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年　アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah

部屋への入室は招待かURL欄に部屋名を直接入力で可能です。もし入力した部屋が存在しなかった場合、新規に部屋が生成されます。 非公開設定はいらないのではないか、とよく言われるのですが「入室を拒んでいるわけではないが検索を汚したいわけではない」という日本人的なニーズを満たしていて僕は気に入っています。先の記事で数字が載っていた通りMYM上には部屋が全部で15万ほど存在しますが、この公開設定のおかげかこれだけの部屋数になっていても検索性をあまり損なっていません。 ヘビーに利用するユーザーであれば数百を超える部屋に入室するのは当たり前で、2000をオーバーすることも珍しくはありません。例えば僕は1000部屋以上入室しています。 > document.querySelectorAll('.list-myroom li').length 1109ぱっとこの数字だけ聞くと、まともに処理できる量を超えてい

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の22日目を担当します、新卒1年目デザイナーの中司(ちゅうし)です！ 今回は私が体験したデザイナーの新卒研修からデザインをするにあたって3つのフェーズのサイクルがあるのではないかと感じたので考察としてご報告いたします。 よろしくお願いいたします！ 目次 デザイナーの新卒研修は爆速で濃密だった デザイナーの新卒研修とは カリキュラムは3部構成 デザインサイクル 「考える」 「感じる」 「作る」 デザインサイクルのコツ 最後に 私たちを支えてくださった運営の方に感謝 ヤフーデザイナーの新卒研修は爆速で濃密だった デザイナーの新卒研修とは デザイナーの新卒研修と

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 広告フロントエンド開発部の春野です。今日はデザイナーの立場から、デザインスキルに自信のないエンジニアの方でも取り組むことができる、UIの課題発見方法をテーマに記事を書いていきたいと思います。 PDCAサイクルを回すことで生じる課題 Webサービスやアプリケーションを制作するにあたって、多くのプロダクトはユーザーのニーズに応えるために画面の追加や修正を行い、PDCAサイクルを回していると思います。しかしながら、PDCAサイクルを回していくことにより、デザインの一貫性が失われる可能性があります。ひとつの機能や画面の追加・修正の要件を満たすことを目的とするあまり、ひとつひとつの成果物が良いものであっても、サービス全体を見渡したときにデザ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多

2月16日に Yahoo! JAPAN Tech Conferenceを開催しました。 当日は、7つのセッションにのべ1600名以上の方にご参加いただき、盛況のうちに幕を下ろすことができました。たくさんのご来場、ありがとうございました。 ここでは、一部を除き当日使用したスライドを公開します。ぜひご覧ください。 【16-A-1】「データテクノロジースペシャル」Yahoo! JAPANにおけるメタデータ管理の試み スピーカー：吉野 彰真

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 今回、担当しているシステムをNode.js LTS(v4.x)へバージョンアップしました。 それに伴い実施したES6対応の中から3つの事例を紹介したいと思います。 varを撲滅しよう arrow functionを使おう callbackを撲滅しよう varを撲滅しよう varをlet, constに置き換えます。基本はconstに置き換えます。 メリットは以下の点で、コードの品質向上につながると思います。 プログラム中で変更不可である事を明示的に示せる。 誤った使い方をした時にバグとして検出される。 varを利用するとブロック