【参加記】「ユーザーファーストを実現するフロントエンドの最前線」に参加してきました！

# はじめに
こんにちは。細々とプログラミングをしている[sotanengel](https://x.com/sota_eng_prog)です。

弁護士ドットコム株式会社・株式会社ワンキャリア・株式会社スタディスト・note株式会社・atama plus株式会社の5社が合同主催で

- フロントエンドを中心にプロダクト開発を経験したor興味がある方
- 開発を通してユーザー体験の向上に挑戦している方

向けの勉強会が2025/01/27に開催されたので、そこで印象に残った点を記録として残しておきます！

https://onecareer.connpass.com/event/339385/

# 発表概要

| 発表者/会社名 | 発表タイトル |
|--------------|-------------|
| スタディスト / サワッディー ストック | ユーザーに価値を届けるAIプロダクト開発ストーリー |
| note / 甲斐友之 | ユーザー視点を意識したnoteでのA/Bテスト([スライド](https://engineerteam.note.jp/n/nf3c1dd04211b?gs=3e7a7e3a11fc)) |
 | atama plus / 瀬翔吾 | Wow students. を支えるatama plusのデザインシステム |
| ワンキャリア / 吉田泰生 | UX品質を数値化するWeb Vitalsとメディアアプリを用いた分析事例のご紹介 |
| 弁護士ドットコム / 林 優 | アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装([スライド](https://speakerdeck.com/bengo4com/20250127-cloudsign-user1st-fe)) |

# 印象に残ったところ
## ユーザーに価値を届けるAIプロダクト開発ストーリー
- タイから日本に来て、技術プレゼンまでしてるの凄すぎぃ
- 画像と動画でマニュアル作れるの便利すぎ
    - 自分もよく会議動画録画して保存してるし
- PDFをOCR→Claudeで変換して落とし込むらしいけど、これってロジックベースでPDFから文字抽出するのじゃダメなの？
- 色々問題点あったのね
    - ①PDFが大きいとトークン制限でプロンプトを分割せざるを得ず、精度が落ちる
        - PDF中のマニュアル部分だけを抽出することで文字数を制限
    - ②生成の根拠を確認しづらい
        - 参照位置を情報として持たせる
    - ③内容のカスタマイズ
        - 入力ボックスを導入
- プロンプトをいじる人は全体の2/3くライ？

## ユーザー視点を意識したnoteでのA/Bテスト
- A/Bテスト棄却されがち
    - だからこそ、仮説検証のサイクルが大事
- [A/Bテスト実践ガイド](https://www.amazon.co.jp/B%E3%83%86%E3%82%B9%E3%83%88%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E7%9C%9F%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%89%E3%83%AA%E3%83%96%E3%83%B3%E3%81%B8%E8%87%B3%E3%82%8B%E4%BF%A1%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E5%AE%9F%E9%A8%93%E3%81%A8%E3%81%AF-%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%89%E3%83%AF%E3%83%B3%E3%82%B4-Ron-Kohavi-ebook/dp/B08Z3TPVZG/ref=sr_1_1?adgrpid=120837740354&dib=eyJ2IjoiMSJ9.N9yIerRAW3M0jJLptTAflVpIOPI8KR0UW9por7G1Y5Xt6T9pkDO-WPN5cfQcCFfzd27mrO6ylXaU1c9e7p7I1W2wU7GaLkLx82FXCvmuVTpwTXAKaRHlyNpCyNWF9EG4fg8wMuTgcoBjt3aJ5jAMHHo21QxM0c31NEQ5PJsQl2W1JJbcNZ6yBs_Nkfm9UzG9.fAEF2pbmKKKpZZdOt_mipmMWn93GIF-c4rPWMeeDe5U&dib_tag=se&hvadid=678959991522&hvdev=c&hvlocphy=1009252&hvnetw=g&hvqmt=e&hvrand=4675811024164952376&hvtargid=kwd-1196073849021&hydadcr=1789_13657027&jp-ad-ap=0&keywords=ab%E3%83%86%E3%82%B9%E3%83%88%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89&mcid=99097d35203e3fc59d2f476bcb4b1fcc&qid=1738016169&sr=8-1)が有名らしい
- [GrowthBook](https://www.growthbook.io/?gad_source=1&gclid=CjwKCAiA-ty8BhA_EiwAkyoa32eQ08PrjHgRs1D31JMGueczeJgv5aw-lJluO755Y3SpUDwwiSA-shoCcvEQAvD_BwE)がいいらしい！
    - A/Bテストの設定をエンジニア以外がUIでできるようになった
    - ユーザーIDを指定して、実際の画面を確認できる
- テスト結果はnotionで共有
    - 仮説と結果を記載することで二度手間を防止
- A/Bテストとはいえ、UXやブランドイメージが最優先

## Wow students. を支えるatama plusのデザインシステム
- 生徒を取り巻く環境全部をデザイン、なるほど
    - 回答確認ボタンは回答したら自動的に押される
    - 制限時間を強調しない
- デザインは出したら終わりじゃない、更新が大事
- [gatsby](https://github.com/gatsbyjs/gatsby)なるものでデザイン本は管理してるらしい
- デザイン管理するチームはデザイナーとエンジニア複数人
    - その時々でデザインの最適解を判断しているよ
- ユニフォームの概念

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/3bb66391-5292-a6a1-0ed9-3246d1798dd7.png)


## UX品質を数値化するWeb Vitalsとメディアアプリを用いた分析事例のご紹介

- core web vitals、SEOで普通に使ってるけど、それだけ聞くとなんのことかわからんかった←
- lcpとtbtがワンキャリアのサイトでは問題になってた
- [Chrome for Developers](https://developer.chrome.com/?hl=ja)で最新情報ゲットできるぞい

## アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装

- クラウドサインって弁護士ドットコムのプロダクトだったのか・・
- イベントとして視覚障害の方に触れてもらって問題点洗い出すの流石すぎる
- 標準にないUIが何って意識したことなかったな
- ドロップダウンメニューに以下を実装するといいらしい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/8afad2d3-6e8b-3e3f-7269-4fd5b2d456cf.png)

- Professional-Tech "LOVE"