Geminiを用いたDify風モックの作成

1. はじめに

Difyを用いたアプリケーション開発において、以下の課題に直面したことはないでしょうか。

• UI/UXのイメージのズレ：関係者間で完成イメージを共有したはずが、実装後、認識のズレにより手戻りが発生してしまう。
• 画面要件の言語化に苦戦：テキストベースの要件定義ではUIがイメージしづらく、議論が深まらない。

こうした課題は、プロジェクトの遅延や工数の増加に繋がってしまいます。そこで、解決策としてGeminiを用いたモック作成を紹介します。

Geminiを活用することで、Difyのモックをコーディングなしかつ短時間で作成可能です。更に、その場で画面イメージを共有できるため、認識のズレや完成イメージの不足による手戻りや工数増加を防げます。

本記事では、その具体的なやり方について解説します。※同様の機能を持つ他のLLMでも応用できるテクニックです。

2. どのような場面で使えるか

このGeminiを使ったアプローチは、特にアジャイル開発の以下のような場面で利用できます。

活用シーン	効果
要件定義作成	Difyの開発前段階でも、プロンプトを入力するだけで簡易的UIを作成することができるため、仕様検討の助けとなります。
ステークホルダーへの報告	完成イメージを視覚的に共有し、意思決定をスムーズに進めることができます。

3. 作成方法

Geminiを使ったモック作成は、以下の流れで完了します。今回は例として、シンプルな技術ブログBotを作成します。

DifyからエクスポートしたDSLファイルとプロンプトをGeminiにインプットする

今回は要件定義作成の際に使用する場合を例に説明を行います。要件定義作成の段階であるため、以下のような開発前のDifyアプリのDSLファイルを使用します。

まず、モックのベースとなるDifyアプリからDSLファイル（YAML形式）をエクスポートします。このファイルをGeminiにアップロードし、ツールはCanvasを選択、作成したプロンプトと合わせて送信します。

プロンプトは以下のようになっています。
プロンプトを作成する時のポイントは、Difyのチャット画面の要素（例えば、色、配置、フォントのサイズ）や要件定義を詳細に記載することです。

プロンプト全文

