AIの台頭でデザインとフロントエンドの垣根は融合しつつあるのか？

636 Views

March 09, 26

スライド概要

AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 https://finatext.connpass.com/event/385050/
イベント登壇資料です

あんど

@ampersand_xyz

スライド一覧

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

Figma×MCPでデザインシステム開発を加速させたい

あんど 27.6K

確実に鮮度が高い社内情報を得るために人間はどうするべきかを考える

あんど 13.7K

開発業務でAIの活きるシーン、活きないシーン

あんど 5K

失敗の科学に学ぶ開発組織の心理的安全性

あんど 2.5K

2024:07:31 スタディスト Remote engineer meetup

あんど 1.3K

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.7M

各ページのテキスト

このスライドは⼈間の温かみある⼿作業によって作成されています © Finatext Holdings © Finatext Group

⾃⼰紹介あんど（安藤真⾐⼦）株式会社Finatext Insuretechドメインデザインエンジニア ‧デザインもエンジニアリングもまだまだ頑張り中… ‧趣味は個⼈開発 ‧好きなものはレトロゲームとピクセルアート ‧現在👶をビルド中（懇親会お酒飲めませんが仲良くしてください） © Finatext Holdings © Finatext Group

この数年でめちゃくちゃ様変わりした昨今のAIとフロントエンド開発について © Finatext Holdings © Finatext Group

⼀⼝にフロントエンド開発と⾔っても作業フェーズは様々定義は諸説あり要件定義‧設計環境構築マークアップ‧機能実装最適化デプロイ‧保守機能要件整理セットアップ HTML/CSSの実装パフォーマンスビルド‧デプロイ UI‧デザイン設計ビルドツール設定アクセシビリティ対策画像最適化エラー監視技術選定ライブラリ導⼊コンポーネント開発インタラクションパフォーマンス監視状態管理設計状態管理実装 etc… 機能追加‧改善 BFF連携設計 etc… © Finatext Group © Finatext Holdings etc…

⼀⼝にフロントエンド開発と⾔っても作業フェーズは様々定義は諸説あり → 現在、 AIが作業代替や⽀援が出来ない領域はほとんどない要件定義‧設計環境構築マークアップ‧機能実装最適化デプロイ‧保守機能要件整理セットアップ HTML/CSSの実装パフォーマンスビルド‧デプロイ UI‧デザイン設計ビルドツール設定アクセシビリティ対策画像最適化エラー監視技術選定ライブラリ導⼊コンポーネント開発インタラクションパフォーマンス監視状態管理設計状態管理実装 etc… 機能追加‧改善 BFF連携設計 etc… © Finatext Group © Finatext Holdings etc…

⼀⼝にフロントエンド開発と⾔っても作業フェーズは様々定義は諸説あり → 現在、 AIが作業代替や⽀援が出来ない領域はほとんどない要件定義‧設計環境構築マークアップ‧機能実装最適化デプロイ‧保守機能要件整理セットアップ HTML/CSSの実装パフォーマンスビルド‧デプロイ画像最適化エラー監視コンポーネント開発インタラクションパフォーマンス監視状態管理設計状態管理実装 etc… 機能追加‧改善 BFF連携設計 etc… UI‧デザイン設計技術選定ビルドツール設定アクセシビリティ対策最近注⽬しているのはこの部分ライブラリ導⼊ etc… UI制作に関してFigma不要論まで唱えられるようになってきている💣 © Finatext Group © Finatext Holdings

バイブコーディングによる実践実際どの程度AIに任せられるのか試しに１つサービスを作ってみる © Finatext Holdings © Finatext Group

成果物 OGP芸をやるやつを作った後⽇公開予定 © Finatext Holdings © Finatext Group

10.

成果物 URLをシェアするとこういう画像が出る © Finatext Holdings © Finatext Group

11.

実施したレギュレーション - ⼈間は企画‧仕様を考える - 技術スタックはある⼈間が選定する（さすがにここを全任せにする勇気はなかった…） - - DB: Cloudﬂare D1 - ストレージ: Cloudﬂare R2 - 認証：Firebase auth デザイン‧実装‧調整はすべてAIツールを使⽤する - デザイン：variant.com - 実装: claude code sonnet 4.6 © Finatext Holdings © Finatext Group

12.

variant.comの紹介 https://variant.com/ 様々なトーンのデザインを生成することができるAIデザインサービス単なるデザインだけではなく、コードも同時に生成され、動作モックを作成できる © Finatext Holdings © Finatext Group

https://variant.com/

13.

必要な画⾯‧状態を洗い出す⾃分は思考が発散しがちなので、⼀旦ドローツールに必要になる画⾯を洗い出ししましたある程度書き出しできたら、マークダウンに画⾯ごとのステートを整理していくのが良さそうです © Finatext Holdings © Finatext Group

14.

画⾯‧状態に応じたデザインを⽣成デザインの⽅向性を決め、各ページと状態に応じた差分を⽣成していきます前段階でワイヤーフレームを設計しておくのがベター © Finatext Holdings © Finatext Group

15.

サラッと書いたけどかなり紆余曲折しました⾒た⽬が伴うものはAIが作り出したものに⼈間の意志が引っ張られそうになっていく🫨 © Finatext Holdings © Finatext Group

16.

⽣成したデザインからHTMLをエクスポートこれはVariant.comの機能を使っているもの FigmaをはじめDesign to codeができるツールは今後も増えていきそう © Finatext Holdings © Finatext Group

