はじめての作業：週末の散歩の招待ページを作ろう

この章では、いよいよ手を動かします。練習するイベントは「週末さんぽ部」。速さは競わない、歩数も競わない、疲れたらちょっと座って休んでいい。そんな会です。

最後には weekend-walk というフォルダーができて、その中に index.html がひとつ入ります。HTML はウェブページのファイル形式のひとつです。今は、このファイルにはページの中身を保存でき、開いて見ることもできる、とだけ知っていれば大丈夫です。ページを専用のフォルダーに入れておくのは、第 7 章でそのままウェブサイト全体としてプレビューし、公開するかどうかを決められるようにするためです。

始める前に、2 つ準備しよう

まず Agent.Space を開いて、アカウントでログインします。このガイドはこのタブに残しておき、別のタブで操作しましょう。いつでもここに戻って確認できます。

次に、使える利用枠があるかを確認します。Agent.Space の支払い方法は 2 種類あります。プランと、使った分だけ払うクレジットです。新しく登録したアカウントには、たいてい「新規登録ボーナス」が付きます。これはまず従量課金のモデルに使えます。金額、有効期限、使えるモデルは、プロダクトの表示を確認してください。使える利用枠がないときは、まず手順全体を読み通しておきましょう。同じタスクを何度も送り直す必要はありません。

今回は画像もドメインも用意しなくていいですし、ソフトをインストールする必要もありません。イベント、場所、ルートは、すべて練習用の架空の素材です。

1. このための Workspace を作る

はじめてログインすると、Agent.Space から呼び名の入力と、いくつかの簡単な質問への回答をお願いされます。それが終わると、ウェルカムページに着きます。ここにはカードが 2 枚あります。「サンプルを見る」は読み取り専用のサンプルプロジェクトを開くので、まずほかの人が何を作ったのか見てみたいときに向いています。「Workspace を作成」が、今回進む道です。すでに Workspace があるなら、左上の Workspace の切り替えメニューから「Workspace を作成」を選んでも同じです。

「Workspace を作成」ウィンドウで、次の 3 つを入力します。

• 名前：最初は「マイ Workspace」になっているので、「週末さんぽ部」に変えます。
• クラウドコンピューターの場所：Agent のクラウドコンピューターと Workspace のファイルが置かれる地域です。タイムゾーンに合わせておすすめの地域が選ばれるので、たいていはそのままで大丈夫です。作成後は変更できません。
• タイムゾーン：最初はブラウザの設定に合わせてあります。メンバー全員と Agent が、このタイムゾーンを共有します。

「Workspace を作成」を押します。完了すると、左上にさっき入力した名前が表示されます。ここが、今回のプロジェクトの居場所です。

2. Agent と対応モデルを選ぶ

作成が終わると、ページがすぐに「どの Agent と始めますか？」と聞いてきます。その下に並ぶカードが、選べる Agent です。Codex が最初から選ばれていますが、Claude Code や、一覧にあるほかの今使える Agent に切り替えてもかまいません。

モデルは、入力欄の下にあるモデルのボタンで選びます。たいていは、Agent.Space が今使えるモデルを選んでおいてくれます。最初はそのままでもいいですし、利用枠のある対応モデルに切り替えてもかまいません。Agent とモデルの違いは、いつでも第 2 章で見直せます。

画面に「プランが必要」「クォータを使い切りました」「クレジット不足」と表示されたら、横のボタンからプランを選んだり、チャージしたりしましょう。モデルが対応していない、利用枠がない、サービスが一時的に使えない。この 3 つは対処のしかたが違うので、まず表示されている具体的な理由をよく読んでください。

3. 次のタスクを送る

あなたが送るタスクの依頼文は、Prompt（プロンプト）とも呼ばれます。下の文はそのままコピーして使えます。まずはこのとおりにやってみて、それから自分のイベントに書き換えましょう。

