効果的なプロンプト

本ガイドでは、Stitch でアプリを設計・改善するための効果的なプロンプトの書き方を説明します。

プロジェクトの始め方

広い概念から始めても、具体的な詳細から始めてもかまいません。複雑なアプリは、ハイレベルなところから始めて、画面ごとに詳細を掘り下げていきましょう。

ハイレベルなプロンプトと詳細なプロンプト

まずは一般的なアイデアから始めます。

コア機能を説明すると、より良い出発点になります。

形容詞で雰囲気を決める

形容詞を使ってアプリの印象（色、フォント、画像に影響）を定義します。

画面ごとに反復してアプリを磨く

具体的で段階的な変更で磨く

Stitch は明確で具体的な指示で最も力を発揮します。1 つの画面／コンポーネントに集中し、プロンプト 1 回につき 1〜2 箇所の調整にとどめましょう。

• 具体的に： Stitch に何を、どう変えるかを伝えます。

特定の要素を対象に

特定の画面を対象に

具体的な視覚変更

ブランドテーマを参照

ログイン画面の主要なコールトゥアクションボタンを大きくし、ブランドのプライマリブルーを使うように変更します。

• 特定の画面／機能に集中する：
  • EC 詳細ページ： “Product detail page for a Japandi-styled tea store. Sells herbal teas, ceramics. Neutral, minimal colors, black buttons. Soft, elegant font.”
  • EC 詳細ページ： “Product detail page for Japanese workwear-inspired men’s athletic apparel. Dark, minimal design, dark blue primary color. Minimal clothing pictures, natural fabrics, not gaudy.”

望む画像を描写する

画像のスタイルや内容を導きます。

• 具体的な画像スタイル： “Music player page for ‘Suburban Legends.’ Album art is a macro, zoomed-in photo of ocean water. Page background/imagery should reflect this.”

アプリテーマの制御

色

特定の色を指定するか、カラーパレットのムードを描写します。

• 特定の色のプロンプト： "Change primary color to forest green."
• ムードベースの色プロンプト： "Update theme to a warm, inviting color palette."

フォントと境界線

タイポグラフィと要素のスタイル（ボタン、コンテナ）を変更します。

• フォントスタイルのプロンプト： "Use a playful sans-serif font." または "Change headings to a serif font."
• 境界線／ボタンスタイルのプロンプト： "Make all buttons have fully rounded corners." または "Give input fields a 2px solid black border."

デザイン内の画像を変更する方法

画像を変更するときは具体的に

変更する画像を明確に特定します。アプリのコンテンツにある説明的な用語を使いましょう。

• 一般的な画像を対象にする： "Change background of [all] [product] images on [landing page] to light taupe."
• 特定の画像を対象にする：

位置を定義

対象となる内容を説明

指示

「Team」ページの「Dr. Carter (Lead Dentist)」の画像：白衣を黒に変更します。

画像とテーマ変更を連動させる

テーマカラーを更新する場合は、画像もそれに合わせるべきかを明示します。

• プロンプト： "Update theme to light orange. Ensure all images and illustrative icons match this new color scheme."

アプリのテキストの言語を変更する

次のプロンプトを使います。

• プロンプト： "Switch all product copy and button text to Spanish."

Stitch のプロのヒント

• 明確かつ簡潔に： 曖昧さを避けます。
• 反復と実験： さらなるプロンプトでデザインを磨きます。
• 一度に大きな変更は 1 つ： 影響が見えやすく、調整しやすくなります。
• UI/UX キーワードを使う：（例：“navigation bar”（ナビゲーションバー）、“call-to-action button”（コールトゥアクションボタン）、“card layout”（カードレイアウト））。
• 要素を具体的に参照する：（例：“primary button on sign-up form”（登録フォームのプライマリボタン）、“image in hero section”（ヒーローセクションの画像））。
• 見直して修正する： 変更が適切でなければ、言い換えるか、より的を絞ります。