ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

Kiro Web が公開されたので、コーポレートサイトを勝手にこそっとリデザインしてもらった

こんにちは、AWS グループの尾谷です。

今週、Kiro Web がプレビュー公開され、Kiro Pro / Pro+ / Power プランで利用できるようになったので、触ってみることにしました。
(無料の Free プランでは使えないのでご注意を)

ライトモードの Kiro が使えます!

触ってみようと思い立ったのですが、Kiro Web に作ってもらいたいものがすぐに思いつかず、会社のホームページを無断でリデザインしてもらうことにしました。

Kiro Web とは

リデザインを始める前に、Kiro Web の概要を簡単に説明します。

Kiro Web は、ブラウザから使える開発エージェントで、app.kiro.dev 上で動作します。IDE をインストールせずに、チャットでエージェントと相談しながらコードを書き、そのまま GitHub にプルリクエストを出すところまで一気通貫で進められるのが特徴です。

re:Invent 2025 で AWS の CEO Matt Garman 氏から「Kiro Autonomous Agent」として発表され、招待制のプレビュー期間を経て「Kiro Web」としてリネームされ、パブリックプレビュー公開となりました。

AWS re:Invent 2025 - Matt Garman CEO Keynote より

Kiro のラインアップ

Kiro が誕生してはや半年が経過しました。Amazon Q CLI が Kiro CLI になり、Autonomous Agent が Web になりと変化を重ねて、ラインアップが充実してきました。

Kiro IDE

Kiro Web

Kiro CLI

Kiro Powers

Kiro Web の使い方

Kiro Web の使い方は大きく 2 つのモードに分かれます。

  • インタラクティブモード (デフォルト)
    エージェントと対話しながら一緒に進めるスタイル。
    方針を議論し、コードを書いてもらい、納得できたタイミングで PR を出してもらう。
  • 自律モード (Autonomous mode)
    ゴールを渡すとエージェントが計画・実装・PR 作成までを自走。
    ユーザーはレビュー観点での介入に集中できる。

本ブログでは、Autonomous mode の「自律力」を検証しました。
結論から先に記載すると、かなり「自律」してくれます。
GitHub にプルリクエストまで上げてくれるので、開発タスクをある程度まとまった単位で委任できる、もう一人の開発メンバーが増えたような印象でした。

そのほか、今回使ってみて押さえておきたいと感じたポイントをまとめておきます。

  • GitHub 連携が前提
    Git への接続が前提で、現時点では GitHub のみに対応しています。リポジトリを選んでセッションを開始します。複数リポジトリにまたがる変更を 1 セッションでまとめて扱うこともできます。
  • サンドボックスで隔離実行
    各セッションはそれぞれ独立したサンドボックス環境で動き、Kiro がリポジトリをクローンして環境を構築します。
  • Steering ファイルで作法を共有
    コーディング規約やアーキテクチャ方針を Steering ファイルとして渡しておけば、毎回のセッション冒頭で自動的に読み込まれます。
  • MCP の制限
    現時点では Kiro Web の MCP は制限があり、公式ドキュメントでは Remote MCP servers は未対応で、local MCP servers のみサポートとされています。
  • プレビュー期間中の制限
    そもそも、プレビュー中は US リージョン (us-east-1) のみ提供で、機能やドキュメントは今後変わる可能性があります。

参考: Kiro Web 公式ドキュメント / Kiro Web 紹介ページ

はじめかた

それでは、Kiro Web を使ってみたいと思います。

https://kiro.dev/ にアクセスして、ナビゲーションから Web をクリックするか、https://kiro.dev/web に直接アクセスします。

そして、[Try Kiro Web] ボタンをクリックします。

Try Kiro Web

無料の Free プランでは使えず、以下のような画面が表示されます。

Free プランでは利用不可の画面

また、弊社のように Identity Center で利用している場合は、管理アカウントの Kiro Settings で Kiro Web を有効にしないと、プロンプト送信ボタンがグレーアウトして押せませんでした。

Identity Center の設定画面

MCP サーバーの設定

僕が Kiro IDE に設定している MCP サーバーを、Kiro Web のドキュメントを参照しながら設定してみました。

  • AWS MCP Server (GA になったマネージド版)
  • Draw.io MCP Server

MCP サーバーの設定画面

{
  "mcpServers": {
    "aws-mcp": {
      "command": "uvx",
      "args": [
        "mcp-proxy-for-aws@latest",
        "https://aws-mcp.us-east-1.api.aws/mcp",
        "--metadata",
        "AWS_REGION=ap-northeast-1"
      ],
      "env": {
        "AWS_ACCESS_KEY_ID": "${aws_access_key_id}",
        "AWS_SECRET_ACCESS_KEY": "${aws_secret_access_key}",
        "AWS_SESSION_TOKEN": "${aws_session_token}"
      }
    },
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp@latest"]
    }
  }
}

