バラバラなモバイル画面をクリーンなUIスタイルガイドに変換する
まとまりのないモバイルアプリの画面から、シンプルなスターターUIスタイルガイドを作成します。

プロンプト概要
注目のAIパートナー
あなたへのヒント
スタータースタイルガイドは、選択肢を増やすのではなく、減らすためのものです。目標は、次の画面のデザインを容易にし、一貫性が損なわれにくくすることです。
運用チームよりNexusAi Technology解決する課題
多くのデザイナーやファウンダーは、基本的な視覚ルールを定義する前にいくつかの画面を作成してしまいます。その結果、個々の画面はそれなりに見えても、アプリ全体としてランダムな印象を与えてしまいます。このプロンプトは、既存の画面を次のデザインフェーズに活用できるシンプルなスタイルガイドに変換します。
スタータースタイルガイド
雑然としたUIの方向性を、シンプルな視覚的ルールに変換します。
コンポーネントに適したルール
ボタン、インプット、カード、タイポグラフィを再利用可能な方法で定義します。
初心者向けFigmaチェックリスト
一貫性を素早く確保するために、Figmaで最初に作成すべきものを示します。
AIプロンプト指示
あなたは、初期段階のファウンダーやデザイナーが、既存の画面からクリーンなビジュアルスタイルガイドを作成するのを支援するモバイルアプリUIデザイナーとして振る舞ってください。
私は自分のモバイルアプリの画面を説明、またはアップロードします。あなたのタスクは、アプリが複雑になりすぎることなく、より一貫性を感じられるようになる軽量なUIスタイルガイドを作成することです。
アプリのコンテキスト:
- アプリ名: [アプリ名を挿入]
- アプリのタイプ: [アプリのタイプを挿入]
- ターゲットユーザー: [ユーザーを挿入]
- 利用可能な画面: [画面リストを挿入]
- 現在のスタイル: [現在のスタイルを説明]
- ターゲットとする印象: [プレミアム / クリーン / フレンドリー / ボールド / 落ち着いた / 遊び心のある / プロフェッショナル]
- ブランドカラー(あれば): [カラーを挿入]
以下のセクションを含む、シンプルなUIスタイルガイドを作成してください:
1. 視覚的な方向性
アプリが従うべき全体的なルック&フィールを説明してください。
2. カラーのルール
プライマリ、セカンダリ、背景、サーフェス、ボーダー、サクセス、ワーニング、エラーカラーの使い方を提案してください。カラーを多くしすぎず、シンプルに保ちます。
3. タイポグラフィのルール
見出し、本文、ラベル、ボタン、キャプションの使い方を定義してください。
4. ボタンとインプット(入力欄)のルール
プライマリボタン、セカンダリボタン、非活性(disabled)状態、入力フィールド、およびフォームのスペーシールールを定義してください。
5. カードとレイアウトのルール
カードの角丸(radius)、シャドウの使い方、間隔のリズム(レイアウトグリッド)、セクションのパディング、および画面レイアウトの一貫性を定義してください。
6. アイコンとイラストのルール
アイコンやイラストを一貫して使用する方法を説明してください。
7. Figmaセットアップチェックリスト
スタイルと再利用可能なコンポーネントを使用して、Figma内でスタイルガイドを作成するためのチェックリストを提示してください。
ガイドは、初心者が簡単に適用できるよう、シンプルで実用的なものにしてください。
期待される成果
視覚的な方向性、カラーのルール、タイポグラフィのルール、ボタン/入力欄のルール、カード/レイアウトのルール、アイコンのガイダンス、およびFigmaセットアップチェックリストを含む、軽量なモバイルUIスタイルガイド。
実装ステップ
ChatGPT、Claude、またはGeminiでスターターガイドを生成する
promptTextに、アプリのタイプ、スクリーンショットまたは画面の説明、現在のスタイル、および希望する印象を入力して貼り付けます。すぐに適用できるシンプルなUIスタイルガイドが出力されます。
6–10分Figmaでスタイルとコンポーネントを作成する
出力を、Figmaのカラースタイル、テキストスタイル、ボタンコンポーネント、インプットコンポーネント、カードコンポーネント、およびレイアウトスペーシールールに反映させます。
30–60分まず1つの画面でガイドをテストする
アプリ全体を更新する前に、まず既存の1つの画面にスタイルガイドを適用します。その後、更新された画面と元の画面を比較し、スタイルがよりクリーンで再現しやすくなったか確認します。
20–30分
