ネスケラボ

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。AIによるコーディングが進化するほど問題になるのが品質担保、特にどのようにレビューするかという点が挙げられると思います。人間が全てレビューできれば良いのですが、対応できるボリュームをはるかに超えてしまっている状態です。どこまでやるか・できるか、どうやるのかの問題はあるものの、お客様に対してシステム開発している責任として何らかの形で人間がチェックする必要はあるのかなと思います。ですので程度の差こそあれ、レビューもAIに頼らざるを得ず。ということでAIによるレビュー方法も色々あるのですが、今回はClaude Codeの/code-reviewコマンド、/security-reviewコマンドについて見てみました。設定・準備まずは準備としてテスト用のコードを書き、更に以下のような不具合・問題を仕込んでテスト用ブランチにプッシュします。１．競合状態 / TOCTOU並行性２．SQLインジェクション３．アクセス制御不備 (IDOR)４．PIIログ出力プライバシー５．NULL参照信頼性６．sync-over-async + HttpClientあとはClaudeCodeのバージョンも最新にしてください。正確なバージョンを把握しておらず恐縮なのですが、V2.1.147あたりから実装されていると思います。試しにプロンプト入力欄に「/code-review」と入力してもらって以下のようにサジェストとして表示されればOKです。ちなみに今回使用するモデルはSonnet4.6を使います。※以下、画像はクリックすると別タブにて拡大表示されます/code-review実施では、早速実行してみましょう。最初に解析を行った後、以下のように幾つかのangles、つまり視点を持ったエージェントが作成・実行されます。しばらくするとレビューが終了し、その旨が表示されます。7つの問題が結果として見つかりました。見づらいと思いますので以下に引用します。Markdownファイルに出力された内容をそのまま貼り付けさせてください。| # | 重大度 | 問題 || 1 | 🔴 Critical | SQLインジェクション（`/orders/search`） || 2 | 🔴 Critical | `product` の null 未チェックによるクラッシュ || 3 | 🔴 Critical | トランザクションなしによる在庫の競合状態（オーバーセル） || 4 | 🟠 High | 通知失敗後のDB不整合（ロールバック不可） || 5 | 🟠 High | 負の `Quantity` で在庫が増加 || 6 | 🟡 Medium | `.Result` によるスレッドプール枯渇 || 7 | 🟡 Medium | `HttpClient` の毎回生成によるソケット枯渇 |仕込んだ不具合・問題点との比較は以下のとおり以下の２つの問題が検出されませんでした。これはセキュリティ周りですので、/security-reviewで検出できればよさげですね。> ３．アクセス制御不備 (IDOR)> ４．PIIログ出力プライバシーパラメータ説明ちょっと順番が前後しますが、/code-reviewのパラメータについて説明しておきます。/code-review [effort] [--comment] [--fix] [ultra] [target]素の /code-review は「現在の差分を、セッションの effort でレビューし、ターミナルに出力」します。1. effort（low / medium / high / max） ＝ 単語で指定（位置引数）/code-review high のように渡します。Sonnet 4.6 の既定は high です。2. --comment ＝ 指摘を PR のコメントとして投稿既定はターミナル出力だけですが、--comment フラグで指摘を PR コメントとして投稿します（GitHub の PR コンテキストが前提）。3. --fix ＝ 修正を作業ツリーに適用読むだけでなく、指摘の修正を実際に当てます（例 /code-review --fix）。4. ultra ＝ クラウドの深いレビュー（ultrareview）今回割愛しましたが、単一パスではなく、複数の独立したレビュアー・サブエージェントを並列で走らせ、別々の観点から解析し、複数で挙がった指摘ほど高確信度で表面化させる方式です。/ultrareviewコマンドと同じ動作となりますが、プレミアム機能として別途料金がかかることもあり、今回は割愛しております。5. target ＝ 既定の差分以外を対象にする（位置引数）targetとしてファイルパス・PR番号・ブランチ名・ref範囲（main...my-feature など）等を渡してレビュー対象を絞れる使用例:/code-review high                # effort＝Highでレビュー/code-review --fix                 # 修正を自動適用/code-review 42                    # PR #42 を対象/code-review src/auth.ts       # 特定ファイルを対象/code-review main...feature  # ref範囲を対象/security-review実行ということで次に/security-reviewを実行してみましょう。こちらもAgentという単語が表示され、エージェントが実行されていることがわかります。以下のように結果が表示されますのでMarkdownファイルに出力してもらいます。結果としては以下の通り。仕込みの不具合・問題点との対応は以下の通り。これで/code-reviewで検出できなかった項番3、4も検出できました。セキュリティ周りの問題検出はやはり/security-reviewが得意なようでして、この２つのコマンドを組み合わせればかなり期待できる結果が得られそうです。SuperPowersのレビュー機能ちなみに私は/superpowersというプラグインも使っていまして、その中には「/superpowers:requesting-code-review」というコマンドがあります。こちらは本来はsuperpowers のワークフローにおいてタスクの合間に requesting-code-review を自動で起動し、計画に照らしてレビューします。つまり通常の superpowers の利用においては明示的に呼ぶのではなく、実装→次のタスクへ移る区切りなどで勝手に発火する形なのですが、今回は試しに意図的に実行してみました。結果としては#3 IDOR と #4 PIIログ、それぞれチェックしたことは明らかなのですが、#3は「Strengths（良い点）」、#4は「correct pattern」（名前付きプレースホルダで正しい）と評価し、指摘からは外されていました。ただ、アドバイス的なものも含めて計12個の指摘があり、３つの機能を試した中で最も多い指摘数となりますのでこの点はさすがだなと思いました。ちなみに見逃しがあった点について。これは予想なのですが、superpowersに問題があるというよりは「汎用レビュー」の枠に従っただけであり、 認可・プライバシーは問題ではなく長所とみなしたのだと思います。また、何故か今回はエージェントでは動作せず（コマンドで直接起動したため？）、モデルやプロジェクト（ソースコード等）によってもまた違った結果が出てくる可能性もありますのであくまで参考までに留めてください。終わりに当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

ClaudeCodeのレビュー機能を試してみよう

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。ある程度AIツールを使っていくと「いつもこのプロンプト入力してるな」「毎回この指示を出すのは面倒だな」と思ったことがあると思います。そういったものについてはなるべく設定ファイルにその指示を書き込み、手間を減らすことをお勧めします。あるいはそういったファイルの存在は知っていて、書いた方が良いとはわかっているものの、具体的にどこに何をどう書けば良いのかわからず、そのまま使っている方もいるかもしれません。そういった方向けにClaude、ClaudeCodeを使っている方向けに設定ファイル、CLAUDE.mdについて公式サイトの内容を改めて読み込み、まとめてみました。スコープまず、スコープとしては以下の３つあります。・Managed（IT管理・組織全体）・User（個人・全プロジェクト共通）・Project（プロジェクト・チーム共有）それぞれにどういったファイルが置かれるか、置くべきかを更に説明します。Managedは正直なところ私も今回の記事を作成するにあたり初めて知ったものでして、IT管理者がMDM（Intune・Group Policyなど）を使って組織展開するときに使うものだそうです。今回はManagedについては割愛させてください。Userスコープ（個人・全プロジェクト共通）置き場所は以下。~/.claude/ファイルは以下になります。CLAUDE.md ：個人のグローバル指示どのプロジェクトで作業していても毎セッション読み込まれる個人のデフォルト指示をここで記載します。Projectスコープ（プロジェクト・チーム共有）置き場所場所は各プロジェクトのフォルダ直下となります。Claude Codeを実行している場所ですね。ファイルは以下の2種類となります。・CLAUDE.md： プロジェクト指示（Git管理・チーム共有）・CLAUDE.local.md： 個人用プロジェクト指示（.gitignore推奨）あとはプロジェクト内の.claudeフォルダ配下に置く場合もありまして、これも同じくプロジェクトスコープとなります。プロジェクトの規約、ビルドコマンド、アーキテクチャ方針など、チームで共有したい指示を書き、Gitで管理することでチーム全員に適用されます。CLAUDE.local.md（個人用プロジェクト指示）置き場所：<project>/CLAUDE.local.md（.gitignoreに追加推奨）このCLAUDE.local.mdは初めて見る方もいらっしゃるかもしれません。同じプロジェクトで自分だけに適用したい指示を書く場所。用途例は「自分のサンドボックスURL」「好みのテストデータ」など、チームには共有しない個人的な設定。そのため、Gitには上げずに.gitignoreに設定することをお勧めします。CLAUDE.mdと同様に扱われ、同じディレクトリの `CLAUDE.md` の後に結合されます。つまり、こちらが優先されます。書き方のポイント・タイミング・サイズ：1ファイルあたり200行以内を目標にしてください。 長いほどコンテキストを消費し、指示の遵守率が下がります・構造： Markdownの見出しと箇条書きで関連する指示をグループ化すること・具体性：曖昧な指示を書かない（後述します）あとは矛盾するルールが複数あるとClaudeが任意で選択してしまうため、定期的に見直して訂正もしくは不要なルールを削除することをお勧めします。いつ追記するかですが、公式の推奨としては・Claudeが同じミスを2回繰り返したとき・コードレビューで、Claudeが知っておくべきだった指摘があったとき・先週と同じ説明をチャットに打ち込んでいると気づいたとき・新しいチームメンバーが生産的になるために必要な情報があるときだそうです。/initで自動生成恥ずかしながら最近は忘れていたのですが、プロジェクトルートで /initコマンドを実行すると、コードベースを分析してCLAUDE.mdを自動生成してくれます。また、すでに存在する場合は改善案を提案してくれます。ただ、この/initコマンドによる出力結果としてのCLAUDE.mdは冗長になりがちです。一旦目を通してもらって、なぜその行が存在するのか理解できない、もしくは説明できない場合は削除してしまってください。逆に不足している情報があるはずなのでそういったものを追記してください。どこに何を書けばよいのかと、ここまで読まれた方は置き場所によって動きが変わるのはわかったけど、じゃあ「結局どこに何を書けば良いのか」と思われたかもしれません。書きたい内容が何かによるのですが、簡潔に書くと以下になります（rulesも含まれてますが、別途記事を書きますのでご容赦を。。）。・ 全プロジェクト共通の個人設定 ： ~/.claude/CLAUDE.md・チームで共有するプロジェクト指示： ./CLAUDE.md（Git管理）・自分だけのプロジェクト設定 ： ./CLAUDE.local.md・特定ファイルにアクセスしたいときだけ ：.claude/rules/.md（paths:設定）・長い手順書・めったに使わないリファレンス →.claude/skills/～/SKILL.md書式・フォーマット書式としてはMarkdownファイルで特別な書式は必須ではなく、見出しと箇条書きを使って書くだけで十分です。人間が読む場合と同じで、まとまりのあるセクションを設けた方がただただ文章だけを書いていくよりも指示に従いやすくなります。例えばCLAUDE.local.mdの例として以下のような感じになります。ーーー# 個人設定（Gitにはコミットしない）## ローカル環境- ローカルのAPIサーバー: http://localhost:8000- テスト用ログインID: test-user@example.com- ステージング環境: https://staging.example.com## 個人的な作業方針- 実装前に必ず設計を見せてもらう- コンポーネントを分割するときは先に相談するーーー@path/to/import構文によるファイルインポートこの機能（記法）は恥ずかしながら今回この記事を書くにあたって初めて知りました。「@」で指定することで別のファイルをCLAUDE.mdから参照できます。手順書や仕様書が長くなってきたら切り出すのに便利です。例えば「markdownプロジェクトの概要は @README を参照」「利用可能なnpmコマンドは @package.json を参照」といったものです。上のように書くとClaude Codeがセッション開始時に 例えばpackage.json の中身を読み込んで、CLAUDE.mdの文脈に展開してくれます。つまりは 「このファイルの内容もClaude.mdの一部として読んでね」 という指示になります。ただし、インポートしたファイルもセッション開始時にコンテキストへ丸ごと展開されるので、ファイルが大きいとその分トークンを消費します。トークン消費に影響しないということであればあまり意味を感じなくなる方もいらっしゃるかもしれませんが、「分割すれば節約できる」ということではなく、あくまでCLAUDE.mdを見やすくするための仕組みと捉えてもらえればと思います。CLAUDE.mdを書く時の注意点絶対守るべきというレベルではありませんが、公式に書かれている内容であったり、自身の経験上、こうしたほうがよいのではといった注意点があります。既にCLAUDE.mdを使いこなしている方であればそういったノウハウを各自持たれているかもしれませんが、いくつか私が見聞きしたことを以下に挙げてみますので参考にしてください。注意点１：具体性が肝心CLAUDE.mdは検証できる粒度で書くことが重要です。曖昧な指示はClaudeが解釈に迷います。例えば「コードを適切にフォーマットする」のではなく「インデントは2スペースを使う」といった具体的な指示を記載するようにしてください注意点２：詳細なコードスタイルガイドラインは含めない上の「具体性が肝心」の例で挙げた「インデントが。。。」といったコードスタイルに関する内容、例として挙げておきながらなんですが、あのようなコードスタイルについては例えばJavaScriptやTypeScriptであればリンターやフォーマッターで対応可能であり、わざわざこれに関してトークンを消費する必要は無いと思います。注意点３：禁止事項を書く「してほしい」ことを書くよりは「してほしくない」ことを優先して書くようにした方がよいかもしれません。変更してほしくないファイルや実行してほしくないコマンドがあればそういったものを明記しておいたほうがよいです。注意点４：スキルやコマンドで済ませられるものは書かない注意点２とも関連していますが、スキルやコマンドを実行すれば済むものをわざわざCLAUDE.mdに書く必要はないと思います。CLAUDE.mdに書く量は200行未満が好ましいと言われていますので最小限に抑えるためにもスキルやコマンドを活用してください。注意点５：プロジェクト概要を書く最後の注意点としてかなり個人的な経験則ではありますが、プロジェクト概要（技術スタック、構造、目的等）を最初に書くことをお勧めします。具体的に何が良い、もしくはどういったことに役に立つといったことはうまく説明できないのですが、返ってくるレスポンスは書かないよりも数段良い内容として返ってくる気がします。用語集についてちょっと取り留めもなく書いてしまいましたが、もう１つだけ。。AIツールを利用する場合において用語集は非常に役に立つと思いますが、上で書いた通りCLAUDE.mdに書くにはデータ量に限度があります。なので量と用途次第で置き場所、ファイルを変えた方がよさそうです。例えばなのですが、・用語集が少なく、かつプロジェクト全体に関わるー＞CLAUDE.mdに直接書くか、@docs/glossary.mdのように別ファイルに切り出して@でインポートさせる・用語集が長い・多い、分野ごとに分けたいー＞rules/配下に分野別でファイルを置いて paths: で条件付き読み込み（例：請求まわりのコードを触るときだけ請求用語を読み込む）途中でも少々触れましたが、rulesというのはCLAUDE.mdを補完するルールファイルの置き場所でして、CLAUDE.mdとの大きな違いは、「paths:」という目印を指定することで特定のファイルにアクセスしたときだけ読み込まれます。また別の機会に説明できればと思います。そもそも無理に用語集としてCLAUDE.mdやrulesを活用することも無いと思いますので、あくまで一手段として参考にしてもらえればと思います。終わりに色々書いてしまいましたが、まずは「同じ説明を2回打ち込んだら」CLAUDE.mdへの追記のサインです。自分が作業の中で「また同じことを指示している」と気づいたらCLAUDE.mdに書くようにしましょう。また、CLAUDE.mdには強制力はなく、記述した内容と異なる動きをする場合もあります。何かを強制する場合はsettings.jsonでhooksという機能を使うのですが、これはまた別の機会で紹介できればと思います。Claudeユーザーの方でCLAUDE.mdをあまり触っていなかった方は是非これを機に自分ならでは、あるいはチーム・プロジェクトならではのCLAUDE.mdを育ててみてください。当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

