概要

世はまさにAI時代。新サービスの使い方からプロンプトのコツまで、AIにまつわる情報が溢れています。一方で、私たちWeb制作の現場で働くエンジニア、デザイナー、ディレクターたちが、実際の仕事にAIをどう活用できるのか、手探りをしています。

さまざまなツールやワークフローであらゆる業務改善・効率化をしてきた私たちにとって、仕事がなくなる不安よりも、AIによって見えてくる新しい世界への期待感の方が強いはずです。

DIST.43では、Web制作の現場で働くみなさまをお招きし、いま実務で使っているAIの活用術を語り合います。AIをバリバリ使っている人も、まだ興味段階の人も、他の人がどうAIを使いこなしているのかを是非ご覧ください！

LTスピーカー募集！

LTスピーカーの募集は終了しました。お申し込みいただきありがとうございました。

• LTスピーカーを希望される方を広く募集します。
  • 時間は5分です。
  • 内容は「Web制作の現場でのAI活用術」というテーマにまつわることであれば、何でもOKです（単なるサービス紹介、使ってみた系ではなく、ご自身なりの使いこなしを語ってください）。
  • LTスピーカーに決定した場合の参加費は無料です。
  • 希望者は事前にお申し出いただければ懇親会にも参加可能です（当日実費をお支払いください）。
• 希望者は「LT希望枠」からお申し込みください。
• お申し込み時のアンケートに連絡先のメールアドレス、タイトル、セッション概要を入力する欄がありますので、必ず入力をお願いします。
• 応募者多数の場合、原則として抽選になります。
  • タイトル、セッション概要の内容が優れていると主催者側が判断した場合、優先的に当選となる場合があります。
  • LT希望枠にお申し込み後、落選して他の枠が埋まっていたとしても、一般参加は可能です。

対象

• Web制作の現場でAIを活用したい方
• 他の人がAIを実務にどう使っているか知りたい方
• 学生でWeb制作業界に興味を持っている方

LT紹介（各5分、順不同）

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

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

JavaScriptでのAI活用について解説します。ChatGPTやGitHub Copilotはクリエイティブなウェブ表現の作成に役立ちます。「CanvasやWebGLに挑戦してみたいけど、難しそう」と思っているエンジニアに、オススメできる技を紹介します。

とあるプロダクトデザイナーが普段使いするAI

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

UI作成ではまだAIを使っていないのですが、6Up Sketchsやカンプなどの「脳内のアイディアを人に伝える部分」や英文添削などのお手伝いをしてもらってますので、そのあたりをご紹介します。

JavaScriptコーディングのリファクタに役立てるAI活用

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

日頃のJavaScriptコーディングでよく使っているChatGPTの活用方法をご紹介いたします。関数や変数名の名付けをより的確にしてコードを読みやすくしましょう。

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

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

2023年は英語がメインの仕事をしていましたが、その時大活躍したのがChatGPTでした。どんな風につかっていたか、それによって仕事がしやすくなったのかどうかを紹介します。

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

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

オンライン上には、フロントエンドで使えるたくさんのツールがありますが、公開前のサイトの場合、情報や素材をオンライン・ツールで処理すると情報の漏えいの可能性がでてきます。そういったことを無くすため、ローカルで動くようAstroで作ったツールの簡単なご紹介になります。(テキスト整形/圧縮、YouTube文字起こしの整形/圧縮、HTMLからID/Classのみ抽出、英語の小文字/大文字の変換、SVG最適化など)

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

フリーランス フロントエンドエンジニア 西塚 豪（NISHIDUKA Go）

2023年、エンジニアの業務や勉強で大いに活用させてもらったAIツール。その中でChatGPTの使い所、注意点、どんなやりとりをしてきたかの紹介。その他にお世話になっているAIツールの紹介。

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

ストックマーク株式会社 プロダクトエンジニア／DevRel 安藤 真衣子（ANDO Maiko）

開発やデザインに生成AIを利用するシーンも増えてきましたが、何もかもがAIで賄えるわけでは今のところありません。AIをまだ業務に使った経験が少ない方向けに、現在生成AIでは何ができるのか、開発のどんなシーンで使えるのか、逆にどんなシーンでは使いづらいのかについてをVSCodeを中心に紹介します。

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

AZM Design アートディレクター、Bau-ya:registered: プロデューサー 生明 義秀（AZAMI Gishu）

