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

勉強会メモ

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

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

よく利用する方法

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

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

良かったやりとり

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

微妙なやりとり

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

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

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

レガシー技術の移植

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

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

業務でAIを使う

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

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

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

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

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

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

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

テキストのやりとり

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

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

AIの使い所

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

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

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

生成AIの利用ケース

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

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

GUIでWebを作る

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

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

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

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

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