AI For Everyone

AI 実務活用ハンズオン

準備編

はじめる前に

ハンズオンをスムーズに進めるために、サンプルデータのダウンロードと基本操作を学びます。

準備の流れ

まず以下のステップで、ハンズオンを始められる状態まで持っていきます。

準備編の流れを示した図。Step 0 事前セットアップ、Step 1 サンプルデータをダウンロード、Step 2 作業フォルダを指定、Step 3 会話の切り替え、Step 4(オプション)自動承認モードの 5 ステップを矢羽根で表現

00事前セットアップ 参加前に完了済みの前提

利用する Kiro IDE または Claude Desktop がインストール済みで、すでにログイン状態で開かれていることを確認してください。完了していない場合は、以下の事前セットアップ手順を参照してセットアップしてください。

01サンプルデータをダウンロード 初回のみ

ハンズオンで使うサンプルデータを下のボタンからダウンロードします。

サンプルデータをダウンロード handson-sample.zip を解凍してご利用ください。
handson-sample.zip

解凍してデスクトップに配置してください。

Windows のデスクトップ上に handson-sample フォルダが配置されている画面

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/ を作業フォルダに指定します。一度設定すれば、ハンズオン中はそのまま使えます。

使うツールに合わせて以下のタブを切り替えてください。

  1. Open a project を押す

    Kiro の Getting started 画面で Open a project ボタンを押します。

    Kiro の Getting started 画面で Open a project ボタンを示した画面

    📌 すでに別のプロジェクトを開いている場合

    Getting started 画面は表示されません。代わりに、メニューバーの File → Open Folder... を選びます。

    Kiro の File メニューから Open Folder... を選んでいる画面
  2. handson-sample フォルダを指定する

    解凍した handson-sample/ フォルダを選んで開きます。

    ファイル選択ダイアログで handson-sample フォルダを選択し Select folder ボタンを押そうとしている画面
  3. このフォルダを信頼して開く

    以下のダイアログが出たら、チェックボックスにチェックを入れて Yes, I trust the authors を押します。

    Kiro の Workspace Trust ダイアログで Yes, I trust the authors を選んでいる画面
  4. プロンプトを入力して送信する

    AI への指示(例:このフォルダの中身を見て)を入力して送信します。

    Kiro のチャット欄にメッセージを入力している画面
  5. 結果が返ってくることを確認する

    AI の回答を確認します。

    Kiro がワークスペースを読み込んで回答している画面

03新しい会話を始める 演習ごとに

演習を 1 つ終えるごとに、AI との会話を新しく切り替えてから次の演習に進みます。前の演習のやり取りが残ったまま次のお願いをすると、AI が前の演習の内容を引きずって、思わぬ動き方をすることがあります。

  1. 新しいセッションを開く

    チャットパネル上部の「+」アイコン(New Session)を押すと、空の新しい会話タブが開きます。フォルダ(ワークスペース)はそのまま、会話だけが切り替わります。

    Kiro のチャットパネル上部にある New Session の + アイコンを示した画面

04(オプション)自動承認モード ハンズオン用に有効化

AI はファイル変更やコマンド実行のたびにひとつずつ確認を取り、意図しない操作を防ぎます。ここには「安全性」と「操作感」のトレードオフがあります。今回はハンズオンをスムーズに進めるため、この確認を外す設定を紹介します。

Kiro は 権限設定ファイル(permissions.yaml)で自動承認を設定できます。ここでは PowerShell にコマンドを貼り付けて設定ファイルを作成します。

なお、この設定はハンズオンをスムーズに進めるためにすべての操作を許可する内容になっています。ハンズオン後により本格的に活用する際は、許可する操作を絞るなどセキュリティ設定に気をつけてご利用ください。

  1. PowerShell を起動する

    タスクバーの検索欄に power と入力し、検索結果の Windows PowerShell をクリックします。

    Windows の検索欄に power と入力し、検索結果の Windows PowerShell を選んでいる画面
  2. PowerShell が開いたことを確認する

    黒いウィンドウが開き、PS C:\...> のような表示が出ていれば OK です。

    Windows PowerShell が起動しプロンプトが表示されている画面
  3. コマンドをコピーして貼り付け、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"
    }
    
  4. 警告が出たら「強制的に貼り付け」を押す

    複数行のテキストを貼り付けると警告ダイアログが表示されることがあります。強制的に貼り付け を押して続行してください。「設定完了: ...」と表示されれば完了です。以後、Kiro の操作は確認ダイアログなしで進みます。すでに設定ファイルがある場合は上書きせず「既存のファイルがあるためスキップしました: ...」と表示されます。

    PowerShell の複数行貼り付け警告ダイアログで強制的に貼り付けボタンを押そうとしている画面
  5. 設定ファイルの中身を確認する

    以下のコマンドを貼り付けて Enter を押し、rules: 以下の設定内容が表示されれば設定完了です。

    Get-Content "$env:USERPROFILE\.kiro\settings\permissions.yaml"
    
    PowerShell で Get-Content を実行し 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自分だけのアプリを作ってみよう作りたいものオリジナルアプリ
Part Ⅰ

AI を体験する

