はじめに
上手な指示の書き方
思い描いたアプリを手に入れるために何を書くか。パーツに名前を付けること、一度に一つずつ変えること、指したいものを示すこと、そしてアプリが必ず守るルールについて説明します。
Setherionに何かを作らせるのに、文章が上手である必要はありません。ただし、何がほしいかをはっきり伝えることは必要で、何を変えたいかはさらにはっきり伝える必要があります。
以下はすべて、身につけておくと役立つ習慣であり、決まりではありません。必須のものはなく、ふつうの一文でも十分に伝わります。
何であるか、誰のためかを書く
最初の一文で、何が作られるかが決まります。読み取られるのは三つです。どんな種類のものか、何についてのものか、何が必要か。
| 避けたい書き方 | おすすめの書き方 |
|---|---|
| ウェブサイト | マンチェスターの歯科クリニックのウェブサイト。治療内容、料金、予約フォームを載せたい |
| 仕事用のアプリ | スタッフが終えた修理を記録するツール。日付で絞り込める一覧がほしい |
| ショップ | 手作りキャンドルを売るショップ。カートとカード決済つき |
| バンド向けの何かすてきなもの | ロックバンドのページ。次のライブ、フォトギャラリー、Spotifyへのリンクを載せたい |
ボックスの上にある、Website、Web App、Mobile App、Landing Page、3D Game、SaaSの行は、ボタン一つで同じ役目を果たします。あなたの一文が二つの種類のどちらにも読める場合に使ってください。「メディカルセンターのウェブサイト」は、患者さん向けのサイトにも、スタッフが業務で使う画面にもなりえますが、その印がどちらかを決めてくれます。
ほしいパーツに名前を付ける
アプリは、アイデアとして頼むより、パーツの一覧として頼むほうが簡単です。名前を挙げたものはすべて作られます。挙げなかったものは推測で補われます。その推測はたいてい妥当ですが、それでも推測です。
A landing page for a coffee shop, with the menu, the opening hours,
photos of the place, a map, and a form for table reservations各パーツの見た目を説明する必要はありません。「ギャラリー」で十分です。「コンピューターでは3列、スマートフォンでは1列のギャラリー」という指定は、すでに自動でそうなります。
一度に一つずつ変える
変更は今のアプリを基準に理解されるので、短くて構いません。「ヘッダーを暗くして」だけで、立派な依頼になります。
関係のない変更を一つのメッセージにまとめると、同じ変更を一つずつ順番に送るより、うまくいきにくくなります。しかも、結果がおかしかったとき、どの部分が原因なのか分かりません。別々に送りましょう。
すべてを一つにまとめたメッセージの代わりに、
Make the header dark, add a reservation button, change the font,
add a gallery and translate it into German三つに分けて送り、その合間にアプリを確認します。
Make the header dark
Add a Reserve a table button in the header
Add a photo gallery under the menuほしいものを頼み、ほしくないものを頼むのはやめましょう。「料金をもっと読みやすくしたい」は、やり方を決めずに任せる頼み方で、何が悪いのか自分でも分からないときに向いています。「料金の列を太字にして」は、何が悪いのか分かっているときの頼み方です。
指したいものを示す
「あのボタン」のような言葉だけでは何も伝わりません。場所を言葉で説明するより早い方法があります。
- プレビュー内のEdit:言葉や画像をクリックして直接変更できます。依頼は要りません。
- プレビューの上にあるボックスには、今見ているセクションの名前が表示され、ほかのセクションにも移動できます。依頼の中にセクション名を書くと、その部分の話だと伝わります。
- コードの中で数行を選び、メッセージと一緒に送ります。行はメッセージに添付されて届くので、「リストが空のとき、ここの動きがおかしいです」だけで足ります。
- コードをプレビューの隣に表示する(Split view)と、ポインターをオンにしてプレビュー内の何でもクリックできます。それを作っている行でファイルが開き、すぐに添付できます。コードをご覧ください。
- Codeビューの画像では、Drawで赤い印を付けて意図を示し、Add to chatで次のメッセージと一緒に送れます。
見せて伝える
ボックスの隣にある「+」から、画像やドキュメントなどを渡せます。
- Upload a file:スクリーンショットやデザインの写真を渡すと、それに似た見た目でアプリが作られます。メニュー、料金表、カタログをPDF、Word、テキスト、Markdown、CSV、JSONのファイルで渡すと、その中身が作り話ではなく、そのままアプリに入ります。あとでサムネイルをクリックすると、ビルダーがそれをどう解釈したか確認できます。
- Import from Figma:すでにあるデザインを使う場合、そのフレームの一つからアプリが作られます。Import from Canvaは、デザインのページを画像として取り込み、アプリの中に配置できるようにします。
- Import an app:ほかの場所で作ったアプリを、Lovable、Bolt、v0、Base44、GitHub、ZIP、スプレッドシートから取り込むと、Setherionがここで作り直します。これはダッシュボードにあります。アプリのインポートをご覧ください。
- Connectors:このアプリが使えるサービスです。決済やメールなどがあります。Skills:アプリに組み込む機能です。ログインや予約などがあります。コネクタとスキルをご覧ください。
- Connect your repo:ダッシュボードのGitHub projectの下にあります。GitHubに一度ログインすれば、有料プランでエディタからコードをプッシュできます。
エディタではメニューが少し違います。Upload file、Media AI(画像や動画を作ってアプリに配置します。メディアとデザインのツールをご覧ください)、Design(FigmaとCanva)、Connectors、Skillsです。
入力する代わりに話す
Buildボタンの隣にあるマイクは、話した内容を受け取ります。話すにつれて言葉がボックスに表示され、もう一度押すと止まります。読み返し、必要なら直して、送信してください。ブラウザー自身の言語で動作します。Build、Chat、Planをご覧ください。
見た目を言葉で説明するより、見せるほうが早いことがよくあります。自分のコンテンツを最初のビルドに入れる方法は、見せることしかありません。
ふだんの言葉で書く
話すように書いてください。Setherionは依頼がどの言語で書かれているかを読み取り、アプリもその言語で仕上がります。ボタン、見出し、ページ内の文言がその言語になります。
ルーマニア語、英語、スペイン語、フランス語、ドイツ語、イタリア語、ポルトガル語、オランダ語、ポーランド語のほか、中国語、日本語、韓国語、ロシア語、アラビア語、ヘブライ語、ギリシャ語の文字で書かれたものも認識されます。書いている言語とは別の言語でアプリがほしい場合は、そう伝えてください。依頼の最後に「英語で」と添えるだけで十分です。
アプリが必ず守るルール
毎回繰り返さなくてよいことがあります。エディタでは、モデル一覧の一番下にAI Controlsがあります。ボックスの隣にあるモデルのボタン、Autoと書かれたものを押してください。そこには二つの設定があります。
- Custom instructions:このアプリのすべてのビルドとすべての変更で守られるルールです。「ダークテーマを保つ」「オレンジは使わない」「価格はすべてポンドで」「文章は丁寧な言葉づかいで」などです。
- Freeze Files:何ものも触れてはならないファイルです。ちょうど思いどおりに仕上がったページを固定しておけば、次の変更で元に戻されることはありません。
どちらの詳細もAIの設定をご覧ください。
ほしいものがはっきりしないとき
そのための二つのモードがあります。
- Planは、ダッシュボードとエディタのBuildボタンの奥にあります。ファイルを一つも書く前に、いくつかの簡単な質問をし、アプリの全体図を見せてくれます。まだ考えきれていないものには向いています。Alt+Pで、メニューを開かずに次のモードへ切り替えられます。
- エディタのChatは、アプリについて話し合うだけで、コードには一切触れません。「このページに何を足しますか?」や「フォームが一番下にあるのはなぜですか?」と聞いても、アプリには何も起きません。
うまくいかなかったとき
うまくいかないと言うのではなく、何がおかしいのかを伝えてください。「フォームが送信されません」は報告です。「フォームは送信したと表示されるのに、何も届きません」なら、直せる内容です。
変更で悪くなった場合は、それも伝えてください。「その変更の前の状態にメニューを戻して」と言えば伝わります。
このページは役に立ちましたか?