CLAUDE.mdを改めて調べてみる

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。今回はClaudeCode公式サイトからClaudeCodeにおけるトークン消費を抑える方法をまとめてみます。/clearコマンド/clear、/compact、/usage及び/contextといったコマンドがトークン消費に関係しており、まずは/clearコマンドについて説明します。Claude Code は会話を続けるほど、過去のやり取り全部を「思い出す」ためにコンテキストに積み上げていきます。コンテキストというのはこちらからチャットで依頼した内容だけでなく、読み込んだファイル、実行したコマンドの出力、Claudeの返答、全部になります。それはそうだろうという話なのですが、ここで問題なのは、次のメッセージを送るたびに、その積み上がった過去全部が再送信されるという点です。例えば朝にAの調査をして、昼にまったく別のBのデバッグを始めた。。という状況でそのまま続けていると、Bの作業中も「Aで読み込ませたファイル全文」がずっとコンテキストに居座って、毎ターン課金されます。これを防ぐのが /clearコマンドで、話題が変わるタイミングで会話履歴をまっさらにするコマンドになります。ただ、元のセッションに戻りたいかもしれない場合、/clearの前に/renameでセッションに名前を付けておくと後から/resumeでそのセッションの名前を辿って戻れます。１．Aの作業中２．/rename で「session_a」という名前を付ける３．/clear でコンテキストを空にしてBの作業へ４．Bの作業５．Aに戻りたくなったら /resumeでsession_aを選んで復帰という流れです。しおりのようなイメージですね。/compactコマンドこれはもしかすると普段の作業でClaudeCodeが勝手に（というと表現がよろしくないですが）行っているのを見たことがある人がいるかもしれません。これはその名の通り、過去のやり取りを要約してくれるものです。ただ、Claude Codeにお任せしてしまうと何を残して何を捨てるのかはClaude Codeが勝手に決めてしまうため、大事なことを捨てられてしまうと困ります。残してほしいものがある場合は/compactコマンドに引数を付けて手動で実行できるというのがポイントになります。例えば/compact チケットｘｘｘで実際に動いた設定値とビルド手順を優先して残してと依頼すれば引数に渡した内容を残して圧縮できます。あとはCLAUDE.mdに書くパターンがありまして、毎回上記のように残してほしいものを書くのは面倒だと思います。その場合はCLAUDE.mdにーーー# Compact instructions要約するときは、実行したコマンドとその結果、コードの変更内容を優先して残してください。途中の議論や試行錯誤は省いて構いません。ーーーと書いておくと、自動で/compactが走る際も上記の指示に従って要約してくれます。/usageコマンドこのコマンドはトークン節約とはちょっと話がずれますが、/usageで現在のトークン使用状況を確認したり、ステータスラインに常に表示しておくこともできますので都度確認するようにすることをお勧めします。適切なモデルの選択（2026年5月30日時点の話です）Sonnet はほとんどのコーディング タスクを適切に処理し、Opus よりもコストが低くなるそうです。ただ、複雑なアーキテクチャ上の決定や複数ステップの推論には Opus を使用したほうがよいらしいです。また、単純なサブエージェント タスクの場合はhaikuがおすすめとのこと。まとめると・基本は Sonnet で進める・詰まったとき・設計判断が必要なとき だけ /model で Opus に切り替え・サブエージェント には Haiku を割り当てるとさらに節約・セッション全体を Opus で回すのは、本当に難しい問題のときだけという感じです。とはいえいちいち切り替えるのは。。という場合は「Sonnetで一回やらせてみて、ダメだったらOpusに上げる」という運用が、単純かつコストと品質のバランス的にはちょうどいいと思います。MCPサーバーのオーバーヘッドを削減するそもそもMCP（Model Context Protocol）サーバーは、Claude を外部サービスと繋ぐ仕組みです。たとえば「GitHub MCP サーバー」を繋げば、Claude が GitHub の Issue を読んだり PR を作ったりできるようになります。以前はMCP サーバーを繋ぐと、そのサーバーが提供する全ツールの「使い方の説明書」がコンテキストに含まれてしまって無駄な消費が行われていたのですが、今回公式のドキュメントを改めて見るとツール名だけがコンテキストに入って、実際にそのツールを使う段になって初めて詳しい内容が読み込まれるようです。とはいえ「ツール名の一覧」自体もタダではなく、繋ぐサーバーが多すぎるとそのリストだけでもそれなりのトークンを食います。ですので接続したけど使っていないMCPサーバーがありましたら削除・無効にしておくことをお勧めします。/contextコマンドここで/contextコマンドの出番なのですが、これを使うことで何にどれだけトークンが消費されているかがわかります。言い方がよろしくないかもしれませんが、「犯人」が特定できますので是非一度試してみてください。CLIツールを使うMCPを避ける、/contextで消費量を調べる、と続いた後に出てくるのがこのCLIの活用になります。たとえば GitHub を操作したいとき、選択肢は2つあります。選択肢A：GitHub MCP サーバーを繋ぐ→ ツール一覧（タイトルリスト）がコンテキストに乗る。使うたびに該当ツールの説明書も読み込まれる。選択肢B：gh コマンド（GitHub CLI）を使う→ Claude Code はそもそも Bash を叩けるので、gh issue list とか gh pr create とか普通のコマンドとして実行できる。何もコンテキストに事前ロードされない。MCPを避けるというのとはちょっと違いますが、個人的にはGitの操作はClaudeCodeに任せるのは怖いということもあり、自分で実行していたのですが、これも結果的にトークンの節約につながっていたようです。つまりは「MCP は便利だけど、CLI で済むなら CLI のほうがコンテキストに優しい」というお話になります。MCPに限らず「自分でやっても手間が変わらない」、「大変ではない」というものは自分で対応することをお勧めします。CLAUDE.mdからスキルへの移行CLAUDE.mdファイルは、セッション開始時にコンテキストに読み込まれます。特定のワークフロー（PR レビュー等）に関する詳細な手順が含まれている場合、関係ない作業を行っている時もCLAUDE.mdが読み込まれるのでやはりこれも無駄なトークン消費につながります。例えばその中でスキルに任される作業があればスキルを作成・利用した方が良いといったことが書かれています。スキルは呼び出されたときにのみオンデマンドで読み込まれるため、専門的な手順をスキルに移動することで、ベースコンテキストを小さく保つことができます。CLAUDE.mdには必要最低限​​の情報のみを含めることで、200 行以内に収めるのが良いとのこと。プロンプトを具体的に書く + Plan Modeこれは「Claudeに無駄な探索をさせない」という話です。Claudeは指示が曖昧だと「何を求められてるかを確認するため、とりあえずコードベース全体を見渡そう」となります。例えば「このコードベースを改善して」といった曖昧な指示を出した場合に→ Claudeはどこを改善すべきか不明→ 「まずファイル構成を把握しないと」→ 主要ファイルの読み込み→ 関係ないファイル読んで、3万トークン消費（トークンの数は適当です）→ それでも何をすべきかわからず、曖昧な提案におわり、結局具体的な指示を出すということになってしまうため、もっと具体的に「auth.cpp の login 関数に入力バリデーションを追加して。メールアドレス形式チェックとパスワード長10文字以上の確認を行う」という指示をすれば→ Claude: auth.cpp を1ファイル読む→ 該当関数を編集→ 800トークンで完了（「上よりは少ないトークンで完了」の意味です）つまりは「探させない、迷わせない」のがポイントになります。Plan Mode は 「いきなりコード書かないで、まず計画書を見せて」というモードですが、なぜこれがトークン節約になるかというと、皆さんも経験があるかもしれませんが、間違った方向に実装が走ったあとのやり直しが一番高くつくからです。大量のデータ読み込みを避ける例えば自分の作ったシステムにおいてエラーログをそのまま渡してしまうと楽ではあるのですが、エラーログが大量にあると大量のトークン消費へと繋がります。そこで例えばエラーログのフォーマットを共有し、エラーを含む特定の情報を抜き出すpythonを書いてもらい、その出力結果をClaudeCodeに共有することで消費を抑えることができます。これはログの中にClaudeに渡したくない情報がある場合にも有効です。終わりに上で紹介したトークン節約方法は他のAIツールでも流用できることがあると思います。この記事を見た方でトークンの消費が気になる方は是非これを機に使い方を見直してみてはいかがでしょうか当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude公式から学ぶトークン消費節約術

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。先日発表されたCopilot Coworkの社内での評判が非常に良く、私の方でも触ってみましたので感想を書いてみたいと思います。Copilot CoworkはMicrosoft 365 Copilotの新機能として2026年3月9日に発表されまして、2026年3月29日からFrontierプログラム参加者向けに利用可能になりました。あのAnthropic社のAIサービスを利用しているそうです。当社でも少し前から利用可能になっていたのですが、なかなか触る機会が無く、今に至ります。当社ではメールはOutlook、打合せやチャットはTeams、ドキュメント共有ではSharepointを使っておりまして、Copilot Coworkは非常に相性が良いということはわかっていたのですが、今回改めて利用してその便利さがわかりました。特徴AIツールというよりはAIワーカー、AI実行エージェントという方がしっくりくるかもしれません。以下のMicrosoft 365のサービスを「横断して」作業できるというのが一番大きなポイントでしょうか。・Outlook・Teams・OneDrive・SharePoint・Word・Excel・PowerPoint等Copilot Coworkへのアクセス実際の使用例で見てもらうのが良いかと思いますのでCoworkを開いてみます。必須条件として以下が揃っていないと使えません：・Microsoft 365 Copilotのライセンス・Frontierプログラム（早期アクセス）への参加・管理者による有効化（テナント設定）もし上記条件がそろっていればまずはMicrosoft 365 Copilotにアクセスしてみてください。そして右側メニューから「すべてのエージェント」を選択し、表示されたエージェントストア画面で「Cowork（Frontier）」を選択します。以下の画面が表示されまして、これがCoworkの画面となります。では、まずはOutlook関連、当社ではOutlookでスケジュールの設定も行っているのでその日の予定を聞いてみると以下のように出力してくれます。あとは特定の方とのメールのやり取りに関して頻繁にメールでやり取りしていると「あれ、どちらのボールだったっけ？」というのがあるかと思いますが、それもOutlookでメールを追っかける必要は無く、Coworkに聞いてしまえば解決します。更には以下のようにoutlookを直接使うことなくメールを送ることもできます。 次にTeams、自分宛の通知を毎朝10時（でなくてもいいのですが、つまりは決められた時間ですね）にまとめて通知してもらうようにしましょう。すると画面右側に以下のような表示が出てきまして、スケジュール設定が行われたことが確認できます。端折ってますが、メールについても同様に自分宛のメールを通知してもらうようにしました。あとはSharepointに対する検索結果もすぐに出力してくれます（色々と削除してしまっているのであまり中身のない画像になっていますが雰囲気だけでも。。）。ここで挙げられた資料については全てSharepointへのリンクを貼ってくれますので、中身を見たい場合はクリックすれば即アクセスできます。ちなみにOutlook内のメールに対する検索も同様で、メールにリンクを貼ってくれるのでそれをクリックすればOutlookが起動し、該当のメールが表示されます。これも非常に便利です。あとはWord、Excel、PowerPointへの出力も対応できます。「今までの内容をパワポにまとめて」といった指示で各フォーマットで出力してくれます。Excel方眼にも対応してくれました。最後にいかがでしょうか。恐らくClaude Cowork等でも環境が整えば同様のことができるのですが、普段からMicrosoft365を利用しているユーザーであればCopilot Coworkを使えば様々な環境設定を行うことなく、各サービスの情報へアクセスでき、かつ「操作」を指示することができます。ちなみにMCPサーバーへの接続については管理者に依頼する必要があり、個人で設定を行うことはできません。また、ExcelやPowerPointへの出力もClaude等と比べると若干時間がかかるように思えましたが、これはプロンプトや内容にもよるかもしれません。あとはClaude＋WorkIQを使うと出席していない会議について参加できずとも録画してもらえばその内容を読み取り、色々なフォーマットで出力してくれたのですが、CoworkでできるのはTeamsで音声会議を行った際に出力される「要点の表示」の部分にしかアクセスできませんでした。そういったちょっと気になる点はあるものの、このCopilot Coworkはこれからのサービスですので更なる進化が期待できます。引き続き使ってみたいと思いますし、皆さんもメール周りだけでも非常に便利ですので是非使ってみてください。当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.neta {    text-decoration: none;    color: #464feb;}tr th, tr td {    border: 1px solid #e6e6e6;}tr th {    background-color: #f5f5f5;}

Copilot Coworkを触ってみました

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。今回仕事でも利用しているWorkIQを紹介します。github.com発表当初から使ってはいるのですが、まだ限定的な使い方しかできないため、ちょっと復習的な意味合いも込めて書いてみました。発表されたのは2025年11月のIgnite、そこから年が明けて1月後半に利用できるようになりました。こちらはCLIとMCPサーバーとして配布されており、自然言語でMicrosoft365（以降M365）のデータにアクセスできる、つまりは皆さんがM365を利用されているのであればClaude等を使ってM365のデータを取得することができます。内部を意識しないで済むのがMCPの売りではありますが、軽く説明しておきますとWork IQ は以下の3つのレイヤーで構成されていて、Data（データ層）、Memory（コンテキスト層）、Inference（推論層）で構成されています。データ層が先ほど書いたM365サービス、Outlook、Teams、SharePoint、OneDrive といった各サービスからメール・チャット・ドキュメント・会議の内容のこと。これを横断的に検索・分析できます。この3層が連携することで「プロジェクトの期限について誰が何と言ったか」「先週の定例で議論された認証基盤の要件」といった文脈を踏まえた質問に回答できるようになります。Work IQのことしか知らなかったのですが、Work IQ は単体で完結するものではなく、Microsoft のIQエコシステムの一部だそうです。他の2つも含めて概要は以下の通り。Work IQ: M365の業務データに基づく文脈提供Fabric IQ: データ分析基盤（データレイク・BI）Foundry IQ: 複数データソースにまたがるナレッジ検索これらを段階的に導入し、企業全体のAI活用を拡張できる仕組みになっています。npmパッケージ @microsoft/workiq として配布されており、以下の2つのモードで動作します。CLI モード: workiq ask コマンドでターミナルから直接クエリMCP サーバーモード: workiq mcp でMCP対応AIアシスタントと統合というのが概要ですが、じゃあ具体的にどういったデータにアクセスできるかと言いますと以下の通りとなります。インストール・初期設定では、インストールしてみます。必要な環境としては・Node.js18以上・Microsoft 365 Copilot ライセンス（Business または Enterprise）・テナント管理者による承認となります。まず、グローバルインストールする場合は以下npm install -g @microsoft/workiqnpx で直接実行する場合（インストール不要）は以下npx -y @microsoft/workiq mcp次に初回使用前にエンドユーザーライセンス契約（EULA）への同意が必要です。workiq accept-eulaまた、ClaudeデスクトップアプリのConfigでは以下のように設定しています。以下のようにMCPサーバーが正しく動いていればOKです。初回クエリ実行時にブラウザが自動的に開き Microsoft Entra IDの認証が行われるはずですので、無事認証できれば利用可能となります。もう１点上記のどのタイミングかは失念してしまったのですが、途中でM365の管理者の承認も必要となりますのでご注意ください。実際の使用例では、実際の使用例を紹介していきたいと思います。・Sharepointからのドキュメント検索もしSharepointに社内や案件のドキュメントを格納しているのであればWorkIQで検索が可能です。「～について書かれた資料を探して」のように聞けば該当の資料を探してくれます。私は色々なスキルやMCPを使っていることもあり、念のため「WorkIQを使って」という言葉を先頭につけて実施してます。・メール内容の取得Outlookを利用している場合、「WorkIQを使って～会社の～様からここ1か月で受信したメールを探して内容をまとめて。」と依頼するとその人からのメールを①2026/xx/xx - 件名：～についてといった形でまとめてくれます。指示内容が不十分の場合、全てのデータを取り切れない場合があったものの、もう一度確認してもらうことで正しく取得できました。やり取りが頻繁になってくるとメーラーで探すのは厳しくなってきますので非常に便利です・会議の要約Teams会議を実施、録画しておくと「x月x日、～時から実施した～という打合せの内容をパワーポイントにまとめてください」と指示することでパワーポイントに出力してくれます。以前も記事として取り上げましたが、Claudeはパワポ系の出力に強みがあると思ってまして、この機能は結構利用しています。そしてこの機能で特記すべきこととしては「参加してない会議でも録画されていれば会議内容が取得できる」というものです。Teams会議でかつ録画していればTeamsの機能として要約であったり、最近はパワーポイント資料にまとめてくれたりしますが、精度としては「今のところ」断然こちらが正確です。（とはいえ、それでも漏れている部分であったり誤りはあったりしますのでできるだけ会議は参加しましょう。。）スキルあとはWorkIQ直下のReadMeには書かれていないため、見落としがちなのですが、以下のようなスキルが存在しています。場所は以下です。いずれもSKILL.mdのMarkdownファイル１つなので直接Claudeに読み込ませて実行してもほぼ同じことができるかもしれません。ただし、WorkIQ CLIがインストールされている必要がありますのでその点のみご注意ください。github.com上記9つのスキル以外にもまだマージされていないですが、マージ待ちのスキルが27個ありまして今後の機能拡張が期待されます。最後にGoogleの各サービスを利用されている方であればGmail、Googleドライブ、GoogleMeetといった各サービスをGeminiで参照して。。といった使い方をされているかと思います。Googleでもそういったエコシステムがあるのとと同様、Microsoftの各サービスでもこのようにWorkIQを使ってエコシステムを利用することができます。人によっては朝、作業を始める前にWorkIQを使って今日の予定やメール等をチェックし、AIとのブリーフィングやTodoリストを作ったりといった使い方をしている人もいます。もし皆さんもM365のサービスを利用しているのであれば是非このWorkIQを導入して更に活用してみてもらえればと思います。と、この記事をアップしようとしているところでCopilot Coworkというサービスも既に記事にしてまして、機能的にはかぶっている部分もありますが、こちらもまたアップできればと思います。当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Microsoft Work IQを使ってみよう

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。今回紹介したいのはOpenSpecという「仕様駆動開発（SDD）」のためのOSSフレームワークです。github.comAIコーディングツール上で動くスラッシュコマンドで、コードを書く前に仕様を生成・管理できるという点では他のフレームワークと同じなのですが、「Delta Spec」という差分管理の仕組みが非常に興味深いといいますか、「使える」機能ではないかと思いますので実際に試してみた結果を紹介しつつご紹介します。インストールOpenSpecはNode.js 20.19.0以上が必要です。以下のコマンドでインストールします。npm install -g @fission-ai/openspec@latest更に以下のコマンドで初期化を行うのですが、この時に使用するツールを選択します。今回はClaude Codeでいきます。openspec initあとはopenspec/config.yamlというファイルがありますので以下の内容で上書きしておきます。これは言語やフォーマットを制御する設定ファイルで、必ずしも設定する必要は無いのですが、出力結果が安定しますので今回は設定した上で作業を進めます。ーーーschema: spec-drivencontext: |  プロジェクト: todo-cli（CLIベースのTodoアプリ）  Tech stack: Node.js, TypeScript, ts-node  実行方法: npx ts-node src/index.ts <command> [args]  言語: 日本語で全ての成果物（proposal, spec, design, tasks）を記述することrules:  specs:    - ScenarioはGiven/When/Then形式で記述    - REMOVEDには必ずReasonとMigrationを含める  proposal:    - 影響範囲を明示する  tasks:    - タスクは実装可能な粒度に分割するーーー編集が終わったら、Claude Codeを再起動してください。実装開始・フォルダ構造説明この時点での仕様に関するフォルダ構造は以下のようになります（コードの部分は除きます）。├── specs/       ← 空（確定仕様の置き場）├── changes/     ← 空（作業中changeの置き場）└── config.yamlOpenSpecの基本サイクルOpenSpecは基本的に propose → apply → archive という3ステップ、3つのコマンドで実装を進めていきます。まずはpropose 、計画を立てるところから。Claude Codeで以下のように指示を出します。ーーー/opsx:propose add-basic-todoCLIベースのTodoアプリの基本機能を実装する。- `todo add "タスク名"` でタスク追加（自動でID付与）- `todo list` で一覧表示（ID、ステータス、タスク名）- `todo done <id>` で完了にする- `todo delete <id>` で削除- データはローカルの data/todos.json に保存ーーーこのproposeを実行した後のフォルダの状態は以下のようになります。openspec/├── specs/                      ← まだ空├── changes/│   └── add-basic-todo/         ← ★ 生成された│       ├── proposal.md         ← なぜ・何を作るか│       ├── design.md           ← どう作るか│       ├── tasks.md            ← 実装チェックリスト│       └── specs/│           └── task-management/│               └── spec.md     ← ★ Delta Specを記載計画書は `changes/` の中に作られます。specs/配下はまだ空のままです。 Delta Specの中身を見てみましょう。ーーー## ADDED Requirements### Requirement: タスクの追加システムはSHALL `todo add "タスク名"` コマンドを受け付け、自動採番されたIDを付与して新しいタスクを `data/todos.json` に保存しなければならない。#### Scenario: タスクを追加する- WHEN ユーザーが `todo add "買い物"` を実行する- THEN IDが自動採番されたタスクが追加され、確認メッセージが表示される### Requirement: タスクの一覧表示（...省略...）### Requirement: タスクの完了（...省略...）### Requirement: タスクの削除（...省略...）ーーーすべてが `## ADDED Requirements` の下にありますが、既存の確定仕様がまだ空なので、すべてが「新規追加」になるわけです。ここで 「Delta Spec」という概念を整理します。Delta Specとは 「確定仕様からの変更点だけ」を書いたもので、3種類の目印があります。・ADDED：新しく追加する要件・MODIFIED：既存の要件を変更する・REMOVED： 既存の要件を廃止するAIがtasks.mdに沿ってコードを実装します（src/配下にファイルが生成される）。この時点でもspecs/はまだ空です。/opsx:archive add-basic-todoarchive後のフォルダ構成は以下のようになります。ーーーopenspec/├── specs/│   └── task-management/│       └── spec.md             ← ★ 確定仕様が生成├── changes/│   └── archive/│       └── 2026-05-04-add-basic-todo/  ← 作業記録として保存ーーー変更内容としては以下の２つになります。1. specs/配下に確定仕様が作られる— Delta Specから `## ADDED Requirements` のヘッダーが外れ、「今のアプリはこう動く」という確定仕様になった2. changes/の作業フォルダがarchive/に移動した — 「いつ・何を・なぜ変えたか」の記録が残る2度目の改修次に２度目の改修を実施します。優先度追加 + deleteを廃止します。以下のようにadd-priority-and-refactorという名前でproposeコマンドを実行します。細かい指示内容は割愛させてください。/opsx:propose add-priority-and-refactorAIはChange 1の確定仕様（openspec/specs/task-management/spec.md）を読んだ上で、Delta Specを生成します。実際に試していただき、MODIFIEDやREMOVEDが存在することを確認してみてください。そして実装、アーカイブを行います。/opsx:apply add-priority-and-refactor/opsx:archive add-priority-and-refactorarchive後のフォルダは以下のようになります。ーーーopenspec/├── specs/│   └── task-management/│       └── spec.md             ← 最新の確定仕様├── changes/│   └── archive/│       ├── 2026-05-04-add-basic-todo/              ← 1回目の変更の記録│       └── 2026-05-04-add-priority-and-refactor/   ← 2回目の変更の記録ーーー実際のファイルエクスプローラーでは以下の通り。archive後の確定仕様はどうなったかを最初の変更での確定仕様（4つのRequirement）と比較しながら説明すると、・タスクの追加 ：MODIFIED → 優先度オプションの記述を含む新しい全文に置き換わった ・タスクの一覧表示 ： MODIFIED → 優先度列・ソート・絞り込みの記述に置き換わった ・タスクの完了 ：変更なし → Delta Specに含まれなかったのでそのまま ・タスクの削除 ：REMOVED → 確定仕様から消えた といった内容になります。まとめ改めてフォルダ構造の変化（全体像）を以下に記します。ーーー【init直後】    specs/ = 空        changes/ = 空     ↓ propose【1回目の変更】    specs/ = 空        changes/add-basic-todo/ = 計画書 + Delta Spec(全ADDED)     ↓ apply (コード生成。specs/は変わらない)     ↓ archive【archive後】   specs/ = 確定仕様   changes/archive/ = Change 1の記録     ↓ propose【2回目の変更】    specs/ = そのまま   changes/add-priority-and-refactor/ = Delta Spec(MODIFIED+REMOVED)     ↓ apply (コード変更。specs/は変わらない)     ↓ archive【最終形】      specs/ = 最新仕様   changes/archive/ = Change 1 + Change 2の記録specs/ が更新されるのタイミングはarchiveだけ。ーーー既存の確定仕様がないとMODIFIEDもREMOVEDも出しようがないので、1回目のchangeは全部ADDEDになり、2回目以降のchangeで初めてMODIFIED/REMOVEDが登場します。この「仕様が積み上がっていく」構造がDelta Specの核心です。チーム開発ではどう使える？proposeの段階でDelta Specが生成されるので、コードレビューの前に「仕様レビュー」を挟む運用ができます。「この変更でいいか？」をコードではなく仕様の単位で議論できます。また、specs/が常に最新の確定仕様を保持しているので、途中からプロジェクトに参加したメンバーでも「今のアプリはどう動くか」をspecs/を読むだけで把握できます。archive/を遡れば「なぜこの仕様になったのか」の経緯も追えます。今回触れなかった機能OpenSpecにはcore profile以外にも多くのコマンドがあります。/opsx:explore — アイデアの壁打ち。artifactは生成されない自由な対話モードで、要件が固まったらproposeに移行する/opsx:verify — 実装と仕様のズレをAIがチェック。完全性（全タスク完了か）・正確性（仕様通りか）・一貫性（設計と実装が合っているか）の3軸で検証する/opsx:new + /opsx:continue — proposeが4つのartifactを一括生成するのに対し、1つずつ段階的に生成して都度レビューできる/opsx:onboard — 実際のコードベースを使ったインタラクティブなチュートリアルこれらは openspec config profile でexpandedプロファイルを有効にすると使えます。所感OpenSpecを一通り試してみて感じたのは、AIに「何を作るか」を伝える行為が、そのまま仕様書として残るという体験の良さです。これまでチャットで指示して実装させると、その指示内容は会話ログの中に埋もれてしまっていましたが、OpenSpecではspecsとして構造化されて蓄積されます。一方で、生成されるspecの品質はAIモデルに依存します。Scenarioが不十分だったり、Requirementの粒度がばらつくこともあるので、proposeの後に人間が内容を確認・修正するステップは省略しない方がよいと感じました。生成物がすべてMarkdownファイルである点も安心材料です。仮にOpenSpecを使わなくなっても、specs/のファイルは普通のドキュメントとして読めますし、Gitで差分管理もできます。ロックインのリスクがほぼないので、まずは小さなプロジェクトで試してみることをおすすめします。最後に当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

OpenSpecで仕様駆動開発してみる

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。2026年4月17日にリリースされたClaude Design、こちらはAnthropicのR&Dチーム「Anthropic Labs」によって開発された機能で、その名の通りチャットで対話しながらデザインが行えるものになります。ここ最近のようなちょっとした機能追加ではなく、（個人的な感覚ではありますが）比較的大きな機能になりまして、今回はこのClaude Designを使ってスライド作成（パワーポイント資料作成）を試してみたいと思います。スライド作成準備デザイン作業において「スライド作成」を行うことにちょっとだけ疑問に思う方もいらっしゃるかもしれませんが、AIツールでスライド・パワーポイント資料を作成するにあたってまずはHTMLで作成し、そこからパワーポイントに変換している人が社内にもいます。他にも以下のClaude Code用のスライド作成用ツールキットもまずはHTMLでスライドを作成し、そこからパワーポイントやPDFに変換しています。GitHub - nogataka/SlideKit · GitHub確かにどこに文字を記述し、どこに図を配置するか、コンテンツそのものも当然重要なのですが、デザインもそれを見る人に正しく伝えるために非常に大事な要素です。ということでスライド作成を試してみたく、まずはhttp://claude.ai/designにアクセスしてみてください。そうすると以下のような画面が表示されます。スライド作成にあたっては左側のウィンドウの上部タブのうち「Slide deck」を選択してください。すると以下のような入力項目が表示されます。各項目の説明は以下の通り。・Project name ： プロジェクト名。今回は「AI最新動向紹介スライド」にします・Design system：ブランドカラー、フォントを別途設定できます。とりあえずデフォルトのままでいきます・Use speaker notes：ONにすると、スライド上のテキスト量が減り、代わりに発表者用ノート（各スライドの補足説明）が自動生成されます。プレゼンで実際に使う想定ならON、資料として配布する想定ならOFFが良いです。とりあえずこれもOFFのままにしてあとでONにして比較してみましょうProject nameを入力するとCreateボタンが押せるようになりますので早速押してみます。すると以下の画面に切り替わります。こちらもまずは左側の各選択肢について見てみたいと思います。拡大したのが以下画像です。各ボタンの説明は以下になります。Design System： 組織のデザインシステム（色、フォント、コンポーネント）を適用。すでに「Design System (design system)」がタグとして入力欄に付いているので、ネクストスケープのデフォルトデザインシステムが自動適用されています。Add screenshot ： 参考にしたいUIやデザインのスクショを添付。「こんな雰囲気で」という指示に使います。Attach codebase ： GitHubリポジトリ等を接続して、既存プロダクトのデザイントークンやコンポーネントを読み込ませる。Drag in a Figma file ： Figmaファイルをドラッグ＆ドロップして、既存デザインを参照させる。右側はキャンバスでデザインした内容がここに出力されます。「Start with a sketch」ボタンがありますが、プロンプトの代わりに、手描きのラフスケッチからスタートする場合はここ。マウスやペンで大まかなレイアウトを描くと、Claudeがそれを解釈してデザインにしてくれます。ただ、今回はスライド作成なのでプロンプトで作業を進めます。スライド作成実施では、以下のプロンプトを投げてみます。ーーー2026年前半のAI最新動向を紹介するプレゼン資料を作ってください。内容：- AIコーディングエージェントの進化（Cursor、Claude Code、Kiro等）- ハーネスエンジニアリングという新しい概念の登場- AI × デザインツールの台頭（Claude Design、Figma AI等）- Computer Use（AIがPCを直接操作する技術）- エンジニア以外の職種へのAI活用の広がり各スライドは簡潔に、ポイントを3つ程度に絞ってください。全体で8〜10スライド程度。日本語でお願いします。ーーーまずはAI側でデザインシステムを確認し、その後、HTMLでスライドが生成されます。出力結果ですが、まずは以下がタイトル。途中の内容は以下のような感じです。色味のせいもありますが、個人的には（いい意味で）あまりAIらしくない良い感じになっていると思います。図、というよりは画像ですが、以下のようにハーネスエンジニアリングに関連して馬の画像を貼り付けてもらっています。Editモードにすることで文字はもちろん、画面のデザインにおけるボタンやテキストのように各要素の位置や大きさ等を変更することが可能です。以下が右側のウィンドウを拡大したものになります。では、パワーポイントへ出力してみましょう。画面右上の「Share」ボタンをクリックすると以下のようなメニューが出ます。「Export as PPTX...」を選択すると更に以下のウィンドウが表示されます。各項目の説明は以下の通り。Editable · custom fonts ：デザインで使われているフォントをそのまま維持して出力。PCにそのフォントがインストールされている前提なので、自分のPC で編集する分にはデザインの再現度が一番高いです。ただし他の人に共有すると、その人のPCにフォントがなければ表示が崩れます。Editable · universal fonts（Recommended）：デザインのフォントをArial等のどのPCにも入っているフォントに置き換えて出力します。見た目は少し変わりますが、誰に渡しても崩れない。社内共有が目的ならこれが安全です。Editable · Google Slides fonts： Google Fontsに置き換えて出力。Google Slidesにアップロードして使う場合はこれが最も互換性が高いです。PowerPointで開く場合はuniversal fontsの方が良いです。Screenshot-based PPTX ： 各スライドを画像としてPPTXに貼り付け。見た目はClaude Designの画面と完全に同じになりますが、テキストの編集ができません。「universal fonts」で出力されたファイルを確認したところ、若干改行位置が変わっていたりしていまして、以下のように文字というか各要素が重なってしまっている箇所が見受けられました。Use speaker notes、その他所管あとは最初にOFFにした「Use speaker notes」を試してみます。これをONにして再度出力してもらうとスライドを表示しているウィンドウの下の部分に以下のようにスピーカーノート、口頭での説明用のテキストが出力されます。パワーポイントに変換した場合でもスピーカーノートもちゃんと出力してくれます。今回試した内容ではオートシェイプへの変換、つまり簡単な四角や丸を使った図がオートシェイプとして出力されず、画像として出力されてしまったのですが、今までのClaude、もしくはClaude Codeを用いたスライド作成ではちゃんと使用できていたので、恐らくプロンプト等を工夫することでうまくいくのではと思います。今回の場合ではプロンプトでそれなりに内容について指示をしたためか表示されませんでしたが、別途試した時には資料の内容について選択肢が表示され、どういったトーンでまとめるかといったやり取りがHTMLでの出力の前に行われ、一発でかなり想定に近い形の見た目になりました。最後に当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Designでスライド作成

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。ここ最近Xや社内においてSuperpowersというプラグインが良いという意見がチラホラありまして、ちょっと試してみました。github.com設定まずは設定から。以下、Claude Codeでの操作になりますが、まずマーケットプレイスを登録する必要があります。/plugin marketplace add obra/superpowers-marketplace次に、このマーケットプレイスからプラグインをインストールします。/plugin install superpowers@superpowers-marketplaceインストール自体はこれで終了。では、Claude Codeを起動し、/pluginでインストール・有効になっていることを確認してみます。上記スクリーンショットでわかる通り「superpowers」がenabled＝有効になっていることが確認できます。実行では、早速実装してみましょう。以下、非常に簡単ではありますがプロンプトをなげてみます。「Todoアプリを作ってくださいすると質問が始まります。次に以下の質問。Todoの項目として管理したい情報はどれですか？A) タイトルのみ（シンプル）B) タイトル + 期限日C) タイトル + 期限日 + 優先度（高/中/低）D) その他（教えてください）更に次の質問。UIのスタイルはどうしますか？A) Bootstrap（既存のRazor Pagesテンプレートに含まれている）B) Tailwind CSS（モダンなユーティリティファースト）C) シンプルなCSS（外部ライブラリなし）そして、ユーザー認証、Todoの表示・フィルタリング機能といった形で質問が続きます。一通り質問が終わって要件が揃ったということでアプローチについての質問になります。AJAXにするかEF Coreにするか。すると設計内容についての確認へと進みます。まずは「セクション１：アーキテクチャ概要」。そして「セクション２：データモデル」。「セクション３：ページ構成とＵＩ」「セクション４：エラーハンドリングとセキュリティ」以上の内容に問題が無ければ以下の場所に設計書が作成されます。\docs\superpowers\specs次に実装方針がプロジェクト内の以下の場所に作成されます。docs\superpowers\plans\2026-04-18-todo-implementation.md内容は割愛しますが、具体的な実装内容まで書かれており、1000行以上の内容になります。今までのAIツールで作成される仕様書の中で一番データ量は多いかもしれません。次に実装方法について相談されます。文字が小さいと思いますので以下に転記します。サブエージェント駆動（推奨） —タスクごとに新しいサブエージェントを起動し、各タスク完了後にレビュー。高速で並列処理可能。インライン実行 — このセッション内で executing-plans スキルを使って順番に実行。チェックポイントでレビュー。サブエージェントもAIツールを使いこなしている人達が使っている印象かと思いますが、Superpowersを使えば使い方がわからなくてもこのタイミングで提案してくれます。そしてここ最近よく使われているGit Worktree。話には聞くけど使っていないという方もいらっしゃるかと思いますが、これも設定して使用してくれます。そしてタスクリストを作成し、それに沿って作業が進められます。TDDに従ってテストプロジェクト、テストコードも作成され、テストが通っていることも確認できます。visual-companionスキルあとはブレインストーミングの中のvisual-companionというスキル。こちらが個人的に一番面白い機能でした。実際に起動してみると以下のような文言が表示されます。「UIの見直しをしているので、ビジュアルで確認できると便利なことがあると思います。モックアップ、レイアウト比較、ワイヤーフレームなどをブラウザで表示しながら進めることができます。この機能はまだ新しく、トークンを多く使う場合があります。試してみますか？(ローカルURLを開く必要があります)」そしてlocalhostで以下の画面になります。 次に以下のようにUIに関する質問があり、最初の質問です。今回のUI見直しの主な目的はどれに近いですか？  - A — アプリ全体のビジュアルデザインを刷新したい（カラー、フォント、スタイル）  - B — ナビゲーション・ページ構成を改善したい（ログイン/Todo機能含む）  - C — Todoページなど特定のページにフォーカスして改善したい  - D — 上記の複数またはそれ以外場合によっては先ほどの画面に以下のようにビジュアルを実際に確認・選択できます。以下はカラーパレット。そして最終的にモックアップを見せてくれました。その場でデザインの比較・確認ができるので非常に良いです。いかがでしょうか。ここ最近のAIツールのトレンドになっている仕様駆動開発、Git Worktree、サブエージョンといった様々な機能を使ってくれます。では、改めてこのSuperpowersのreadmeを見てみましょう。基本的なワークフローとして採用しているのが・設計時におけるブレインストーミング・GitWorktreeの使用・サブエージェント駆動開発・テスト駆動開発等で実際に謳われているのがわかります。次にスキルライブラリとして以下のようなものが設定されています。■テスト駆動開発レッド・グリーン・リファクタリングサイクル（テストアンチパターンのリファレンスを含む）■デバッグ体系的なデバッグ- 4段階の根本原因分析プロセス（根本原因追跡、多層防御、条件付き待機手法を含む）■ブレインストーミングソクラテス式デザイン洗練法■計画書作成詳細な実施計画また、Philosophy（哲学）として以下のように書かれています。これらも普段AIでコーディングを行っている人にとっては必要性が感じられるのではないでしょうか。・テスト駆動開発- 常に最初にテストを書く・場当たり的ではなく体系的に、推測ではなくプロセスに基づいて行動する・複雑性の低減- シンプルさを第一の目標とする・主張よりも証拠を重視する- 成功を宣言する前に検証する最後にいかがでしょうか。一言でいえば「至れり尽くせり」もしくは「全部盛り」という印象です。サブエージェントやGit Worktreeを使っていない方はこのプラグインを入れて試してみてはいかがでしょうか。当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

