「デザインを先に」で作成の前に見た目を選ぶ
要点「プロジェクト」ページで「デザインを先に」をオンにして「作成する」を押します。1分以内に、完成品のような最初の画面が3案、それぞれ違うスタイルで、デスクトップとスマートフォンの両方で表示されます。さらに案を見る、バリエーションを見る、色・角・書体を微調整する、調整を頼む、といったことができます。気に入ったものでアプリを作成すると、アプリ全体がその見た目になります。
見た目を当て推量で決めた最初の作成は、一番やり直されやすいものです。デザインを先に は、何かを作る前に、アイデアの最初の画面を完成品の形で何案も見せます。高速な AI モデルが同時に描きます。気に入ったものを選べば、アプリ全体がその見た目で作られます。色、書体、角の形、写真の見せ方まで、選んだとおりです。
「デザインを先に」はどうやって使いますか？
Section titled “「デザインを先に」はどうやって使いますか？”-
プロジェクト ページで、プロンプト欄にアプリの説明を書きます。
-
デザインを先に をオンにします。ボタンがオレンジ色になり、入力欄の枠と 作成する も同じ色になります。入力欄の下のヒントは「Enter でデザイン」になります。
-
作成する を押します。デザインを先に のウィンドウが開きます。この時点ではまだ何も作成されていません。
-
画面が現れるのを見守ります。最初に描き終わったものが大きく表示され、ほかのものは下のサムネイルに並びます。サムネイルをクリックすると、その画面が大きく表示されます。
-
しっくりくるものがあれば、名前 を作成（たとえば City of Brookhaven を作成）を押します。その見た目でプロジェクトが作成され、最初の作成が始まります。
画面には何が表示されていますか？
Section titled “画面には何が表示されていますか？”- 上部 には、リクエストと時計が表示されます。描いているあいだは秒数、描き終わると 作成の準備ができました になります。
- 中央 には、1つの画面が大きく表示されます。どの画面もワイヤーフレームではなく完成したページで、あなたの言葉が使われています。サイト（人が訪れて、探したり予約したり買ったりする場所）はランディングページとして、ツール（仕事をするために開くもの）はメインの作業画面として、本物らしい内容で描かれます。
- サムネイル には、すべての画面がプロダクト名とスタイル名（「ソフトパステル」「クワイエットラグジュアリー」「スイスミニマル」など）付きで並び、「3 件完成 · 0 件描画中」のような数も表示されます。表示された画面は、まだ描いている途中でもすぐに選べます。
- デスクトップ / スマートフォン では、同じページをパソコンの幅で、またはスマートフォンの枠の中で表示します。どの画面も両方のサイズで使えるように描かれます。
最初の画面が現れるまで、中央には今何をしているかを伝える短いメモが表示されます（「リクエストを読んでいます…」「まだ何も作成していません。これは見た目だけです。」など）。サイトに写真が必要な場合、MonstarX は写真を一度だけ数枚描き、すべての画面で同じ写真を使います。
ほかの案も見られますか？
Section titled “ほかの案も見られますか？”- さらに 3 件 を押すと、別のスタイルのデザイン案が3つ追加されます（最初の案を見ているあいだに描かれています）。最大9案まで見られます。
- バリエーションを 5 件見る を押すと、中央の画面を5通りにスタイルを変えて描き直します。プロダクト、言葉、セクションはそのままに、「グラス」「インク」「ナイト」「エディトリアル」「シグナル」の5つの新しいスタイルになります。バリエーションは新しいセットとして開き、最初のサムネイルは元の画面です。セットは上部の矢印で切り替えます。バリエーションは1回のセッションで3回まで頼めます。
画面を変更するには？
Section titled “画面を変更するには？”微調整：AI を使わずにすぐ反映されます。中央の横のパネルで、ページ全体を一度に変えられます。
- メインカラー：画面そのものの色から始まる9色の見本、または好きな色を選べます。
- 角：角ばった、やわらか、丸い から選びます。
- 書体：10組の書体の組み合わせから選びます。
サムネイルもそれに合わせて変わり、作成にも微調整の内容が使われます。微調整をリセット を押すと元に戻ります。
調整：「もっと温かく」「もっと暗く」「緑 #2F6B4F を使う」のように変更を言葉で書いて、調整 を押します。選んだ画面があなたの変更を反映して描き直され、元の画面の隣に、頼んだ内容の説明付きで並びます。調整は1回のセッションで6回まで行えます。
作成するとどうなりますか？
Section titled “作成するとどうなりますか？”MonstarX は選んだ画面の名前でプロジェクトを作成し、添付ファイルをアップロードして、その画面（デスクトップとスマートフォンのサイズ）をプロジェクトのデザインとして保存し、最初の作成を始めます。作成はそのデザインに沿って進みます。
- 見た目（色、書体、角の形、ライトかダークか）は、アプリのすべてのページに引き継がれます。
- 見本に描かれたページ（サイトならホームページ、ツールならメイン画面）は、そのレイアウトと並び順に沿って作られ、作成中も見本と見比べながら進みます。
- ページと機能 は、これまでどおりあなたの説明から決まります。見本は1ページだけですが、アプリには頼んだものがすべて入ります。
- 見本の 写真 は、そのままアプリの画像になります。
チャットの最初のメッセージには、名前、スタイル、色が入った デザインを先に のチップが付きます。クリックすると、選んだ画面をデスクトップとスマートフォンの幅で、実物大で見られます。
スキップしたり閉じたりできますか？
Section titled “スキップしたり閉じたりできますか？”- スキップしてすぐに作成 は、見た目を選ばずに作成します。「デザインを先に」をオフにしたときと同じです。
- ウィンドウを 閉じる（×、Esc、または外側をクリック）と、先に確認が表示されます：「デザインを先にを閉じますか？このセッションのデザイン案、バリエーション、調整内容はすべて失われます。」説明とファイルは、プロンプト欄に残ります。
- 同じ説明のままページを 再読み込み すると、同じ画面がもう一度表示され、描き終わっていなかったものだけが描かれます。
キーボード：← と →、または 1〜9 で画面を切り替え、Enter で作成します。
「デザインを先に」はクレジットを使いますか？
Section titled “「デザインを先に」はクレジットを使いますか？”はい。画面を描くのは AI の作業なので、ほかのリクエストと同じようにご利用のプランから差し引かれます。使用量 には アプリ外 の「デザインを先に」として表示されます。使うモデルをあなたが選ぶわけではないので、プレミアムモデルの利用枠には一切カウントされません。すべてのバリエーションを見たセッションは、最初の3案から選んだセッションより多く使います。プランの残りがない場合、ウィンドウは画面を描けません。
よくある質問
Section titled “よくある質問”見本によって、アプリにどんなページがあるかが決まりますか？
いいえ。見本が決めるのは、見た目と、描かれた1ページのレイアウトです。ページと機能はあなたの説明から決まり、両者が食い違う場合は説明が優先されます。
ロゴや、好きなサイトのスクリーンショットを添付できますか？
はい。リクエストに添付した画像（最大3枚）はデザインを描くモデルに見せられ、そこから色や雰囲気を取り入れます。
「デザインを先に」が見当たらないのはなぜですか？
サインインした状態の プロジェクト ページのプロンプト欄にだけあり、ホームページにはありません。また、文章のない資料だけのリクエストは通常どおり作成されます。デザインのもとになる文を1つ書いてください。
作成の後で見た目を変えられますか？
はい。チャットで頼む（たとえば「ボタンを丸くして、緑をもっと濃くして」）か、編集モード を使ってください。
描かれた画面を開いても安全ですか？
はい。どの画面も表示する前にきれいにされます。スクリプトや外部のコンテンツは取り除かれるので、画面は表示することしかできません。