この記事の要点
デザイン初心者がGeminiでモックアップ作成！アイデアを形にする方法
デザインツール未経験でも、Geminiに相談しながらWebサイトやアプリのモックアップを作成。社内提案が劇的にスムーズになった中小企業の事例。
1. 支援前の課題
従業員12名の小売業G社では、社内システムの改善提案やWebサイトリニューアルの企画を行う際、「イメージを視覚化できない」という課題を抱えていました。
「言葉だけだと提案内容が伝わりにくい」
「デザインツールを使ったことがない」
「外注するほどの予算はない」
同社では、業務改善のアイデアは多く出るものの、それを視覚的に伝える手段がないため、経営層への提案が通りにくい状況でした。FigmaやAdobe XDなどのデザインツールは、学習コストが高く導入に至っていませんでした。
2. 行った施策
Geminiを活用して、アイデアを言語化し、モックアップの構成案やHTMLコードを自動生成する方法を導入しました。
Step 1：アイデアを言葉でGeminiに伝える
まず、作りたい画面のイメージをGeminiに伝えます。
「ECサイトの商品一覧ページのモックアップを作りたいです。カード型のレイアウトで、商品画像、商品名、価格、カートに入れるボタンがあるデザインにしてください。」
Step 2：HTMLコードを生成してもらう
Geminiに「HTMLとCSSでモックアップを作成してください」と依頼すると、すぐにコードが生成されます。これをブラウザで開くだけで、簡易的なモックアップが完成します。
Step 3：フィードバックを元に改善
「ボタンの色を青にして」「もう少し余白を広げて」など、修正点をGeminiに伝えるだけでコードが更新されます。デザインツールの操作を覚える必要がありません。
導入のポイント
- デザインツールの学習不要
- 言葉でイメージを伝えるだけでOK
- 修正も会話形式で簡単
- 生成されたコードは実際の開発にも流用可能
3. 施策後の成果
これまで作成できなかったモックアップが、30分〜1時間で作成可能になりました。視覚的な資料を添えることで、提案書の採用率が2倍以上に向上しています。
「イメージを形にできるようになった」「経営層との議論がスムーズになった」「デザイナーに頼まなくても提案できるようになった」
4. まとめ
モックアップ作成は、これまでデザイナーやエンジニアの専門領域でした。しかしGeminiを使えば、デザインツールを学ばなくても、アイデアを視覚化できます。
- 言葉で伝えるだけ：デザインツールの操作不要
- 会話形式で修正：細かい調整も簡単
- 実装にも流用可能：生成されたコードは開発に活用できる
- コスト削減：外注費用を大幅に削減
「こんな画面があったらいいな」というアイデアがあれば、Geminiに相談してみてください。驚くほど簡単に形にできます。
この事例で確認した実務ポイント
対象業種: ITサービス業
支援の観点: 業務フローの棚卸し、既存ツールの整理、現場で使い続けられる運用設計、導入後の定着確認。
同じ課題に向く企業: IT担当者が不在、紙や表計算での管理が限界、AIや自動化を試したいが社内だけでは進めにくい企業。