至れり尽くせりのSuperpowers

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。２月、３月とAWSとAzureに関するAI関連のトピックが発表されました。そそれが「AWS agent-plugins」、「Azure Skills Plugin」です。発表時期としてはAzureが2月、AWSが3月となりまして、今回はAzure Skills Pluginについて書いてみたいと思います。今回はClaudeCode上で試してみたいと思いますが、Azure Skills Pluginを使う場合、まずプラグインのインストールが必要となります。まずは以下を実行してください。/plugin marketplace add microsoft/azure-skills/plugin install azure@azure-skills「/plugin install」実行時においては以下のスクリーンショットのように選択肢が出るかと思います。インストールの選択肢の意味としては以下になります。・user scope — 自分のPC全体で使える（どのプロジェクトでも有効）・project scope — リポジトリに.mcp.jsonが追加され、チームで共有される・local scope — このリポジトリのみ、自分だけ今回はデフォルトのまま、「Install for you (user scope) 」でいきます。インストールの前後で/reload-pluginsを実行し、正しくインストールできたかを確認してもよいと思います。実行では、このプラグインを試すにあたってプロジェクトを用意します。いつも私が試しているToDoアプリでは規模的に小さすぎることもあり、今回は海外製のCMS、Xperience by Kenticoのサンプルを使ってみたいと思います。これは仮想コーヒー店サイトでECサイト機能もありますのでちょうどよいかと思います。github.com一旦このプラグインのドキュメントに従い、英語で以下のように指示します。What Azure services would I need to deploy this project?（このプロジェクトを展開するには、どのAzureサービスが必要ですか？）Azure Best Practices (MCP) が起動している旨が表示され、Azure サービスの利用におけるコード生成、運用、デプロイに関するベストプラクティスのリストが返されます。何回か承認を繰り返し、以下のようにデプロイに必要なサービスが表示されます。せっかくなので２枚に渡って全ての内容を挙げておきます。見積もり次に見積もりです。以下のように見積もり結果が表示されます。そして、このコンソール上で情報の提示が終わってしまうとチーム内やお客様にも共有ができないため、ドキュメントに起こしてみます。AIで開発していくのであればMarkdownが良いとは思うのですが、今回はお客様への展開ということも考慮に入れて、パワーポイントに出力してみます。実は今回Claude（ClaudeCode）を選んだのはパワポの出力に強みがあるためという意図もあります。そして出力結果の一部抜粋が以下になります。ちょっと見た目的に「AIで書いた感」が強めですが、Claudeであればこの辺りは如何様にでも調整できますのでまずは出力内容に着目していただければと思います。内容も確認しましたが、妥当な内容となっておりますので資料の体裁さえ整えればそのままお客様にも提示できそうです。Bicep作成更に（Infrastructure as Code）としてBicepを作成してもらうこともできます。BicepとはAzure リソースをデプロイするドメイン固有言語でして、Bicepファイルを作成することで対象のインフラストラクチャを繰り返しデプロイすることができます。依頼すると先ほど自身が考えたシステム構成に従ってBicepファイルを作成してくれます。ファイル一覧・ファイル構成は以下。これをClaudeCode上で実行してもらうことで環境のデプロイが可能となります。セキュリティチェックあとは以下のようにセキュリティに関するアドバイスやコンプライアンスチェック等もスキルとして存在しています。What are the security best practices for this project on Azure?（Azure でのこのプロジェクトにおけるセキュリティのベストプラクティスにはどのようなものがありますか？）What compliance issues should I be aware of before deploying to Azure?（Azure へのデプロイ前に、どのようなコンプライアンス上の課題に注意すべきですか？）What RBAC roles would this application need on Azure?（このアプリケーションには、Azure 上でどのような RBAC ロールが必要ですか？）例えば「Azure でのこのプロジェクトにおけるセキュリティのベストプラクティスにはどのようなものがありますか？」と問い合わせた結果が以下。上のスクリーンショットでは文字が小さいと思いますので以下に一部抜粋しておきます。1. 認証・ID 管理Managed Identity（最優先）- App Service にシステム割り当てマネージド ID を有効化し、SQL Database・Blob Storage・Key Vaultへのアクセスをパスワードレスで実現- 接続文字列に資格情報を埋め込まない// appsettings.json の接続文字列（パスワードなし）"ConnectionStrings": {"CMSConnectionString": "Server=xxx.database.windows.net;Database=DancingGoat;Authentication=Active Directory ManagedIdentity;"}// Blob Storage も同様builder.Services.AddAzureClients(clients => {clients.AddBlobServiceClient(new Uri(".blob.core.windows.net">https://.blob.core.windows.net"));clients.UseCredential(new DefaultAzureCredential());});最後にAzure Skills Plugin、いかがでしょうか。これでコードだけでなくインフラ面についてもAIが活用でき、更にはかどりそうです。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Azure Skills Pluginを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。4月11日にClaude CodeにおいてUltraplanという機能が公開されたということでどんなものか試してみました。Ultraplanは、ローカルのCLIから、Web版のClaude Codeプランニングを依頼し、クラウド上ではプランを作成し、その間もユーザーはターミナルで作業を続けることができるというものです。「CLI上で提供される内容よりも充実したレビュー画面が必要な場合に便利」とのこと。他の利点として公式ドキュメントで挙げられているのは以下になります。的を絞ったフィードバック：　計画全体に返信するのではなく、計画の個々のセクションについてコメントできるハンズフリー設計：　図面はリモートで作成されるため、端末は他の作業に自由に使用可能柔軟な実行：　ウェブ上で実行するためのプランを承認し、プルリクエストを開くか、　ターミナルに送り返すことができる準備Ultraplanを利用するには、ウェブ版でClaude Codeが利用でき（https://claude.ai/code/）、GitHubリポジトリが必要となります。Web版のClaude Code、Claude Code on the Webの画面は以下の通り。プロンプト入力欄でGithubのリポジトリが選択できるので事前に対象のリポジトリを設定したほうがよいかもしれません。まずはお試しで事前にToDoアプリを作成し、GitHubにコミット＆プッシュしておきます。実行その上でUltraplanを実行してみましょう。CLIから /ultraplan ＋プロンプト で起動するほか、プロンプト中に「ultraplan」という単語を含めるだけでも動作します。今回は以下のように入力しました。「/ultraplan テスト自動化の仕組みを整備する」すると以下のようにClaude Code on the webを起動するかどうか聞かれますのでそのまま実行してもらいます。そうするとClaude Code on the webが起動し、依頼した内容が実行されます。Ultraplan実行時のCLI上では以下の赤枠部分にインジケーターが表示され、進行状況が把握できます。進行状況は以下の３種類が存在します。◇ ultraplan：　コードを調査し、計画を立案中◇ ultraplan needs your input：　クロードから確認したい質問があります◆ ultraplan ready：　プランはブラウザで確認可能計画が作成されるとブラウザ上にその内容が表示されます。スクリーンショットでは文字が小さく見えますが、このブラウザ上でのプラン表示が今回のポイントでもありますので３枚ほどスクリーンショットを載せておきます。ブラウザの拡大機能等で見てみてください。いかがでしょうか。プロンプトとしては非常に簡単な内容ではありますが、変更対象ファイルや変更手順、フロー図や検証方法といった構成でかなり詳しく計画が立てられています。さらにこの計画内容についてはユーザーがコメントを追加することも可能であり、コメントへの対応を依頼すると、計画が修正され、更新されたプランが再度提示されます。このように実装までに何度でもClaudeと納得がいくまで計画を練り直すことができます。プランが問題無ければ次に進みますが、on the webのプロンプトでは以下の３つの選択肢が表示されています。・Claudeのプランを承認してコーディングを開始・プランを承認してターミナルに戻る・代わりにClaudeに何をすべきか指示する今回は「Claudeのプランを承認してコーディングを開始」を選び、Web上で作業を進めてもらいましょう。実装が終わると以下のようにPull Requestを作成するか求められます。ちなみにクラウド上でビルド・テストができればPull Requestの作成まで進められるのですが、今回のサンプルプロジェクトはC#であるためクラウド上ではビルド・テストができず、一旦ローカルで確認してからPRを作成することになります。とりあえず 「PRを作成」 ボタンを押して作業を進めます。GitHubを見るとPull Requestが作成されていることが確認できます。今回ビルド時にCIが失敗していたためにローカル環境で修正を行いまして、CIが通ったことも確認済みです。最後にUltraplanはResearch Previewということもあり、現時点では制約もありますが、計画の作成・レビュー・実行をクラウドとローカルで柔軟に使い分けられる点は、従来のCLI上での作業に比べて明確なメリットがあります。大規模なリファクタリングや複数ファイルにまたがる変更を扱うケースで、特に効果を発揮しそうな機能です。当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