01ダッシュボードでデータを可視化しよう

シナリオ

あなたは経営企画部の担当者。部長から「来週の経営会議までに、東日本と西日本の売上をまとめて、カテゴリ別の月次売上を出しておいて。あと、ついでに見栄えのいいダッシュボードにしてくれると助かるな」と頼まれました。共有フォルダを開くと、次の 3 ファイルがあります。

  • 東日本支店から届いた売上 CSV
  • 西日本支店から届いた売上 CSV
  • 商品マスタ CSV

中を覗いてみると、カラム名や日付の書き方が支店ごとにバラバラで、そのままでは統合できなさそう。仕方ない、統合からダッシュボード作成まで、AI アシスタントに一気に任せてみましょう。

東日本売上データ・西日本売上データ・商品マスタデータを AI エージェントに渡し、HTML ダッシュボードを生成する流れを示した図

📂 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 エージェントに渡し、プレゼン資料(PowerPoint)を生成する流れを示した図

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 エージェントが整理し、種類ごとのフォルダに仕分ける流れを示した図

実際のフォルダの中身はこんな感じです。種類も命名規則もバラバラで、開かないと何のファイルかわかりません。

整理前の 03_messy-downloads フォルダの中身。種類も命名もバラバラのファイルが散らかっている状態

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

整理後のフォルダの様子(実際の画面)

整理後の 03_messy-downloads フォルダ。カテゴリ別のサブフォルダに仕分けられた状態(1) 整理後の 03_messy-downloads フォルダ。ファイル名が日付プレフィックスでリネームされた状態(2)

おさらい: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 アシスタントにフォルダごと渡して、横断的に報告資料を書いてもらいましょう。

大量の Word・Excel・PDF・PowerPoint ファイルを AI エージェントに渡し、分析レポート(Word)を生成する流れを示した図

AIへの指示(プロンプト)

sample-data/04_documents/ の文書を全部読んで、来週の部長報告に使える「今うちの組織で何が起きてるか」の報告資料を作ってください。案件の状況、リスク、競合の動き、来週やるべきことを整理して、根拠の文書名も添えてください。結果は output/04_briefing.docx として保存してください。
答え合わせ:こんなアウトプットが出ます

生成された output/04_briefing.docx の例

生成された部長報告ブリーフィングの Word ファイル例

おさらい:AI がやってくれたこと

  • 様々なファイルが混在するフォルダを丸ごと読み込み、10 本の文書を横断して情報を統合
  • 案件状況・リスク・競合動向・ネクストアクションを構造化し、根拠となる文書名を添えて Word ファイルとして保存

05(オプション)画像からデータ入力しよう 【応用編】

シナリオ

出張から帰ってきた金曜の夜、財布から出てきた領収書の山。月末までに経理に提出しないといけないけれど、社内システムに 1 件ずつ手で打ち込むのは正直しんどい…。今回はスマホで撮った領収書の画像を AI アシスタントに読み取らせて、社内の経費精算システムへの「レポート作成 → 各エントリーの追加 → 提出」までブラウザ操作ごと任せましょう。

複数の領収書画像を AI エージェントがブラウザ操作ツールを使って経費精算システムに自動入力する流れを示した図

事前準備(必須)

この演習は、以下 2 点が揃っていないと実行できません。先に必ずご確認ください。

  • Google Chrome がインストール済みであること(未インストールの方は こちらからダウンロード)
  • Chrome DevTools MCP が利用できる状態になっていること(ページ冒頭の 事前セットアップ に記載されている手順を実施済みであること)

Chrome DevTools MCP を初めて使う際、Chrome のアドレスバーに chrome://inspect/#remote-debugging と入力し、表示される接続リクエストを Allow(許可)する必要があります。この手順を行わないと AI がブラウザを操作できません。

chrome://inspect/#remote-debugging の画面で Allow ボタンを押して接続を許可する手順

⚠ 準備が整わない場合も、下の「答え合わせ」セクションに実際の操作動画を載せていますので、ぜひ動画だけでもご覧ください。

📎 登録する領収書のサンプル

AI エージェントに登録してもらう領収書は、こんな感じの画像です。手入力だと大変ですが、AI なら画像を読み取って自動入力してくれます。

領収書サンプル 1 領収書サンプル 2

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 枚ずつ読み取って、フォームへの入力・添付・追加・提出までを自動で実行
Part Ⅱ

AI を活用する

06自分だけのアプリを作ってみよう

シナリオ

AI の進歩によって、非エンジニアでも誰でも簡単にアプリが作れるような時代になってきました。ここでは、あなた自身の「こんなのあったらいいな」をそのままアプリにしてみましょう。

業務の面倒ごとでも、趣味のツールでも、なんでも OK です。「作りたいもの」を AI に伝えるだけで、動くプロトタイプが数分で出来上がります。

アイデアや課題を 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/ の例

AWS の業務課題を調査して生成されたアプリ画面例

もっと良くしたい場合

作ったアプリに対して、こんな追加指示もできます。

  • 「デザインをもっとおしゃれにして」
  • 「ダークモードに対応させて」
  • 「スマホでも使いやすいレイアウトにして」