デザインと開発を変える、生成AIとの向き合い方

by estie | エスティ

Slide 1

Slide 1 text

デザインと開発を変える、生成AIとの向き合い方デザインエンジニアMeetup #2  AI時代のプロダクトづくり最前線株式会社estie デザインエンジニアきょんしー #デザインエンジニアMeetup

Slide 2

Slide 2 text

estie の紹介 #デザインエンジニアMeetup

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

自己紹介 2023年1月 estie に入d 『estie マーケット調査』『estie 物流リサーチ』を担B ↑社内では Data as a Service(DaaS) と呼んでま( フロントエンドを中心にバックエンドやUIデザイン（たまにデータ）をや趣味はドライブとキャンG 最近は F1 観てます Netflix でもドキュメンタリーあって面白いです

Slide 6

Slide 6 text

今日話すこと D estie の DaaS につい( D 生成AI系のツールを使ってる中で感じてるこ9 D estieで行った or 取り組んでいるこ9 D 今後やりたいこと

Slide 7

Slide 7 text

estie の DaaS とは...？ #デザインエンジニアMeetup

Slide 8

Slide 8 text

#デザインエンジニアMeetup ←DaaS 担当プロダクト↓

Slide 9

Slide 9 text

DaaSの特徴 s 建物や募集、テナント、企業情報などを掛け合わせたデータサービ7 s プロダクトによって扱うデータの種類が異なるが、ほぼ同じ機能を提供してW s 建物情報で検索し地図にプロット、テーブル表示・分析表示

Slide 10

Slide 10 text

ここまでがDaaSの説明また後で戻ってきます #デザインエンジニアMeetup

Slide 11

Slide 11 text

生成AI系のツールを使ってる中で感じること #デザインエンジニアMeetup

Slide 12

Slide 12 text

もっと速くしたÂ Æ もっと賢くしたい #デザインエンジニアMeetup

Slide 13

Slide 13 text

生成AI系のツールを使ってる中で感じること h もっと速くした h 生成AIのモデルの差に関しては時間が解決するのでOY h こちら側の責任のところは秒で終わるようにした h もっと賢くした h 1ファイルの変更だけなのにめっちゃ悩んでたり、違うところを修正したりす h 指示の与え方の問題はあれど、意図通りのアウトプットが欲しい

Slide 14

Slide 14 text

estieで行った or 取り組んでいること #デザインエンジニアMeetup

Slide 15

Slide 15 text

もっと速くするためにしたこと 4 ESLint, Prettier, Stylelint → Biomd 4 圧倒的な速v 4 そもそも10以上あるプロダクトごとでバラバラだったためLint Ruleも含め統一した（開発体験の統一y 4 テストランナE 4 Vitest を採用する流f 4 Jest 使ってるプロダクトは @swc/jesG 4 (型チェック# 4 tsc → tsgo にする？v1リリースが待ち遠しい

Slide 16

Slide 16 text

もっと賢くするためにした＆していること g コンポーネントライブラリの見直 g 社内ライブラリは存在しているが網羅に時間がかかる..t g Mantineベースで独自のthemeを整備y g 複合的なコンポーネントも配信し、MCPサーバー使った UI実2 g AIエージェントのためのUIデザインガイドライン整G g より正解とする形に近しいUIにするた' g デザイントークンやコンポーネントの使用例など

Slide 17

Slide 17 text

まだ進行中なものも多いがデザインシステム作りに注力 #デザインエンジニアMeetup

Slide 18

Slide 18 text

estieのDaaSの話に戻します #デザインエンジニアMeetup

Slide 19

Slide 19 text

僕が思っている現状の課題（再掲）プロダクトによって扱うデータの種類が異なるが同じ機能を提供してc 例1. 建物の検索条件を保存したい6 プロダクトAにはあるけどBにはない Aの実装を持ってきたいけど Form 周りの実装が違e 例2. 結果を返す処理が重く、無限スクロールしたい6 例1と同じくAにはあってBにはない Aが良い実装かも分からないまま移植してしまう

Slide 20

Slide 20 text

もっと賢くするためにしていることテンプレートとなる実装を作 MCPサーバ等があるので他Repoにある実装を参考にできこういう処理はこう書くべきというケース作3 検索条件のURL保持であれば URLSearchParam と FormValue 間の変換において、後方互換はどこで持つか等

Slide 21

Slide 21 text

今後やりたいこと #デザインエンジニアMeetup

Slide 22

Slide 22 text

プロダクトに生成UIを組み込む #デザインエンジニアMeetup

Slide 23

Slide 23 text

プロダクトに生成UIを組み込む estie が対象としてる顧c デベロッパーだけじゃなく、投資家、建物を管理する人など様々なプレイヤーがいe 個人的に estie の DaaS で一番面白いと感じてるとこ" プレイヤーによって見たいデータ、その先の顧客に見せたいデータが異なる