プランニングをブラウザで：Claude CodeのUltraplan機能

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。4月2日にCursorのバージョン3.0が発表されました。今回は3.0における変更点についていくつか紹介してみたいと思います。エージェントウィンドウまずはこのエージェントウィンドウが大きな変更になるかと思います。バージョンアップ後、いつものCursorのIDEの右上あたりを見ると以下スクリーンショットの赤枠部分、「Agents Window」というリンクが表示されているのでこれをクリックします。すると以下のようなウィンドウが表示されます。左側のメニューには「New Agent」と「Marketplace」があり、まずはMarketplaceを選択してみますと以下の画面に切り替わります。文字通りマーケットプレイスとなりまして、AWSやSlack等のプラグインやMCPサーバーがここで選択・設定することができまして、50個以上はあるのではないでしょうか。そして前の画面に戻ってプロンプト入力欄の「＋」アイコンをクリックすると以下のように各種エージェントやスキル、MCPサーバーの設定が可能になります。あとはプロンプト入力欄に「/」を入力すると以下の内容が表示されます。デフォルトのスキル、コマンド、モードが選べます。ちょっと試しに「/explain」と叩いてみますと以下のように説明してほしい内容を求められ、今回は現在のプロジェクト構成を説明してもらいました。こちらはVisualStudioで作成したサンプルプロジェクトになります。画面右側に新しくウィンドウが表示され、以下のように色々と対象プロジェクトの仕様が表示されます。既存のプロジェクトに参画した人等はまずはこの「/explain」コマンドを実行して内容を把握するのもよいのではないでしょうか。実装してみるでは、このエージェントウィンドウで実装を試してみたいと思います。いつものToDoリスト作成で以下のプロンプトを投げてみます。モードはPlanモードで。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」まずは以下のように画面右側に表示されたウィンドウに仕様書が表示されます。最後の方には以下のようにTo-dosが表示されまして、右側に小さく表示された「＋New」をクリックすると独自のTodoが追加可能です。仕様に問題が無ければ実装が始まり、以下のように追加・変更点が表示されます。このあたりはIDEと同じですね。内蔵ブラウザ　デザインモード最終的に以下のように起動まで進みまして、URLをクリックしてみます。すると以下のように内蔵ブラウザが表示されます。内蔵ブラウザのウィンドウの右側にも色々とメニューがありまして、上部アイコンの一番左のアイコン（ShowConsole）をクリックすると以下のようにChromeのデベロッパーツールと同じウィンドウが表示されます。また、ShowConsoleの左隣のアイコン、DesignModeを選択すると以下のように画面上の各要素が選択でき、それに対して直接指示を出せます。例えば以下のようにタイトルを選択し、「文字色を赤にして」といったような感じです。IDE側でも以前から要素選択はできるのですが、指示はあくまでいつものプロンプト入力欄で行うため、若干操作方法が異なりまして、個人的にはこちらの方がわかりやすいですし、使いやすいかなと思います。その他機能あとはある程度作業が進むとプロンプト入力欄の上部に以下のように「Review」と「Commit&Push」というボタンが表示されます。Reviewボタンをクリックすると右側のウィンドウに前回のコミットからの変更点が表示されまして、このように気軽に確認できるのはなかなか良いかなと思いました。もう１つの「Commit＆Push」はそのままなので割愛しますが、以下のようにコミット、コミット＆PR作成、プッシュと各操作を選ぶことができます。あとは最初の方にチラ見せしたコマンドのうち「/review」コマンドを試してみましょう。その名の通りではありますが、現在の実装に対してレビューを実施してくれます。右側のメニューから「New Agent」をクリックし、再度同じプロジェクトに対してエージェントに作業を依頼することができます。以下はWebApplication2というプロジェクトに対して３つエージェントを起動した状態です。もう１つこちらも地味ですがなかなかいいかもと思った機能として右側のウィンドウに仕様等が表示されるわけですが、以下のように図も表示されます。Claudeのデスクトップアプリの「Imagine with Claude」のように図が表示され、拡大アイコンを押すと以下のように拡大されます。「Imagine with Claude」のようにインタラクティブなものではないですが、Markdownですとビューワーを別途表示させなければならないこともありますので地味に便利かなと思いました。Cursorを使っていた方ならご存じかもしれませんが、今回のこのエージェントウィンドウ、これは以前からの機能であるクラウドエージェント（https://cursor.com/ja/agents）をデスクトップアプリ内で実現できるようにしたものになります。全くイコールではなく、上で挙げたように色々と機能が追加されてより使いやすくなっています。是非皆さんも試してみてください。最後に当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor3.0を触ってみる

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。今回はGoogleのAIデザインツール、Stitchに関する記事になります。AIデザインツールは皆さんもご存じの通り他にも色々ありまして、先日記事を書いたPencil.devもその１つです。blog.nextscape.netそしてこのStitch、こちらはGoogleが開発したものであり、昨年5月のGoogle I/Oにて発表されました。昨年秋ごろにも触ったことがあったのですが、デザイン面はあまり詳しくないことと、デザインの素人として「おお！」と思えるものがなかったためにそのままとなっていました。先日3月18日に大幅アップデートされたということで改めて記事として書いてみようと思います。ログイン直後ログインしてもらうとわかるのですが、引き続きベータ版となっておりまして無料で利用可能です。モデルとしては以下になります（2026年3月20日時点）。当たり前かもですが、GoogleのツールですのでGemini系、Gemini 3.0Flash、Gemini 3.1 Pro、あとはNano Banana Proで既存のアプリやサイトの再設計ができるRedesign、問題解決のためのIdeateの４つ（後半２つは「モデル」ではないと思いますが、選択肢の紹介として挙げておきます）。今回は3.0 Flashでいきます。デザイン依頼早速デザインを依頼してみましょう。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。」そして、プロンプトを投げた結果が以下の画面。Pencil同様、まずは画面が作成・表示されると思ったのですが、おもむろに「仕様書」が作成されました。この仕様書の確認を求められると共に、更に修正したい点があるかどうか、その候補も挙げてくれます（以下選択肢が見切れてますが、ドラッグ＆ドラッグでスクロールします）。そこで２の「期限の設定機能も追加してください～」を選んでみましょう。そうすると以前の仕様書はそのままにもう１つ新たに作成されまして、これについても「え？」となりました。先にこの後の話を書いてしまうとデザイン画面についても修正・改修を行った場合は過去のデザインをそのまま残して新しいデザインが「追加」する形となります。今回「vibe designへの招待」として大幅アップデートした特徴の１つがこのキャンバス画面でして、「AI-native, infinite canvas」、直訳で「AIネイティブ無限キャンバス」という表現をしています。デザイン作業には分岐・収束が頻繁に起きうるため、その過程全てをコンテキストとして残す、という思想がこの無限キャンバスにあり、そのため、仕様書についても過去のものは削除せず残しておく形になります（完全に不要であれば削除することも可能です）。つまり、この無限キャンバスがStitchにおける「コンテキスト」のすべてになるわけです。作られたToDoアプリの画面が以下になります。当然プロンプトやプロジェクトによって違いはあるものの、Cursorからいきなり実装を行った場合とは異なり、かなりリッチな印象を受けます。この後のデザイン調整は基本的にプロンプトによって行うことになりますが、文言変更に関しては右側のメニューアイコンから「Direct Edit」を選ぶと以下のように直接テキスト編集を行えます。DESIGN.mdもう１つの特徴が「DESIGN.md」という設定ファイル。ClaudeにおけるClaude.mdのように、そのデザインのルール（色・フォント等）がMarkdownファイルとして保存されています。このMarkdownファイルがあることでそのプロジェクトにおけるデザインについて一貫性を持たせられることはもちろん、他のプロジェクト、他のツールにも共有することで一貫性を持たせることが可能になりました。「FigmaファイルやブランドガイドのPDF、デザイナーの頭の中にしかない情報をDESIGN.mdに残す」と公式サイトにも書かれています。これは個人的な考えですが、コーディングにおけるSSD、仕様駆動開発をデザインにも適用するための方法がこのDESIGN.mdなのではと（勝手に）思っています。このDESIGN.mdは複数保持・管理が可能です。以下のメニューで「Import from website」を選択し、URLを入力することで既存のサイトのデザインを取り込んでDESIGN.mdを作ることもできます。予測ヒートマップあとは以前からあった機能ではあるのですが、興味深かったのでもう1つ機能の紹介を。上部メニュー「Generate」から「予測ヒートマップ」を選択します。すると以下のように実データではなくあくまで今のデザインに対する「予測」なのですが、ヒートマップが表示されます。これを参考にして、意図に反してあまりユーザーが注目していないところ、操作していないところがあればデザインを見直してもらうといった使い方ができます。他ツールとの連携、エクスポートあとはこれも以前からの機能ではありますが、他ツールとの連携、エクスポートについて。まずは以下プルダウンメニュー下からになりますが「ダウンロード」。こちらはZIPファイルがダウンロードされ、解答すると各画面のスタンドアロンHTMLと画像ファイル（pngファイル）が取得できます。次に「Figmaにコピー」。こちらはクリップボードに画面デザインがコピーされ、Figmaを開いてペーストすれば簡単にFigma上にStitchで作成した画面デザインが貼り付けられます。ただ、日本語ですと文字化けしている部分もありますのでこちらは注意が必要です。その他のエクスポート対象の項目を挙げておきます。特記すべきは「MCP」でしょうか。StitchのMCPサーバーを使ってCursorやClaudeなどのツールから接続することができます。といったような色々な機能を持つStitchですが、Figmaライクの細かいデザイン調整はできません。そのため、もしデザインにこだわりたい場合は・まずはStitchでコンセプトを複数生成 → 2〜3 案に絞る → Figma にエクスポートしてピクセルレベルで調整もしくは・Cursor（や、他のAIツール）にデザインを取り込んで、Cursor側で微調整を行うといったハイブリッドワークフローが現状の最善策になるのかなと思います。また、単純なデザインツールではなく、画面遷移のトリガー等を指定し、複数画面を選択した上で以下の「Instant Prototype」を実行すると画面遷移のみの簡単なプロトタイプとして動作を確認することもできます。モバイル、タブレット、デスクトップ（PC）といった画面サイズも設定できますのでPencil.devよりもプログラム・実装寄りのデザインツールと言えます。終わりにいかがでしょうか。デザイナーの方というよりはエンジニアの方が使用する前提なのかなという部分はありますが、DESIGN.mdによってその思想を他のツールに連携することも可能となり、他のデザインツールと一線を画す、便利なツールになっていると思います。まだこれからになりますが、最近更に進化を遂げたAI Studioの連携が気になっておりまして、また別途記事にできればと思います。Googleは最近になってFirebase Studioの終了（～2027/3/22）と、AI Studio及びAntigravityへの移行を促しており、今後の動向が非常に気になっておりますのでまた何か新しい情報があればこのブログでも取り上げてみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Stitchを触る

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。今回はbolt.newについて。bolt.newこのbolt.new、クラウドベースの統合型Webアプリケーション開発環境になりまして、最近の表現であればAIアプリビルダー（公式ページではこの表現でした）、Vibe Codingツールといった方がよいかもしれません。開発会社はアメリカ、サンフランシスコのStackBlitz社になります。類似のツールとしてよく比べられるのはLovableでしょうか。Lovableもまだ本ブログでは扱っていないものですが、今回bolt.newの説明にあたってアプリを作りつつ、Lovableとの違いを調べてみたいと思います。価格まずは価格。以下はbolt.new。そしてLovable。現時点（2026年3月20日時点）での価格設定であること、Googleの翻訳機能での内容となりますので正確な情報はそれぞれのサイトを直接確認いただくか、各サイトにお問い合わせください。という但し書きはあるものの、Proプランよりもう１つ上のプランになるとBolt.newが20ドル安く、更に年契約になると最大28％節約（Proプランだと月額で25ドルから18ドル！）になりますので単純な比較はできないもののbolt.newの方がややお得かもしれませんね。プロンプト入力欄まずはいつもの私の記事と同様、ToDoアプリを作成してみます。ちなみに無料プランで試しておりまして、選択できるモデルは以下のようにClaudeのみとなります。「Codex」の表示もあるのですがマウスを当てると「Comming soon」とのことでした。LovableはGeminiとGPTだったのでなかなか対照的ですね。今回はSonnet4.5で進めたいと思います。あとは他のツールとのコネクタ設定。繋げられるツールの数はLovableがやや多い感がありますが、大事なのは「使いたい」ツールがあるかどうかなので皆さんそれぞれ確認してみてください。PlanモードのON、OFFができるようですので今回はONにしておきます。アプリ作成TOPページにまずはプロンプトの入力欄があるので以下の内容を入力します。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。」すると以下のような画面に切り替わり、左側でプロンプト、右側にアプリが表示されます（以下のスクショではまだこれからですが）。一通り作業が終わると以下のようにToDoアプリが画面右側に表示されます。実際にタスクを追加してみましたが問題無く動作しています。さて、アプリが作成できたところで他の機能を見ていきたいと思います。画面上部にメニューがありまして、まずは「Code」その名前通り、プロジェクトツリーと各ファイルが表示され、編集可能です。Lovableでもコードは見れますが、有料プランでないと直接編集することはできません。次にDatabase。bolt.newは無料プランでもデータベースが作られ、そこに（必要に応じて）データが格納されます。そしてその内容をGUIで直接参照でき、クエリを実行することもできます。以下はToDoアプリでタスクを1つ作成した状況です。Lovableとの違い他のLovableの違いですが、特徴的なのは以下の３つでしょうか。【サポートされているフレームワーク】・bolt.new：React、Vue、Next.js等・Lovable：Reactのみ【Figmaデザインのインポート】・bolt.new：有り・Lovable：無し【画面デザイン編集】・bolt.new：不可・Lovable：可能フレームワークはもちろんなのですが、画面デザインでもちょっと好みが分かれるかもしれません。Figmaデザインからのインポートができるという点においてはFigmaユーザーとしてはbolt.newが良いのかもしれません。逆にそれ以外の方法でbolt.newにおいてデザインを変更するにはプロンプトでの依頼になりますので、煩わしいと思う方もいるかもしれません。ちょっとした文言変更であればLovableであれば直接変更可能ということもありまして、皆さんそれぞれどちらが良いかお試しいただければと思います。と、書いていて思い出しましたが、文言変更であればbolt.newでも直接コードを編集すればよいので大丈夫ですね。やはりそうなると「デザイン」の変更になりますのでAIへの依頼で事足りそうな気がします。それ以外に好みが分かれるのはやはりAIモデルでしょうか。Claudeが好きな方はbolt.new、Geminiが好きな方はLovableになるのかなと。また数か月経つとこのあたりの違いがより顕著になってくるかもしれませんので楽しみなところです。最後に当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

