[{"data":1,"prerenderedAt":39},["ShallowReactive",2],{"post-dist49-event-report":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":14,"thumbnail":27,"ogpImage":31},"dist49-event-report","2025-05-13T01:43:44.225Z","2025-07-29T07:59:36.193Z","2025-05-19T06:54:45.311Z","DIST.49「Web制作の現場のためのAI活用術」参加レポート","\u003Cp>2025年5月14日（水）、中野セントラルパーク カンファレンスにて、DIST.49「Web制作の現場のためのAI活用術」を開催しました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fdist.tokyo%2Fdetails%2Fs13vbgwtfy4p&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>当日は、Web制作・開発の現場で活躍するスピーカーによる4つのセッションを通じて、AIの実践的な活用方法について語っていただきました。\u003C\u002Fp>\u003Cul>\u003Cli>「UIパフォーマンス最適化：AIを活用して100倍の速度向上を実現した事例」\u003Cbr>株式会社カオナビ フロントエンドエンジニア、PjL（プロジェクトリード） 木下 博貴\u003C\u002Fli>\u003Cli>「AIエージェント導入で開発ワークフローはどう変わったか？実践事例とツール選定のポイント」\u003Cbr>Ubie株式会社 プロダクトエンジニア 鹿野 壮\u003C\u002Fli>\u003Cli>「上手にFireflyにお願いしてウェブデザイン案を出すぞ！」\u003Cbr>株式会社ブックリスタ デジタルプロダクトデザイナー 黒野 明子\u003C\u002Fli>\u003Cli>「AI時代のSNS発信：「隠す」「公表する」の境界線と、信頼を築くAI活用」\u003Cbr>株式会社ウェブタイガー 代表取締役 田村 憲孝\u003C\u002Fli>\u003C\u002Ful>\u003Cp>この記事では、当日のセッション内容をご紹介します。スライドも掲載しているので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Ch2 id=\"h34835aa6d1\">UIパフォーマンス最適化：AIを活用して100倍の速度向上を実現した事例\u003C\u002Fh2>\u003Cp>最初のセッションは、株式会社カオナビのフロントエンドエンジニア・木下博貴さんの発表でした。\u003C\u002Fp>\u003Cp>既存のデザインシステムが抱えるUIパフォーマンスの課題に対して、AIを用いて改善したプロセスを、検証用サンプルアプリケーションを用いながら、分かりやすく解説していただきました。\u003C\u002Fp>\u003Cp>パフォーマンス最適化の初期段階では、AIではなく開発者ツールやProfilerなどを用い、ご自身の経験を活かしてボトルネックを特定していったそうです。その後、ChatGPTやGitHub Copilotからの提案を参考にしながら、人間が最終判断してコードの修正を進めたとのことです。\u003C\u002Fp>\u003Cp>木下さん自身は「パフォーマンス最適化は専門外」とのことでしたが、「\u003Cstrong>経験や知見のない領域にもAIの助けを借りて挑戦できた\u003C\u002Fstrong>」という話はとても印象的でした。また、「\u003Cstrong>AIにすべてを任せるのではなく、人間との役割分担を意識し、学びの機会として活用するのが重要\u003C\u002Fstrong>」と語っていた点も共感できました。\u003C\u002Fp>\u003Cp>詳細は、以下のスライドをご覧ください。なお、この資料はすべてMCPで作成されたとのことで、その完成度にも驚かされました。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Fbe6804cd36e74333a7b30a0dd44d25a9\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h6569323502\">AIエージェント導入で開発ワークフローはどう変わったか？実践事例とツール選定のポイント\u003C\u002Fh2>\u003Cp>続いて、Ubie株式会社のプロダクトエンジニア・鹿野壮さんによるセッションでは、AIエージェントを中心に据えたワークフローの構築について、導入ツールや選定理由、それぞれの特性と使い分けを具体的に紹介していただきました。\u003C\u002Fp>\u003Cp>Devinの活用事例では、指示の与え方や、タスクの提案からPull Request作成までの一連の流れが共有され、人間のエンジニアとやりとりしているかのような自然さが印象的でした。また、コードに触らない社員にもDevinを提供することで、軽微な文言修正などがエンジニアを介さずに完結する仕組みも整備されているとのことです。\u003C\u002Fp>\u003Cp>活用のポイントとしては、\u003Cstrong>「ドキュメントの充実」や「具体的で詳細な指示」がAIの精度向上につながる\u003C\u002Fstrong>という実践的なアドバイスがありました。\u003Cstrong>人間もAIエージェントも作業しやすい環境を整えることが重要\u003C\u002Fstrong>であるという指摘が印象的でした。\u003C\u002Fp>\u003Cp>また、MCPとデザインシステムを組み合わせた活用事例も紹介され、MCPの基本概念から具体的な使い方までを丁寧に解説していただきました。MCPを利用した場合としない場合の出力の違いについても比較しながら紹介され、とても参考になりました。\u003C\u002Fp>\u003Cp>詳細は以下の資料でも紹介されていますので、ぜひご確認ください。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 41.0338%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Feminent-saver-5df.notion.site\u002FAI-1f3e50380e98802d94e8c0406182b1eb\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Feminent-saver-5df.notion.site%2Fdist-49-ai&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h3e58db6929\">上手にFireflyにお願いしてウェブデザイン案を出すぞ！\u003C\u002Fh2>\u003Cp>休憩を挟んで再開されたセッションでは、株式会社ブックリスタのデジタルプロダクトデザイナー・黒野明子さんが登壇。Adobe Fireflyを活用してウェブデザイン案のブレインストーミングを効率化するためのノウハウを、豊富な事例とともに紹介いただきました。\u003C\u002Fp>\u003Cp>前提として、現時点のFireflyはワイヤーフレーム作成には向いていない一方で、デザインテイストや雰囲気の検討に強みを発揮するとのことでした。ビジュアルの方向性を共有するためのツールとして活用するのにも有効です。\u003C\u002Fp>\u003Cp>具体的には、写真撮影のイメージを引き出すためのプロンプト設計のコツや、「構成参照」機能の使い方、Photoshopの生成拡張機能やIllustratorの3D表現との組み合わせ事例などが紹介され、実務にすぐ応用できる内容となっていました。\u003C\u002Fp>\u003Cp>さらに、使用する生成モデルや構成参照の強度によって出力結果が大きく異なる点についても丁寧に解説されており、Fireflyを\u003Cstrong>デザインパートナーとして上手に使いこなすためのヒント\u003C\u002Fstrong>が詰まったセッションでした。\u003C\u002Fp>\u003Cp>スライドのデザインも素敵なので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F6eec0036d11149ec95fb5906819a59f7\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h5457d076c7\">AI時代のSNS発信：「隠す」「公表する」の境界線と、信頼を築くAI活用\u003C\u002Fh2>\u003Cp>最後のセッションは、株式会社ウェブタイガー代表取締役・田村憲孝さんによる、\u003Cstrong>生成AIを活用したSNS運用におけるリスクと対策\u003C\u002Fstrong>にフォーカスした内容でした。\u003C\u002Fp>\u003Cp>冒頭では、SNS運用におけるAI活用の代表的なシーンと、そこで起こり得る課題が解説されました。その後、「著作権侵害」「誤情報（ハルシネーション）」「AI利用への懸念や批判」といったリスクに対し、具体的な対策や事例を交えて紹介されました。\u003C\u002Fp>\u003Cp>特に印象的だったのは、企業からの相談として増えているという「\u003Cstrong>AIの活用を公表すべきか、それとも隠すべきか\u003C\u002Fstrong>」というテーマです。これについて、両者のメリット・デメリットが比較されました。また、AI活用にあたっては、\u003Cstrong>社内ガイドラインの整備が重要\u003C\u002Fstrong>であるという指摘もあり、「リスク回避」「社員の安心感」「責任の明確化」の3つの観点から、その重要性が語られました。\u003C\u002Fp>\u003Cp>SNS運用におけるAIの活用は、効率化と倫理・信頼性のバランスが重要であり、ブランドとしてのあり方など、本質的な問いまで考える必要があるのだと学ぶことができました。\u003C\u002Fp>\u003Chr>\u003Cp>以上、DIST.49「Web制作の現場のためのAI活用術」の参加レポートでした。\u003C\u002Fp>\u003Cp>過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。\u003C\u002Fp>\u003Cp>DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fdist.tokyo%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>DIST公式YouTubeチャンネル：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCNsgmodjXtYKAi1HxLK94kQ\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.youtube.com%2F%40DISTJP&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[11,12,13],"コミュニティ","フロントエンド","イベントレポート",[15],{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":19,"name":20,"job":21,"avatar":22,"profile":25,"xId":26,"githubId":26},"koyama","2024-02-14T00:43:53.323Z","2024-03-20T13:41:39.499Z","2024-03-15T13:16:51.910Z","小山 樹人","フロントエンドエンジニア",{"url":23,"height":24,"width":24},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F74ad15c43b6042fe899472eb640b7db8\u002Fkoyama_202310.jpg",512,"静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。\nデザインと開発の両面からものづくりに携わっていきたい。","yamageji",{"url":28,"height":29,"width":30},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F9590145d266449ee80d0282705511c09\u002Fdist-49.png",720,1280,{"fieldId":32,"type":33,"image":35},"ogpImage",[34],"タイプ2（タイトル＋画像）",{"url":36,"height":37,"width":38},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F162c35e65d0b4c758fbbd1411b16487f\u002Fdist-49-ogp.png",630,1200,1776401660748]