エージェントを使った制作

AIエージェントに、作りたいサイトの内容や見た目を伝えて制作を進められます。ministaの設定やAPIは、エージェントがプロジェクト内の案内とCLIから確認できます。

ここでは作業フォルダーを用意し、制作を依頼して、表示を確認するまでを紹介します。

Table of Contents

• プロジェクトを用意する
• AGENTS.mdから使い方を確認してもらう
• 作りたいサイトを伝える
• 表示を確認して修正を依頼する
• 検査と問題の調査を依頼する

プロジェクトを用意する

Node.jsとnpmを使える環境を用意します。対応バージョンと確認方法ははじめるを参照してください。

ターミナルで次を実行し、最小構成のプロジェクトを作ります。すでにプロジェクトがある場合は、そのフォルダーを使えます。

npm create minista@latest my-minista-project -- --template minimal-ts
cd my-minista-project
npm install

使うエージェントの作業フォルダーにmy-minista-projectを指定します。ファイルを編集し、ターミナルでコマンドを実行できるエージェントを利用してください。

my-minista-project/
├── src/
│   └── pages/
│       └── index.tsx
├── AGENTS.md
├── package.json
├── tsconfig.json
└── vite.config.ts

AGENTS.mdから使い方を確認してもらう

テンプレートから作成したプロジェクトにはAGENTS.mdが生成されます。ministaの使い方を調べるコマンドや、構成・診断情報の確認方法をエージェントへ案内するファイルです。最初の依頼で、このファイルを読むよう伝えます。

エージェントはnpx --no-install minista agentsで、インストール済みバージョンに同梱されたガイドを取得できます。これを参照して、ページ、レイアウト、プラグインの使い方を確認します。

手動でセットアップしたプロジェクトなど、AGENTS.mdへministaの案内を追加する場合は、次を実行します。

npx --no-install minista agents --write

既存のminista管理ブロックを追加・更新し、それ以外の記述は保持します。コマンドの詳細はCLIのagentsを参照してください。

作りたいサイトを伝える

用途、必要なページ、掲載する内容、見た目、操作できる部分を伝えます。参考サイトや手元の画像があれば、それも指定すると具体的に依頼できます。

次の例を、作りたいサイトに合わせて書き換えてエージェントへ渡してください。

このフォルダーのministaプロジェクトで、制作スタジオのサイトを作ってください。

最初にAGENTS.mdを読み、npx --no-install minista agentsで
インストール済みバージョンの使い方を確認してください。

作りたいサイト：
- トップページ、私たちについて、お知らせ一覧の3ページ
- 白を基調に、濃い青をアクセントにしたシンプルなデザイン
- スマートフォンでも読みやすいレイアウト
- トップページにサービス紹介と、開閉できるFAQ
- 本文は日本語。原稿がない部分は仮の文章を入れてください

制作方針：
- 静的HTMLを基本にし、共通のヘッダーとフッターはレイアウトへまとめる
- 操作にJavaScriptが必要な部分へscriptを追加する
- Reactの状態やイベントが必要な部分にはIslandを使う
- 必要な機能に合わせてプラグインを追加する

制作後はページ構成の検査、TypeScriptの型チェック、ビルドを行い、
previewで表示や操作を確認してください。
確認結果と、ブラウザで開くURLを教えてください。

APIやCMSを使う場合は、取得先とデータの形も伝えます。認証情報は環境変数へ設定し、HTMLやブラウザ向けコードへ出力しないよう指示してください。

表示を確認して修正を依頼する

制作中の表示はnpm run devで確認できます。エージェントに開発サーバーを起動してもらい、案内されたURLをブラウザで開きます。

ページの文章、リンク、スマートフォンでの表示、ボタンなどの操作を確認します。修正を依頼するときは、対象のページと変えたい内容を具体的に伝えます。

トップページのサービス紹介を3列から2列にしてください。
スマートフォンでは1列にし、見出しと本文の間隔も少し広げてください。
FAQを開いたときに、ほかの項目は閉じるようにしてください。

本番用の出力はnpm run buildで生成し、npm run previewで確認します。修正後はもう一度ビルドしてからpreviewで確認してください。

検査と問題の調査を依頼する

エージェントには、変更内容に合わせて次の確認を依頼できます。

問題がある場合は、エージェントにinspect --jsonで現在の構成を確認してもらいます。agents --jsonでは、同梱ガイドや診断ファイルの場所を取得できます。コマンドの出力とエラーをもとに調査する手順はCLIを参照してください。

ビルドが通った後も、ブラウザで見た目と操作を確認します。エージェントがブラウザを操作できない場合は、自分で確認し、気になる箇所を伝えてください。

公開するファイルはdist/に生成されます。公開先の設定や確認方法はビルドとデプロイを参照してください。

次はプロジェクト構成で、制作したファイルの役割を確認できます。