bolt.newでVibe Coding

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。AIでのドキュメント生成というのはまだ色々と試行錯誤状況かなと思います。とある会社でAIを推進するために社内のドキュメントをMarkdownに統一したといった情報も見受けられますが、それでもExcelやWord、PowerPointにもそれぞれの良さがあり、更には普及率の面からもそれらのドキュメントの使用はしばらくは避けられないかなと思います。個人的な感想なのですが、Office系のドキュメントの扱いについてはClaudeが一歩抜きん出ているような印象があります。インプット・アウトプット、いずれにしてもOffice系のファイルを扱う場合はClaudeのデスクトップアプリを私は使っておりまして、Wordはそれほどまだ使っていないもののExcel、PowerPointに関しては読み込んでもらうにしても出力してもらうにしても非常に満足の行く出来になっております。AI+Excelでの出力に関してはMicrosoftが公式で昨年10月ごろにAgentModeというのを出してまして、これを使うことで「今開いているExcelファイル」に対してAIで指示を出し、色々と書いてくれます（当時はWeb版のExcelのみでしたが、2026年3月14日現在、色々と変わっているようですので以下の記事はあくまでご参考までに留めておいていただければと思います）。blog.nextscape.netまた、同じくClaude for ExcelというClaude公式のプラグインが昨年末12月に発表されまして、これも同じように今開いているExcelファイルに対して操作が行えます。そして、MicrosoftがAgentmodeを発表した際の記事にはPowerPointも近々発表ということで期待しておりましたが、一足先にAnthoropicがPowerPoint版を発表してくれました。これが今回試してみる「Claude for PowerPoint」になります（2月ごろにこれを扱うブログ等を見ると「Claude in PowerPoint」と書かれているものが多かったのですが、現時点でAnthoropicのサイトを見ると「for」となっていましたので本記事では「Claude for PowerPoint」で進めます）。設定では早速設定から進めてみたいと思います。まずはExcelを開いてください。新規ページでもいいですし既存のドキュメントでも構いません。そのあとメニューバーから「ホーム」ー＞「アドイン」を選択してください。以下のようなウィンドウが画面右側から表示されますので、検索窓に「Claude」と入力するとClaudeのアイコンの「Claude by ～」という項目が先頭に表示されると思いますのでそこの「追加」をクリックしてください。そうするとClaudeへのログインが促されまして、以下のように右側にプロンプト入力のウィンドウが表示されれば準備完了です。当然ながらClaudeの契約が必要となりますのでまだ未契約の人は契約してからお試しください。モデルの選択も可能でして、今現在選択できるモデルは以下の３つになります。入力欄の「＋」アイコンをクリックすると以下のようなメニューが表示されます。ファイルの添付以外にコネクタとスキルも使えるようですね。スライド作成実行いつもこのOffice系のテストとして試している内容として「AWSとAzureの違いをメリット・デメリット含めまとめてください」というプロンプトがありまして、今回もそれを投げてみます。そうしますと最初に試したときと違った、かつ興味深い動きになりましたので共有しますと以下のような選択肢が出てきます。次に以下。そして、もう１つ最後に以下の質問が出てきますのでそれぞれ希望に応じて回答します。選択肢にないものは「Something else」で自由に文章を入力できます。次にストーリーライン、構成案を示してくれますので問題なければそのまま続けてもらいます。そうすると資料が次々と作成され、最終的に以下のように作成完了の旨が表示されます。いくつかページをお見せします。以下のようにオートシェイプを使ったグラフを表示したり。。テーブル、表も以下のように作ってくれます。いかがでしょうか。次にもう１つ試してみましょう。Copilotでも０から１の資料作成は可能でしたが、既存の資料の、特定のページに対しての操作はできませんでした。ということでそれを試してみたいと思います。上で上げたグラフのページに対して「縦のグラフにしてもらえますか？」とお願いしてみます。結果が以下になります。こういったレイアウトはもちろん「ちょっとここの文字を大きく」とか「この部分はこの色で」といった要望にも応えてくれます。その他、便利な使い方さて、Claudeに限らずAIでファイルを出力すると結構色とりどりな感じで資料が作られるのですが、会社でパワポを使われている方は会社のフォーマットにしたいなと思われるかもしれません。その場合は自社のファイルを添付し、このファイルをベース、テンプレートとして書き直して、もしくは書いてくださいとお願いすると添付されたファイルに近い形でフォーマットを「ある程度」合わせてくれると思います。ただ、私が試した感じですと頑張って近づけてくれてますが、もう一息かなという感じです。Claudeデスクトップアプリで同様の内容をお願いするとよりベースのファイルに近い形で出力してくれますので是非お試しください。最後に当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude for PowerPointを試してみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。先月2月5日にClaude Code Agent Teamsという機能がAnthropicから発表されました。Agent（エージェント）、そしてTeamsという言葉からなんとなくサブエージェントのようなものね、とスルーしていましたが、改めて見てみるととても興味深い内容でしたので試した内容を書いておきます。Agent Teams、単純に言えば複数エージェントを管理してくれる機能なのですが、それだけ聞くとサブエージェントとの違いがわからないと思うので、まずはその違い・比較を以てAgent Teamsの概要を説明したいと思います。（そもそもサブエージェントも取り上げようと思いつつ取り上げていないのでタイミングがあれば別途。。）まずはサブエージェント型。図に表すと以下のようになると思います。サブエージェント型の特徴としては・メインエージェントが 子エージェントを生成・各エージェントが 独立して作業・結果を メインエージェントに返すといったものが挙げられます。１つのエージェントで処理することでコンテキストの肥大化が起き、推論の遅延が発生するのを抑えられるのがメリットです。ではエージェントチームはどうなのか。図にすると以下の通り。エージェントチームの特徴としては・エージェントが 「チームとして」動く・タスクを 共有リストから取得・エージェント同士で 情報共有というものになります。他の表現としてはサブエージェントが親子構造、エージェントチームがチーム構造、あるいはサブエージェントがタスク分割型、エージェントチームが協働型という表現ができるかなと思います。では、上記の違いで何が良いのか、これは公式ドキュメントの以下の部分に集約されると思います。"When the root cause is unclear, a single agent tends to find one plausible explanation and stop looking.""Sequential investigation suffers from anchoring: once one theory is explored, subsequent investigation is biased toward it.""With multiple independent investigators actively trying to disprove each other, the theory that survives is much more likely to be the actual root cause."直訳は以下。「根本原因が不明な場合、単独の調査担当者は一つの妥当な説明を見つけ出すと、それ以上探求を止めがちである。順次的な調査はアンカリング効果に陥りやすい：一度ある仮説を検証すると、その後の調査はその仮説に偏る。複数の独立した調査担当者が互いの仮説を積極的に反証しようとする状況では、生き残った仮説が実際の根本原因である可能性がはるかに高くなる。」複数エージェントがチェックし合うことによる品質の向上、というところが今回のエージェントチームのメリットのようですね。準備・設定では、実際に試してみたいと思います。オンラインドキュメントにも書かれているのですが、エージェントチームはまだ試験運用中のものでして、デフォルトでは無効になっています。そこでsetting.json内に以下のように環境変数を設定することで有効にできます。{  "env": {    "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"  }}あとは表示モードとして２つのモードがあります。・インプロセス：すべてのチームメイトはメインターミナル内で実行されます。Shift+↓キーでチームメイトを切り替え、直接メッセージを送信できます。どのターミナルでも動作し、追加の設定は不要です。・分割ペイン：各チームメンバーに専用のペインが割り当てられます。全員の出力を一度に確認でき、ペインをクリックして直接操作できます。tmuxまたはiTerm2が必要です（つまりMac、Linux推奨）。今回はWindowsでの動作になるのでインプロセスになります。自動検出でもいいのかもしれませんが、以下のように起動することで強制的にインプロセスモードで起動します。claude --teammate-mode in-process実行では早速実行してみましょう。以下のプロンプトを投げてみます。「ToDoアプリを作るエージェントチームを作ってください。PMが要件定義、バックエンドがAPI実装、フロントエンドがUI実装、QAがテストを担当する構成で。」まずは以下のようにチームを作成し、メンバーの招集が始まります。指示した通り４つのエージェントが招集（作成）されます。チームの立ち上げが完了し、実行フローと、成果物が示されます。そして作業に入ります。まずはPMが要件定義を作成します。以下のように各メンバーの状況が表示されます。以下の状況ではteam-lead、直訳ですがチームを導く担当が要件定義・設計を進めているのがわかります。時々通常のやり取りのように質問・確認が出てきますが、「Bash commad」のあとに「@backend」と表示されているのがわかるかと思います。これがどのメンバーからの質問・確認かを表しているものになります。なので質問・確認するメンバーが変わるとその部分が変わります。以下は「@frontend」なのでフロンエンド担当ですね。そして以下のように完了しまして、以降は割愛しますがToDoアプリの起動も確認できました。ちょっとインプロセスでの動作だったので少々分かりづらかったかもですが、このように各エージェントが非同期で処理を進めてくれます。また、今回は行なえませんでしたが、各チームのメンバーに対して個別に指示を出すこともできます。注意点と、このように一歩進んだ動きをしてくれるこのエージェントチームですが、現時点ではトークンの消費が激しいので注意してください。公式のオンラインマニュアルでこのトークンの消費を抑えるための対応方法として書かれている内容を幾つか抜粋します。１．チームメイトにはモデルとしてSonnetをご利用ください。調整タスクの能力とコストのバランスが取れています。２．チームの規模は小さく保ちましょう。各チームメンバーは独自のコンテキストウィンドウを実行するため、トークンの消費量はチームの規模にほぼ比例します。まだまだ試用段階ですので正式リリース時には更に洗練され、トークン消費量が抑えられることを期待したいと思います。最後にエージェントチームの特徴の１つは最初に書いた通り各エージェントでやり取りを行う点なので、今回のような単純なコーディングは役割分担の例としては良かったのですが、実際には効果は得られなかったかもしれません。例えば「本番で時々タイムアウトが出る。5人のエージェントに別々の仮説を検証させ、互いの仮説を科学的な議論で否定し合ってください」といったような指示、プロンプトでは更なる効果が期待できそうです。もしトークンの消費が気になる方は難しそうな不具合調査とか、そういった「いざという時」のために使うのが良さそうです。当社では既に活用事例もありまして、スピード重視での設計書作成、あるいは複数メンバーによるレビューでこのエージェントチームを利用しているとのこと。4人の性格を変えたエージェントにレビューさせ、そしてそれぞれのまとめ役を1人用意した5人のエージェントチームでの構成にしているそうで、「役割」ではなく「性格」別の各エージェントを用意した方が良いとのこと。当然お願いするタスクやプロジェクトによって効果は異なるかもしれませんので、このあたりは皆さんの方でも試してみてもらえればと思いますが、エージェントチームは最初に書いた通り、まだ試験段階なので使用にあたっては色々と十分に注意の上、お願いします。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Code Agent Teamsを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Pencil.devというデザインツールをXで見かけまして触ってみました。www.pencil.devHigh Agency, Inc. というアメリカのスタートアップが作ったツールとのこと。上記公式ページのTOPページでは「Introducing a new way to design right where you code.」とありまして、直訳では「コードを書いているその場においてデザインを行うための新しい方法を紹介します」。。ちょっとよくわからないですね。ということで実際に触ってみましたので紹介してみたいと思います。インストール及び設定このPencil、1月頃まではWindow版が無く、macOSとLinuxのみでしたが、2月にWindows版がリリースされました。早速ダウンロード＆インストールしてみると以下のような画面が表示されます。上記のダイアログでEメールアドレス入力するとそのアドレスにアクティベーションコードが届きますのでそれを以下のダイアログで入力します。すると以下のような設定ダイアログが出ます。ダイアログの上の部分にある通り、クイックスタートガイドへのリンクがありまして、Pencil.devのAI機能を使うにはClaude Codeへのログインが必要になります。ここでログインを行うとClaude CodeにおけるPencilのMCPサーバーの設定も自動的に行われます。設定も終わると以下のような画面が表示されます。そうしましたら、一旦その画面を離れまして、恐らくClaude Codeが起動していると思いますので「/mcp」とコマンドを叩いてもらい、PencilのMCPサーバーと繋がっていることを確認してください。以下のようにconnectedとなっていましたら設定完了です。デザイン最初の画面では色々表示されているのですが、一旦メニューバーの「File」ー＞「New File」で新しく画面を開いてください。すると以下のような白い四角が表示された画面が表示されまして、ここからがスタートになります。ではClaude Codeで以下のプロンプトを入力してみます。「Pencilのキャンバスにあるフレームに、ToDoアプリのUIをデザインして。以下を含めること：・ヘッダー（アプリタイトル）・タスク入力欄と追加ボタン・タスクリスト（チェックボックス付き、3〜5件のサンプルタスク）・完了/未完了のフィルタータブ　シンプルでモダンなデザインで。use the pencil mcp server」そうするとPencil側の白い四角だけだった箇所に色々と画面らしき内容が描画されていきます。最終的に以下のようにToDoアプリの画面が作成されます。画面上の部品をクリックするとFigmaライクの設定画面が表示され、ここで各部品のデザイン変更が可能となります。Claudeからの操作だけでなく、Pencilには以下のようなチャットウィンドウが存在しておりまして、ここで直接プロンプトを投げてデザイン変更も可能です。作成したデザインは.penファイルとして保存できます。このファイルの中身はJSONファイルでこの後作られるソースコードと同じリポジトリで管理が可能になります。次はこのPencil上で決めたデザインで実装してみます。以下のプロンプトを投げます。実装「Pencilのキャンバスにあるマイタスクのデザインを見て、ReactとTailwind CSSで実装して。実際に動作するToDoアプリとして、タスクの追加・完了チェック・フィルター機能も実装すること。use the pencil mcp server」そして実装された結果が以下のブラウザ上の画面になります。当たり前ではありますが、Pencilのデザインのまま実装されていることがわかります。このように設計と開発を同じ環境に統合することで両者のギャップを埋め、コンポーネントを設計し、コードと同期させ、AIアシスタントが設計と実装の一貫性を維持できる。というのがPencilの特徴となります。Design Kits &Style Guidesあとはメニューバー付近の「Design Kits &Style Guides」を選択してみると以下のような画面が表示されます。この画面は2つのセクションに分かれています。上段：Design System Components選んだコンポーネントセットがキャンバスに読み込まれます。たとえばLunarisというコンポーネントを選ぶと、左パネルにLunarisのボタン・カード・テーブルなどのパーツが並んで、AIがデザインを生成するときにそのパーツを使って作ってくれます。これによって生成されたコードが「Lunarisを使ったReactコード」として出力されるのでデザインの一貫性が保たれます下段：Style Guide to Apply in ChatこちらはチャットでAIに指示するときのデザインの参考資料として使われます。「PROJECT OVERVIEW」みたいなダッシュボード系のスタイルを選ぶと、AIがそのトーン・レイアウト・色使いを参考にしてデザインを生成してくれます。これでプロンプトで細かく説明しなくてもビジュアルイメージをAIに伝えられ、「こういう雰囲気で」という曖昧な指示が通りやすくなります。一言で言えば上段 = 使う部品を選ぶ、下段 = デザインの雰囲気を伝えるということになりまして、この2つを組み合わせることで、プロンプトだけでは伝えにくいデザインの品質・方向性をAIに伝えられるのがポイントです。Figmaとの互換性Figmaライクと書きましたが、Figmaを普段使っている方は互換性も気になるかもしれません。Pencilではメニューの「File」をクリックすると以下のようなメニューが表示されまして、「Import Image/SVG/Figma」で.figファイルをインポートすることができますし、その下の「How to Import from Figma..」をクリックするとFigmaからのインポート方法が表示されます。Xを見るとPencilで作ったものをまたFigmaで取り込みたいといった要望もあるようでして、それに応える形で以下のような「Pencil to Figma」というプラグインがFigmaには存在しています。他のAIツールとの連携あとはClaude Code以外のIDEを使っている方々のために公式サイトの「Download」では以下のような拡張機能が存在しています。これによりClaude Code以外のCursorやVSCode、AntigravityのユーザーでもPencilが使用可能になります。試しに「Add to Cursor」をクリックすると以下のようにCursorでPencilが利用可能となります。最後にPencilはまだアーリーアクセス段階ですが、Xを見るとかなり実用的なツールとして使っているFigmaユーザーの方もいらっしゃるようです。すでにClaude Codeを契約しているエンジニアであれば、Pencil自体は無料で使えますので、まずは気軽に試してみてはいかがでしょうか。デザインとコードの境界がなくなっていく流れは今後も加速していくと思われますので、引き続き注目していきたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

デザインツールPencil.devを触ってみた

ここ数ヶ月で、AI駆動開発の潮流が静かに変わり始めています。これまでのLLM活用は、チャット形式で問いかけ、返答を得る「同期型アシスタント」が中心でした。しかし 2025年末から2026年初頭にかけて、パラダイムは大きく変わり、非同期で長時間実行可能なエージェント／エージェントチームが新たな主役として台頭してきました。本記事では、最近の動向を整理しながら、AI業界がどこへ向かっているのかをまとめてみました。1. “エージェント化”が進んだ背景従来のチャットボットは「即時・一回きりの対話」でしたが、最近は継続的な作業をこなすAIエージェントが主流になっています。単一回のプロンプトで完結するのではなく、複数ステップ・状態保持・ツール操作の組み合わせを当たり前に行うようになっています。この背景には、生成AIが単なるテキスト生成エンジンから、自律的なシステムとして動作するための条件が揃いつつあるという構造的な変化があります。2. 各社の具体的な動きAnthropic Claude 系の進化Anthropic は Opus 4.6 や Sonnet 4.6 への進化を通じて、複数ステップのタスク実行性能と自律性の向上を進めています。Claude は単なる Code エージェントではなく、長時間・複数段階処理・外部ツールへのアクセスを前提にしており、連続的にタスクをこなせる設計です（例えば Excel → PowerPoint といった複数アプリ間のワークフローを保持する能力も追加されています）。加えて、Anthropic は「複数AIの並列協業」機能を進めており、Agent Teams 機能は複数AIが並行してタスクを分担し、効率的に作業する仕組みとして注目されています。このようなチーム構造は、従来の一人のモデルが逐次作業するパターンから脱却する動きです。さらに、Anthropic の API 統計では、全体のツール呼び出しのうち約半分がソフトウェアエンジニアリング関連であり、これが実際のコード作成や修正タスクに多く使われていると報告されています。加えて、エージェントのセッション継続時間も増加し、複雑なタスクを自律的に長時間処理する傾向が強まっています。OpenAI Codex 系の発展OpenAI 側も Codex を単なるコード生成モデルとしてではなく、複数エージェントを並列に動かしてプロジェクト単位のタスクをこなす設計方向へシフトしています。2026年2月には macOS 向けの Codex App で、複数エージェントの隔離実行（Git worktree など）や並列作業がサポートされたという事例が報じられています。これにより、同一プロジェクト内で複数AIに作業を任せ、それぞれが独立して成果物を生成するワークフローが現実味を帯びてきました。Cursor と統合型ワークフローCursor（AIコードエディタ） は、エージェント単体での補助ではなく、複数AIの役割分担による同時進行を強調しています。これは IDE 内での「Planner / Implementer / Reviewer」役割分担という考え方で、複数エージェントが同時並行でコード作成・レビュー・リファクタリングまで進める方向です。3. 技術の本質的な変化● 同期 → 非同期へ従来の生成AIは “問いかけ → 応答” の瞬間的フローが中心でした。しかし今日の AI エージェントは “タスク生成 → 考察 → 実行 → 結果検証 → 次ステップ” を一連の連続作業として扱います。この変化は、状態管理・継続実行・ツール連携という新しい設計軸を生みました。● 単一性能 → 協調とオーケストレーションへ生成AIの性能競争は依然ありますが、競争軸の一つが “どう複数エージェントを編成し協調させるか” になっています。これは、エージェント同士の依存関係・競合制御・状態遷移・エラー回復などが、単体モデルの性能以上に重視されるということです。● エンジニアの役割の変化AIエージェントの台頭によって、エンジニアは「コードを書く」作業から、AIのオーケストレーション（配置・監督・評価）に集中することが主流になりつつあります。この視点は、単に生成AIを呼び出すだけでなく、AIの設計思想・動作保証・安全性・ガバナンスまでを含めた設計能力が求められるようになるということです。4. 非同期エージェントの利点と課題利点複数ステップの作業を一括処理並列実行による速度改善タスク間依存関係を自動整理より人間中心の作業フロー（人は監督に集中）課題状態整合性の確保エラー時の回復設計APIコストと実行時間の制御生成物の品質保証とガバナンス5. まとめここ数ヶ月のAI業界の動きを整理すると、次のような傾向が強く見えてきます。AI生成は“単発応答”から“継続実行プロセス”へ変化しています。単一モデルの性能よりも、複数AIの協調とオーケストレーションが重要になっています。エンジニアは“コード生成者”から “AIデザイナー”へと役割が進化しています。2026年は、まさに 非同期AIエージェント時代の本格到来の年です。成功する開発組織は、単にAIをAPIとして使うだけでなく、AIを構造的なチームパートナーとして設計・評価し制御する仕組みを作ったチームです。いま問われているのは、「どのAIが一番賢いか」ではなく、「AIをどう組織化するか」です。この問いに向き合っていくことが今後のAI駆動開発ではテーマになっていくと考えています。 blog.nextscape.net

