職務内容を、1行ずつ。
この職種の求人票によくある業務を1行ずつ取り上げ、エージェントがどう進めるか、どこまで自分で進めるかを示します。
- 任せられる調査、読み込み、下書き、資料づくり。社外には何も出ません。
- 実行前に確認最後に送信・投稿・支払い・レコードの変更があるため、先にカードで確認します。
- 準備まで。判断はあなたあなたの判断が必要な業務です。エージェントは事実と提案を用意します。
- あなたの仕事電話、対面の打ち合わせ、署名、人間関係。
| # | 求人票の業務 | エージェントの進め方 | どこまで任せられるか |
|---|---|---|---|
| 01 | ウェブサイトやウェブアプリケーションのために、読みやすく、テストされたコードを書く。 | 自分のコンピューターでHTML、CSS、JavaScript、TypeScriptを書き、作ったものにテストを付け、テストとリンターを実行してから報告します。コードはブランチに置き、GitHubへのプッシュは許可を得てから行います。 | 任せられる |
| 02 | HTML、CSS、JavaScriptを使い、デザインをもとにレスポンシブなページや画面を作る。 | Figmaのファイルやスクリーンショットをもとに、MonstarXまたはコードでページを作ります。390、768、1,440ピクセルの幅で確認し、デザインと違う箇所を一覧にします。MonstarXのプロジェクトの作成と変更は、事前に確認します。 | 実行前に確認 |
| 03 | フロントエンドを、バックエンドのサービス、API、データベースと接続する。 | StripeやSupabaseなど、接続先のサービスのドキュメントを読み、エラー処理を含む呼び出しを書いて、自分のコンピューターでテスト用のキーを使って確認します。本番用のキーが必要な箇所を伝えるので、設定はあなたが行います。 | 任せられる |
| 04 | 複数のブラウザーと端末でテストし、不具合を見つけて修正する。 | 自分のデスクトップのChromeとFirefoxで、スマホ、タブレット、パソコンの幅ですべてのページを開き、リンクを押し、フォームを送信します。不具合を再現し、ブランチで修正して、修正前後の画面をお見せします。 | 任せられる |
| 05 | ページの表示速度とパフォーマンスを改善し、基本的な検索エンジン対策を行う。 | 自分のブラウザーで各ページの読み込み時間と容量を測り、画像を圧縮し、使われていないスクリプトを外し、ページタイトル、ディスクリプション、代替テキスト、サイトマップを整えます。改善前後の数値を報告しますが、スコアは約束しません。 | 任せられる |
| 06 | 本格的な開発の前に、デザイナーと試作品やモックアップを作ってアイデアを試す。 | Figmaのフレーム、手書きのスケッチ、短い説明文から、MonstarXで操作できる試作品を作り、デザイナーと共有できるプレビューのリンクを返します。「フォームを上に」のように言葉で修正を頼めます。制作のたびに事前に確認します。 | 実行前に確認 |
| 07 | ほかの開発者のコードをレビューし、バージョン管理で変更を管理する。 | GitHubのプルリクエストを自分のコンピューターに取り込んで動かし、レビューを書きます。動かない箇所、分かりにくい箇所、修正案です。コメントの投稿と自分のプルリクエストの作成は事前に確認し、マージはチームが行います。 | 実行前に確認 |
| 08 | 技術ドキュメントを作成し、最新に保つ。 | README、セットアップ手順、コンポーネントごとの説明、変更のたびの変更履歴を、リポジトリのコードの隣にファイルとして保ちます。コードを変えたときは、同じ作業の中で該当するドキュメントも更新します。 | 任せられる |
| 09 | 更新、新機能、修正を本番サイトに反映する。 | リリースノート、テスト結果、プレビューのリンクを用意します。MonstarXのプロジェクトは、公開されるアドレスを示したカードを許可すると公開されます。GitHubのコードはプルリクエストまで用意し、デプロイはこれまでの手順で行います。 | 実行前に確認 |
| 10 | サイトをバックアップし、セキュリティ更新とソフトウェア更新を適用する。 | 毎月、セキュリティ更新のあるパッケージやプラグインを一覧にし、リリースノートを読み、ブランチで適用してテストを実行します。変更の前に、最新のバックアップがあることを確かめます。本番サイトの更新は、事前に確認します。 | 実行前に確認 |
| 11 | 要件、範囲、優先順位を、クライアント、デザイナー、マネージャーと合意する。 | 打ち合わせのメモやメッセージをもとに、Google ドキュメントに要件を下書きします。ページ、機能、対象外とするもの、未決の点、項目ごとの工数です。クライアントと合意するのはあなたで、エージェントはその内容に沿って進めます。 | 準備まで。判断はあなた |
| 12 | プロジェクトで使う技術、フレームワーク、アーキテクチャを選ぶ。 | 2〜3の選択肢を1ページで比較します。たとえばMonstarXと、GitHubのリポジトリで管理する独自のコードです。それぞれの運用コスト、チームがすでに持っている知識、リスクをまとめます。選ぶのはあなたです。 | 準備まで。判断はあなた |
12項目のうち10項目をエージェントが担当（一部は承認後に実行）
業務内容の出典. この12項目は、ウェブ開発者やフロントエンド開発者の公開求人票に最もよく見られる業務を言い換えたもので、米国の職業情報データベースO*NETのウェブ開発者の業務一覧と照らして確認しています。 O*NET OnLineで確認: 15-1254.00 Web Developers
ウェブ制作AIエージェントの1週間
依頼内容とデザインを読み、不明な点を質問し、作り始める前に短い計画を返します。
報告された不具合、レビュー待ちのプルリクエスト、今週が期限のページを一覧にします。
レビュー待ちのプルリクエストを自分のコンピューターで確認し、レビューコメントを下書きして承認を求めます。
その週の変更をスマホ、タブレット、パソコンの幅でテストし、見つけた不具合をブランチで直します。
変更点、テスト結果、プレビューのリンクをまとめてリリースを準備します。公開は承認を待ちます。
セキュリティ更新のあるパッケージを一覧にし、ブランチで適用してテストを実行します。
初日に渡すもの
- コードへのアクセス：GitHubのリポジトリ、またはサイトのあるMonstarXのプロジェクト
- デザイン：Figmaのファイル、スクリーンショット、参考にしたいサイト
- ブランド素材と原稿：ロゴ、フォント、色、写真、各ページの文章
- 進め方：ブランチのルール、レビューの担当者、本番に反映するまでの手順
- サイトが使うサービスのテスト用キー。本番用のキーはあなたが管理します
- 訪問者がよく使うブラウザーと画面サイズ
あなたに残る仕事
- クライアントやマネージャーと合意する要件、優先順位、納期。
- 技術とアーキテクチャの選定。エージェントは比較資料を用意します。
- コードのマージと、公開するかどうかの判断。
- スマホやタブレットの実機でのテスト。エージェントは画面幅で確認します。
- 本番用のパスワードとキーの管理。
3ステップで迎え入れる
- 01
役割を書く
エージェントを作成して名前を付け、新しく入った開発者に説明するように仕事を伝えます。サイトの目的、コードの構成、レビューとリリースの進め方、壊してはいけないもの。求人票があれば貼り付けてください。
- 02
アクセスを渡す
MonstarXとの連携を一度許可し、GitHubやFigmaを使っている場合はあなた自身のアカウントで接続して、このエージェントが使えるように設定します。最初は読み取りから始め、リポジトリ、デザイン、サイトの構成を学びます。
- 03
最初の定期タスクを決める
明日の10時までに、ページ1枚か不具合の修正1件を、プレビューとテスト結果付きで頼みます。同僚の仕事と同じようにレビューし、毎週のレビューとリリースの定期タスクを決めます。
最初に頼むこと
- Figmaのデザインをもとに、Ridgeのローンチページを事前登録フォーム付きで作って。スマホの幅で確認して、公開の前にプレビューを見せて。
- サイトのお問い合わせフォームが、スマホで送信できません。再現して、ブランチで直して、修正前後を見せて。
- fieldwork-siteリポジトリのレビュー待ちのプルリクエストを確認して、コメントを下書きして。投稿の前に確認して。
- 毎月の第1月曜日に、セキュリティ更新のあるパッケージを一覧にして、ブランチで適用してテストを実行して。
仕事の様子を見る
サンプルの再生です。データは例で、早送りしています。一時停止、場面の移動、マウスの操作もできます。
画面に登場するツール
MonstarX
仕事を選ぶ。完成まで見届ける。
- 目的
- ローンチページを公開します。
- 操作先
- MonstarX・プロジェクト ridge-launch
- 実行されること
- このアドレスでページが一般公開されます。いつでも非公開に戻せます。
あなたのチーム。すべてにつながる。
山頂まで、あたたかい。
長い登りのための、500mlボトル。
架空のデータを使ったサンプルの再生です（早送り）。一時停止、場面の移動、マウスの操作もできます。
よくある質問
ウェブ制作のAIエージェントとは何ですか？
ウェブ制作のAIエージェントとは、ページの構築、外部サービスとの接続、テスト、不具合の修正、ドキュメントの作成といった開発者のデスクワークを担うAIです。Monmoのエージェントは、同じサブスクリプションに含まれるアプリビルダーのMonstarXと、専用のコンピューターの開発ツールを使って進め、公開の前に必ず確認を求めます。
AIエージェントはウェブ開発者の代わりになりますか？
デザインからのページ構築、テスト、不具合の修正、更新、ドキュメントの作成を引き受けます。クライアントとの要件の合意、アーキテクチャの選定、公開する内容への責任は担いません。成果物は人がレビューし、リリースのたびに承認します。開発者が、細かな作業の積み残しではなく、難しい課題に時間を使えるようにするために使われています。
MonstarXとは何ですか？使う必要がありますか？
MonstarXは、Monmoと一緒に使えるアプリビルダーで、1つのサブスクリプションで両方を利用できます。エージェントは依頼内容からサイトやアプリを作り、プレビューのリンクを返します。プロジェクトはあなたのMonstarXアカウントに残ります。利用量の枠は製品ごとに分かれています。すでにあるコードの場合は、自分のコンピューターでGitを使って作業します。
すでにあるサイトやコードの作業も頼めますか？
エージェントがコードを扱える状態であれば頼めます。サイトのコードがGitHubのリポジトリにある場合は、自分のコンピューターに取り込み、ブランチで変更を加え、サイトを動かして確認し、プルリクエストを用意します。コードのプッシュは事前に確認します。マージとデプロイは、これまでどおりの手順で行ってください。
確認なしに公開やデプロイをすることはありますか？
ありません。公開は必ず単独のカードで確認し、公開されるアドレスを明記します。MonstarXのプロジェクトの作成や変更、GitHubへのコードのプッシュ、本番サイトの更新も事前に確認します。コードを読む、自分のコンピューターで書く、テストを実行する、画面を撮るといった作業は、そのコンピューターの外に変更を加えないため、承認は要りません。
サイトのテストはどのように行いますか？
自分のブラウザーで、スマホ、タブレット、パソコンの幅で各ページを開き、すべてのリンクを押し、テスト用のデータでフォームを送信し、プロジェクトの自動テストを実行します。スマホの実機ではなく画面幅での確認なので、リリースを承認する前に、ご自身の端末でもプレビューを開いてください。それが最後の確認になります。