「DIST.43 「Web制作の現場のためのAI活用術」」に参加してきました

• 2024/4/12
• https://dist.connpass.com/event/311819/

フロントエンドエンジニアよく使う生成AIの利用方法

• 株式会社トゥーアール 扇 克至（OUGI Katsushi）さん

よく利用する方法

• APIモック
  • レスポンスの型を渡して作ってもらう
  • 配列10件作ってとか
  • それをmswのレスポンスにする
• コンポーネントの命名
• Copilotでコメント書いてコード生成

良きメンター、良きパートナーとしてのAI

• フロントエンドエンジニア 西塚 豪（NISHIDUKA Go）さん
• https://zenn.dev/resistance_gowy/articles/cd2d062dcf2a97

良かったやりとり

• 枯れている技術は精度高い

微妙なやりとり

• 複数のレイヤーが絡む場合

クリエイティブコーディングに役立てるAI活用

• 株式会社ICS 代表・筑波大学非常勤講師 池田 泰延（IKEDA Yasunobu）さん

レガシー技術の移植

• Flashで作ったものをHTMLに置き換えた
  • Flashのコードはってthree.jsにしてっていったら多少崩れても動くものが出る
• AIは昔のことに詳しい

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

• ストックマーク株式会社 プロダクトエンジニア／DevRel 安藤 真衣子（ANDO Maiko）さん
• https://www.docswell.com/s/ampersand_xyz/KGX3V4-2024-04-12-195407

業務でAIを使う

• 求める成果物が分かっていて検証できないといけない
• 一発で完成形はでないので最初の足がかりにする
• コンテキストに依存しないものは正しく生成しやすい
• 自分がわからない領域で使うのは難しい

フロントエンド制作時に使っている、AIで作ったツールの紹介

• TERU Inc. フロントエンドディヴェロッパー テル・豊田（Teru TOYODA）さん

べりツールを生成AI活用して作成

• Chrome拡張など生成AI使って作れる
• 良い結果がでないときは何度もごねるといい

英語仕事で地味につかうChatGPT

• カンソクインダストリーズ / よりひろいフロントエンド よりひろいフロントエンドエンジニア 原 一浩（HARA Kazuhiro）さん

テキストのやりとり

• 自分がわからないような英語にならなかった
  • 中学生でもわかるようにとか
  • 難しい単語を使わないでとか
• 先生だと思って接する
• 雑に質問を投げない
  • 状況を言う

顧客体験を作るデザイナーが意思決定速度を上げるために使うAI

• プロダクトデザイナー crema（crema）さん

AIの使い所

• 最終成果物には使ってない
  • 中間成果物には使ってる
• 関係者との相互理解
  • 6up Sketches
  • 6コママンガで顧客体験を書く
• 作るもののイメージ共有
  • モックアップをさくっと作る
  • 現実にないものを描いてもらう
• イラストの下書き
  • 生成AIを使っても良いのか？

画像生成AIでポータルサイトのサービス利用者イメージを作成した実例紹介

• 株式会社ディーカレットDCP UI/UXデザイナー 鳥井 晋吾（TORII Shingo）さん

生成AIの利用ケース

• サービスがまだローンチされてない
• 利用者のイメージをAIに作らせて使ってる
• それを使ってABテストしてる

レスポンシブウェブデザインで活用するAI

• AZM Design アートディレクター、Bau-ya®️ プロデューサー 生明 義秀（AZAMI Gishu）さん
• https://azmdesign.wixstudio.io/dist-43

GUIでWebを作る

• WixStudio
• ノーコードのWebページ生成サービス
• ドラッグアンドドロップでページを作れる
• AIでレスポンシブにいい感じに作ってくれる

非エンジニアでもワイヤーフレームから爆速フロントコーディング！？

• 株式会社IMAKE 代表取締役・UIUXデザイナー 濱野 将（HAMANO Sho）さん

生成AIでワイヤーフレームからコーディング

• tldraw
• ワイヤーフレームを作って対象を選択するとUIを作ってくれる
• 文章で補足をすることもできる
• 非エンジニアでも作れるのがいい