AIエージェントは「同期ツール」から「非同期チーム」へ──AI開発基盤の現在地

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Claudeを提供しているAntorotopicから「Claude Cowork」というコード以外にも使えるツールがリリースされています。claude.com元々はmacOS版が今年の1月12日にMaxプラン向けのみということで限定リリースされ、そこからProプランやTeamプランにも展開され、そして先日、といっても10日以上前、2月10日にWindows版がリリースされました。やや遅きに失した感もあるものの、macOS版の頃から気になっておりましたので今回どんなものなのかを調べてみました。Coworkによる資料作成さて、普段は私はClaudeのデスクトップアプリを使っておりまして、こちらは主にコーディング以外の部分、資料作成とか、仕事の中で発生したちょっとした疑問点を質問するといった形で活用していました。特に資料作成という点ではWord、Excel、そしてPowerPointでも読み書きが可能であるため、非常に重宝しておりまして、MacOS版がリリースされた時も（ちゃんと調べていないせいもありますが）その存在意義というのがよくわからず、別にCoworkは必要無いのでは。。？と思っておりました。で、今に至るわけですが、今回はまずは今までのClaudeでもやってきた資料作成をお願いしてみます。Coworkのチャットで「AIエージェントツールを比較してExcelにまとめて」とお願いしてみます。以下がその画面、通常のClaudeの画面と異なりまして、右側に「進捗状況」「作業フォルダ」「コンテキスト」が表示されています。以下が作業完了時の状況です。通常の場合と異なるのは「Sources」として情報元が明示されている点でしょうか。GoogleのNotebookLMもそうでしたが情報元が明示されているのは非常に助かります。上記画面の右側、「コンテキスト」ー＞「Web search」をクリックすると以下のように更に詳しくデータ元が表示されます。以下が生成されたExcel資料の内容です。「AIエージェントツール比較」シートと、もう１つ、「用途別おすすめ早見表」シートの２シートで構成されています。なかなかうまくできています。資料作成という点ではこの情報源の明示というのがCoworkならではのようです。まだこれだけですと違いが感じられませんので、もう少し調べていきます。スケジュールの最適化次にデフォルトのホーム画面が以下のようになります。「タスク」という表現からもエンジニア以外の方も含めたすべての方を対象にしているのわかります。チャット欄に幾つか例がありまして、例えば「Optimize my week」（週の予定の最適化）をクリックすると以下のようにサンプルプロンプトが表示されています。英語なのでちょっとわかりづらいかもですが、内容としては「週の計画と最適化を手伝って」という依頼をClaudeに投げるためのものです。プロンプト内ではGoogleカレンダーを対象としているのですが、私は仕事ではGoogleカレンダーではなくOutlookを利用しているため、Outlookに書き換えて依頼してみます。Outlookに対しては以下のWorkIQというMCPサーバーでアクセスできるはずなのでそれで依頼します（WorkIQもいずれ記事にしてみたいと思います）。learn.microsoft.comすると、Outlookのスケジュールデータを読み込んでくれて、スケジュール概要と、更に変更案の提案のための質問をしてくれます。まずは「特に達成したい目標や優先タスクはありますか？」ちょっと興味深かったので今回の質問を一通り載せてみます。次は「集中作業のために1日どのくらいの時間が必要ですか？」次は「カレンダーに載っていない締め切りや約束はありますか？」最後に「守りたい個人的な時間や境界線はありますか？」こうして一通り質問に答えると以下のようにスケジュールの内容を分析し、このように変えてみては？という提案をしてくれます。このインタラクティブなやり取りは今までのClaudeのデスクトップアプリでは無かったものでして、非常に寄り添って考えてくれている感があります。試しに変更を依頼してみましたが、WorkIQでは書き込みができないとのことで、.icsファイルを作成してそれを実行してみてくれと言われます。ClaudeではGmailやGoogleカレンダーのコネクタもありますので、上記のようなスケジュールの分析・提案がGoogleカレンダーでも行えます。ちなみに上記Googleカレンダーのプラグインでも読み込みのみで書き込みはできませんでした。セキュリティ的に制限をかけているのかもしれません。ここでピンときた方もいらっしゃるかもしれませんが、Claude in ChormeというChromeの拡張機能を使えばGoogleカレンダーへの書き込みは行えます。以下は実際に「2/24、10～11時に「Aさんとの打合せ」を入れて」と依頼した例です。Gmailもこれで同様に操作が行えますが、くれぐれも操作・指示にあたってはご注意ください。あとは動作しているPC上のファイル操作も可能です。ただし、場所はユーザーディレクトリ配下に限定されています。これはMacOSに準じているんでしょうね。あちこちいじられてしまっても怖いのでこれはこれで良いかもしれません。最後にさて、一旦以上としたいと思いますが、Claude Coworkいかがでしょうか。上で挙げたようにWorkIQやClaude in Chrome等、他のMCPやプラグインと組み合わせることで更にできることが広がっていくと思います。前回紹介したNotebookLMもエンジニア以外のあらゆる方々に向けたツールでしたが、拡張性という意味ではCoworkに分があるかもしれません。一方NotebookLMは例えばソース元の明示という点に関してどこがどの部分の引用なのかを細かく明示してくれますのでその点はNotebookLMの方がよさそうです。と、いったようにそれぞれにできることできないことがありますので、皆さんの業務にどちらが合っているか実際に触っていただくことをお勧めします。エンジニア以外の全てのユーザーにプログラム以外の仕事も寄り添った形で対応してくれるこのCowork。今はまだリサーチプレビューとのことなので更なる進化が期待できます。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Coworkを使ってみる

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です2025年11月にClaudeで（というかAnthrotopicによって）公開されたスキル機能についての記事を書かせていただきました。とりあえず私もスキルを作ってみたいという方はまずは以下の記事をご覧ください。後述しますが、ClaudeやCursor等にはスキル作成用のスキルがデフォルトで入っているはずなのですぐに作成できると思います。blog.nextscape.net既にこの時から完成された、かつ非常に便利な機能でしたので、あれよあれよという間に世間に広がり、昨年12月19日にオープンスタンダードとして公開されました。agentskills.ioこれによってClaudeだけでなくGitHub Copilot、Cursor、OpenAI Codexが次々と対応を表明し、スキル機能が使えるようになりました。今回はこのスキル機能（上記の公式サイトに従って今後は「エージェントスキル」もしくは「Agent Skills」と記載したいと思います）の最新動向や、使い方を紹介してみたいと思います。Cursor＋CodexでのAgent SkillsまずはClaude以外のツールにおけるエージェントスキルの使用方法について。個人的に私が使用しているCursor＋Codexでのスキル設定を紹介させてください。普通であれば所定の位置にファイルを配置するというのがエージェントスキルの設定方法なのですが、Cursor＋Codexではまたちょっと異なる設定方法があります。Cursor上のCodexの歯車アイコンをクリックすると以下のようなメニューが出てきますので、「Skills settings」ー＞「Open Skills settings」を選択します。すると、以下のようなウィンドウが表示されますので、ここで現在インストールされているスキルの確認とその有効・無効の設定、そしておすすめのスキルが表示されていますのでここで各スキル名の右側の＋ボタンをクリックすると簡単にインストールができます。おすすめのスキルだけでなく、この画面上でもっと色々選べると嬉しいのですが。。今後に期待したいです。ちなみに上のスクリーンショットではSkill CreatorやSkill Installerがありますが、これは元々入っていました。Codexのマニュアルを見ると元々バンドルされているものようです（以下はマニュアルを翻訳したもの）。Agent SkillsCursorにも入れた覚えが無いのですがcreate-skillを始めとして幾つか入っています。恐らくオープンスタンダードになった後にそれぞれデフォルトで設定されるようになったのではと思われます。Agent Skills Marketplace（エージェントスキルマーケットプレイス）次にエージェントスキルマーケットプレイスについて。ここで様々なスキルを探してダウンロードができます。skillsmp.com以下がトップページの画面。登録されているスキル総数が表示されています。１月中旬頃に上記のサイトを見たときは6万程度でした。現在2026年2月14日、上記スクリーンショットでは20万超えてますね。。この数字からでもスキルの爆発的な普及が見て取れます。さて、20万を超えるスキルをどう探すかですが、一番簡単なのは自然言語での検索かなと思います。ログインしている必要がありますが、先ほどTOPページからもう少し下にスクロールするとチャットでの入力欄があるのでここで探したいファイルを入力します。例えば「Excelで資料を作成するスキルを探して」と入力した結果が以下。そして、各スキルをクリックすると以下のような画面になりますのでここからスキルのZIPファイルがダウンロードできます。ただ、スキルは任意のコードを実行できるため、信頼できるソースからのみインストールすることが大原則です。特にコミュニティ製のスキルをインストールする場合は、中身を確認してからの導入が推奨されていますので、できるだけそのサービスの公式からのダウンロードをお勧めします。現場の課題 — 複数プロジェクト・複数ツールでのスキル管理このようにAgent Skillsの普及が進むのはいいことなのですが、ちょっと気になる点がありました。実プロジェクトでスキルを使いながら、スキル自体も改善させていくケースは多々あります。また、あるプロジェクトで作ったスキルを別のプロジェクトでも使いたい。そして、Claude Code、Cursor、Codexなど複数のAIエージェントを併用している場合、それぞれのスキル配置ディレクトリが異なります。そういった状況で何も考えずに各プロジェクトフォルダ内の.claude/、.cursor/、.codex/などのフォルダにスキルをコピーして使っていると、各プロジェクトでスキルを編集しても、スキル本体のリポジトリには反映されず、どのプロジェクトにあるスキルが最新版なのか分からなくなったり、同じスキルのコピーがあちこちに散在してしまいます。複数プロジェクトでのスキル管理同僚が上記問題に対する解決方法を教えてくれましたのでここで紹介させてください。まず、基本的な考え方として１．スキル本体はGitリポジトリで管理する（例: C:\github\skills\ や ~/github/skills/２．共通スキルはユーザーのホームディレクトリに配置する上記の考え方を踏まえた上で、以下のように設定を行います。■Windows環境での実践例mklink /D C:\Users<ユーザー名>.claude\skills\skill-a C:\github\skills\skill-amklink /D C:\Users<ユーザー名>.cursor\skills\skill-a C:\github\skills\skill-a※スキル用リポジトリのフォルダを本体として、ユーザーディレクトリにシンボリックリンクを作成macOSやLinuxであれば以下のようになるかと思いますが、まだ実際に確認できておりませんので、あくまで参考までに留めてください。■macOS / Linux環境での実践例ln -s ~/github/skills/skill-a ~/.claude/skills/skill-aln -s ~/github/skills/skill-a ~/.cursor/skills/skill-a※スキル本体リポジトリ → 各ツールのホームディレクトリにシンボリックリンクこうすることで、スキルの置き場所を分散させず、1つのリポジトリで集中管理できます。スキルを編集すれば、シンボリックリンク経由で参照しているすべてのプロジェクト・すべてのツールに即座に反映されます。Gitでバージョン管理もできるため、変更履歴の追跡やチーム内での共有も容易です。ただし、ツールのバージョンによって挙動が異なるもしくは変わってしまう可能性があるため、利用中のバージョンでの動作確認をお勧めします。また、Windowsでシンボリックリンク（mklink /D）を作成するには管理者権限が必要です（コマンドプロンプトを「管理者として実行」する必要があります）。その他スキル周りの情報CMSと言えばWordPressが有名ですが、そのWordpressでの開発をサポートする生成AI向けのエージェントスキルが公式リポジトリ WordPress/agent-skills に追加されました。「AIコーディングアシスタントにWordPressの正しい作法を教える」がコンセプトのようでして、大規模OSSプロジェクトがAgent Skills標準を公式採用した事例として挙げられるかなと思います。github.comあとはClaudeを提供しているAnthrotopicがスキル作成のベストプラクティスを書いてくれています。以前のスキルに関するブログ記事を書いた時にも説明しましたが、Claudeや上記のCursor＋Codex等では「スキル作成」スキルがあるのでそれを使ってもらえれば簡単にスキルが作成できます。ただ、スキル作成に慣れてきて、更に良いものにしたい、あるいはGitHubで公開したいとなりましたらこのベストプラクティスを読んで改良してもらえればと思います。platform.claude.com「用語を統一すること」等、プロンプトにも流用できるような内容が沢山書かれていますのでスキルを直接改造する予定が無い方も是非ご覧ください。最後にAgent Skillsはまだ半年にも満たない始まったばかりの機能ですが、MCPがそうであったように、今後急速にAI開発の基盤として定着していく可能性が高いと感じています。まずは公式のマーケットプレイス等で試してみて、慣れてきたら自分のワークフローに合ったカスタムスキルを作ってみるのが良いのではないでしょうか。当社も社内のGitHub上に社員それぞれがスキルエージェントをアップし、社員みんなで共有して使える仕組みを作っています。こうすることで社内で色々な作業を統一化・標準化することができますし、エージェントスキルであれば導入も簡単ですのでAIの使用経験に関係無く気軽に利用でき、非常に便利です。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

AgentSkill（エージェントスキル）の最新情報

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です今回はGoogleのNotebookLMについてです。以前もNotebookLMを試したことがありまして、以下の記事で書かせていただきました。blog.nextscape.netこの記事が2025年5月。約９か月前といったところでしょうか。今日にいたるまでNotebookLMの進化についてXや他の方のブログ等で目にしていたものの実際に触ったことはなく、今回どのくらい変わったかと確認してみたいと思います。こちらの記事から見る人もいるかと思いますので序盤は上記記事を多少なぞる形になりますがご容赦ください。ソース NotebookLMではまずは「ソース」、調べたいこと、まとめたいことについての情報元を設定する必要がありまして、最初に以下のようなダイアログが表示されます。「新しいソースを検索」の「ウェブ」を選択するとウェブから、もしくはGoogleDriveからかを選択できます。画像あとは調査方法の粒度の違い。Fast RearchとDeep Researchの2種類があります。画像あとはソース元のデータを直接アップする方法。ファイル、ウェブサイトのURL、GoogleDrive等があります。画像上記の選択肢から「ウェブサイト」を選ぶと以下のダイアログが出ますので、今回はBIツールLookerStudioに関するGoogle公式のYoutubeのURLを貼り付けます。画像するとそのソースを読み込んで、別ウィンドウのチャットにその読み込んだ結果が表示されます。この内容（ソース）に対して更に色々と質問ができます。今回は当社ネクストスケープについて調べてください、とお願いしたところ、以下のように色々なソースを元に調べてくれました。チャットでは、次にチャットについて。質問を幾つか考えてくれるので「ネクストスケープのシリアルイノベーターとしての取り組みは？」と聞いてみましょう。すると以下のような結果が返ってきます。出力された文章の最後に「１」「２」と番号が振られていますが、ここにマウスを当てると各文章のソースを明示してくれます。私は主にClaudeのデスクトップアプリで調べ物をすることが多いのですが、普通にやり取りをするとソースが明示されていないため、改めてそのソースについて質問したりすることがあるのですが、NotebookLMではこのように明示してくれるので非常に助かります（最近はChatGPTもソースを明示してくれますね）。更にデータの共有時にはソースを伏せることも可能です。Studioでは、NotebookLMの特徴である画面右側の「Studio」を試してみましょう。前回触った時は以下の３項目でしたが、そこから一気に増えています。9項目のうち「音声解説」は前回の「音声概要」と同じです。今回は他の項目を試していきたいと思います。動画解説まずは「動画解説」。こちらは音声解説に更に視覚的要素が加わったもの、というとわかりにくいので例えて言いますとスライドによるリアルタイムでの説明をしてくれるようなものです。音声解説ではあたかもそこに人間がいるようにAIが声で説明してくれるのですが、それに加えてスライドを作成し、それを元に対象の情報を説明してくれます。以下がその一部のスクリーンショットです。以下のスクリーンショットは弊社の「モブサービス for Azure」について説明している箇所です。モブサービス for Azureについては以下のリンクを参照ください。nextscape.netスライド次にスライド、こちらはまだベータ版とのことですが、その名の通りスライドを作成してくれます。このスライドはPDF形式にてダウンロードできます。できればGoogleスライド等で編集できたりすると更に嬉しいのですが、基本的に「Studio」で生成されるアウトプットは編集不可となります。マインドマップ次にマインドマップ、前回確認済みなので飛ばそうと思ったのですが、もう一度試したところ日本語対応していました（前回は英語での出力のみでした）。 ">これはpng形式でダウンロードできます。インフォグラフィック">次に「インフォグラフィック」。「一枚絵」で対象の内容を説明してくれるものになります。これもpng形式でダウンロード可能です。弊社のMRに関するサービスやMulti DRM Kitについて以下のようにまとめてくれています。 当社のMRに関する取り組みやMulti DRM Kitに関しては以下を参照ください。withmr.nextscape.netnextscape.netレポートそして「レポート」。その名前通りレポートの形でまとめてくれるのですが、どういった形式でまとめるか、何を軸にするかを以下のように選択することが可能です。  以下は上記のダイアログで「概要説明資料」を選択した場合のものです。レポートのタイトル部分のアイコンが気になったので選択したところ、以下のように「プロンプトを表示」となっており、これを選択することでこのレポートを表示するために使用したであろうプロンプトが取得できます。データテーブル次に「データテーブル」。対象内容をテーブル、表形式で表示してくれます。 この表、Studioからでは少々領域が狭く見づらいですが、スプレッドシートにエクスポートできますのでそれによって見やすくできます。クイズあとは個人的に気になっていた「クイズ」。これは対象の内容についての４択のクイズを作ってくれます。ビジネス用途では使い道が無いですが、学生の方には良いかもしれません。あとは社会人の方であれば忘年会の余興とか。。？まとめ今回、約9か月ぶりにNotebookLMを試してみましたが、機能の充実ぶりには目を見張るものがありました。特に印象的だったのは以下の点です:１．ソース明示の利便性各回答に対してソースが番号付きで明示される機能は、業務での利用において非常に重要です。Claude等の他のAIツールでは別途ソースを確認する必要がありますが、NotebookLMではその手間が省けます。情報の信頼性担保という観点でも、この機能は評価できます。２．多様なアウトプット形式Studioの機能が3項目から9項目に増え、目的に応じた様々な形式で情報を整理できるようになりました。特に「動画解説」は音声とスライドを組み合わせたプレゼンテーション形式で、社内共有や顧客への説明資料としても活用できそうです。３．実務での活用可能性データテーブル → スプレッドシートへのエクスポートで分析資料作成スライド → プレゼン資料のたたき台としてインフォグラフィック → 概要説明用の一枚絵としてレポート → 各種まとめ資料のベースとしてただし、現状では生成されたアウトプットの編集ができない点は留意が必要です（スプレッドシート以外は、ですが）。あくまでも「たたき台」や「参考資料」、もしくは社内資料としての活用が良いのではないでしょうか。ちなみにGeminiとの連携でNotebookLMをデータ元にもできます。これも非常に便利です。調べたい内容を多角的に分析し、様々な形式でまとめられるNotebookLMは、情報収集・整理の効率化に大いに貢献してくれるツールだと感じました。是非皆さんも用途に応じて使ってみてください。社内でも一部の社員やプロジェクトで利用しており、稟議の書き方とか申請の仕方のまとめ、マニュアル作成等で活用しています。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

