·8 分で読めます

Google Stitch プロンプト完全ガイド：入門からマスターまで

Google Stitch のために質の高いプロンプトを書く方法を詳しく解説。基本構文、応用テクニック、よくある間違いの避け方までを扱います。

S
Stitch Prompt Team
Content Team
Stitch プロンプトチュートリアル

Google Stitch プロンプトとは？

Google Stitch は Google が提供する AI 駆動の UI デザインツールです。従来のデザインソフトと異なり、Stitch は自然言語のプロンプトでインターフェースデザインを生成します。つまり、コンポーネントを手でドラッグ＆ドロップする必要はなく、欲しいものを言葉で説明すれば、AI がデザインを生成してくれます。

プロンプトの基本構造

優れた Stitch プロンプトは、通常次の要素を含みます。

1. プラットフォームの種類

まず、どのプラットフォーム向けにデザインするのかを明確にします。

  • モバイル：iOS または Android アプリ
  • Web：Web アプリケーションまたは Web サイト
  • ダッシュボード：データ分析や管理のバックエンド

2. 機能の説明

ページの主な機能を記述します。

  • ユーザー登録／ログインページ
  • 商品一覧の表示
  • ショッピングカートとチェックアウトのフロー
  • データビジュアライゼーションのダッシュボード

3. デザインスタイル

希望するビジュアルスタイルを指定します。

  • ミニマリスト
  • グラスモーフィズム
  • ダークモード
  • グラデーションネオン

4. レイアウト構造

ページのレイアウトを記述します。

  • 1 カラムのレイアウト
  • グリッドレイアウト
  • サイドバー＋メインコンテンツエリア
  • カードベースのレイアウト

実例：シンプルから複雑へ

基本のプロンプト

Design a mobile app login page

中級のプロンプト

Design a modern e-commerce mobile app homepage with:
- Search bar at the top
- Product grid with images and prices
- Bottom navigation with 4 tabs
- Clean white background with accent colors

応用のプロンプト

Design a professional SaaS analytics dashboard with:
- Sidebar navigation with logo and menu items
- Top bar with search, notifications, and user avatar
- Main content area with:
  - 4 KPI cards showing key metrics
  - Line chart for trends
  - Bar graph for comparisons
  - Data table with sortable columns
- Dark mode theme with blue accent colors
- Clean typography and ample whitespace

よくある間違い

❌ 曖昧すぎる

Design a nice app

✅ ちょうどよい

Design a mobile app for tracking daily water intake with:
- Circular progress indicator showing daily goal
- Quick add buttons for common bottle sizes
- History chart showing weekly trends
- Minimalist design with blue and white colors
- Bottom tab navigation

まとめ

優れた Stitch プロンプトを書く鍵は次のとおりです。

  1. プラットフォームと目的を明確にする
  2. 具体的な機能を記述する
  3. デザインスタイルを指定する
  4. 簡潔かつ完全に保つ

練習を重ね、この記事の例を参考にすれば、Stitch プロンプトの作成技術をすぐにマスターできます。

← ← ブログに戻る