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
870
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy
May 14, 2025
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
590
JSConfjp2023 Storybook駆動開発の再現性と効率化
kinocoboy2
2
3.9k
新卒だったころの僕へ向けて
kinocoboy2
0
170
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
9
10k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
270
画面に合わせたAPI設計をしたら残業が死ぬほど増えた話
kinocoboy2
0
500
Peacock#01 ソフトウェアアーキテクチャ的発想
kinocoboy2
0
250
雑談を因数分解したら雑な談話が増えた話
kinocoboy2
2
890
AWSで$800スった話 ~ エフスタ!! AWSエンジニア失敗共有会議 ~
kinocoboy2
0
260
Other Decks in Technology
See All in Technology
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
三視点LLMによる複数観点レビュー
mhlyc
0
230
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
0
500
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
460
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
400
shake-upを科学する
rsakata
7
1.1k
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
130
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
320
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
What's in a price? How to price your products and services
michaelherold
246
12k
Making Projects Easy
brettharned
116
6.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why Our Code Smells
bkeepers
PRO
337
57k
Done Done
chrislema
184
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Documentation Writing (for coders)
carmenintech
72
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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活用の可能性(余談)
ご清聴ありがとうございました