Difyでデザインをもっと効率的に!デザイナーによるAI活用の調査と推進

こんにちは!ぐるみ「Dify活用推進チーム」です。
今回はデザイナー横断のグループミッション(通称ぐるみ)による生成系AIツール「Dify」の活用推進についての取り組みをご紹介します。
なぜDifyの活用に取り組んだのか?
近年、ChatGPT等の生成系AIの活用が一般的になってきました。アイデア出しやコーディングなど様々な場面での活用は定着してきましたが、より直接的なクリエイティブ業務での活用については、まだ手探りの状態が続いています。
そこで、デザイン部の横断活動として「生成系AIを活用したデザイン業務の効率化」をテーマに掲げ、Difyの可能性を探ることにしました。最終的には、デザイナーとAIが共創しながら業務のパフォーマンスを最大化させることを目指しています。
今回はデザイナーがDifyを自発的に実務に取り入れることのできる環境を整備するため、次のような段階的なアプローチで取り組みを進めました。
Difyの調査と検証
デザイナーへの浸透活動
クリエイティブ業務に活用できるアプリの制作
Difyの調査と検証
まず、Difyでどのようなアプリケーションが作成可能なのか、実際に手を動かしながら調査を進めました。既存の事例を参考にしながら、デザイン業務に特化したテストアプリケーションを作成し、その可能性を探っていきました。

調査をもとに、複数のテストアプリを作成し、Difyの実用性を検証しました。作成したテストアプリの中からいくつかピックアップしてご紹介します。
画像生成:くまカートゥーン
アップロードされた画像がくまかどうかを分析し、くまと判定された場合はカートゥーン風にアレンジして出力するアプリを作成しました。
このアプリを通じて画像判定機能の検証を行いました。

画像生成:なんでもドラゴン
画像変換機能のテストとして、アップロードした画像を任意の動物の画像に自動変換できるアプリを作成しました。

画像からプロンプト生成
アップロードした画像のプロンプトを自動解析し、テキストとJSON形式で出力するアプリを作成しました。これにより、画像からどの程度詳細なプロンプトを抽出できるかを検証しました。

デザイナーへの浸透活動
調査・検証フェーズを完了した後、サービスデザイン部全体に向けて、Difyの活用を広める取り組みを開始しました。
ワークショップや勉強会を開催してDifyの活用方法を共有し、さらに調査・検証で得られた事例を発信しました。
ワークショップの開催
ワークショップでは、Difyの基本機能を説明した上で、参加者が実際にアプリケーションを制作する実践的な演習を行いました。
このワークショップを通じて、多くのデザイナーが初めてDifyに触れ、それぞれが独自のアプリケーション開発に挑戦しました。

さらに、追加の社内勉強会では、Difyの専門的な機能を解説し、サンプルアプリの実践的な制作を通じて、より深い理解と活用スキルの向上を目指しました。

ワークショップでは、以下のようなサンプルアプリを制作しました。
Slack連携アプリ
LLMが生成したテキストを、指定したSlackチャンネルへ自動的に送信するアプリです。

URL要約アプリ
入力されたURLのウェブページの内容を読み込み、簡潔に要約して表示します。

ナレッジ取得テストアプリ
事前に登録したナレッジを参照し、質問に対して回答を提供します。

社内での情報発信
調査を通じて厳選した事例やアプリケーションを、Slackのシェアチャンネルで定期的に共有しました。
シンプルな事例を継続的に紹介することで、デザイナーがDifyを気軽に試せる土壌づくりを目指しました。

業務に活用できるアプリの制作
調査・検証の結果とワークショップの参加者からのフィードバックを踏まえ、実務に活用できるアプリ「画像deコード生成くん」を開発しました。このアプリは、実装したい画面のスクリーンショットを入力するだけで、対応するHTML、CSS(SCSS)コードを自動生成することができます。

画像deコード生成くんについてはこちらの記事でより詳しくご紹介しています。ぜひこちらもご確認ください。
まとめ
今後も、GMOメディア サービスデザイン部では、デザイナー一人ひとりが生成系AIを活用し、自律的に業務改善を進められる環境づくりに取り組んでいきます。




