AI 実務活用ハンズオン
はじめる前に
ハンズオンをスムーズに進めるために、サンプルデータのダウンロードと基本操作を学びます。
準備の流れ
まず以下のステップで、ハンズオンを始められる状態まで持っていきます。
00事前セットアップ 参加前に完了済みの前提
利用する Kiro IDE または Claude Desktop がインストール済みで、すでにログイン状態で開かれていることを確認してください。完了していない場合は、以下の事前セットアップ手順を参照してセットアップしてください。
- Kiro をご利用の方: Kiro セットアップ手順
- Claude Desktop をご利用の方: Claude Desktop セットアップ手順
01サンプルデータをダウンロード 初回のみ
ハンズオンで使うサンプルデータを下のボタンからダウンロードします。
解凍してデスクトップに配置してください。
handson-sample/ の中はこんな構成になっています。
handson-sample/
├── sample-data/ ← 演習で使うデータ一式
│ ├── 01_sales-data/ ← 演習01-02:売上データ
│ ├── 03_messy-downloads/ ← 演習03:散らかったファイル群
│ ├── 04_documents/ ← 演習04:社内文書 10 ファイル
│ └── 05_osaka-business-trip-2026-04/ ← 演習05:領収書画像
└── output/ ← 演習の成果物の保存先
sample-data/:各演習で AI に渡すサンプルデータが入っています。output/:演習の中で AI が生成する成果物の保存先です。最初は空です。
02作業フォルダを指定する 初回のみ
デスクトップに配置した handson-sample/ を作業フォルダに指定します。一度設定すれば、ハンズオン中はそのまま使えます。
使うツールに合わせて以下のタブを切り替えてください。
-
Cowork を起動してプロジェクトで作業を選ぶ
アプリを立ち上げ、画面左上のタブで Cowork を選択します。続いて、入力欄の下にある プロジェクトで作業 ボタンを押します。
-
handson-sample フォルダを指定する
解凍した
handson-sample/(デスクトップ配下)を選択して「Select folder」を押します。
-
ファイル変更の許可をする
以下のダイアログが表示されたら、常に許可 を選びます。
-
プロンプトを入力して送信する
AI への指示(例:このフォルダの中身を見て)を入力欄に貼り付け、右側の送信ボタンを押します。
-
結果が返ってくることを確認する
AI の回答を確認します。
handson-sample/の構成と各ファイルの中身が要約されて表示されれば成功です。
-
Claude Desktop を起動して Code を選ぶ
アプリを立ち上げ、画面左上のタブで Code を選択します。続いて、入力欄の上にあるフォルダ指定ボタンを押します。
-
handson-sample フォルダを指定する
解凍した
handson-sample/(デスクトップ配下)を選択して「Select folder」を押します。
-
このワークスペースを信頼する
以下のダイアログが表示されたら、ワークスペースを信頼する を押します。
-
プロンプトを入力して送信する
AI への指示(例:このフォルダの中身を見て)を入力欄に貼り付け、右側の送信ボタンを押します。
-
結果が返ってくることを確認する
AI の回答を確認します。
handson-sample/の構成と各ファイルの中身が要約されて表示されれば成功です。
-
Open a project を押す
Kiro の Getting started 画面で Open a project ボタンを押します。
📌 すでに別のプロジェクトを開いている場合
Getting started 画面は表示されません。代わりに、メニューバーの File → Open Folder... を選びます。
-
handson-sample フォルダを指定する
解凍した
handson-sample/フォルダを選んで開きます。
-
このフォルダを信頼して開く
以下のダイアログが出たら、チェックボックスにチェックを入れて Yes, I trust the authors を押します。
-
プロンプトを入力して送信する
AI への指示(例:このフォルダの中身を見て)を入力して送信します。
-
結果が返ってくることを確認する
AI の回答を確認します。
03新しい会話を始める 演習ごとに
演習を 1 つ終えるごとに、AI との会話を新しく切り替えてから次の演習に進みます。前の演習のやり取りが残ったまま次のお願いをすると、AI が前の演習の内容を引きずって、思わぬ動き方をすることがあります。
-
New task を押す
左サイドバーにある + New task を押すと、新しい会話に切り替わります。
-
New session を押す
左サイドバーにある + New session を押すと、これまでのやり取りがクリアされ、入力欄が空の状態になります。フォルダ指定(
handson-sample)は維持されたまま、会話だけが切り替わります。
-
新しいセッションを開く
チャットパネル上部の「+」アイコン(New Session)を押すと、空の新しい会話タブが開きます。フォルダ(ワークスペース)はそのまま、会話だけが切り替わります。
04(オプション)自動承認モード ハンズオン用に有効化
AI はファイル変更やコマンド実行のたびにひとつずつ確認を取り、意図しない操作を防ぎます。ここには「安全性」と「操作感」のトレードオフがあります。今回はハンズオンをスムーズに進めるため、この確認を外す設定を紹介します。
Cowork には、すべての操作を一括で自動承認する設定はありません。利用するツールごとに、「必ず確認する : ask」か「自動承認 : allow」の設定ができます。Claude Desktop のサードパーティ推論の設定から設定できます。詳細はこちらの手順書をご覧ください。
設定例:MCP サーバー brave-search のツールポリシーで brave_web_search を allow に設定している画面
-
モードメニューを開いて「有効にする」を押す
チャット下部の 編集を承認 をクリックしてモードメニューを開き、許可をバイパス の右にある 有効にする リンクを押します。設定画面が開きます。
-
「バイパス権限モードを許可」をオンにする
設定画面の バイパス権限モードを許可 のトグルをオンにします。設定が反映されたら、左上の ← 設定 からチャット画面に戻ります。
-
モードメニューから「許可をバイパス」を選ぶ
もう一度 編集を承認 を押してモードメニューを開き、許可をバイパス を選択します。
-
確認ダイアログで「権限のバイパス」を押す
「すべての権限をバイパスしますか?」というダイアログが出るので、権限のバイパス を押します。
-
有効化されたことを確認する
チャット下部に 許可をバイパス が表示されていれば有効化完了です。
Kiro は 権限設定ファイル(permissions.yaml)で自動承認を設定できます。ここでは PowerShell にコマンドを貼り付けて設定ファイルを作成します。
なお、この設定はハンズオンをスムーズに進めるためにすべての操作を許可する内容になっています。ハンズオン後により本格的に活用する際は、許可する操作を絞るなどセキュリティ設定に気をつけてご利用ください。
-
PowerShell を起動する
タスクバーの検索欄に
powerと入力し、検索結果の Windows PowerShell をクリックします。
-
PowerShell が開いたことを確認する
黒いウィンドウが開き、
PS C:\...>のような表示が出ていれば OK です。
-
コマンドをコピーして貼り付け、Enter を押す
以下のコマンドを コピー ボタンでコピーし、PowerShell のウィンドウ内で右クリック(または Ctrl + V)で貼り付けて Enter を押します。
New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.kiro\settings" | Out-Null $path = "$env:USERPROFILE\.kiro\settings\permissions.yaml" if (-not (Test-Path $path)) { @' rules: - capability: mcp effect: allow match: - chrome-devtools/* - capability: all effect: allow '@ | Set-Content -Path $path -Encoding ascii Write-Host "設定完了: $path" } else { Write-Host "既存のファイルがあるためスキップしました: $path" } -
警告が出たら「強制的に貼り付け」を押す
複数行のテキストを貼り付けると警告ダイアログが表示されることがあります。強制的に貼り付け を押して続行してください。「設定完了: ...」と表示されれば完了です。以後、Kiro の操作は確認ダイアログなしで進みます。すでに設定ファイルがある場合は上書きせず「既存のファイルがあるためスキップしました: ...」と表示されます。
-
設定ファイルの中身を確認する
以下のコマンドを貼り付けて Enter を押し、
rules:以下の設定内容が表示されれば設定完了です。Get-Content "$env:USERPROFILE\.kiro\settings\permissions.yaml"
演習マップ
| # | テーマ | 使うデータ | 出力 |
|---|---|---|---|
| 第Ⅰ部 AI を体験する | |||
| 01 | ダッシュボードでデータを可視化しよう | sample-data/01_sales-data/ | output/01_dashboard.html |
| 02 | データからプレゼン資料を作ってみよう | sample-data/01_sales-data/ | output/02_sales-review.pptx |
| 03 | 散らかったファイルを整理しよう | sample-data/03_messy-downloads/ | (同一フォルダ) |
| 04 | 大量の文書を経営報告資料にまとめよう | sample-data/04_documents/ | output/04_briefing.docx |
| 05 | (オプション)画像からデータ入力しよう 【応用編】 | sample-data/05_osaka-business-trip-2026-04/ | (ブラウザ操作) |
| 第Ⅱ部 AI を活用する | |||
| 06 | 自分だけのアプリを作ってみよう | 作りたいもの | オリジナルアプリ |
AI を体験する
01ダッシュボードでデータを可視化しよう
シナリオ
あなたは経営企画部の担当者。部長から「来週の経営会議までに、東日本と西日本の売上をまとめて、カテゴリ別の月次売上を出しておいて。あと、ついでに見栄えのいいダッシュボードにしてくれると助かるな」と頼まれました。共有フォルダを開くと、次の 3 ファイルがあります。
- 東日本支店から届いた売上 CSV
- 西日本支店から届いた売上 CSV
- 商品マスタ CSV
中を覗いてみると、カラム名や日付の書き方が支店ごとにバラバラで、そのままでは統合できなさそう。仕方ない、統合からダッシュボード作成まで、AI アシスタントに一気に任せてみましょう。
📂 CSV ファイルの中身をチラ見
商品マスタ.csv(10商品)— 商品コード・商品名・カテゴリ(飲料/食品/日用品/家電)・単価
商品コード,商品名,カテゴリ,単価
P001,プレミアム緑茶 500ml,飲料,150
P002,ミネラルウォーター 2L,飲料,180
P003,オーガニックコーヒー豆,飲料,1200
…(全10商品)
売上_東日本.csv(45件)— 東京本店・横浜・札幌・仙台
日付,支店,商品コード,数量,売上金額
2026-04-03,横浜支店,P001,1,150
2026-04-03,札幌支店,P007,20,11600
…
売上_西日本.csv(50件)— 大阪・京都・神戸・広島・福岡
計上日,支店名,商品ID,販売数,金額(円)
2026/04/01,福岡支店,P003,13,15600
2026/04/01,大阪支店,P010,8,52000
…
東日本と西日本で カラム名(日付 vs 計上日、支店 vs 支店名…)や日付形式(2026-04-03 vs 2026/04/01)がバラバラ。これを AI が統合してくれます。
AIへの指示(プロンプト)
sample-data/01_sales-data/ の3つのCSV(東西の売上と商品マスタ)を統合して、KPIや東西比較が一目でわかる経営会議向けのHTMLダッシュボードを output/01_dashboard.html として作ってください。
答え合わせ:こんなアウトプットが出ます
生成された output/01_dashboard.html の例
おさらい:AI がやってくれたこと
- 支店ごとの書式の揺れ(カラム名・日付フォーマット)を自動で吸収して、3 ファイルをきれいに統合
- 商品マスタと突合してカテゴリ別売上を集計
- KPI カード・カテゴリ別売上の棒グラフ・東西比較の円グラフ・TOP5 商品テーブルを盛り込んだ
output/01_dashboard.htmlを生成(ブラウザで開くだけで動く)
02データからプレゼン資料を作ってみよう
シナリオ
HTML ダッシュボードを部長に見せたら、「いいね、これそのまま経営会議にも持っていきたい。ただ、会議室のスクリーンに映すならパワポの方が扱いやすいから、スライドにしてくれない?」と追加のお願いがありました。さっき作ったダッシュボードの切り口がそのまま使えそうなので、AI アシスタントに引き続き頼んで、同じ内容をプレゼン資料に組み直してもらいましょう。
AIへの指示(プロンプト)
sample-data/01_sales-data/ の3つのCSV(東西の売上と商品マスタ)を統合・集計して、経営会議向けのプレゼン資料を作成してください。
【スライド構成】
- ① タイトル(2026年4月度 月次売上レビュー)
- ② 全社サマリー(売上合計・取引件数・平均単価のKPI)
- ③ カテゴリ別売上ランキング(棒グラフ+簡単な所感)
- ④ 東日本 vs 西日本の地域比較(円グラフまたは横棒)
- ⑤ 売上TOP5商品
- ⑥ 来月に向けた提案事項(3点)
PowerPointファイル(.pptx)として作成し、output/02_sales-review.pptx として保存してください。
答え合わせ:こんなアウトプットが出ます
生成された output/02_sales-review.pptx の例
おさらい:AI がやってくれたこと
- 指定した 6 章立て(タイトル / KPI / カテゴリ別 / 東西比較 / TOP5 / 提案事項)に沿ってスライドを構成
- 「来月に向けた提案事項」にはデータから読み取れる具体的なアクションを提案し、
output/02_sales-review.pptxとして保存
03散らかったファイルを整理しよう
シナリオ
「ちょっと置いておく」を繰り返した結果、自分のデスクトップが議事録・予算表・企画書・スクショ・メモ書きで埋め尽くされていました。「Screen Shot 2025-12-08 at 3.14.22 PM.txt」のような、開かなければ中身がわからないファイル名も山ほど。手で 1 つずつ片付ける気力もないので、AI アシスタントに任せて、いい感じに仕分けてもらいましょう。
実際のフォルダの中身はこんな感じです。種類も命名規則もバラバラで、開かないと何のファイルかわかりません。
AIへの指示(プロンプト)
sample-data/03_messy-downloads/ 内のファイルを、内容や形式に応じてサブフォルダに整理してください。ファイル名がバラバラなものは、先頭に日付を置く形式にリネームしてください。実行前と実行後のディレクトリ構成を表示してください。
答え合わせ:こんなアウトプットが出ます
整理前の 03_messy-downloads/(種類も命名もバラバラのまま)
03_messy-downloads/ ├── budget_v3.csv ├── chart_export.csv ├── draft_v2.md ├── export_2026.csv ├── IMG_2034.txt ├── inventory_FINAL.csv ├── logo_v2.txt ├── meeting_notes.txt ├── memo.md ├── photo.md ├── presentation_v3.md ├── proposal_final.md ├── q1-numbers.csv ├── random_thoughts.txt ├── scratch.txt ├── Screen Shot 2025-12-08 at 3.14.22 PM.txt ├── screenshot_2026-01-15.txt ├── slides_draft.md ├── team-offsite.md └── todo.txt
整理後の 03_messy-downloads/(カテゴリ別に仕分け+日付プレフィックスでリネーム)
03_messy-downloads/
├── documents/
│ ├── 2026-01-10-draft.md
│ ├── 2026-02-15-memo.md
│ ├── 2026-02-20-slides-draft.md
│ ├── 2026-02-22-photo.md
│ ├── 2026-02-team-offsite.md
│ ├── 2026-03-02-proposal-final.md
│ └── 2026-03-10-presentation.md
├── data/
│ ├── 2026-01-budget.csv
│ ├── 2026-02-inventory.csv
│ ├── 2026-03-q1-numbers.csv
│ ├── 2026-chart-export.csv
│ └── 2026-export.csv
└── notes/
├── 2025-12-08-slack-screenshot.txt
├── 2026-01-12-meeting-notes.txt
├── 2026-01-15-error-screenshot.txt
├── 2026-02-08-todo.txt
├── 2026-02-22-whiteboard-photo.txt
├── 2026-03-04-random-thoughts.txt
├── logo-v2-memo.txt
└── scratch.txt
整理後のフォルダの様子(実際の画面)
おさらい:AI がやってくれたこと
- デスクトップの中身を、AI が内容ごとにサブフォルダに整理
Screen Shot 2025-12-08 at 3.14.22 PM.txtのようなファイル名も、2025-12-08-slack-screenshot.txtのように揃えてリネーム
04大量の文書を経営報告資料にまとめよう
シナリオ
来週、部長に「今うちの組織で何が起きているか」を報告しないといけません。手元には週次議事録・顧客ヒアリング・競合調査・四半期振り返り・来期計画など、Word・Excel・PDF が混在した 10 本の文書が山積み。1 本ずつ読んで要点をまとめている時間はないので、AI アシスタントにフォルダごと渡して、横断的に報告資料を書いてもらいましょう。
AIへの指示(プロンプト)
sample-data/04_documents/ の文書を全部読んで、来週の部長報告に使える「今うちの組織で何が起きてるか」の報告資料を作ってください。案件の状況、リスク、競合の動き、来週やるべきことを整理して、根拠の文書名も添えてください。結果は output/04_briefing.docx として保存してください。
答え合わせ:こんなアウトプットが出ます
生成された output/04_briefing.docx の例
おさらい:AI がやってくれたこと
- 様々なファイルが混在するフォルダを丸ごと読み込み、10 本の文書を横断して情報を統合
- 案件状況・リスク・競合動向・ネクストアクションを構造化し、根拠となる文書名を添えて Word ファイルとして保存
05(オプション)画像からデータ入力しよう 【応用編】
シナリオ
出張から帰ってきた金曜の夜、財布から出てきた領収書の山。月末までに経理に提出しないといけないけれど、社内システムに 1 件ずつ手で打ち込むのは正直しんどい…。今回はスマホで撮った領収書の画像を AI アシスタントに読み取らせて、社内の経費精算システムへの「レポート作成 → 各エントリーの追加 → 提出」までブラウザ操作ごと任せましょう。
事前準備(必須)
この演習は、以下 2 点が揃っていないと実行できません。先に必ずご確認ください。
- Google Chrome がインストール済みであること(未インストールの方は こちらからダウンロード)
- Chrome DevTools MCP が利用できる状態になっていること(ページ冒頭の 事前セットアップ に記載されている手順を実施済みであること)
Chrome DevTools MCP を初めて使う際、Chrome のアドレスバーに chrome://inspect/#remote-debugging と入力し、表示される接続リクエストを Allow(許可)する必要があります。この手順を行わないと AI がブラウザを操作できません。
⚠ 準備が整わない場合も、下の「答え合わせ」セクションに実際の操作動画を載せていますので、ぜひ動画だけでもご覧ください。
📎 登録する領収書のサンプル
AI エージェントに登録してもらう領収書は、こんな感じの画像です。手入力だと大変ですが、AI なら画像を読み取って自動入力してくれます。
AIへの指示(プロンプト)
Chrome DevTools MCP を使って、下記の経費精算システムに新しいレポートを 1 つ作成し、sample-data/05_osaka-business-trip-2026-04/ にあるすべての領収書画像を 1 件ずつエントリーとして追加し、最後にレポートを提出してください。
経費精算システムの URL:
https://ai-for-everyone.yamary.net/expense-system.html
手順:
1. ブラウザで上記 URL を開く
2. 「レポート作成」画面で、レポート名を上記で指定したフォルダ名にして「レポートを作成」を押す
3. 「エントリー追加」画面に切り替わったら、sample-data/05_osaka-business-trip-2026-04/ の領収書画像を 1 枚ずつ読み込み、画像から日付・ベンダー・カテゴリ・金額・通貨を読み取ってフォームに入力する
4. 「領収書画像」欄に、いま読み取っている画像ファイルそのものを添付する
5. 「エントリーを追加」を押し、追加済みエントリー一覧に行が増えたことを確認してから次の画像に進む
6. すべての画像を追加し終わったら「レポートを提出」を押す
7. 提出完了画面に表示された受付番号・エントリー件数・合計金額を報告してください
答え合わせ:こんなアウトプットが出ます
AI アシスタントが Chrome を操作してレポート作成 → エントリー追加 → 提出までを行う様子
おさらい:AI がやってくれたこと
- 画像 1 枚ずつ読み取って、フォームへの入力・添付・追加・提出までを自動で実行
AI を活用する
06自分だけのアプリを作ってみよう
シナリオ
AI の進歩によって、非エンジニアでも誰でも簡単にアプリが作れるような時代になってきました。ここでは、あなた自身の「こんなのあったらいいな」をそのままアプリにしてみましょう。
業務の面倒ごとでも、趣味のツールでも、なんでも OK です。「作りたいもの」を AI に伝えるだけで、動くプロトタイプが数分で出来上がります。
作りたいものを考えよう
以下を参考に、作ってみたいアプリを 1 つ考えてみてください。
- 業務系のアイデア例:日報を簡単に書けるフォーム/チームの TODO 管理ボード/会議室の空き状況チェッカー/見積もり金額の簡易シミュレーター
- 趣味・生活系のアイデア例:旅行の持ち物チェックリスト/子どもの成長日記/読書記録アプリ/献立ランダム提案ツール
AIへの指示(プロンプト)
自分のアイデアがある方は、そのまま AI に伝えてください。思いつかない方は、サンプル B を使って AI に課題から探してもらいましょう。
サンプル A:自分のアイデアで作る場合
プロンプト内の [あなたの作りたいアプリの説明] は、上で考えたアイデアに書き換えてから送信してください。
[あなたの作りたいアプリの説明] を html, js, css で作成してください。output/06_my-app/ に保存してください。
答え合わせ:こんなアウトプットが出ます
サンプル A:「社内アイデア投稿アプリ」で生成した output/06_my-app/ の例
サンプル B:アイデアが浮かばない場合(課題調査 → アプリ作成)
プロンプト内の [会社名] は、ご自身の会社名に書き換えてから送信してください。
[会社名] の業務課題を調査して、最も「アプリ化しやすく効果が高い」課題を 1 つ選び、それを解決する簡易アプリを html, js, css で作成してください。
手順:
1. まずその会社の業界、その会社の業務で「よくある面倒ごと」を 5 つ挙げる
2. その中からアプリ化しやすいものを 1 つ選ぶ
3. 選んだ課題を解決するアプリを作成する
output/06_my-app/ に保存してください。
答え合わせ:こんなアウトプットが出ます
サンプル B:会社名に「AWS」を指定して課題調査から生成した output/06_my-app/ の例
もっと良くしたい場合
作ったアプリに対して、こんな追加指示もできます。
- 「デザインをもっとおしゃれにして」
- 「ダークモードに対応させて」
- 「スマホでも使いやすいレイアウトにして」