初めまして、インターンをやらせていただいている ryusei です。
今回初めて、勉強会に参加させていただいて、感想と学んだ事を書いていこうと思います。
今回の話では特にAI周りが取り上げられ、MCPの活用、AIアシスタントによるUIパフォーマンスの改善・最適化、Fireflyを用いたwebデザイン案の作成、信頼されるAIの活用法が紹介されていました。
特に、cursor, replit, DifyのようなAIを駆使した開発環境の進化により誰でもコードを書かずにフロントエンドからバックエンドまでをAIに任せて開発ができるようになり、エンジニアなしでの開発もできるようになり便利な社会になったという印象を受けました。
そんな中で、今回はエンジニアに必要な新たな技術を考えるいい機会になったので皆さんにも共有できたら嬉しいです。
- 「web制作 AIの活用術」
Ubie株式会社 プロダクトエンジニア 鹿野 壮さん
- 「UIパフォーマンス改善・最適化（AIアシスタントを駆使して100倍高速化した話」
株式会社カオナビ フロントエンジニア・PjL 木下 博貴さん
- 「Fireflyを使ってwebデザイン案の作製法」
株式会社ブックリスタ デジタルプロダクトデザイナー 黒野 明
子さん
- 「信頼されるAI活用法」
株式会社ウェブタイガー 代表取締役 田村 憲孝さん
「web制作 AIの活用術」
「Devin、Cursor、Cline、Copilot Edits、Windsurf、JunieといったAIエージェントが登場し、Claude、Gemini、ChatGPT、DeepSeekといった高度なAIモデルを組み合わせて従来では考えられない速度と品質でプロジェクトを推し進めることができます」
ここでは特にDevinをMCPサーバーとうまく連携させ、より実用的でデザイナーでもコードを書くことが可能になった話をまとめていきたいと思います。
Devinとは
そもそもDevinとは、slackなどのチャットツール上で動作するAIエージェントで、プロジェクトの進行を管理してくれるフルスタックAI開発補助ツールです。
特徴としては以下の点が挙げられます：
- Slack上で自然言語による指示が可能
- スクリーンショットやエラーログから問題箇所を特定
- 実行した作業の履歴をレポートしてくれる
- ユーザーからの細かな追加指示にも即応
- 指示内容がナレッジとして蓄積され再利用可能
これにより、コードを書く専門知識がないデザイナーやマーケターでも、Webアプリのプロトタイプを立ち上げたり、簡単なUI改修が行えるようになっています。
MCPとは？AIのためのAPI設計思想
MCPとは、AIとシステム間でのやりとりをAPIのように統一・整理するための設計規格で、AIが外部データや自社コンポーネントにアクセスしやすくするための橋渡し的な役割を果たしています。
MCPの活用で何ができるのか？
MCPの活用で以下のようなことができるようになりました。
- UIコンポーネントの再利用性が高まり、AIに明確な出力指示ができる
- 意図しないコード生成を防ぎ、安定した実装が可能になる
- 自社のデザインシステムやAPI構成を学習させることで、より正確なUIやUXを提案できる
- MCPサーバーの構築で、AIエージェントがその仕様を基に自動でコード出力可能に
「AIに自由に作らせる」だけでなく、「決められたルールに基づいて適切に作らせる」という発想の転換こそ、今後のWeb制作現場におけるAI活用の鍵となりそうです。
AIを使いこなすには「プロンプト力」が重要
AIを最大限に活用するためには、的確なプロンプト（指示文）を記述するスキルも求められます。
- 目的（何を作りたいか）
- 仕様（どんな機能が必要か）
- 制約（利用する技術やデザインルール）
- 入力データや参考資料
MCPと連携することで、AIがこうした情報を内部的に解釈しやすくなり、「思った通りのコード」や「使えるUI案」を返してくれるようになります。
まとめ｜AI×Web制作時代に必要なスキルとは
DevinやMCPのような最新AI技術を使うことで、Web制作のハードルは確実に下がりつつあります。
しかし、AI任せにしすぎず「適切に指示する力（プロンプト力）」や「自社仕様との連携設計（MCP設計）」といったより的確にAIに指示することを身につければ、今よりさらに業務の効率化を図れると思いました。
「UIパフォーマンス改善・最適化（AIアシスタントを駆使して100倍効率化した話」
「AIに任せたらコード全部壊された」
AIを使ってコードを書いてみた人なら一度は経験したことがあることだと思います。
最近のLLMはコード生成も優秀で、誰でも簡単にアプリを作れるようになった反面、生成されたコードを見るとたくさんのよくわからないコードが生成されていることもあります。
よく言われるのがLLMは関数などの生成は得意であるけれど全体として整ったコードを書くのには課題があるということです。
実際に私も、作っていたコードをcursorに丸投げしたら修復不可能なまでにおかしなことになってしまって
「自分でしっかり勉強して自分のちからでかこう」
と思ったことが何度かありました。
しかし、そこで一工夫、AIを使うことで作業を効率化し初心者でも飛躍的に「使えるコード」を描けるようになる。そんな方法のヒントを今回学んできました。
AI活用シーン
- ボトルネックの特定
- チューニングの実施
- アルゴリズムの提案
- レンダリングの最適化
まず一つ目の活用の仕方はボトルネックの特定です。
ボトルネックとは
作業やコードの読み取りで支障がでていて進行が止まっている部分や遅れている原因の部分のことです。
このボトルネックはコードを日頃から書いている人でもめんどくさかったり、見つけづらいことが多く、初心者でAIにコードを書いてもらった時などは特に発見が難しいです。
これをAIに投げて原因を特定してもらったり、原因ぽいところを発見してもらったりすることで飛躍的に作業が捗ります。
木下さんは自分でボトルネックを探してきてAIに原因の特定をして貰っていてとても便利そうでした。
しかし私のようにまだコードを見て何がうまくいっていないのかよくわからない人は、
AIに原因を見つけて貰い、それをみて何が良くないのか勉強するとより効率的に作業できてくるとおもいます。
次にチューニングの実施です。
これもすでにコードをしっかり書ける人などは一度自分で書いてみてからAIに確認したり、逆にAI書いて貰ったコードを手直ししたりすると効率が良くなると思います。
初心者の人は、一度AIに特定したボトルネックの部分を投げてコードを治して貰って、そのコードが実際に機能するのか確認しながら行っていくと良さそうです。
しかし、このときに自分でもそのコードを調べて学習しないとずっとAIに頼りっぱなしで、AIがおかしなコードを出したときにわからなくなってしまうので、同時並行で勉強しながらチューニングしていくことをお勧めします。
他の活用法としてアルゴリズムの提案をしてもらうと自分で思い付かない対処法やコード例を知れて、学習にも役立ち技術向上にも繋がります。
初学者だと
「こんな感じに作りたい」や「ここを治したい」
といったことがあっても何をどうやったらいいのかわからず、本や動画を見て学習するにも、自分が必要な知識がどこにあるのかわからず、大量の時間を費やすことになってしまいます。
そんなときにAIを活用して自分が直したい箇所と
「ここをこんなふうにしたいから、そのための効率的なアルゴリズムとコードを教えて」
と聞くとより良い修正案を出してくれます。さらに考える時間と学習時間を大幅にカットできるのでおすすめの方法です。
最後にレンダリングです。
レンダリングの最適化
Webページをブラウザが表示するまでの処理を無駄なく高速化することで、ここもプログラミング上級者でないとそもそも何が効率的なコードなのかもわからないと思います。そこでAIに聞いて、
「ボトルネックの発見」
「チューニング」
「アルゴリズム提案」
をしてもらうことで初学者でもそこまで苦労することなく、より良いコードを書きながら学習も進められると思います。
感想
下手に「コードを書いて」や「うまく動かないからコード直して」とA Iにお願いしたらそれっぽいものができるかも知れません。
しかし、勉強にならない、もしかしたらそれまで頑張ってかいた物が全部壊れることもある。
こんな大変な思いをするよりも、自分でできるところは自分でやってわからないところをAIに聞きながら勉強していくと効率よく開発ができると思うので、この四つを意識しながらAIを用いて開発に取り組んでいきたいと思いました。
「Fireflyを使ってwebデザイン案を出す方法」
「デザイン案はあるけどうまく書けないし、伝わらないな」
このセクションでは「Adobe Firefly」でそんな自分の思った通りのデザインがだせない人に向けてぜひ実践してみてほしい。そんな内容のお話で、私もとても勉強になりました。
デザインが上手く書けない人だけでなく、
「簡単な構図を書いてあとで自分が清書するときの見本にする」
と言ったときにも非常に便利なツールなのが「Adobe Firefly」です。
主な使用シーン
- 制作チームでのイメージ共有
- デザインのヒントをもらう
- 撮影イメージを引き出す（具体的なイメージがあるとき）
こんな感じで今デザインのお仕事をしている方やデザインの仕事を始めようとしている方にはぜひ使ってみて業務効率化に役立ててほしいです。
Adobe Fireflyでのおすすめの使用方法は、まず自分で簡単なレイアウトやワイヤーフレームを作成し、AIにデザインの作成を依頼する方法です。
Adobe Fireflyでは画像をプロンプトとして与えることができます。
さらに、そのプロンプトをどれくらい参考するか、使用するかのパラメータを使用者本人が決定できるのでその都度確認しながら自分が欲しいと思ったデザインを探すこともできます。
同じプロンプトでも異なる出力が得られるので自分と相性の良いモデルを探して見てください。
最近では、DALL•E ３のようなテキストから高精度なイラストや絵画風画像を生成してくれるAIがありますが、
「全然言うこと聞いてくれない」 、「思った通りの画像を作成してくれない。」
と言う経験をした人はたくさんいると思います。
「こんな感じにして作成して」
とプロンプトを渡しても全然違う画像が出てくることの方が多いですがAdobe Fireflyはプロンプトの使用率も指定できて思った通りに近い画像を作成してくれます。
「全然AIが言うこと聞いてくれない」 、「思った通りの画像を作成してくれない。」
こう感じている人はぜひAdobe Fireflyを業務効率化に役立ててみてください。
「信頼されるAI活用法」
「フェイクニュース」
「AIと人間の見分けがつかない」
こう言ったAIの登場によって生じた問題や将来への不安が最近のAIの発展によって、より一層危惧されるようになってきました。
しかし、その不安や危惧は消費者だけでなく、発信者にとっても大きな問題になっています。
企業側が誤った情報を発信してしまったり、AI生成の画像の使用による著作権侵害など、消費者からの信頼を損ねる可能性をできるだけ少なくしなければなりません。
このセクションではそんな信頼を損ねないAIの効率的な活用法について学びました。
誤情報の例として今回投げかけられたのが
「飛行機の割引があると勘違いして飛行機に乗ってしまった人」の記事です。
AIが誤って飛行機の割引ポリシーを表示してしまったことが発端になったこの事件でさらにAIへの信頼性が危惧されています。
会社で使用しているAIが誤情報を発信してしまい、企業のブランドが崩れると言うことは絶対にない話ではありません。
その場合の責任を誰が取るのかなどを明確にしておくことが必要となります。
こう言った問題は最終的に人の目でチェックする必要があるので、全てAIに任せるのではなく共存した関係で仕事を一緒に行っていくことが効率化と信頼感の構築に必要なのだと感じました。
生成AIの活用とリスク回避
- 投稿カレンダーの作成 SNSにおいて毎日の投稿計画を立てるのは時間がかかる作業です。AIを使えば、シーズンやイベントに合わせた投稿案を自動で組み立てることが可能になります。
- 投稿文・画像案の生成 自然な言い回しの投稿文や、視覚的に魅力的な画像案を短時間で提案してくれるため、効率的なコンテンツ制作が可能になります。
- 分析レポートの自動生成 SNSやWebのパフォーマンスデータから傾向を分析し、改善案をまとめてくれるAIツールも多数登場しています。
こう言ったことを任せることで業務の効率化につながる一方、さまざまなリスクも存在するのでそれらも紹介したいと思います。
1. 誤情報（ハルシネーション）
生成AIはあたかも正しそうな情報を作り出す「ハルシネーション」と呼ばれる現象を起こすことがあります。
間違った情報が発信され、炎上や信頼失墜につながる可能性がある。
2. コミュニケーションの違和感
生成されたテキストや画像には、「人間らしさがない」「気持ち悪さを感じる」といった感想を持たれることがあります。特に顔写真や感情表現では違和感が出やすく、ユーザーの信頼を損なう要因になりかねません。
リスク対策
1. 人間による確認は不可欠
AIが出した情報・コンテンツを「そのまま使う」のではなく、必ず人間の目でチェックすることが求められます。
とはいえ、「どこまで確認すれば安全か」という明確な基準はまだ確立されていません。
そのため、企業ごとにリスクレベルに応じたガイドラインや運用ルールを設けることが必要です。
2. AI活用の“透明性”を示す
- 隠して運用する場合 ・メリット：効率的に業務が進み、コストも削減できる ・デメリット：バレたときに一気に信用を失う危険性がある
- AI活用を公表する場合 ・メリット：「先進的」「効率的」と評価される可能性がある ・デメリット：「手抜きだ」「人間が作るべきだ」といったバッシングのリスクがある
現在では、多くの企業がAIを活用していることを公表し、透明性を重視する方向にシフトしています。特に大企業ほど、信頼性やブランド価値を守るために「AIによる生成コンテンツ」を明示する傾向が見られます。
3. ガイドライン・チェック体制の構築
社内でAIを導入する場合は、以下のポイントを押さえたルール整備が大切です。
- 誰が最終チェックをするのかを明確にする
- 生成AIで作成したコンテンツにはタグや記録を残す
- AI使用の方針（公表するのか隠すのか）を統一する
- 著作権・肖像権チェックのフローを作る
社員の不安を減らし、トラブル時の責任の所在もはっきりさせることで、安心してAIを活用できる環境が整います。
まとめ
AIはあくまで「アシスタント」
「任せっきり」にするのではなく、「人が責任をもって活用する」ことが大切だと感じました。
１、２、３のリスク対策を行いながらAI活用に対するユーザーやクライアントの信頼を高めることが企業や開発者には求められると思います。