Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
Search
kinocoboy
May 14, 2025
Technology
1
800
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy
May 14, 2025
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
570
JSConfjp2023 Storybook駆動開発の再現性と効率化
kinocoboy2
2
3.8k
新卒だったころの僕へ向けて
kinocoboy2
0
160
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
9
9.5k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
260
画面に合わせたAPI設計をしたら残業が死ぬほど増えた話
kinocoboy2
0
490
Peacock#01 ソフトウェアアーキテクチャ的発想
kinocoboy2
0
240
雑談を因数分解したら雑な談話が増えた話
kinocoboy2
2
870
AWSで$800スった話 ~ エフスタ!! AWSエンジニア失敗共有会議 ~
kinocoboy2
0
260
Other Decks in Technology
See All in Technology
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
780
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
420
"SaaS is Dead" は本当か!? 生成AI時代の医療 Vertical SaaS のリアル
kakehashi
PRO
3
230
宇宙パトロール ルル子から考える LT設計のコツ
masakiokuda
2
110
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
9
2.5k
What's new in OpenShift 4.19
redhatlivestreaming
1
290
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
370
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.7k
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
pfn
PRO
0
170
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
330
ObsidianをMCP連携させてみる
ttnyt8701
2
130
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Producing Creativity
orderedlist
PRO
346
40k
GraphQLとの向き合い方2022年版
quramy
46
14k
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
188
11k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
4 Signs Your Business is Dying
shpigford
184
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Documentation Writing (for coders)
carmenintech
71
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Transcript
UIパフォーマンス最適化 AIを活用して100倍の速度向上を実現した事例
自己紹介 名前: キノシタ ヒロキ 所属: 株式会社カオナビ 拠点: 札幌→東京→新潟→千葉(New) 専門分野: ユーザー駆動設計に基づく体験設計
X: @kinocoboy2
課題 背景 • 新しい価値提供を行っている最中に発見 • 既存のデザインシステムが抱えるUIパフォーマンス課題を検知 どんな影響が出ていたのか? • 大量データ処理時に顕著な入力のもたつき •
ユーザー体験の低下 • 体験負債の蓄積リスク
解決の難しさ 専門は「ユーザー駆動設計」に基づく体験設計 パフォーマンス最適化の専門家ではない 2つの課題 • 適切なボトルネックの特定 • 最適なチューニングの実施 →本来の役割(新規価値提供)に遅延を生むリスク
AIアシスタントの活用戦略 使用したツール 活用方法 • ボトルネックの特定 • パフォーマンスチューニングのアドバイス • 最適なアルゴリズムの提案 •
レンダリング最適化
ボトルネックの特定 • DevToolsやProfilerを使った速度計測 • 「遅い」と感じた部分をグラフで確認 • クリティカルなポイントを特定
具体的な方法
None
検知された香ばしいコードが
AIによるパフォーマンスチューニング 最適なアルゴリズムの提案 • シンプルな指示: 「遅いから、早くして」 • 計算量の最適化やレンダリング負荷軽減の提案 恥ずかしながら、具体的に何が悪さして、何に対処すればいいかわからない。
None
強制的にレイアウト計算を発生させ、そ の後すぐにスタイルを変更する処理 が、多数の要素に対して繰り返し実行 直接DOMを操作 頻繁なトリガ
getBoundingClientRect()の除去 直接DOM操作の排除 requestAnimationFrame 計算の最適化 コンポーネント分割
レンダリング最適化の成果 Before ユーザー体験: もたつきを感じる After 処理時間: 5ms ユーザー体験: スムーズな操作感 圧倒的なパフォーマンスチューニングに成功!
実際の改善プロセス 1. ボトルネックの特定 • DevToolsやProfilerを活用 • 「遅い」と感じた部分を信じ、分析を徹底 2. 最適化の実施 •
計算量の見直し • AIの提案を活用しつつ、人間の判断で適用 3. パフォーマンス測定と改善の繁栄 • Before / After の比較 “AIに具体的な技術を説明せずとも、ざっくりやりたいことを伝える事で最適な解決策を導き出せた ”
AI活用のメリットと課題 メリット • 経験や知見のない、そもそも無知の知燃え ていない領域に手を出せる。 ◦ 学習コストが一気に下がり、生産性があが る。 • 未経験でも挑戦しやすい環境が得られた
AIの限界と注意点 • 最終判断は人間が行う必要がある ◦ ユーザーにとって恩恵のある修正なのか? ◦ これによってどんなふうにユーザー体験が変 わるのか? ◦ 破壊的な修正ではないか?
AIの限界と注意点 AIの提案を無批判に適応すると逆効果になることも “ ほかの箇所にも適用しようとしたが、オーバーヘッドが発生し逆に遅延を生んだ ” 自分自身のスキル向上には直結しない • AIに依存するのではなく、学びの機会として活用することが重要 “頼ってもいい。信じてはいけない ”
まとめと学び 100倍のパフォーマンス向上が実現した理由 1. 「ユーザーがどこで遅さを感じるか」を信じたこと 2. AIを活用しつつ、最終判断を人間が行ったこと 3. 計算量の最適化を意識し、無駄な処理を徹底的に排除したこと a. 「何」が起因となり、「どう」解消するのかを自分で理解する事。
b. ここから類似する事象を見つけたときに、あたりをつけられるように成長するきっかけがある。 なによりも、「体験負債」に気づける自分を育てることが最重要だった。
今後のAI活用の可能性 • AIに任せられるところは任せる。 ◦ 機械的な計算量チェックやコードのリファクタリングはAIに任せる。 ◦ AIに事前に食わせられる情報を工夫することで、より適したアウトプットを期待できる。 • 人間にしかできない作業に集中する時間を作る。 ほかの開発者にも応用できるポイント
• 会社のセキュリティルールに沿った範囲で、 AIにコードを見せて最適化させる習慣をつける。 • 人間とAIの適切な役割分担を意識する。
ここから少し飛躍します
体験負債に気づく為に どんなものでもよいので、毎日良質なものに触れ続けることが大切だと思った。 自分自身の感情や感覚を通して「リアル」に目を向けて、丁寧に生きることが大切かもしれない。 ”武士道とは死ぬここと見つけたり ” “メメントモリ ” いまこの瞬間に起きている非論理的な事こそがこれからの AI時代には生きてくる。 「審美眼」や「ロマン」、「感受性」といった形容しがたい何かを大切に過ごすことで、
作り上げるコンテンツや作品のクオリティをあげたり、自分自身気づきを得ることがありそう 。
余談: MCP
この登壇で使ったスライドや目次などの全体の流れは Chatgptに作ら せ、スライドの構成やサンプルコード作成は Claudeにやらせました。 これからは明確に実現したいことを言語化することで、アウトプットを得 るまでにかかる時間が短縮される恩恵があるのではないかと感じまし た。 ただその過程で理解したことは、MCPは最強でも万能ではありません でした。 この気づきを得ただけでも、
MCPで遊んでみた価値はありそうです。 今後のAI活用の可能性(余談)
ご清聴ありがとうございました