17.

実装フェーズはダイジェスト（だいたい丸⼀⽇ぐらいかかった） - 画⾯‧画⾯差分のhtmlからスキーマを設計させる - Cloudﬂareの使⽤ - - DBのセットアップ - 画像ストレージのセットアップ - このあたりの作業もCloudﬂare のCLIツールClaudﬂare Wranglerを⽤いてClaude codeに丸投げ設計した各画⾯の機能を実装させる - 設計しきれていなくて機能を⾜したり引いたり‧‧‧‧この規模でも設計⼒がモロに出ると痛感 © Finatext Holdings © Finatext Group

18.

ほぼ全部AIでできた‧‧‧‧ 要件定義‧設計環境構築マークアップ‧機能実装最適化デプロイ‧保守機能要件整理セットアップ HTML/CSSの実装パフォーマンスビルド‧デプロイ UI‧デザイン設計ビルドツール設定アクセシビリティ対策画像最適化エラー監視技術選定ライブラリ導⼊コンポーネント開発インタラクションパフォーマンス監視状態管理設計状態管理実装 etc… 機能追加‧改善 BFF連携設計 etc… © Finatext Group © Finatext Holdings etc…

19.

ゼロイチのPoCの実装においてはもはやPdM、デザイナー、フロントエンドエンジニアの職能の境⽬は存在しないと⾔っても良いかもしれない © Finatext Holdings © Finatext Group

20.

ゼロイチのPoCの実装においてはもはやPdM、デザイナー、フロントエンドエンジニアの職能の境⽬は存在しないと⾔っても良いかもしれない逆に個々⼈のスキル（と根性）の幅の差が、最終的な成果物のクオリティに⾊濃く反映されるようになってきた © Finatext Holdings © Finatext Group

21.

フロントエンドの開発において、デザインも実装も機能設計も「完成イメージを具体的に描ける⼒」が重要 © Finatext Holdings © Finatext Group

22.

完成イメージを具体的に描ける⼒ is - これはマジで百万回⾔われているが、AIが精度アップしたことでますます顕著になってきている - デザインのディテール、機能のちょっとした使い勝⼿、マイクロインタラクションなどなど…作るものの完成形を設計して、細部を詰め切る⼒＝要件を定義する⼒が重要 © Finatext Holdings © Finatext Group

23.

完成イメージを具体的に描ける⼒ is - これはマジで百万回⾔われているが、AIが精度アップしたことでますます顕著になってきている - デザインのディテール、機能のちょっとした使い勝⼿、マイクロインタラクションなどなど…作るものの完成形を設計して、細部を詰め切る⼒＝要件を定義する⼒が重要要件定義の⼒をどうやってつける？ → 努⼒‧経験‧センスという気がする。やれる努⼒を頑張ろう。 © Finatext Holdings © Finatext Group

24.

バイブコーディングのあるあるは⼀旦ここまで我々が実際に⽴ち向かわなければいけないのは、製品である🙄 © Finatext Holdings © Finatext Group

25.

当社の「Inspire」の場合製品コードとデザイン‧実装の垣根を溶かすには？ © Finatext Holdings © Finatext Group

26.

27.

28.

29.

30.

31.

32.

33.

34.

⾃然⾔語 ⇒ Design claude codeに要件を伝え、まずはな静的なページを作成させる家財保険商品を販売するランディングページを作成したいです。 # 作業目標 - 静的なhtmlファイルを作成する # ターゲットの属性 - 20~30代・賃貸住まいの単身者 # 重点施策 - すぐに見積もりができるようにする - 商品の特徴をわかりやすく伝える - 商品の料金をわかりやすく伝える - 商品の加入条件をわかりやすく伝える - 商品の加入方法をわかりやすく伝える # 開発ルール - アイコンはSVGを使用する。emojiの利用は許可しない - UIについて、なぜそうしたのかの論拠をコメントで残す - tailwindcssを用いてスタイリングを行うこと # デザイン参考ページ - https://xxxxxxxxxx - https://xxxxxxxxxxx - https://xxxxxxxxxx © Finatext Holdings © Finatext Group

35.

36.

Code to Design してデザイン調整 Figma mcpを使⽤した code to designを⽤いることで、構造だった Figmaファイルを⼀発で⽣成できるここからデザイン調整を必要に応じて⾏う（が、個⼈的には正直組み上がってるデザインをいじるよりも無から作るほうが作業しやすい…。そのまま使うのではなく構造の参考にするのがいいのかもしれない） © Finatext Holdings © Finatext Group

37.

Design(静的html) to 製品Code セクション構造に倣って、静的なhtmlから製品コードのコンポーネントを作成する指⽰をAIに与える # 作業内容 - '/Users/maiko.ando/Desktop/作業用 /kazai-hoken-lp.html' の内容をkazaiのページとして実装する - プラン選択・料金表の挙動は '/Users/maiko.ando/Desktop/作業用 /kazai-hoken-lp.html' に合わせて調整する - 作業終了後、見た目に破綻が発生していないか http://localhost:8080/brands/kazai/ を確認する # 注意事項 - kazai 以外の箇所に影響を発生させないようにする © Finatext Holdings © Finatext Group

38.

Design(静的html) to 製品Code 必要なセクションをAIが検討して実装してくれた💪 1発ではうまく⾏かない部品もあるが、修正指⽰で調整するだけで動的な部分も含めて実装ができた © Finatext Holdings © Finatext Group

39.

40.

41.

42.

43.

44.