# 実装アプローチ
提供されたDifyのYAMLファイルを分析し、その対話フローを直接読み込むのではなく、JavaScriptの**静的なデータ構造（オブジェクトや配列）**としてアプリケーションに組み込みます。
# 全体レイアウト要件
1. ヘッダー:なし。チャット画面が最上部から開始するフルスクリーン構成。
2. 背景:ページ全体の背景色をライトグレー (bg-gray-100) に設定。特定のコンテナ（カード）は設けず、フルスクリーン表示。
3. コンテンツ配置:
- 会話履歴エリア:画面の大部分を占めるメインエリアに表示。
- 入力欄: 画面下部に常に固定で表示。
# アプリ仕様
- 初期の画面で「アイデア出し」「構成案の作成」「記事のレビュー」を選択するような形式にし、そこの選択により条件分岐されるようにする。
条件分岐詳細は以下のよう。
1. 「アイデア出し」
- 「どのようなテーマのアイデアが欲しいですか？キーワードをいくつか教えてください」と送信
2. 「構成案の作成」
- 「対象読者」と「記事のゴール」の入力を求める
3. 「記事のレビュー」
- 「記事のファイル（PDF）をアップロードしてください。」と送信
# 配色
1. ページ背景
- 背景色:ライトグレー (bg-gray-100)
- 文字色:N/A
- 枠線:なし
- その他:フルスクリーン
2. Botの吹き出し
- 背景色:白 (#ffffff)
- 文字色:黒 (#1f2937)
- 枠線:なし（ボーダーレス）
3. ユーザーの吹き出し
- 背景色:ライトブルー (#e1effe)
- 文字色:黒 (#1f2937)
- 枠線:なし
# チャット吹き出しとアイコン
1. 配置とスタイル
- 配置: Botメッセージは左揃え、ユーザーメッセージは右揃え。
- スタイル: 吹き出しの角は十分に丸く (border-radius: 1.5rem)。枠線は不要（ボーダーレス）。
2. アイコン
- 配置: アイコンは、吹き出しの外側の左上（Bot）または右上（ユーザー）に、吹き出しの上端と揃うように配置。
- Botアイコン:背景はライトシアン (bg-cyan-100) の円形。表示はロボットの絵文字 🤖。
- ユーザーアイコン:背景はライトブルー (bg-blue-100) の円形。表示:は青色 (text-blue-400) の人型シルエットのSVGアイコン。
# フローティング入力欄（画面下部固定）
1. デザイン
- 入力欄エリア背景: 透明。
- コンポーネントグループ: テキスト入力フィールド、アイコン、送信ボタンを一つのグループとし、白背景、角が丸い (rounded-full)、影 (shadow-lg) 付きのカードのように見せ、ページ下部に浮いているように配置。
2. コンポーネント
- テキスト入力欄:配置は左側。スタイル/要件は利用可能な幅いっぱいに広がる。プレースホルダーは**「Botと話す」**。
- アップロードアイコン:配置は送信ボタンの直左。スタイル/要件はクリップのSVGアイコン。クリックでファイル選択ダイアログを開く。
- 送信ボタン:配置は右端。スタイル/要件はテキストではなく紙飛行機のSVGアイコンを表示。
3. ファイルアップロード機能
- PDFファイルが選択された場合、入力欄の上にプレビューを表示。
- プレビュー内容: PDFアイコン、ファイル名、キャンセル用の「×」ボタン。
4. ユーザーの回答表示
- ボタン形式の質問: ユーザーがクリックしたボタンのテキストを、そのままユーザーの吹き出しに表示。
- フォーム形式の質問:入力されたデータをJSON形式の文字列に変換。JSONのキーには、DifyのYAMLで定義されている会話変数名（例: contract_type, use_place など）を使用。このJSON文字列をユーザーの吹き出しに表示。
# 対話コンポーネント（Bot吹き出し内）
1. 回答ボタン
- 配置:Botの吹き出し内、メッセージの下に表示。複数のボタンは横に並べて表示。
- 幅:ボタン内の文字の大きさに応じて幅が自動調節される (width: auto; または display: inline-block;)。吹き出しの横幅いっぱいに広げない。
- 形状:角が少し丸い長方形 (rounded-lg)。わずかに影 (shadow-sm)。
- 通常時:白背景、薄い灰色の枠線 (border-gray-300)、濃い青色のテキスト。
- ホバー時:背景色がごく薄い灰色 (bg-gray-50) に変化。
- 無効時:一度クリックされたボタンは半透明 (opacity-50) になり、クリック不可の状態にする。
2. 回答フォーム
- 入力フォームが必要な質問の場合、フォーム全体をBotの吹き出し内に表示。

※Difyのワークフローがある程度作り込まれている場合は、アップロードしたDSLファイルから要件定義を読み取ることができるため、プロンプトを要件定義に含める必要はありません。

すると以下のようなDifyのUIに近いモックが完成します。

この完成版モックを以下に掲載します。実際のDifyアプリと同様にボタンを押したり、チャットを送信することが出来ます。是非参考にしてみてください。
https://g.co/gemini/share/f34c38d312d6

4. 活用時のコツ

この手法の効果を最大化するための2つのコツを紹介します。

• 共有時の「その場での修正」

会議や打ち合わせの場でモックを共有し、フィードバックを受けたらその場でプロンプトを修正し、UIを更新します。
以下のような指示をGeminiに入力すると、

以下のように指示通り修正されたことが分かります。

認識の擦り合わせをその場でできるため、議論がスムーズに進み、仕様確定、手戻りの大幅に削減に役立ちます。

• プロンプトの型化

Difyはチャット画面のデザインが統一されているため、プロンプトで色、サイズ、配置など型化出来る部分が多くあり、型化することでプロンプト作成時間を大幅に減らすことができます。
以下がプロンプトフォーマットになります。参考にしてみてください。

プロンプトフォーマット

# 実装アプローチ
提供されたDifyのYAMLファイルを分析し、その対話フローを直接読み込むのではなく、JavaScriptの**静的なデータ構造（オブジェクトや配列）**としてアプリケーションに組み込みます。
# 全体レイアウト要件
1. ヘッダー:
2. 背景:
3. コンテンツ配置:
# アプリ仕様 ///アプリの使用を記載してください
# 配色
1. ページ背景
- 背景色:
- 文字色:
- 枠線:
2. Botの吹き出し
- 背景色:
- 文字色:
- 枠線:
3. ユーザーの吹き出し
- 背景色:
- 文字色:
- 枠線:
# チャット吹き出しとアイコン
1. 配置とスタイル
- 配置:
- スタイル:
2. アイコン
- 配置:
- Botアイコン:
- ユーザーアイコン:
# フローティング入力欄（画面下部固定）
1. デザイン
- 入力欄エリア背景: 
- コンポーネントグループ:
2. コンポーネント
- テキスト入力欄:
- アップロードアイコン:
- 送信ボタン:
3. ファイルアップロード機能
- PDFファイルが選択された場合、入力欄の上にプレビューを表示。
- プレビュー内容:
4. ユーザーの回答表示
- ボタン形式の質問:
- フォーム形式の質問:
# 対話コンポーネント（Bot吹き出し内）
1. 回答ボタン
- 配置:
- 幅:
- 形状:
- 通常時:
- ホバー時:
- 無効時:
2. 回答フォーム
- 入力フォームが必要な質問の場合、フォーム全体をBotの吹き出し内に表示。

5. まとめ

本記事では、Geminiを活用してDifyのUIモックを高速で作成する方法について紹介しました。
この手法の魅力は、コーディングなしで、誰でも短時間で具体的なUIイメージを生み出せる点にあります。これにより、UIの共有がスムーズに行えるため、プロジェクトを効率的に進めることができます。
ぜひ皆さんもお試しください。