NotebookLMが進化していた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です今回はGoogle 、Vertex AIについて調べてみました。Vertex AI は Google Cloud が提供する生成AI/機械学習プラットフォームであり、Gemini などの生成AIモデルを API として（正確には「Gemini API in Vertex AI」という名前ですが）利用できます。単に呼び出して終わりではつまらないのでもう少し実用的な感じで、こちらも現在利用しているBigQueryとの連携を行ってみたいと思います。何を作るか例えば。。書籍情報をBigQueryに入力していて、本の名前は一覧として持っているのですが、著者名がわからないので１つ１つ調べて入力する必要がある。といったことがあったとします。そういった手間というか、ちょっとした調査作業が介在せざるを得ない場合、そしてそれにAIが使えないだろうかと思うことは往々にして出てくるかと思います。ということで、実際にAIを利用してもう少し楽をしてみましょう。BigQueryのとあるテーブルにカラムとして書籍名と著者名があったとします。書籍名は埋まっているのですが、著者名のカラムは空欄になっています。そのテーブルから書籍名を読み込み、Geminiに書籍名を元に著者名を問い合わせ、得られた著書名をそのテーブルに書き込む、こういった処理を実現してみましょう。BigQueryの画面でもGeminiは使えるのですが（Gemini in BigQuery）、セキュリティの関係なのかGeminiが扱える情報はあくまでBigQuery内のデータのみであり、BigQueryにおいて外部のWebサイトからデータを取得するといったことができませんでした。そこで今回は同じGoogleのサービス、サーバレスのCloud Run Functionsを使ってみたいと思います（同様のサービスはAzureのAzure Functions、AWSであればLambdaです）。具体的には・Cloud Run FunctionsでBigQueryから書籍名を読み込む・その書籍名を元にGemini APIを呼び出し著者名を調べる・得られた結果をBigQueryに書き込むという流れ。図にすると以下のようになります。準備まずは準備から。BigQueryにBOOKSというテーブルを作り、データを入れておきます。以下のようにtitleとauthor、つまりタイトルと著者というカラムがあり、authorはNULLにしておきます。あとはVertex AI API等の必要なAPIをGoogle Cloud Cosoleの「APIとサービス」ー＞「有効なAPIとサービス」の画面で「APIとサービスを有効にする」を選択し、有効にしておきます。そしてCloud Run Functionsを作成します。作成画面で今回はPythonを選択。その他必要事項を入力していきます。以下のスクリーンショットの内容はデフォルトのものですので、必要に応じてそれぞれ変更しましょう。すると以下のようにソースコードを編集できる画面になります。実装コード編集画面においてはmain.pyとrequirements.txtという２つのファイルが存在しており、後者はPythonでは標準で入っていないライブラリ（外部パッケージ）を使うとき、Cloud Run が自動でインストールできるように「必要な部品リスト」を書いておくファイルになります。コード内容は割愛しますが、プロンプトの記述は以下のようになります。ちなみにCloud FunctionsであればBigQueryの読み書きやGemini APIの呼び出しにおいてAPIキーのようなものは不要でして、ProjectIDを設定するだけで実行可能です。Googleのサービスのみであれば、その辺りの親和性もCloudFunctionsのメリットと言えますね。そうして実行した結果が以下。うまくいっているようです。BigQueryに戻って、BigQuery上でも確認してみると、authorに著者名が入っているのがわかります。最後にいかがでしょうか。デプロイも簡単でかなりあっさりと実現できるようになりました。ただ、AIのお約束として出力された結果は確認する必要があるということで、実際に案件で使う場合にはまだ色々と考慮する必要はあります。今回の場合であれば雑誌の著者名はどうするのか、とかですね。あとは似たようなパターンとして番組名に対してキー放送局を返すということもできたりしますが、「表記のゆれ」も考慮する必要があります（「フジテレビ」と返してほしいのに「CX」と返したり。。といったものです）。そういった課題はプロンプトでカバーできたりする場合もありますし、そうでないものもあるかもしれませんし、まずは試していただいて、結果に応じてプロンプトで対応するのか、運用（手作業）でフォローするのかといったことを考えていく必要があると思います。個人的な案件の関係上Azureを扱うことが多いのですが、Gemini、GCPも非常に面白いですね。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。 nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Vertex AI（Gemini）＋BigQueryを試してみる

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です1月22日にリリースされたClaude Code v2.1.16においてタスク機能が追加されました。早速試してみたいと思います。概要としては以下の通り。・Claude Codeが作業フローに応じてタスクリストを自動生成・複数のClaude Codeセッションやサブエージェント間でタスクを共有可能・/tasks で進行中のタスクを確認・タスクは最大10個までセッション間共有する場合は以下のようにsettings.json に追記する方法と、json{    "env": {        "CLAUDE_CODE_TASK_LIST_ID": "任意のフォルダ名"    }}起動時に指定する方法があります。CLAUDE_CODE_TASK_LIST_ID=my-project claudeただし、私はWindows環境なのですが、上の指定の方法ですとエラーになります。私と同様Windowsで動かしている方は以下のいずれかで実行してみてください。方法1: PowerShellの場合powershell$env:CLAUDE_CODE_TASK_LIST_ID="WebApplication1"; claude方法2: コマンドプロンプトの場合cmdset CLAUDE_CODE_TASK_LIST_ID=WebApplication1 && claude実行それでは早速実行してみましょう。Claude Code起動後に以下のプロンプトを投げてみます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。Tasks機能でタスク管理しながら実装してください。」そうすると以下のように早速タスク分割を行ってくれ、それに従って作業が進められていきます。文字が小さいのでここだけ以下に書き出してみます。ーーー● ASP.NET Core 8.0のRazor Pagesプロジェクトですね。タスクを作成して、ToDoリスト機能の仕様作成と実装を進めます。√ Task #1 created: ToDoリスト機能の仕様書を作成する√ Task #2 created: ToDoItemモデルクラスを作成する√ Task #3 created: ToDoサービスクラスを作成する√ Task #4 created: ToDoリストのRazor Pageを作成する√ Task #5 created: ナビゲーションにToDoリストへのリンクを追加する● タスクの依存関係を設定します。√ Task #2 updated: blockedBy√ Task #3 updated: blockedBy√ Task #4 updated: blockedBy√ Task #5 updated: blockedBy√ Task #1 updated: status → in progressーーーというような形です。単純にタスクを作るだけでなく、タスク同士の依存関係というのも設定されてます（上の内容ですと依存関係がわかりにくいですが、後ほどの画面で改めてお見せします）プラン管理さて、まずは最初のタスク、仕様書作成に進みます。まずはこの段階でタスクがどのように管理されているか確認してみましょう。例えば プロジェクト名をWebApplication1 と指定すると：~/.claude/tasks/WebApplication1/├── task_001.json├── task_002.json└── ...といった形でタスクごとにJSONファイルが存在していまして、これらのファイルはタスク終了後に削除されます。画像各JSONファイルを開くと以下のようになっています。ファイルフォーマットは以下の通りです。id：タスク番号subject ：タスク名（短い説明）description ：タスクの詳細説明activeForm： 現在の作業状況（進行中の表示用）status ：ステータス（in_progress / pending / completed）blocks ：このタスクが完了しないと着手できないタスクのID（例：#1が#2をブロック）blockedBy ：このタスクの前に完了が必要なタスクのID次にセッション間共有ですが、もう1つターミナルを開いて、同じIDで起動してみます。Claude Codeを起動後、 `/tasks` コマンドを実行してみますと以下のように今回のプロジェクトのタスク状況が表示されます。上の画面の最後の部分にタスクリストが表示されていますが、#2以降の各タスクの最後に「blocked by #～」とありまして、ここでも依存関係が確認できます。その他の表示内容は以下のようになります。・ステータス表示0 done, 1 in progress, 4 open でサマリー表示・アイコン■（進行中）と □（未着手）で視覚的に区別・表示切替ctrl+t でタスク表示のON/OFFそして以下のようにタスクが処理されていき、ToDoアプリが作成されます。Planモードとの比較さて、このタスク機能の似たようなものとしてはPlanモードがあります。そこでタスク機能のメリット・活用シーン、Planモードとの違いといったところについて考えてみました。正直なところ、今回のような小規模かつ・単純なタスクではPlanモードとの違いを感じにくいかもしれません。どちらも「計画を立てて順番に実行する」という点では同じであるものの、色々と違いがあります。Planモードとの違いとしては以下のようになります。■目的・Planモード： 実装前にアプローチを設計・承認を得る・タスク機能：作業の進捗を追跡する ■タイミング ・Planモード：実装を始める前・タスク機能：実装中■成果物・Planモード：計画ファイル（実装方針）・タスク機能：タスクリスト（Todo）更にタスク機能は・タスク間の依存関係がblocked by で明示される・セッションをまたいでタスクを共有できるというところが大きな違いになるのかなと思っています。あとはファイル保存により複数のClaude Codeインスタンス間で同じタスクリストを参照できる点、特に・専用コマンド /tasks がある（どこからでも一発確認）・JSONで構造化されている（扱いやすい）といったところが特徴になるのかなと思っています。CursorのPlanモードは進捗状況に応じて計画ファイルを更新しているため、今回のタスク機能に近いかもしれませんが、Cursorの場合は実装レベルの進捗管理に留まり、プラン・計画というよりはToDoの印象です。どんな場面で活きるのかこの機能が真価を発揮するのは「大きく・長く・複雑な」作業だと考えています。例えば・仕様駆動開発（SDD）との相性仕様書作成から設計、実装、テスト、ドキュメントまで段階的に進める開発スタイルでは、各フェーズの依存関係が重要になります。Tasks機能なら「仕様書が完成しないと設計に着手できない」といった関係性が自動で管理され、今どこまで進んでいるかが一目でわかります。・長時間かかるタスク大量のファイル生成やマイグレーション、複数モジュールにまたがるリファクタリングなど、数十分〜数時間かかる作業では、途中でセッションが切れることもあります。そんなときでも別ターミナルから /tasks で進捗を確認できるのは安心感があります。・チームでの進捗共有同じ CLAUDE_CODE_TASK_LIST_ID を設定すれば、別のメンバーが自分のターミナルから進捗を確認できます。「#3まで終わったらレビューするね」といった連携がしやすくなります。現時点ではタスクリストの共有がメインの恩恵ですが、将来的にサブエージェントが同じタスクリストを見ながら並列で作業を進める、といった使い方ができるようになれば、さらに活用の幅が広がりそうです。最後にタスク機能は、簡単なタスクでは「Planモードの可視化版」という印象です。しかし、仕様駆動開発のような段階的なフローや、長時間・大規模なタスク、チームでの進捗共有といった場面では確実にメリットがあります。「ちょっとしたコード生成」よりも「プロジェクト全体を任せる」ような使い方で真価を発揮する機能、という位置づけなのかなと思っております。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Codeのタスク機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です先日、色々とAIツールを調べていた中でAndroid Studioの名前を見つけました。私は以前はスマホアプリ開発もしておりまして、Android、iOS、今は懐かしのXamarinでの開発経験もあります。スマホアプリエンジニアの方からすれば今更かもですが、Android StudioもGeminiでアプリ開発ができるということでちょっと普段のWeb開発から離れて試してみたいと思います。このGemini in Android Studio、これが正式名称として公開されたのは2024年の4月頃、そして、皆さんが普段使っているであろうClaudeやCursor等のAIツールで提供しているAgentモードがこのGemini in～で使えるようになったのは結構最近で、2025年6月のGoogle I/Oのタイミングとのことです。developer.android.comインストールでは、インストールからお見せしていきたいと思います。まずはAndroid Studioがダウンロードできるサイトへ。ここで最新のバージョンをダウンロードし、インストールします。1月18日最新のバージョンはAndroid Studio Otter 3 Feature Dropとなります。詳しい説明は省きますが、ウィザードでインストールを進めます。筆者はAndroidの実機を持っていないため、仮想デバイス環境としてAVDのインストールも行います。無事、Android Studioを起動できましたので雛形となるHello Worldアプリの作成を行います。プロジェクトの作成以下の画面でプロジェクトの作成を行います。「New Project」を選択してください。次は基本となる画面構成を選択します（文字が小さくて見えないかもですが、以下の画面の中の「Activity」とは画面のことです）。一通り初期設定が完了すると、画面上に「Hello World」を表示するだけの基本的なプロジェクトが作成され、Android Studio上で展開・表示されているのがわかります。まだ本題に入る前の段階ですが、Android Studioを始めて触る方の注意点としてSDKは日本語を含まないパスにしてください。デフォルトですと恐らく「C:\Users\(ユーザー名)/AppData\Local\Android\Sdk\」といったパスになり、「ユーザー名」が日本語だったりすると先ほど軽く触れたエミュレータが起動しなくなります。筆者がスマホアプリ開発を始めたころからこの注意点は存在していたのですが、筆者もすっかり失念しておりました。。とりあえず仮想デバイスを作ります。右側メニューの「Device Manager」をクリックDevice Managerのウィンドウの上部メニューから「Create Virtual Device」をクリックテストしたい端末を選び、設定します。最新のPixel10は普通にインストールすると見当たらないですね。。ビルド＆実行仮想デバイスが作成できたら、Android Studioの画面上部にビルド＆実行ボタンがあるので起動してみましょう。特に問題がなければ以下のようにエミュレータが起動し、Hello Worldが表示されます（文字が見切れてますが。。）。昔と同様、エミュレータはちょっと動作がもっさりしておりますので、実機がある方は是非PCに繋いで試してみてください。いつの時代の話だと言われそうですが、起動は早くなりましたね。Geminiによる改修さて、いよいよGeminiで改修してみましょう。右側のメニューアイコンの一番下をクリックするとプロンプトの入力欄が表示されます。非常に簡単ではありますが、「ToDoアプリを作りたい」と依頼してみましょう。すると、他のAIツールと同様、実行内容が表示され、都度変更内容に関して承認を促されます。（ちょっと文字が小さくて申し訳ないですが）改修完了の旨が表示されましたので、再度実行してみたいと思います。あまり細かく指示しなかったこともあってか見た目的にやや寂しいですが、以下のようにエミュレータ上においてToDoアプリが起動します。ちなみに無料プランであればGemini2.5のProが利用できます（2026年1月17日時点）。モードは先ほどのGeminiとのやり取りが表示されるウィンドウの上部に２つ、今回使用したAgentモードとAskモードがあります。Geminiは利用できるものの、Planモードが無かったりとややAIツールとしては物足りなさを感じるのも事実です。ちょっと首題からずれてしまうのですが、筆者も試しに先ほどのプロジェクトをClaude Codeで開き、更なる改修を依頼して、よりリッチな見た目・機能にしてみました。いかがでしょうか。カテゴリや重要度がアイコンで示され、より見た目が洗練されてきました。最後にWebサイトのエンジニアがCursorやClaude Codeを使うように、Androidアプリ開発もAndroid Studioにこだわる必要は無いのですが、レイアウトエディター等、Androidアプリ専用のIDEとしてのAndroid Studioのメリットは他のAIツールには取って代われないものでもありますので、C#でのウェブ開発におけるVisual Studioの立ち位置のように併用して使われていくものではないかと思っています。ちなみにちょっと横道に逸れますが、当社ではFlutterを用いてアプリ開発を行っており、クロスプラットフォーム開発による工数削減とスピーディなリリースを実現しています。以下リンクを参照ください。事例紹介等も行っております。https://app.nextscape.net/Android開発初心者の方はまずはこのAndroid StudioでAndroidアプリ開発やAIによる開発に慣れ親しんでいただき、ある程度の段階になりましたらClaude Code等を使ってみるのもよろしいのではないでしょうか。GoogleはAntigravityもありますし、恐らくスマホアプリエンジニアの方も普段は他のAI開発ツールを用いての開発が主流になっているのかもしれませんが、久しぶりのAndroid Studio、懐かしさと進歩を感じつつ、非常に興味深く触らせてもらいました。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Gemini in Android Studioを触ってみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です昨年9月22日、まだまだ暑いと言っていた時期ですが、そのころに仕様駆動開発としてGitHub SpecKitを試した記事を書きました。blog.nextscape.net仕様駆動開発に関してはどのように進めるか、どのAIツールで行うか。。等々、色々と試行錯誤が行われているかと思います。お客様からのご要望を自身が作るWebサイト等の成果物に正しく反映するには何らかの形でドキュメントを起こし、それをAIに共有しつつコードを書いていく必要があります。GitHubのSpec Kitも仕様駆動開発のためのツールの１つとして高く評価されていますが、この進歩の早いAI界隈においてSpecKitも更に進化を遂げているようなので、再度試してみたいと思います。github.com設定及び概要説明以前に記事を書いた際はWindowsは動作環境に含まれていなかったのですが（それでも一応動作はしていましたが）、今回改めて動作環境の１つとなっていましたので、今回もWindows上で動かしてみたいと思います。まずは対象のプロジェクトに移動し、以下のコマンドで設定を行います。uvx --from git+https://github.com/github/spec-kit.git specify init --here以下のようにタイトルが表示され、初期設定を促されます（以降、スクリーンショットが度々表示されますが、文字が小さいかと思いますのであらかじめご了承ください。ブラウザの拡大機能等で見ていただければと思います）。AIアシスタントの選択が必要になりますが、一番最初の公開時は３つ、そしてその１～２週間後には７つに増えまして約４カ月後の今は以下のように更に17個に増えています。ここだけでも進化が見てとれますね。スクリプトのタイプは前回同様PowerShellでいきます。初期化でエラーが出てますが、これは改行コードによるものなのでOKとします。そうすると次にどうすれば良いか、英語でガイダンスが表示されます。改めて説明しますと、前回は主に４つのコマンドで作業を進めていきました。/specify/plan/tasks/implementそして最新のバージョンにおいてはコマンド名が変わり、「/speckit.～」のように必ず先頭に「/spectkit.」が付く形に統一されました。他のコマンドと見分けやすくするためかと思いますが、わかりやすくて良いです。簡単に説明しますと、主に使うコマンドは以下の通り。/speckit.constitution： プロジェクトの基本方針・原則を決める/speckit.specify ：要件定義・仕様を文章化/speckit.plan ：実装計画を作る/speckit.tasks ：具体的なタスクに分解/speckit.implement： 実装を進めるといったものでして、「設計 → 計画 → 実装」をAI主導で進めるための流れです。以下はEnhancement Commands（任意・補助）ということで、 使わなくてもいいけど便利な追加コマンドです。/speckit.clarify ：曖昧な点を質問形式で洗い出す/speckit.analyze ：作った成果物の整合性チェック/speckit.checklist： 品質チェックリストを作るいわば「設計ミス・認識ズレを減らす用」ですね。実行ちょっと上記の簡単な説明だけではわかりづらいかもですので実際にどういった内容で指示するかをお見せします。今回もVSCode上のClaude Codeで実行しますのでVS Codeを立ち上げます。次にスラッシュ「/」を打ち込んで、まずは上記SpecKitのコマンドが表示されることを確認してください。まずはspeckit.constitutionコマンド。これはプロジェクトの原則を決めるためのもので、最初に1回だけ実行します。例えば以下のとおり「/speckit.constitution シンプルさ重視。過度な抽象化は避ける。TypeScriptで型安全に。テストは主要機能のみ。コメントは日本語」そうするとプロジェクト内の.specify\memoryフォルダにconstitution.mdというファイルがあり、上記指示を盛り込んだ形で更新されます。次に/speckit.specifyコマンド。何を作るか、WHATとWHYを書きます。技術スタックはまだ書きません。具体的には以下の通り。/speckit.specify シンプルなToDoアプリ。タスクの追加、完了チェック、削除ができる。完了したタスクは取り消し線で表示。データはブラウザのローカルストレージに保存し、リロードしても消えない。すると仕様が生成され、specs\001-todo-appフォルダ配下のspec.mdが更新されます。次に今回の新コマンド、/speckit.clarify。これでspecの曖昧な部分を質問形式で洗い出してもらいます。最初に試した際には英語で出力されたため、以下のように日本語での質問を指示します。「/speckit.clarify 日本語で質問してください」すると以下のような仕様に関する質問が出てきますので回答してあげます。例えば以下のようなものです。「質問 1: タスクの表示順序新しく追加されたタスクは、一覧のどこに表示されますか?推奨: オプション A - 最新のタスクを上部に表示する方が、ユーザーは直近のタスクに素早くアクセスでき、完了チェックや削除などの操作が効率的です。多くのToDoアプリで採用されている標準的なパターンです。| オプション | 説明 ||-------|--------------------------|| A | 最新のタスクが一覧の上部に表示される（新しい順） || B | 最新のタスクが一覧の下部に表示される（古い順） || C | ユーザーが並び替え可能（ドラッグ&ドロップなど） |「A」「B」「C」のいずれか、または「推奨」「yes」と回答してください。独自の回答（5語以内）も可能です。」と、このように選択肢で選んだり、別の回答を行うこともできます。このように自身でチェックを行い、インタラクティブに仕様を詰めていってくれます。次に/speckit.plan。これで技術スタックと設計方針を指定します。「/speckit.plan React 18 + TypeScript + Vite。スタイリングはTailwind CSS。状態管理はuseStateのみでシンプルに。コンポーネントは最小限。」これを実行するとspecs\001-todo-app配下に`plan.md`, `data-model.md`, `research.md` などが生成されます。そして/speckit.tasks コマンド。タスクリストを生成し、実装タスクに分解してくれます。ここでは`tasks.md` が生成されます（ユーザーストーリー単位でタスク化）。そして実装の前に/speckit.analyzeを実行しましょう。これも新コマンドです。spec、plan、constitution間の整合性をチェックしてくれて、矛盾や抜け漏れがあれば指摘してくれます。例えばタスクと要件のマッピング。チェック結果のメトリクス（細かい！）「こういう改善点があるけどどうする？」的な提案。これもいいですねー。そして、問題が無ければ/speckit.implementコマンドで実装してくれまして、最終的にToDoアプリが作成されます。最後にいかがでしょうか。前回は仕様書を色々と作ってくれましたが、インタラクティブ性に乏しく（他のツールもそういうものが多かったので特に問題は無かったですが）、生成されたものに対するチェックもその分必要となっていました。今回は単に指示を受けて成果物を作り続けるだけでなく、それをチェックし、更に問題があればユーザーに確認を取るという形で人間同士のやり取りを彷彿とさせるような形になっています。更に「使える」ツールとなっておりますので、よろしければ皆さんも触ってみてください。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。

GitHub Spec Kitをもう一度試してみよう

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です12月11日、Cursorでビジュアルエディタがリリースされました。Xでは非常に評判が良く、Figmaにとって代わるのではという書き込みも見受けられます。実際にどんなものなのかを試してみたいと思います。デザインの変更・適用まずは普通に内蔵ブラウザを開きます。で、ブラウザ右上のアイコンのうち、以下の「Show CSS Inspector」をクリックそうするとfigmaのような各要素ごとに色やpadding等の調整・設定ができるウィンドウが出てきます。内蔵ブラウザの各要素をクリックするとそれぞれ選択が可能になることがわかります。更にドラッグ＆ドロップで以下のように移動、入れ替えができます。そして上のようにタスク入力欄とタスク表示欄を入れ替えた状態で（実際は元々の順番があるべき姿のような気がしますが機能のお試しなのでご容赦を）「今の画面デザインの状態をコードに反映して」と依頼してみます。そうすると現在の画面の状態を確認し、それを元にコードを修正してくれます。再度起動すると以下のように先ほど変更した内容が反映されていることがわかります。デザイン変更その２では次に先ほど最初に表示されたウィンドウを使ってみましょう。「ToDoリスト」の部分を選択し、フォントの色を変えてみます。今回は赤色に。実際に画面上で文字色が反映されていることを確認します。内蔵ブラウザ上部に「Apply」というボタンがあるので今度はこちらをクリックします（VisualEditorの操作としてはこちらが正しい適用方法になります。最初のはプロンプトでもできますよという例です）。そうすると先ほどと同様、変更を認識し、コードが変更されます。要素指定による変更指示あとはこちらは内蔵ブラウザのリリース時に既に対応されていた機能のような気がするのですが、例えばタイトルの部分をクリックしますとプロンプトの入力欄にその要素が表示されます。その状態で「背景色を青、文字色を白、そして文字を「ToDo管理」に変更して」と依頼するとプロンプトで要素を指示しなくとも選択された要素に対する指示であると考えて変更を行ってくれます。結果、以下のように変更されていることが確認できます。不具合が直れば検証のためのコードを削除し、クリーンな状態に戻してくれます。終わりにCursorのビジュアルエディタ機能、いかがでしょうか。ある程度デザインやCSSに関する知見が必要となりますが、逆にそういった人達にとっては非常に有益な機能であると思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursorのビジュアルエディタ機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です12月10日にリリースされたCursor2.2のDebugモードについて試してみました。実は12月4日頃からEarlyAccessで触ることはできていて、この記事自体もリリース後に書いてはいたのですが、ちょっと色々忙しく2週間近く経っての公開となります。では、いつものように以下のToDoリストを作成し、これで試してみたいと思います。また、これに対して幾つか不具合を仕込んでおきます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」修正例１仕込んだ不具合ではないのですが、まずはローカルでの起動時において以下のエラーが出たのでこれで試してみたいと思います。Error Code: -102URL: https://localhost:7164/プロンプトの入力欄においてDebugモードが追加されているのでこれを選択します。そして、エラーの内容を共有します。そうすると（ちょっと見づらいですが）赤枠で以下のような提案といいますか、「不具合調査のためにこのような操作を行って欲しい」という指示が出ます。指示に従って操作を行い、その旨を伝えると以下のような「仮説」が提示されます。この不具合調査のための指示と仮説、これが今回のDebugモードにおける他のモードとの違いではないかと思っています。最終的に原因が明らかになり、修正例その２以下のようにToDoリストが起動されたのですが、今度は「英会話の勉強」というタスクを追加し、「削除」ボタンを押すと削除されません。この不具合が今回仕込んだ不具合になりまして、これも不具合内容を伝えると以下のようにまずは仮説を挙げてくれます。そして、調査のための操作指示が出ます。これを必要に応じて繰り返し、最終的に修正してくれます。修正例その３もう１つ対応例をお見せしたいと思います。以下のように複数タスクを登録し、一番上の「英会話の勉強」の削除をクリックすると何故かその下の「Task1」が削除されます（いきなり適当なタスク名になってしまってスミマセン。。）。「タスクは削除されるのですが、削除ボタンを押したタスクと別のタスクが削除されます。下から順番に削除されているようです。」と伝えると先ほどの仮説、調査のための操作が提示され、原因が判明すると以下のように原因と修正内容が表示されます。そして、以下のように修正されているはずなのでこのように試してね、という形で指示が出ます。至れり尽くせりですね。。終わりにいかがでしょうか。今までのAgentですとAgent側で調査や修正を行ってしまい、あまりこちらに状況が共有されることはありませんでした（当然指示すれば修正前に原因は共有してくれますが）。Debugモードではこのように仮説をきちんとユーザーに明示しー＞その仮説を検証するためにどういった操作が必要かを示しー＞原因がわかればそれとそれを修正する方法を説明しー＞修正に至るという形で丁寧に手順を踏んで、ユーザーと共に原因調査を行い、解決へと導いてくれます。ちなみに、Cursorはこのような人間が介在するアプローチを「human-in-the-loop」と表現しています。これにより、「いつの間にか直ってました。でも原因であったり、何故直ったかはAIが勝手にやっていたのでわかりません」といったことも無くなり、ユーザーの理解も深まります。是非皆さん使ってみてください。恐らく今年の記事登録は本記事で最後となる予定です。来年も皆様のお役に立つ情報をご紹介できればと思いますのでよろしくお願いいたします。皆様良いお年を。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