制作会社 · 企業インハウスなどプロ向けのウェブ制作ソリューション、Wix Studio 。その次世代型ノーコード／ローコードプラットフォームに搭載された『レスポンシブ AI』機能がもたらすレスポンシブウェブデザインのレイアウトやサイジングを、実務でどのように活用しているのかをデモを通してご紹介します。

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

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

レイアウトは作れるけどコーディングが不得意な方に朗報です！

直感的にワイヤーフレームを書くだけで、UIデザインからコードまでAIで自動生成してくれる「tldraw」のMake Real機能を紹介します。

設定方法から実演、生成ポイントなどもお話させていただきます。

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

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

画像生成AIを用いてサービスのポータルサイトに掲載する利用者の人物写真素材を作成した事例について紹介します。画像生成AIを商用利用するにあたってどのように利用したか、また工夫した点についてお話します。

参加費

勉強会のみ

1,000円（当日券：一般1,500円）

• PayPalによる事前決済、または当日支払いで参加費をお支払いください。

勉強会＋懇親会

5,000円

• 勉強会に加え、着席しての懇親会（コース料理＋飲み放題）にご参加いただけます。
• PayPalによる事前決済のみとなります。
• 懇親会の申し込みは開催1週間前までとなります（予約の関係上、申し込みが定員未満でも締め切ります）。
• 懇親会のみの参加は受け付けていません。
• 懇親会にはアルコールが提供されるため、未成年はご参加いただけません。
• 懇親会は完全禁煙です。
  • 喫煙者/非喫煙者の両者が過ごしやすい空間を作るため、ご協力をお願いいたします。
  • 喫煙時は近隣の喫煙スペースをご利用ください。
  • 懇親会が行われる店舗は喫煙可ですので、他の席からの煙が流れてくる可能性はあります。

事前決済についての注意事項

• 具体的な流れは、PayPalによる事前決済についてをご参考ください。
• 領収書を発行可能です。詳しくはconnpassご利用ガイドをご覧ください。
• キャンセル・払い戻しについては、キャンセルポリシーに従って対応します。

---

• スタッフ枠は、通常参加の方はお使いいただけません。スタッフとして参加希望の方は、公式サイトのお問い合わせフォームよりお問い合わせください。

会場

中野セントラルパークカンファレンス ルーム1 （アクセスマップ）

• JR中野駅 北口改札から徒歩5分
• 詳しい道順をご参考ください。

タイムテーブル

時刻	内容
18:30～19:00	開場／受付
19:00～19:10	ごあいさつ
19:10～19:45	LT前半パート（5本）
19:45〜19:55	質疑応答
19:55～20:05	休憩
20:05～20:40	LT後半パート（5本）
20:40〜20:50	質疑応答
20:50～21:00	みんなでお片付け／閉場

※タイムテーブルや実際の進行は、予告なく変更になる可能性があります。

更新履歴

更新日時	内容
3/26 12:15	参加状況を鑑みて会場の席数を像席しました。
3/21 14:20	「画像生成AIでポータルサイトのサービス利用者イメージを作成した実例紹介」を追加しました。また、「ノンデザイナーでも作れちゃう！？Adobe FireflyとAdobe Expressを使ってLT時間内でバナー作成に挑戦！」は、都合により「非エンジニアでもワイヤーフレームから爆速フロントコーディング！？」に変更となりました。
3/14 12:20	「開発業務でAIの活きるシーン、活きないシーン」を追加しました。
3/12 12:45	「レスポンシブウェブデザインで活用するAI」を追加しました。
3/1 17:30	参加状況を鑑みて会場の席数を増席しました。
2/28 14:00	参加状況を鑑みて参加枠の定員を調整しました。
2/27 12:00	イベントページを公開しました。

スポンサー

DISTは、以下のスポンサーにご協賛いただいております。

スペシャルスポンサー

ゴールドスポンサー

ブロンズスポンサー

ツールスポンサー

YouTube配信

当日の様子は、開催2ヶ月後を目安にDISTのYouTubeチャンネルで公開予定です。公開不可の箇所やセッションはカットされますので、内容をすべてをご覧になりたい方は、ぜひ当日ご覧ください。

DISTについて

DISTは、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティです。有志が非営利で運営しています。

主な活動として、以下の3つをコンセプトとした勉強会を定期開催しています。

• 職種の垣根を越える
• 特定の技術に依存しない
• 今日から現場で使える

注意事項

• 会場のWi-Fi一般開放はありません。
• 動画、写真の撮影を予定しています。撮影NGの方は事前にお申し出ください。
• 主催者、参加者みんなで作り上げる勉強会です。準備や片付けにご協力をお願いします。