Oikonです。
今月からモバイルアプリ開発にチャレンジしており、悪戦苦闘中です。
アプリケーションを開発する際には、要件定義やUIデザインなどを事前に決めることが多いです。今回はUIデザインのアイデア出しについて焦点を当てます。
個人的にモバイルアプリのデザインは門外漢なのでどうしようかと思っていました。UIモックアップの作成には以下のような手法があると思います。
UIモックアップの例:
- ペーパープロトタイピング: 紙とペンを使って画面レイアウトをスケッチ
- ワイヤーフレーム: 基本的な構造と配置に焦点を当てた簡素なデザインを作成 (Balsamiq, Draw.io)
- デザインツールモックアップ: 実際のアプリに近い見た目のデザインを作成する手法 (Figma, Sketch、Adobe XD)
モバイルアプリ開発の初学者だと具体的なアプリのUIモックアップに躓くことも多いです。Figmaなどを使えればいいですが、学習コストもあります。
アプリUIのアイデア出しだけでも上手い方法はないかと考えていたところ、先日GoogleがGemini 2.5 Flash Image (通称nano-banana🍌)をリリースしたため、これを使ってUIモックアップを作ろうと考えました。
今回はプロンプトエンジニアリング的な記事になりますが、nano-bananaの使い方の参考になれば幸いです。
Gemini 2.5 Flash Image (nano-banana)
Gemini 2.5 Flash Image (nano-banana)は、Googleが2025年8月26日にリリースした画像生成AIモデルです。
参考までにプロンプト集も引用しておきます。
Google公式プロンプト集
Nano-banana プロンプトリポジトリ
今回使用したプロンプト
今回使用したプロンプトでは、以下のようなUIモックアップの画像を生成できます。
プロンプトは以下のようなテンプレートです。ある程度カスタマイズ可能なものになっています。
プロンプトテンプレートは以下のように構成されています。プロンプトテンプレート自体はClaudeに作成してもらっています。
- 基本要件 (User Input required)
- 目的: iOSアプリのモックアップ作成
- 基本仕様: 4つのiPhone画面を横一列に配置
- 用途: ユーザージャーニーの完全な可視化
- 括弧 [ ] 内が入力プレースホルダー
- ユーザーカスタマイズセクション (User Input required)
- ユーザーが自由に変更できる変数部分
- アプリの機能、4つの主要機能、ビジュアルテーマ、ターゲット層を指定
- 括弧 [ ] 内が入力プレースホルダー
- ビジュアル仕様 (DETAILED VISUAL SPECIFICATIONS)
- 最新のiPhoneモデル（Dynamic Island搭載）
- 背景とライティング
- UI/UX要件 (UI/UX REQUIREMENTS)
- Apple公式のHuman Interface Guidelines準拠
- ネイティブiOSコンポーネント使用
- タイポグラフィとスペーシング
- 構成とスタイル (COMPOSITION AND STYLE)
- 4画面の水平配置
- カラーパレット
- 外観
- 出力形式 (OUTPUT FORMAT)
- Single cohesive figure, 4K resolution
- Professional presentation quality
テンプレートの1つ目()と2つ目()だけ入力すればそのまま試すことができます。英語のプロンプトの方がnano-bananaの出力が良いように個人的に感じたので英語のプロンプトです。
生成されたモバイルアプリUIモックアップのサンプル
いくつか実際に画像生成したアプリUIモックアップの例を紹介します。プロンプトは全文だと長いのでテンプレートのユーザー差し替え部分のみです。
フィットネスアプリ
カスタマイズプロンプト:
料理レシピアプリ
カスタマイズプロンプト:
財務管理アプリ
カスタマイズプロンプト:
まとめ
今回はモバイルアプリのUIモックアップで使えるアイデア出しのプロンプトを紹介しました。
このまま実用的なUIコンポーネントまで落とし込めるかはユーザー次第なところはありますが、nano-bananaをアプリのデザインアイデア出しに利用できるのは個人的に良いと思います。
nano-bananaはプロンプトを作り込むことで、ある程度一定の品質の画像生成ができることも今回分かりました。
この記事が参考になれば幸いです。
𝕏フォローしてくれると嬉しいです！
𝕏でも情報発信しているので、フォローしていただけると励みになります！