「週末さんぽ部」のために、日本語のイベント招待ページを作ってください。
これは架空の練習用イベントです。ページには「サンプルイベント」と明記してください。イベント紹介：週末にみんなでゆっくり歩きます。速さは競わず、疲れたら休んでかまいません。集合時間：土曜日の午後 3 時。これはあくまで例で、実際のイベントの日付ではないと書き添えてください。集合場所：すずかけ公園の南門（架空の場所）。ルート：南門に集合 → 湖沿いを散歩 → 芝生でひと休み。全体で約 90 分。持ち物：水、歩きやすい靴、帽子。雨の場合は延期します。参加のしかた：実際にイベントを開くときは、まず主催者に連絡して、具体的な日付と場所を確認してください。
ページは気軽でわかりやすく、スマホでも読めるようにしてください。集合時間と場所がひと目でわかるようにしてください。「参加のしかたを見る」ボタンを作り、押すとこのページの「参加のしかた」の部分へ移動するようにしてください。申し込み情報は集めず、ログイン、地図、外部の画像も使わないでください。
ページとそのスタイルは、Workspace の weekend-walk フォルダーに index.html というファイル名で保存してください。ほかのファイルや外部リソースに頼らず、コードをチャットに貼るだけで済ませず、まだ公開もしないでください。完成したら、内容がそろっているか、ボタンで正しく移動するかを確認し、ファイルの場所と見方を教えてください。確認しきれなかった点があれば、そのまま教えてください。

この依頼文では、目標、材料、完成のしかたを伝えています。少し細かいのは、あとで照らし合わせて確認できるようにするためで、Agent が特別な魔法の書式しか理解できないからではありません。文字を打つのが面倒なら、入力欄の「音声入力」を押して話すこともできます。話し終わったら、文字になった内容をひととおり確認しましょう。

4. 作業を見守りつつ、質問にも気をつけて

送信すると、Agent は今のフォルダーを読んだり、ファイルを作ったり、チェックを実行したりするかもしれません。ツールの名前や実行の記録が表示されるのは、ごく普通のことです。それは、Agent が今何をしているかの手がかりです。

返信の中で、どんな雰囲気がいいかを聞いてくることもあります。そのときは入力欄でそのまま答えれば大丈夫です。「シンプルに。友だちに見せる週末のお誘いみたいな感じで」。Agent がまだ作業中のときに送った内容は、いったんキューに入り、順番が来たら実行されます。

Agent によっては、ある操作を実行する前に「開始したユーザーの承認が必要です」という権限リクエストを表示します。ボタンの文言は、Agent 自身が用意したものです。何をしようとしているのか、何が対象なのかをよく見てから決めましょう。迷ったら「このリクエストをキャンセル」を選べます。今回のタスクの範囲は、招待ページを作って確認することだけです。

作業が終わったら、まずまとめに weekend-walk/index.html があるか、そしてどのチェックが済んでいて、どれがまだなのかを見ます。「完了」の表示だけを見て、ウィンドウを閉じてしまわないようにしましょう。

5. ファイルを見つけて開いてみる

Agent の返信にこのファイルのカードが出ていたら、押すと右側で開けます。左のサイドバーの「ファイル」から weekend-walk フォルダーを開き、index.html を押してもかまいません。HTML ファイルは、最初はプレビューとして開きます。コードを見たいときは「編集」か「分割表示」に切り替えましょう。

ここで見ているのは、ファイルのプレビューです。ページもスタイルもひとつのファイルに入っているので、すべてきちんと表示されます。もしチャットにコードを貼っただけで終わっていたら、こう付け加えましょう。

さっきのウェブページを、Workspace の weekend-walk/index.html に実際に保存してください。終わったら保存の結果を教えてください。ファイル一覧で見つけて開けるようにしたいです。

ファイルはあるのに開けないときは、画面に表示された具体的なエラーを Agent に伝え、「ファイルを開く」の段階で失敗したと説明しましょう。まず原因を突き止めてから、どう直すかを決めます。

6. まじめだけど細かすぎない検査係になる

ページの幅をスマホくらいまで狭めて、ひととおり読み、ボタンを押してみます。次の点を確認しましょう。

• イベント名、「サンプルイベント」の表示、時間、場所、ルート、持ち物リストがそろっている。
• 小さな画面でも文字がはっきり読めて、ページ全体を左右にドラッグしなくていい。
• 「参加のしかたを見る」で、ちゃんと参加のしかたの部分へ移動する。
• ページが、いつのまにか情報を入力させる申し込みフォームになっていない。

レイアウトがここでの説明とまったく同じでなくても、心配いりません。Agent が生成するデザインは毎回違うことがあります。まずは、これらの条件を満たしているかどうかで判断しましょう。

はじめてのウェブページが開けたなら、この章でいちばん大事なことはもう終わっています。次の章では具体的な場所をひとつ選んで直しながら、「なんだかちょっと物足りない」を、Agent が実行できる依頼に言い換える方法を見ていきます。