Stitch でデザインするための基本ガイド

Stitch へようこそ。今日はデザインから始めて、発想を広げる方法を学びます。大切なのは考えすぎないことです。

良いプロンプトと良いデザインの関係

発想する。 最も難しいのは空白のページを前にした瞬間です。より良いデザインをつくる最善の方法は、完璧な最初のプロンプトではなく、反復を重ねることです。シンプルな公式に従ってみましょう。

最初のプロンプト例

良い最初のプロンプトはこの公式に従います。

最初のプロンプトは完璧である必要はありません。ページに載せたい具体的な内容と全体的な雰囲気を説明しましょう。フォントの選択や 16 進数のカラーコードまで気にする必要はまだありません。Stitch がこの発想プロセスを手伝ってくれます。空白のプロンプトから抜け出して、創造の状態に入りましょう。

以下は一例です。

デバイスタイプの選択

アプリか Web か。まずはどちらかを選びましょう。最初からデバイスタイプで悩みすぎないでください。最初はどちらの形式が適しているか、直感で選んで構いません。反復の過程で、Stitch にはモードを相互に変換する方法が豊富にあります。

では、生成をクリックしましょう。

キャンバスの操作とナビゲーション

まずキャンバスに慣れましょう。

ホットキー

キャンバスとの主なやり取りは「選択」と「ナビゲーション」の 2 つのモードに分けて考えます。V キーで Select（選択）ツール、H キーで Pan（パン）ツールを切り替え、ドラッグでの素早いナビゲーションができます。キャンバスは広大なので、現在地を見失いがちです。そんなときは ⌘← / Ctrl+← で最も近い画面に移動できます。⌘→ / Ctrl+→ と ⌘← / Ctrl+← で画面を順に切り替えられます。

? を押すと、利用可能なホットキーの一覧を確認できます。

発想プロセスを始める

本当の発想プロセスは、デザインが現れてから始まります。最初の生成結果に対して、気に入る部分とそうでない部分がいくつか見つかるはずです。Stitch には、気に入らない部分を調整し、生成がうまくいった部分をさらに伸ばすためのツールがあります。

一度に大きな変更は 1 つだけ

変えたいことを 1 つだけ選びましょう。変更したい画面を選択し、Edit をクリックして Add to Chat し、プロンプトを書きます。何をどう変えるかを具体的に。 たとえば、料金表で最もお得なプランを強調したい場合：

特定のコンポーネントを対象に

具体的な視覚指示

UI/UX キーワード

料金表を更新して中央のカードを強調します。コンテナの高さを増やし、ドロップシャドウを追加します。隣接するカードの縮尺を下げて、明確な視覚的階層をつくります。

この公式を続けられます。変更点を 1 つ見つけ、UI/UX キーワードを使って明確で的を絞ったプロンプトを書き、生成します。

テーマを編集する

変更がデザインのコアテーマの範囲内であれば、Stitch にはそうした特定の変更をより速く行うための専用機能があります。

画面を選択し、Generate をクリックしてから Edit Theme を選択します。ここでは、ライト/ダークモードの外観、アクセントカラー、コンポーネントの角丸、フォントなど、テーマの核心的な要素を変更できます。

デザインからプロトタイプへ

デザインが望ましい状態になったら、少し試運転してみましょう。画面をクリックし、Generate をクリックしてから Prototype を選択します。スクロール可能でインタラクティブなプロトタイプが作成され、デザインが実際に動く感覚を確かめられます。

ここでは、静的デザインでは見えないインタラクティブな状態を確認できます。ボタン、リンク、カードなどのコンポーネントのホバースタイルを確認しましょう。テキストボックスにメッセージを入力し、想定される文字量に対して小さすぎたり大きすぎたりしないか確かめます。このプロトタイプが実際の現場でどう使われるかを考えましょう。そこから、これらの新しいインタラクティブ要素をもとに発想を続けます。

コードと画像をダウンロードする

デザインを実際に形にする準備ができたら、コードと画像をダウンロードします。Stitch は画像と HTML コードの両方の出力を生成します。

画面をクリックするか、エクスポートしたい画面をすべてドラッグして選択します。ダウンロードをクリックすると、zip ファイルがデバイスに保存され、さまざまなツールに統合して実現できます。

HTML はさまざまな形式に変換できる

HTML コードが変換のベースになることを理解しておくことが重要です。LLM は HTML と参照画像を組み合わせて、React、Angular、Vue などのコンポーネント形式や、Jetpack Compose、Flutter、SwiftUI などの非 Web プラットフォームに変換するのが得意です。

特定のコンポーネント形式の生成については、Build Strategies のセクションを参照してください。

発想を続けよう。創造を続けよう。

より良い結果を得る鍵は、効果的なプロンプトと発想です。しっくりくるデザインが見つかるまで、発想を続けましょう。