こんにちは！デザイナー横断のグループミッション（通称ぐるみ）による「Dify活用推進チーム」です。

今回はこちらの記事で紹介した生成系AIツール「Dify」の活用推進の中で、実際に作成した、画像からHTML、CSS（SCSS）を自動で生成するアプリについて紹介します。

実際に作成したアプリ

実際に作成したアプリはこちら！

その名も「画像deコード生成くん」。名前の通り、チャットでコード生成したい画像を送信するとHTML・CSS（SCSS）形式のコードを自動生成してくれるアプリです。

アプリの全体フローは以下の通りです。

1.事前情報の入力

「デバイス」「出力形式」などをチャット起動前に入力します。

2.画像入力

Difyのチャットボット機能を使用し、ユーザーがチャットに画像ファイルを送信できるように設定します。送信可能な画像形式はJPEG, PNG, GIFです。

3.ナレッジ取得

class名やデザインシステムなど、チームごとにあるコーディングルールをLLMに理解させるために、事前知識としてナレッジを取得します。

ナレッジはNotion上に事前に定義したルールを管理画面で呼び出して利用しています。チームによって異なるルールが定義されています。

事前情報で入力した「サービス」に応じて、対応したナレッジを引き出すようになっています。

4.画像解析

LLMはgpt-4oを使用しています。

5.HTML・CSS生成

AIが画像内の要素を分析し、HTML・CSSコードを生成します。

6.出力したコードのブラッシュアップ

生成されたHTMLとCSSに対し、チャットで追加の要望を出すことができます。

実際に以下の画像を入力してみると、このような形で実装してくれます。

見た目だけ再現しているわけではなく、UIパーツごとに適切なHTML要素でマークアップされ、ウェブアクセシビリティの観点も考慮してコーディングされています。

作成手順

ここからはどのように「画像deコード生成くん」の作成を進めたか、プロセスをご紹介します。

調査

上記のアプリ要件はおおかた固まっていたので、実現に向けてDifyの活用事例の調査を行いました。

デザイナーのDify活用事例や画像生成モデルについての調査を中心に行っていましたが、まだ事例が少なく情報収集が大変でした。

テストアプリの作成

調査して見つけたものを実際にテストアプリとして作成してみて、操作や使用に慣れていきました。

ある程度知見が溜まったところで、実現したい要件に合わせてテストアプリをチューニングし、型を作っていきました。

うまくいかなかったものを含め、テストアプリを4個ほど作りました。

β版公開・ブラッシュアップ

テストアプリを通して形になったアプリをβ版として、数名のデザイナーに公開しました。

公開したデザイナーに実際にアプリを用いてコーディング業務を行ってもらい、使用感や追加の要望をヒアリングしました。

ヒアリングを通じて以下の改善項目が挙がり、アプリに追加要件として実装しました。

デザイナーに公開

上記のフィードバックを反映した完成版を社内デザイナー向けに公開しました。

アプリの効果

デザイナーに公開してからのアプリの利用状況はこちらです。(2024/10/31~11/30)

こちらの記事でも紹介しましたが、ワークショップやSlackチャンネルを通してDifyの推進チームがデザイナー全体にDifyの啓蒙活動を行いました。

まとめ

GMOメディア サービスデザイン部では、このようにAIツールの導入、推進を積極的に行っています。特にDifyに関しては今回のアプリに限らず、画像生成や分析など、様々な場面で活用するためのアプリを日々作成しています。

今回の事例が、デザイナーのDify導入を考えている方の参考になりましたら幸いです。