CursorのDebugモードが面白い

この記事は、NEXTSCAPE Advent Calendar 2025 の25日目の記事です。今年も最終回は社長の小杉智が担当します。人はなぜAIの言葉には素直になれるのか最近、ふと不思議に思ったことがある。人はAIからのアドバイスなら驚くほど素直に受け入れるのに、同じ内容を人間から言われると、なぜか反発してしまうことがある。それは単なる「機械だから」という理由ではなく、もっと無意識の深いところで、僕らはAIの言葉を“偏微分”して受け取っているのではないか、そんな感覚を覚えた。あるスポーツのトレーニングで見た光景あるスポーツのトレーニングでの話だ。「もっとこうした方がいいよ」と人間が何度もアドバイスしていた相手がいた。しかし、その人はなかなか素直に受け取れず、改善もしなかった。ところが、同じ内容をAIから提示された瞬間、態度が変わった。苦しいトレーニングにも黙って取り組み、結果として明らかに実力が伸びていった。その姿を見たとき、僕は考え込んでしまった。なぜ同じ言葉なのに、発信源が変わるだけで、ここまで受け取り方が変わるのだろうか。人間のアドバイスが抱える弱さ人が人にアドバイスをするとき、どうしても感情が入り込む。何度も同じミスを指摘して、それでも改善されないと、イライラしてしまう。気づけば言葉は厳しくなり、相手の人格にまで踏み込んでしまうこともある。ソースコードレビューは、その典型例だ。レビューとは本来、未来を明るくするために行うものだ。できている点を一度確定させ、その上で改善点を示す。それが理想だと、誰もが頭ではわかっている。しかし、何度も同じ指摘を繰り返すうちに、人は疲れ、厳しくなり、結果として相手の未来を暗くしてしまうことがある。AIは何度でも、同じ温度で言える一方でAIは違う。同じ指摘を、何度でも、同じ温度で繰り返せる。感情も、失望も、苛立ちもない。だからこそ、受け取る側は無意識に「言葉の純度」だけを取り出せる。余計な文脈や感情をそぎ落とし、必要な部分だけを偏微分するように理解できるのだと思う。僕らはAIに負けてしまったのかでは、人間はAIに負けてしまったのだろうか。アドバイスの役割を、すべてAIに譲るべきなのだろうか。僕は、そうは思わない。「この人に言われたから頑張る」「この人は自分の未来を信じてくれている」そう感じた瞬間に、人が飛躍的に伸びる場面を、僕は何度も見てきた。感情があるからこそ、傷つくこともあるが、感情があるからこそ、救われることもある。それでも、人の可能性に賭けたいAIの強さを認めつつも、人の未来を信じて、何度でも根気強く向き合い続けること。それは非効率で、時に報われないかもしれない。それでも、その先にしか生まれない成長がある。僕は、その可能性に賭けたい。AIがどれだけ進化しても、人が人に本気で向き合う価値までは、置き換えられないと信じている。

これからの名伯楽はAIなのか？

こんにちは。DX推進部の桂です。AIをどう活用するかみたいなお話が多い昨今ですが、個人的に生成AIを取り巻く環境についてちょっとモヤモヤしていることをまとめてみようと思います。この記事は「NEXTSCAPE Advent Calendar 2025」の20日目です。エンジニアとして生成AIを触っていると、その進化とスピードには本当に驚かされます。コーディングは任せられる、ドキュメント作成も楽になる、アイデア出しの壁打ち相手にもなる。凄い勢いで便利になっていって、逆に使っていないと一気に置いていかれてしまう怖さも感じます。ただ、仕事から離れて一介のオタクに戻ったときに少し気がかりなことがあります。便利になった反面生成AIの学習データには、ネット上から集められた大量の著作物が使われています。イラスト、音声、写真、文章——その多くは、作者の許諾なく学習に使われたものです。そしてそこから簡単に特定の画風や声を作り出せてしまう。そういった事態に対して、自分がお世話になっているゲーム、マンガ、アニメのクリエイターが懸念を示しています。いまやプロアマ問わず、SNSにアップされるイラストにAI学習対策の透かしが入っているのも当たり前になりました。さらに厄介なことに、生成AIに懸念を示したクリエイターに対して生成AIユーザーが嫌がらせをするといったことも繰り返されています。「AI推進」と「反AI」というレッテルを互いに貼って対立を深めるシーンも見られるようになりました。他にも、検索結果がSEO目的の中身のない記事に埋め尽くされたり、電子書籍などの販売サイトでは新着一覧やセール一覧が生成AIによる作品で埋め尽くされたりということは、すでに日常茶飯事です。コンテンツ生成のコストが下がった結果、玉石混交どころか石ばっかりになりつつあります。じゃあどうすればいいのか学習内容の透明化、オプトアウトの仕組み、AI生成コンテンツであることの明示——こういったことをAIプラットフォーマーに求めていくしかないんじゃないかと考えていますが、現実は厳しい。すでに出来上がっている学習データを捨ててまで、プラットフォーマーがそんなことをするとは思えないし、日本政府としてはこのあたりは目をつぶって推進していく方向らしい。何とかならないものかなあ……とモヤモヤしながらも、エンジニアとしては乗り遅れないようキャッチアップを頑張る日々です。

生成AIについてモヤモヤすること

はじめに入社後の流れ外部研修社内研修模擬プロジェクトおわりにはじめにこんにちは。ネクストスケープの北と申します。2025年4月に新卒で入社し、もうすぐ9ヵ月が経とうとしています。学生時代にIT分野を専門的には学んでいなかった私が、新人研修でどのような経験をしたのかを記録しておきたいと思い、この記事を書きました。未来の新卒社員にとって有意義なものになれば幸いです。この記事は「NEXTSCAPE Advent Calendar 2025」の17日目の記事です。（リンク先では先輩方の面白い記事を読むことができます！）入社後の流れ外部研修：4～6月の3ヵ月間社内研修：7月の約2週間模擬プロジェクト：7月の約1週間 + 8～9月配属・実務：10月以降ここ数年間で大きくは変化していません。もちろん多少の変化はありますが、重要なのは6ヵ月と長期間である点です。これにより例えば以下のような心配事は少ないかと思います。外部研修の後、社内の雰囲気に慣れる前に配属され、実務に当たらなければならない研修でのインプットを自由にアウトプットする場がなく、知識を整理できない唐突な主張に見えると思いますので、以下で各研修を詳しく取り上げていきます。外部研修本社からそう遠くはない会場で他の会社の方々と研修を受けました。もちろん新卒の方々が多いですが、他分野からの転職の方など様々なバックグラウンドを持つ方々がいました。内容としては、初めの2ヵ月間で社会人マナー・C#の基礎・Webアプリケーションの基礎を学び、残りの1ヵ月でチーム開発演習を行いました。チーム開発演習は5～6人での共同作業なので、技術力以外の能力も時には必要になりました。（人によっては苦労するかと思いますが、お互い研修中の身ですので、思い切った挑戦が大切です。）毎週末、社内の先輩方とミーティングがありました。外部研修の進捗を報告したり、困りごとを相談したりという時間です。単語の意味などは最悪AIに聞けば済みますが、何が分からないのか分からない...みたいな状態の私にとっては非常にありがたかったです。社内研修社内で先輩方から、外部研修と模擬プロジェクトや実務とのギャップを埋めるための研修を受けました。内容としては、AIツール・プロジェクトマネジメント・ネットワークなどです。AIツール（もはやツールと呼んでいいのか分からない）については、AI駆動開発という言葉が存在するぐらい現場でも影響力の強い存在になっています。ネットワークについては、OSI参照モデルという単語で調べると良いかと思います。模擬プロジェクト新人で協力して、約2ヵ月の期間で社内システムを開発してみよう、というものです。（毎年行われているので、ネタが減りつつあります。）アウトプットの場としてはもちろん最適ですし、必要な未知の技術のインプットの期間にもなります。今年は「ありがとうボード」という名前のWebアプリケーションを開発しました。感謝の気持ちを伝えるSNSのようなものです。SNSなのだから青い鳥のようにスマホアプリにできればよかったのですが、技術不足のためブラウザでしか動きません...仕方なし。実際の画面はこのようになりました。開発を進める中で定期的に、一部の先輩方に集まって頂いて進捗報告会を行いました。その時点での進捗を報告し、今後の方針を共有しました。実際の案件でのミーティングかのように真剣に意見して下さったので、成長の糧になりました。ここからはプロジェクトの各過程についてお伝えできればと思います。要件定義システムを開発する前の段階で、どのような機能が必要なのかをまとめます。それ以前にざっくりとしたスケジュールを立てることは必要ですが、システム開発の第1段階といえるでしょう。入社して間もないのに社内で使うシステムに必要な機能を考える、というのは無茶に思えるかもしれませんが、現場ではその段階から突き詰めることが当たり前なので、良い経験になりました。実際に社内アンケートなどを通して頂いた要望からその背景を考えて本当に必要なものを考えました。設計定義した要件をどのように実現するのかを決める段階です。具体性はプロジェクトによって異なりますが、使用する技術・サービス・データ定義など終わりがありません。今回はフレームワーク技術としてASP.NET CoreとReactを、クラウドサービスとしてAzureを利用し、過去の模擬プロジェクトを参考にしながら以下のようにシステムを構築しました。新卒の方からすると聞きなじみのない単語が多いかもしれませんが、調べるかAIに聞くか先輩に聞いて理解しましょう。頑張ってください。実装実際にコードを書き、他にもなんやかんやして設計した内容を実現する段階です。なんやかんや、というのは先ほどのシステム構成図のようにクラウドサービスの環境を構築したり、データベースの設定をしたり、抜け落ちていた要件に気付いて修正したりします。当然ですが未知の技術の方が多いので、調べながら・学びながら・訊きながら進めることになりました。初めて知る情報に対して臆せず積極的に向き合うことが必要とされました。その他実装が終われば終わり、ではありません。様々なパターンのテストを行って動作を保証しました。その後、全社員に向けてプレゼンテーションを行うことで、基本的な利用方法とその魅力を伝えました。（本当に本当に緊張しました。）おわりに本記事をここまで読んでくださってありがとうございます。学び続けることが好きな人・プログラミングが好きな人に非常にお勧めできる会社であると思っています。お会いできるのを楽しみにしています！

長期間の新人研修で経験したこと

この記事は、NEXTSCAPE Advent Calendar 2025 の19日目の記事です。 Solution Architect / Chief Technology Office 所属の柳井が担当します。この1年、AIを取り巻く状況は「進化した」という言葉では足りないほど、私たちの仕事の中に深く入り込んできました。単なるツールの追加ではなく、開発の進め方そのもの、さらには業務プロセスの設計思想にまで影響を及ぼし始めています。本記事では、この1年で実際に取り組んできたAI活用を振り返りつつ、これから本格化していく「AIエージェント時代」に、私たちエンジニア／SIerはどう向き合っていくべきかを考えてみたいと思います。1. 模索の1年：AIが「現実解」になるまでちょうど1年前、私はAIを使ったレガシーシステムのモダナイゼーションプラットフォームの検証を行っていました。現行のソースコードやドキュメントをAIに読み込ませ、新しい仕様書とコードを生成する——いわば「既存資産を起点に、次のシステムを組み上げる」試みです。当時は「面白いが、今すぐ実案件で安定して回すにはまだ早い」という結論に至りました。しかし、このとき得た「AIエージェントによるコーディングは、仕様（コンテキスト）を起点にしなければ成立しない」という確信は、今の取り組みの大きな伏線となっています。その後、状況は劇的に変化しました。Cursor をはじめとした開発支援ツールの圧倒的な進化Claude Code のような CLI ベースの強力なツールの登場MCP（Model Context Protocol）サーバーによる外部ツール連携の普及等々これらにより、AIは「精度の高い回答を出す箱」から、「開発フローの中に組み込める実用的なエンジン」へとそのラインを越えたのです。2. 本格的なAI駆動開発への挑戦：コーディングの8割を託す「検証」の段階を終え、私たちは実案件へのAIエージェント投入を決断しました。掲げた目標は、「コーディングの8割をAIエージェントが担う」です。実際に運用してみて改めて浮き彫りになったのは、「仕様の解像度」がAIのパフォーマンスを左右するという事実です。AIエージェント活用の鉄則 仕様が曖昧な場合：AIのアウトプットが安定せず、人間による手戻りが急増する。 仕様が明確な場合：AIは驚異的な速度で安定したコードを生成し、開発のリズムを劇的に加速させる。AIエージェントを継続的に運用するには、場当たり的な指示（プロンプト）ではなく、「仕様を起点とした開発プロセス」への刷新が不可欠であることを痛感しました。3. マインドセットの転換：AIを「チームメンバー」として迎えるAI駆動開発を進める中で、私たちは「AIをツールとして使いこなす」という捉え方そのものを変える必要があると感じるようになりました。いま意識しているのは、AIエージェントを「新しく加わったチームメンバー」として扱い、オンボーディング（受け入れ）を行うという感覚です。■ AIに必要なのは「指示」ではなく「文脈」新しいメンバーがチームに入ったとき、いきなりコードの一部だけを見せて「ここ直しておいて」と丸投げすることはありません。プロジェクトの背景、目指しているゴール、過去の経緯、そして守るべき特有のルール。それらを丁寧に共有して初めて、メンバーは自律的に動けるようになります。AIエージェントも全く同じです。背景と制約の共有： なぜこの実装が必要なのか、どのライブラリを優先し、何を禁止しているのか。情報の整理： 膨大な情報の中から、そのタスクを遂行するために必要なコンテキストを過不足なく提示する。■ 「AIが動ける環境」を整える責任AIは、チームが共有している「暗黙の了解」や「現場の空気」を感じ取ることはできません。だからこそ、こちらが提示するドキュメントやコード、仕様の整理状況が、そのままAIのパフォーマンスの限界値になります。AIエージェントが「何をすべきか」を迷わずに判断し、高い精度でアウトプットを出せる状態をいかに作るか。 それは、指示を出すというよりは、AIが自走できるための「舞台装置」を整えるという、エンジニアとしての新しい設計の仕事に近いものだと感じています。4. 業務プロセスの再構成：エージェントの「専門性」と「アイデンティティ」AIエージェントの真価は、コーディング領域を超え、実業務のプロセスの中に深く入り込んだときに発揮されます。そこで重要になるのは、汎用的なAIを配置することではなく、「特定の業務におけるプロフェッショナル」としての専門性をAIにどう持たせるかという設計です。具体的には、以下の3つの観点から業務プロセスを再構成していく必要があります。■ 特定ドメインに特化した「専門性」の設計AIエージェントに期待するのは、単なる情報の要約や定型処理ではありません。その業務特有の慣習、背景知識、そして専門的な判断基準を反映したアウトプットです。専門知の注入: 汎用モデルに頼るのではなく、業務特有のドキュメントや過去の判断ログを「コンテキスト」として高密度に結合する。自律的なタスク遂行: ルールベースの自動化とは異なり、与えられた専門性の範囲内で「次に何をすべきか」を自ら判断し、情報収集から選択肢の提示までを完結させる。■ 「アイデンティティ（判断軸）」の付与AIエージェントをプロセスに組み込む際、私たちはそのエージェントに「立場」を与えます。これは単なる権限設定ではなく、「アイデンティティ」の設計だと考えています。責任と行動原則: 「何を判断してよいか」「どのリスクを回避すべきか」という、その業務を担う人間と同じレベルの判断軸を明確に持たせる。自律性と安全性の両立: 明確なアイデンティティ（役割・責務）があるからこそ、人は安心してAIに実務を委ね、AIは越権することなく専門性を発揮できます。■ エージェント同士が連携する「エコシステム」先日、Microsoft Ignite 2025 で発表された Agent365 のように、これからは多くの「専門家エージェント」が共存する環境が整っていきます。 一つの巨大なAIを作るのではなく、特定の業務に特化したエージェントを複数配置し、それらが互いに連携しながら一つの大きな業務プロセスを回していく。私たちは、こうした「エージェント間の協調体制」そのものを設計していくことになります。 AIエージェントは、もはや「便利なツール」ではなく、業務知識を実装された「自律的な主体」です。 従来のシステム設計が「データの流れ」を作るものだったとすれば、これからの設計は「専門性と判断の連鎖」を作るものへと変わっていくのではと思います。5. これからのエンジニア、SIerの役割AIエージェントが業務に溶け込む世界において、私たちの価値はどこにあるのでしょうか。それは、単に「システムを構築すること」から、「AIと人が共創する新しい業務プロセスそのものをアーキテクトすること」だと考えています。これまでSIerは、要求された機能をコードに落とし込むことが主な役割でした。しかし、AIエージェントが自律的に動く世界では、私たちの価値は次のような「共創」の領域にシフトしていくと考えています。■ 「機能」の設計から「価値の流動」の設計へこれまでの「ユーザーが入力し、システムが処理する」という固定的なフローを設計する時代は終わります。AIエージェントという新しい主体が、いつ、どこで、どの情報を使い、誰と協働して価値を生むのか。その「価値が流れるプロセス」そのものを設計し、実装することが私たちの主戦場になると考えています。■ AIと人のハイブリッド・オーケストレーションAIエージェントは万能ではありません。だからこそ、AIの得意な「高速な処理や情報集約」と、人間の得意な「意思決定や感性による判断」を、どのタイミングで、どの粒度で融合させるか。その高度なオーケストレーション（調和）が、システムの性能、ひいては企業の競争力を左右してくると思います。■ 「変化し続けるプロセス」を創り続けるAIエージェントを組み込んだ業務プロセスは、一度作って終わりではありません。AIの進化やビジネスの変化に合わせて、プロセスを動的に組み替え、改善し続ける「アジリティ（俊敏性）」をシステムに組み込むこと。この継続的なプロセス開発こそが、これからのSIerが提供すべき価値になってくると考えます。私たちは「作る人」から、「AIとともにビジネスを動かす新しい仕組みの創出者」へ。 すべてを自分で実装するのではなく、AIエージェントが最大限の力を発揮し、人間がより本質的な活動に集中できる「場」を創り出していく。それこそが、これからの時代に求められるエンジニアの姿ではないでしょうか。おわりにAIエージェントを前提とした世界は、まだ始まったばかりです。 だからこそ、ツールのの話にとどまらず、「業務プロセス体制そのもの」をどうリデザインしていくか。より踏み込んだ挑戦をシステム開発の現場で実践していきたいと思います。