💭

非エンジニアのデザイナーが、200回の試行錯誤でデザインモック自動生成AIアプリを完成させた話

suzukamitsu

2025/06/20に公開

デザイン

Dify

idea

 はじめにこんにちは！Finatextデザインチームの密(@suzukamitsu)と小林(@f_kobayashi)です。

この記事では、社内AIコンテストで制作したアプリ「Mocky」について、開発の背景や仕組み、実装で工夫した点などをご紹介します。まだまだ試行錯誤中のプロジェクトではありますが、非エンジニアのデザイナーでもAIを駆使してアプリを制作できた経験として、何か参考になれば嬉しいです！

 これ、AIにお願いできるのでは？Finatextでは、BizDevチームがお客様に新しいビジネス提案を行う機会が多くあります。

その中でよく出ていたのが、こんな声です。
デザインモックがあると提案が伝わりやすい
でも毎回デザインチームに頼むのは気が引ける…
かといって自分で作るのは難しい…
そんな「ちょっと頼みづらい」「でも欲しい」という空気を解消するために、AIでプレゼン用のデザインモックを自動生成できたらもっと楽になるのでは？ というアイデアから、デザインモック自動生成AIアプリ「Mocky」を作る取り組みがスタートしました。

 はじめてのDify。「ノード？ナレッジ？何それ？」状態からのスタート今回のプロジェクトでは、「非デザイナーでも簡単にデザインモックを生成できる」ことをゴールに設定。

その実現手段として、社内エンジニアから紹介してもらったのが Dify というオープンソースのAIアプリ開発プラットフォームでした。プログラミング不要でAIアプリが作れるツールです。
とはいえ、普段の私たちの業務ツールはFigmaやAdobeがメイン。AIといえば画像生成くらいの経験しかなく、Difyの「ノード」「ナレッジ」「ワークフロー構築」という概念には全く馴染みがありませんでした。
「ノードって何？」
「ナレッジってどんな情報を入れるの？」
「プロンプトの設計ってどこまで細かく書けばいい？」
そんな状態から、解説動画を見て、試して、失敗して…をひたすら繰り返す日々が始まりました。

途中、CTOの田島さんに相談に乗っていただいたり、エンジニア陣が開催してくれたアイデアソンでAIの考え方を学んだりしながら、少しずつDifyの仕組みを理解。出力結果の揺れやプロンプトの最適化に試行錯誤しつつ、ようやくMockyの全体像が形になっていきました。

 Mockyワークフローの全体像Mockyの仕組みは大きく5つのステップに分かれています。

 ① ユーザーが情報を入力
まず、ユーザーは以下の情報を選択します。
デザインスタイル（例：シンプル / スタイリッシュ / ポップ / ナチュラル）
作りたいデザイン（例：旅行キャンセル保険LP / 証券資産管理アプリ / ライフプランシミュレーション）
配色情報
ベースカラー（全体で60%使用されるカラー）
メインカラー（全体で30%使用されるカラー）
アクセントカラー（全体で10%使用されるカラー）
画面サイズ情報
アートボード幅
コンテンツ幅
ここまで指定すれば、あとはAIが頑張ってくれます！

 ② ナレッジ参照
Mockyの肝となる仕組みです。

あらかじめ各サービスごとに「構成要素・目的・セクション設計」などを文書化してナレッジとして登録。ユーザーがサービスを選ぶと、対応するナレッジが自動で呼び出されます。
これにより、サービス別に最適化されたプロンプトが自動で生成される仕組みを実現しました。今後はナレッジを追加していくことで、対応できるデザインパターンもどんどん広がっていきます。

 ③ プロンプト生成
本ノードでは、最初にユーザーが入力した内容を変数として挿入し、「デザインプロンプトの骨格」を生成します。このノードで行われる処理は以下の通りです。
ビジュアルトーンの定義

ユーザーが最初に選択したデザインスタイルから、制作するデザインのビジュアルトーンを定義します。
配色ルール

ユーザーが最初に選択したベースカラー、メインカラー、アクセントカラーをどうデザインに反映するかを定義します。
サイズ仕様

レイアウト設計の基本寸法を定義します。
制作対象

ユーザーが最初に選択した「作りたいサービス」から制作物を判断し、適切なナレッジを呼び出します。この時に、制作対象がLPなのかアプリなのかを定義します。
この時点で、プロンプトの6~8割が出来上がります。

 ④ ブラッシュアップ処理
本ノードでは、さらに良いプロンプトに仕上げるための処理を行います。
最新のUIトレンド反映
セクション構成の最適化
キービジュアルや写真利用の指示
視認性・可読性のチューニング
レスポンシブ対応の指示
UI生成ツール向けに最適なプロンプト文章化
ここまで整えたプロンプトは、AIツール（ v0 や Figma Make など）にそのまま渡しても安定したデザインが出力できる状態になります。

 ⑤ プロンプト出力最終プロンプトが完成！
あとはこれを v0 や Figma Make に投入すれば、高品質なUIデザインが自動生成される、という仕組みです。
もちろん、生成されたデザインはFigmaにインポートし、細かな修正や仕上げも可能です。ロゴ差し替えや画像変更など、必要に応じてデザイナーが微調整できる柔軟さも確保しました。
※実際にv0にこのプロンプトを投入し生成したページがこちらです


 工夫したポイント
 ルール整理と出力安定化テンパーチャーを調整し、出力のブレを抑制
指示を的確にし、安定したプロンプトを作成

 入力テンプレートの設計選択肢を増やしすぎず、非デザイナーでも迷わない設計に
デザインスタイル・配色などは汎用性の高いものに絞り込み

 ナレッジファイルの整理「サービスの目的・意図 → 構成・UI要素の指示」という統一フォーマットで登録
AIが読み取りやすい情報整理を徹底

 苦労したところと改善の積み重ね最も大変だったのは出力の一貫性を出す作業でした。
出力ごとにUI生成結果を確認
曖昧な表現を精査
200件以上の出力サンプルを分析・修正
毎回、密と小林の2人で全件目視チェックしながらルールを微調整。この地道な改善の積み重ねが、最終的に安定した出力品質につながったと感じています。

 コンテスト発表と受賞社内AIコンテスト当日は、役員や他部門の前でプレゼンを実施。かなり緊張しましたが、Mockyの仕組みや出力サンプルを交えながら、実際の使い方や可能性を丁寧に説明できました。
審査員の方からは、
プレゼン構成のわかりやすさ
検証と改善プロセスの丁寧さ
デザイナーならではの視点
などを高く評価いただき、ビジネス部門の最優秀賞を受賞することができました。

 おわりにMockyはまだシンプルな仕組みですが、BizDevのメンバーからも「これなら自分でも使えそう」という声をいただきました。

今後はさらに、サービス種別ごとのナレッジ拡充など、拡張を検討中です。
本コンテストをきっかけに初めてAIツール構築に挑戦しましたが、やってみると想像以上に学びの多い経験となりました。非エンジニアでも少しずつ形にできた成功体験を活かし、今後もデザインの可能性を広げていきたいと思います！

 この記事を書いた人