エージェントの進め方
- 01
依頼内容と素材を読む
何のためのページか、誰に向けたものか、訪れた人にしてほしいことは何かを伝えてください。Google ドライブにある原稿や写真、Figmaのデザインにある色、書体、レイアウトを読み取ります。
- 02
構成を決め、文章を書く
作り始める前に、短い構成案を送ります。セクションの順番、見出しの案を2つ、フォームの項目、登録後の流れです。構成案なら一言で直せますが、できあがったページの修正には手間がかかります。
- 03
MonstarXでページを作る
承認を得て、同じサブスクリプションで使えるアプリビルダーのMonstarXにプロジェクトを作り、プレビューのリンクができるまで進み具合を確認します。プロジェクトは、あなたのMonstarXアカウントに残ります。
- 04
3つの画面幅でプレビューを確認する
自分のブラウザーでプレビューを開き、スマホ、タブレット、パソコンの幅で確認します。すべてのリンクを押し、テスト用のアドレスでフォームを送信し、誤字や、文字切れ・重なりがないかを見ます。
- 05
見つけた問題を直す
よくある例は、幅360ピクセルのスマホで登録ボタンがメール欄に重なる、といった不具合です。修正案を示し、許可を得てプロジェクトに送り、3つの幅でもう一度確認して、修正前後の画面をお見せします。
- 06
プレビューを見て、修正を頼む
ご自身のスマホでもプレビューを開いてみてください。「見出しを変えて」「フォームを上に」「写真は2枚目を使って」のように、同僚に頼む感覚で伝えられます。修正のたびにプロジェクトへ反映し、確認し直します。
- 07
公開の前に確認する
カードには、ページが公開されるアドレスが書かれています。許可するとページが公開され、許可しなければ何も変わりません。公開後は、エージェントが実際のページを開き、表示とフォームの動作を確かめます。
最終的に手元に残るもの
- 公開されたページ。あなたが承認して初めて公開されます
- その前にご自身のスマホで開けるプレビューのリンク
- 確認の報告。スマホ・タブレット・パソコンの幅で試した項目と、直した点
- あなたのMonstarXアカウントにあるプロジェクト。あなたもエージェントも続きを作れます
確認を求めるとき
構成、原稿、確認の作業に承認は要りませんが、MonstarXでプロジェクトを作成・変更する前には承認を求めます。公開は必ず単独のカードで確認し、公開されるアドレスを明記したそのカードを許可するまで、ページは公開されません。
頼み方の例
- Ridgeのローンチページを、事前登録フォーム付きで作って。原稿と写真はドライブの「Ridge launch」フォルダ、デザインはFigmaにあります。スマホの幅で表示を確認して、公開前にプレビューを見せて。
- 見出しを「山頂まで、あたたかい。」に変えて、フォームを写真より上に移して。スマホの表示をもう一度確認して。
- 料金ページはGitHubのリポジトリfieldwork-siteにあります。新しい「チーム」プランを追加し、あなたのコンピューターでサイトを動かして確認して。プッシュの前に確認して。
仕事の様子を見る
サンプルの再生です。データは例で、早送りしています。一時停止、場面の移動、マウスの操作もできます。
画面に登場するツール
MonstarX
仕事を選ぶ。完成まで見届ける。
- 目的
- ローンチページを公開します。
- 操作先
- MonstarX・プロジェクト ridge-launch
- 実行されること
- このアドレスでページが一般公開されます。いつでも非公開に戻せます。
あなたのチーム。すべてにつながる。
山頂まで、あたたかい。
長い登りのための、500mlボトル。
架空のデータを使ったサンプルの再生です（早送り）。一時停止、場面の移動、マウスの操作もできます。
よくある質問
AIエージェントはウェブサイトを作れますか？
作れます。Monmoのエージェントは依頼内容を受け取り、原稿を書き、MonstarXでページを作り、スマホ・タブレット・パソコンの幅でプレビューを確かめ、見つけた問題を直します。あなたはプレビューを見て、ふだんの言葉で修正を頼み、公開を承認します。規模の大きなサイトは、1ページずつ、またはセクションごとに頼むと確認しやすくなります。
MonstarXとは何ですか？追加の料金はかかりますか？
MonstarXは、Monmoと一緒に使えるアプリビルダーです。1つのサブスクリプションで両方を利用できます。利用量の枠は製品ごとに分かれていて、ページの制作はMonstarX側の利用量に数えられます。最初に一度だけ連携を許可します。エージェントが作ったプロジェクトはあなたのMonstarXアカウントにあり、ご自身で開いて、チャットで続きを作ることもできます。
自社のブランドやデザインに合わせられますか？
デザインを共有していただければ合わせられます。エージェントはFigmaのファイルから色、フォント、余白、レイアウトを読み取ります。Figmaとの連携で読み取れない部分は、自分のブラウザーでFigmaを開いて確認します。ロゴや写真はGoogle ドライブから使います。制作後はページをデザインと見比べ、合わせきれなかった違いを一覧にするので、どうするかを決められます。
本当にスマホで表示を確認しているのですか？
スマホの実機ではなく、スマホの画面幅で確認します。エージェントは自分のブラウザーを360ピクセルや390ピクセルなどの幅に狭め、文字切れやボタンの重なりがないかを見て、フォームとすべてのリンクを試します。公開を承認する前に、ご自身の端末でもプレビューを開いてください。それが最後の確認になります。
すでにあるウェブサイトの修正も頼めますか？
エージェントがコードを扱える状態であれば頼めます。サイトのコードがGitHubのリポジトリにある場合は、自分のコンピューターに取り込み、ブランチで変更を加え、サイトを動かして確認し、プルリクエストを用意します。コードのプッシュは事前に承認を求めます。マージとデプロイは、これまでどおりの手順で行ってください。