Kiro IDE ではプロファイル指定 (AWS_PROFILE) でローカルの ~/.aws を参照できますが、Kiro Web のサンドボックスではそれができません。代わりに環境変数/シークレットとして直接クレデンシャルを渡す必要があります。${key_name} 構文で Settings に登録した値を参照する仕組みです。

合わせて、クレデンシャルも設定しました。
Identity Center の一時クレデンシャルなので、有効期限が切れるたびに更新しないといけないのが少し不便です。

環境変数の設定画面

自律モードで実行

前置きが長くなりましたが、自律モードを試してみたいと思います。
まず、Kiro Web を実行するには GitHub リポジトリが必要なので、リポジトリを作成しました。

GitHub リポジトリの作成

僕は、Kiro Web が参照できる GitHub リポジトリを制限したので「Manage source control connection」から作成したリポジトリを追加しました。

Manage source control connection から追加

17:09 に自律モードで実行を開始しました。
Return キーを打つ度にプロンプトが送信されてしまうので、AWS にフィードバックを送りました。

自律モード実行中の画面

対象ページを次々に読み込み、設計方針の作成に進んでいきます。
大量にクレジットが消費されないか、ドキドキしました。

エージェントが作業している様子

ページを読み込んだあと、設計方針をまとめてくれました。
ここも確認は入らず、そのまま自動実行されていきました。

なお、Kiro Web で別のアプリケーションを改修した際には、確認が入ったので、完全に自動実行されるわけではなさそうです。

設計方針

約 8 分後の 17:17 に完了しました。思ったよりも早かったです。
そして、GitHub リポジトリにプルリクエストも送信してくれました。

タスク完了!

出来上がったページ

npm run dev を実行し、サイトを開きました。

正直な印象は「んー、ちょっと残念。」でした。
弊社のデザイナーが作り込んだ現行サイトと比べると、非常にシンプルな仕上がりでした。

かなりシンプルなサイトに!

会社名や住所も存在しない架空の情報に書き換えられていたので、プロンプトでもう少し具体的に指示を出すか、Steering ファイルで会社情報を渡しておく必要がありそうです。

とはいえ、プロンプトを 1 行書いただけで約 8 分でコーポレートサイトの雛形が出来上がり、PR まで作成されたのは驚きでした。実用的に使うなら、以下のような工夫をすると良さそうです。

  • Steering ファイルに会社情報やデザインガイドラインを記載しておく
  • URL を参照させるのではなく、既存サイトのスクリーンショットや画像、HTML を参考資料として渡す
  • 自律モードではなくインタラクティブモードで段階的に進める

クレジット消費量

最後に、今回の実行でどのくらいクレジットを消費したか確認しました。

実行前のクレジット残量

実行後のクレジット残量

コーポレートサイトのリデザインという膨大なコンテンツを読み込む複雑なタスクでしたが、12 クレジット程度しか消費していませんでした。

このクレジット消費は目安にはならないと考えます。
自律モードで一気に改修を続けていくとそれなりにクレジットを消費しそうです。コスト感を把握した上で、インタラクティブモードと使い分けるのが良さそうです。

まとめ

Kiro Web を使って、コーポレートサイトのリデザインを試してみました。

  • ブラウザだけで完結し、IDE のインストールが不要
  • GitHub 連携 → 自律モードで実行 → PR 作成まで一気通貫
  • MCP サーバーを設定すれば AWS リソースへのアクセスも可能
  • 約 8 分でサイトの雛形が完成し PR が作られた
  • クレジットの消費量も想定よりかなり少ない
  • とはいえ、作り込みは必要

作成された PR では、Next.js のページコンポーネント、スタイル定義、ダミーコンテンツが追加されていました。一方で、会社情報の正確性やブランドトーンの反映は不十分でした。これは Steering ファイルでの指定が必要と感じました。

プレビュー段階なので制限はありますが、「とりあえず動くものを素早く作る」用途には十分実用的だと感じました。Steering ファイルやプロンプトの工夫次第で、もっとクオリティの高い成果物が得られそうです。

一方で、MCP サーバーはサンドボックス内で実行されるとはいえ、設定した環境変数や Secrets にアクセスできるため、利用する MCP サーバーは信頼できるものに限定し、必要最小限の権限を持つ一時クレデンシャルを使うのが良さそうです。

今後 GA になってリージョンが増えたり、GitHub 以外の Git プロバイダーに対応したりすると、さらに使いやすくなりそうですね。