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

• 2025/1/27
• https://onecareer.connpass.com/event/339385/

ユーザーに価値を届けるAIプロダクト開発ストーリー

サワッディー ストックさん(スタディスト)

• マニュアルを作るサービス
• 既存のマニュアルを移行するのに課題を持つケース
• 生成AIでPDFをインプットにマニュアルのドラフトを生成する
  • OCR -> Claud
• PoCをして
  • PDFが大きいとlimitにかかって遅いのでページ選択できるように
  • 生成後のテキストがPDFのどこを参照してるか確認したい
  • カスタマイズしたくなるからプロンプトも設定できるように

ユーザ視点を意識したnoteでのA/Bテスト

甲斐友之さん(note)
https://engineerteam.note.jp/n/nf3c1dd04211b

• UIのABテスト
  • ユーザに対してUIを出しわけてその結果からどちらがいいか判断する
  • 分かりやすい結果が出ることはなかなかない
• サーバサイドの実装でどちらのバケットに割り当てるか実装していた
  • エンジニアしかいじることができない
• OSSを使って実現
  • GrowthBook
  • GUI上で設定を変更できる
  • 特定ユーザだけAパターンといったこともできる
  • API経由でどのバケットか取得する
• テストの過程と結果をドキュメント化
  • 似たテストをやる時に参考に
• 良い結果が出なかった時は定性的な面を改めて考える

Wow students.を支えるatama plusのデザインシステム

一ノ瀬翔吾さん(atama plus)

• atama plusのデザインシステム
• デザイン原則
  • 学びに集中できる
  • 自分の状態がわかる
  • 自分から進められる
• UI部品や日付のフォーマット部品など統一させたい機能を持っている

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

吉田泰生さん(ワンキャリア)

• Core Web Vitalsの改善
• LCP
  • 不要な遅延読み込み
    • メイン画像のLoadDelayが長かった
  • 不要なJSの削除
• TBT
  • JS実行時間が長い
    • devtoolsのPerformanceタブでどこに時間がかかってるか確認
    • Networkタブで重い通信を見つけるのもいい

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

林優さん(弁護士ドットコム)
https://speakerdeck.com/bengo4com/20250127-cloudsign-user1st-fe

• アクセシビリティはユーザファーストに対するアプローチの1つ
• HTML標準にないUIはカスタムコンポーネントとして実装しないといけない
• カスタムコンポーネントだと実装社側で気を使うことが多い
  • 操作可能なマークアップ
    • ボタンとなるところにはbuttonを使うなど
  • 意味合いや状態の補足
    • 必要なaria属性を付与して情報を補足する
    • aia-expandedとか意図的に付与しないといけないもの
  • JavaScriptでの挙動実装
    • マウスだけでなくキーボードでの操作