ネスケラボ

はじめに株式会社ネクストスケープ 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エージェントを前提とした世界は、まだ始まったばかりです。 だからこそ、ツールのの話にとどまらず、「業務プロセス体制そのもの」をどうリデザインしていくか。より踏み込んだ挑戦をシステム開発の現場で実践していきたいと思います。

AIエージェントと共創する未来：ツールから「チームメンバー」へ、そして業務プロセスの再定義へ

NEXTSCAPE DX推進部 情報システムTeamのKumaです。情シス歴20年の私が、難関資格（CISSP, CCSP）取得のために実践した「勉強の習慣化」の具体的な方法をご紹介します。💡 はじめに：なぜ情シスが資格に取り組むのか情シス歴20年、40代の筆者です。就職以来、一貫して情報システム部門の仕事に携わってきました。5年ほど前、業務の中心であるMicrosoft 365やAzureの知識を深めたいという思いから、本格的に資格取得に取り組み始めました。また、これからの情シス業務にセキュリティの知識は必須だと感じていたため、CISSPやCCSPといった難関資格にも挑戦しました。仕事と並行しての資格勉強は、プライベートの時間を削るため、正直辛いものでした。「早く終わらせたい」という一心で取り組んでいましたが、Microsoftの資格だけでも複数あり、当時の私は「ひとり情シス」として幅広い知識を身につける必要がありました。勉強開始時期の背景: 2020年2月頃、ちょうどコロナ禍が始まり、リモートワークが主流に。これにより、通勤時間や休日の時間を勉強に充てやすい環境になったのは幸いでした。前置きが長くなりましたが、本ブログでは、私がどのようにして難関資格を突破するまでの「勉強を習慣化」したのか、その具体的な方法についてご紹介します。🚀 習慣化の土台を築く：マイクロソフト資格への挑戦最初にマイクロソフトの複数資格に挑戦することで、日々の生活の中に勉強のサイクルを組み込むことを目指しました。1. 最初に「試験日」を確定する取り組みをスタートするにあたり、まずは試験日を決め、目標を明確にすることを徹底しました。これにより、そこから逆算して勉強のスケジュールを立てる土台ができました。2. 脳のゴールデンタイムを活用する私の場合、朝目覚めた直後が最も頭の中が空っぽで、雑念がなく、新しいことを覚えやすいと感じました。朝のルーティン: 毎朝、起きてすぐにコーヒーを淹れ、資格の勉強に取り組むことを「日々のアンカー」としました。3. 隙間時間を徹底活用する出社日や日中も、細切れの時間を逃さず勉強に充てました。通勤時間: 電車の中でテキストを読み込む。昼休み: あえて外で食事を済ませた後、テキストを眺めたり、スマートフォンで問題集を解いたりする。帰宅時: スケジュールに遅れが出ている場合や試験日が近い場合は、帰宅時にも取り組みました。このサイクルを一定期間繰り返すことで、勉強は苦ではなくなり、むしろ合格する喜びから「楽しく」なってくるのを感じました。💼 会社の支援と「不合格」の捉え方なお、当社には資格取得支援制度があり、回数制限はありますが、不合格でも受験料を補助してもらえる制度が整っています。もちろん試験に合格することは目的として重要ですが、たとえ不合格であっても、そこまで試験勉強で学んだことは決して無駄にはなりません。不合格という結果をバネに再勉強することで、知識がより強固に、自分の力として深く身についていくものだと考えています。制度を最大限に活用し、臆せず挑戦できたことも、難関資格への取り組みを続ける上での大きな支えとなりました。🛡️ 難関資格への応用：CISSP・CCSPを乗り越えるコツマイクロソフトの複数試験で勉強が習慣化できた後、いよいよ長期間の取り組みが必要なCISSP試験に挑戦しました。難易度が高く、何度も挫折しそうになりましたが、次のポイントで乗り越えることができました。【補足】 CISSPやCCSPの具体的な学習内容やテクニック、合格体験記は他に数多くありますので、そちらを参考にしていただくのが良いかと思います。ここでは、私が難関資格を継続して学習する上で役立った「習慣化」のコツに絞ってご紹介します。1. 「習慣化アプリ」とゆるいチェック基準習慣化を強力にサポートしてくれたのが、習慣化アプリでした。【習慣化アプリとは】 これは、目標とする行動（この場合は「資格の勉強」）を毎日実行したかどうかを記録するためのアプリです。勉強した日にチェックマークを入れると、その実行記録がカレンダーやグラフで視覚化されます。このアプリを使うことで、「連続記録（ストリーク）を途切れさせたくない」という意識が働き、モチベーションを維持することができました。しかし、最も重要なのは、チェックを入れる条件を厳しくしすぎないことです。継続の鍵: 勉強時間を問わず、「10分しかできなかった日も、1時間できた日も、とにかく勉強をしたらチェックを入れる」とルールを決めました。自己肯定感の醸成: ハードルを上げず、毎日継続することに充実感を得るように意識しました。「昨日は少ししかできなかったから、今日はもう少し取り組もう」という前向きな気持ちが生まれ、結果的に勉強がはかどるようになりました。朝の決まった時間に加えて、できなかった分は隙間時間や夜に取り組むことで、無理なく自分なりの勉強ペースを確立し、難関試験もPASSすることができました。🌟 最後に：習慣は一生の財産マイクロソフトの試験では一発合格とならなかったものもいくつかあり、難関のCISSPやCCSPについても一度では合格できませんでしたが、「勉強を習慣化する」という方法論を確立したことで、最終的に合格を勝ち取ることができました。ここ最近は資格試験の勉強はしていませんが、その時間を別の技術習得や読書の時間にあてています。勉強は一時的なものではなく、一生続くものです。そして、毎日の習慣化に落とし込むことで、それは苦行ではなく、むしろ人生を豊かにする活動へと変わります。この経験が、皆さんのキャリアや目標達成の一助となれば幸いです。

勉強することの習慣化

こんにちは。Device Frontierチームの道下です。普段は業務で XR アプリケーションの開発とマネージャーをやっています。私は毎年その一年で行った中で一番興味があるものを記事にしています。今年はAI の分野では、生成 AI がさらに進化し、ツールとして使う存在から、自律的に動くエージェント へ進化してきました。また、XRデバイスにおいても初のAndroid XR デバイスの登場や Ray-Ban Meta Display の発売など、AI の進化に合わせて人とのインタフェースとなるデバイスも登場しました。こうした流れの中で、今回は Ray-Ban Meta と今月公開されたばかりのMeta Wearables Device Access Toolkit for Android（DAT)を使い、より日常利用を意識したアプリを作り、今後のAI と XR の関わりについて考えてみました。 今回作ったもの今回作ったのは、Ray-Ban Metaからの映像をAIに送って、目の前の食事のカロリーとPFCを教えてくれるものです。音声で料理名と合計カロリー、詳細はスマホ側で表示するようにしました。下記の動画はRay-Ban Metaカメラからの映像をスマートフォンでストリーミングし、ボタンをトリガーとして画像をAIに送ることでカロリー・PCFを判定するものです。 2年前にMeta Quest 3 を使って、AIと会話したり、見ているものの説明を返すアプリを作りました。その際は、Quest 3 のパススルー映像に制約があり、スマートフォンを介した構成を取っていました。blog.nextscape.net今回のアプリも内容は似ていますが、メガネ型デバイスになったことでより体験ハードルが下がりました。 Ray-Ban Metaとはデバイスについて少しだけ説明します。Ray-Ban Meta は、Meta と Ray-Ban が共同で開発したスマートグラスです。普通のメガネに近い見た目ですが、カメラやマイク、スピーカーを内蔵しており、装着したまま撮影や音声操作ができます。日本ではまだ正式に販売されていないため、私はプライベートでイギリスに旅行した際に購入しました。（技適は申請済みです）これまでは一人称視点での撮影や音楽を聴くといった用途が中心でした。しかし今月、DATが公開され、Ray-Ban Meta のカメラ映像をスマートフォンアプリで取得できるようになりました。 実装についてアプリの実装はすべて Claude Codeで行いました。私自身Kotlinは触ったことないので、公式サンプルをベースとして機能追加をするという形で指示をしました。Claude Codeが実装からapkを作るまでやってくれるので、私はスマホをつなげてadb installを打つだけです。アプリフローも非常にシンプルで、Ray-Ban Meta のカメラ入力を取得映像から画像を切り取り、AIにとカロリー・PFCを返すようにリクエストレスポンスから音声とテキストでユーザーにフィードバックとなっています。 XRとAIの関わりを考える今後、グラス型デバイスやその他デバイスがスマートフォンのようにどんな人でも使うようになっていくのは、（価格や日本での展開次第な部分もありますが）近い将来必ず来ると思っています。その時に備えて日常的に使いやすいアプリを実際に作り、今試しておくことには意味があると考えています。今回は料理の情報を表示するアプリでしたが、例えばナビゲーションのように目的地まで案内するものや、行動を補助するような用途など、応用できる場面は多いはずです。個人的には、将来的には「一人につき一つの パーソナライズされたAIアシスタント」が存在する世界になれば楽しそうだなと思っています。またXR デバイスは、音声、空間情報、一人称視点の映像、手や視線といった多様な入力を扱えるため、そうした AI と非常に相性が良いインタフェースだと思っています。 今後の開発について現在はユーザー操作をトリガーにして AI にリクエストを送る形になっていますが、今後は AI 側からフィードバックを返すプッシュ型の機能を追加開発しています。具体的には、Ray-Ban Meta から取得した映像の中に料理が映ったことを検知したタイミングで自動的にリクエストを送り、結果を返します。このように自然に情報が返ってくる体験がAI スマートグラスらしい使い方だと考えています。 おわりに今回は、Ray-Ban Meta と AIを使って、日常利用を意識したアプリを一つ作ってみました。今後もAIとXRの進化を追っていきたいと思います。 最後まで読んでいただきありがとうございました。ネクストスケープでは共に働く仲間を絶賛募集中です。ご興味ある方は下記のURLからお気軽に。recruit.nextscape.net

AIスマートグラスアプリ開発からAIとXRの関わり方を考える

はじめにこんにちは、今年の4月に新卒で入社した山中です。この記事は「NEXTSCAPE - Qiita Advent Calendar 2025 - Qiita」の16日目です。最近では、生成AIによって基礎知識が十分でなくてもある程度の成果物が作れてしまう場面が増えてきたと感じます。とても便利な一方で、自分の理解が追いつかないまま作業だけが進んでしまうこともあると思います。私は新入社員ということもあり、基礎知識がまだ十分でないことも多く、分からないまま進むのは少し不安に感じます。そこで、AIを活用しつつ理解も意識しながら学習をしています。この記事では、その際に私が使用している「基礎理解に使うためのAIプロンプト」をまとめています。IT分野に関わらず、資格勉強などにも使える内容になっていると思いますので参考になれば幸いです。基礎理解に使うAIプロンプトプロンプト一覧この記事で説明するプロンプトを表にまとめています。次の節で解説していきます。No.プロンプト使いどころ1〇〇を日常生活で例えながら教えて抽象的な概念をイメージしやすくしたいとき2△△について段階を踏みながら教えて情報量を整理し、自分のペースで理解したいとき3私の解釈は□□というものだけど、〜〜自分の理解の整理や不足点・相違点の確認をしたいとき4私の意見・質問を要約してから回答して自分の伝えたい内容を整理・確認したいとき5ここまでの私からの質問と回答をまとめて学習内容をまとめたり、振り返りたいときプロンプト詳細１.難しいことを例えてもらう勉強していると、そもそもの概念や考え方が難しくてうまく進まないことがあると思います。そんなときに、抽象的な概念を日常の動きや物事に例えて説明してもらうことで、イメージしやすくなり段階的に理解を深めることができます。例）「クラウドについて日常生活で例えて教えてください」↓※回答のまとめ部分のみ抜粋2. 段階を踏みながら説明してもらうAIからの説明は、想像よりも多くの情報が一度に返ってくることがあります。そのまま受け取ると理解が追いつかないことがあるため、説明を段階ごとに区切ってもらう方法があります。例えば、「まず最初の部分だけ教えてください」「次の内容に進んでください」といった指示を出すことで、説明を細かく分けてもらえます。こちらが「次に移ってください」と伝えるまでは、AIが先の内容に進まないため、自分のペースで理解を深められます。例）「クラウド技術について段階を踏みながら教えてください。まず最初のところから。」↓※回答のまとめ部分のみ抜粋3. 自分の解釈を伝えて確認をするAIに質問していると、つい自分の言葉で考えを伝える機会が少なくなることがあります。そのため質問をするときには、まず「自分はこう解釈している」と伝えるようにしています。こうしてからAIに質問をすることで、自分の考えが整理できる不足している知識を明確にできる理解のズレが見つけやすくなるといった効果があります。また、会話の中で「私はどこが分かっていないように見えますか？」とAIに逆質問したり、「100点満点で採点して」と伝えて、理解度をチェックしてもらうのも有効です。例）「私の解釈では、なんでもクラウドを使ったらいいというものなのですが、この考えは正しいですか？」↓※回答の冒頭のみ抜粋4. 自分の意見・質問を要約してから回答してもらうAIと話していると、自分が何を伝えたいのか、その意図が曖昧になってしまうことがあります。そんなときは、自分の意見や状況をいったんAIに要約してもらってから回答してもらうようにしています。例えば、「私の意見をまとめてから回答してください」「私の質問を要約してから回答してください」といった指示を出すことで、こちらの意図を簡潔に整理してもらえます。AIが要点をまとめてくれることで、自分が伝えたいことを整理できる現状や課題を明確化できるといった利点があり、やりとりをスムーズに進めやすくなります。例）「プログラミング言語は多すぎます、１つで十分だと感じます。私の意見・質問を要約してから回答してください。」↓※回答の冒頭のみ抜粋5. 自分が聞いた内容をまとめてもらうAIとの会話が続くと、話したことや分かったことを振り返るのが大変になることがあります。そんなときは、これまでの会話内容をAIにまとめてもらうようにしています。例えば、「ここまでの会話の内容をまとめてください」「私が質問したことと、その回答をまとめてください」といった指示を出します。これによって、新しく知ったことや分かったことを整理でき、次の勉強につなげられると思います。例）「これまでの私の質問とその回答を表でまとめてください」↓※回答の冒頭のみ抜粋おわりに今回紹介したプロンプトは、どれも私自身が学習の中で試しながら使ってきたものです。 AIを使うことで作業が楽になる場面も多いですが、理解を深めるには「自分で考えて言語化する」ことが必要だと感じています。AIとうまく役割分担をしながら、無理なく学習を進めて理解を深めるきっかけになれば嬉しいです。

新入社員が基礎理解に使うAIプロンプト5選！

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。当社が要件定義のツール、フレームワークとして利用しているものとしてRDRAというものがあります。以前このネスケラボでも私の方で幾つか記事を書かせていただきました。もしお時間許せば先に以下の２つの記事だけでも読んでいただいた方がより興味深く読めるかもしれません。blog.nextscape.netblog.nextscape.netあらためて説明しておきますと、このRDRA、こちらは株式会社バリューソースの代表、神崎善司さんという方が考えたものでして、このフレームワークに従って要件定義を行うことである程度のレベル・粒度で資料を作成することができます。そして神崎さんはこのAIの時代においてRDRAを更にバージョンアップさせる試みを行っております。RDRAはその業務を全く知らない人でもある程度要件定義ができるようになるためのフレームワークなわけですが、お客様とのコミュニケーションを必要とするものであるため、業務知識が全くのゼロベースとなるとお客様にとっても自身にとっても負担が大きいものになります。その部分をAIを使うことで軽減させて、更に進化させることができるのではということで私自身も非常に期待しつつ、神崎さんの発表を毎回楽しみにしておりました。そして先日公開されたのがRDRA Agentと呼ばれるものになります。github.com具体的な内容はこの後説明させていただきますが、こちらはClaude Code上で動作するものになります。そして、別の有志の方がこのRDRA AgentのCursor版を作成してくれました。github.com私自身、Cursorをメインに使っていることもあり、早速こちらを使わせていただきまして、今回この記事でその感想を書かせていただければと思います。使用するにあたっては上記リポジトリからZIPでダウンロードしてもらうか、あるいは以下のリリースページからZIPでダウンロードし、解凍してください。github.comそして解凍したプロジェクトをCursorで開きます。モデルはこれでなければというのは無いのですが、今回はComposer1でいきます。というのも結構時間がかかりますのでまずはお試しで「どういった流れでどういった出力が行われるのか見てみたい」ということであれば高速なモデルがお勧めです。解凍したプロジェクトのファイル構成は以下になります。RDRAAgentCursor/├── .cursor/             # Cursorのコマンドとルールフォルダ├── 0_RDRAZeroOne/       # RDRAZeroOneの出力フォルダ├── 1_RDRA/              # RDRAの出力フォルダ├── 2_RDRASpec/          # RDRASpecの出力フォルダ├── RDRA_Knowledge/      # ナレッジベース├── Samples/             # サンプルプロジェクト├── .gitignore├── 初期要望.txt├── 妥当性検証環境.csv└── README.mdまずはルートディレクトリに初期要望.txtを用意します。お試しで。。ということであれば既に同じ場所にサンプルファイルがありますので、それをそのまま使ってみてください。そのサンプルとしての初期要望.txtでは訪問介護システムとして以下のような記述があります（文字が小さくてスミマセン。ブラウザの拡大機能等で見ていただければ。。）。他にもSamplesフォルダ配下にはいつものRDRAのサンプルとして挙げられている図書館システムと貸し会議室SaaSの初期要望.txtがありますので、自身の考えたシステムで利用する場合の参考にもしていただければと思います。要件定義さて、まずは「要件定義」です。Cursorのプロンプト入力欄で「/」（スラッシュ）を入力するとRDRAAgentのコマンドが出てくるはずです。そこで「/01-ZeroOne/01-フェーズごとの要件定義」または「/01-ZeroOne/01-一括要件定義」を選んでください。お試しの場合、とりあえずは「一括要件定義」でいいと思います。以下のようにフェーズ１からフェーズ５までの作業が実行されます。「0_RDRAZeroOne」フォルダ配下には更にフェーズ毎にフォルダが切られておりまして、各フェーズに応じて必要なファイルが作成されていくのがわかります。フェーズ１から５まで終わった結果が以下になります。アクターや外部システム等、RDRAを知っている方であればおわかりになると思いますが、RDRAで扱う情報が出力されているのがわかります。例えば「1_RDRA アクター.tsv」は以下のようになります。そのシステム、今回は訪問介護システムに関係するアクターが挙げられています。要件定義とはいえ、基本的にはRDRA Agent、つまりAIでアクターや業務、状態モデル等の洗い出しを行ってくれますので、こちらはチェックするのみとなります。とはいえ、足りない部分があれば一旦初期要望.txtに戻り、追記を行って再度要件定義を実施します。RDRAにおけるイテレーションもし、最初の初期要望.txtにあまり情報が無かった場合、例えば私が要件定義を依頼されたもののの、あまり内容が思い浮かばない場合があると思います。今までのRDRAのやり方であればお客様との打合せで直接インタビューを行うのですが、お客様としてもせめて叩き台が無いと話しづらいということもあるかと思います。そういった場合は再度ここまで出力してもらった内容を元にAIに肉付けしてもらうのも手です。例えば図書館のシステムで同様にフェーズ１～５を実行し、それを元に再度初期要望.txtを見直してもらった結果が以下になります（赤い行が削除、緑が追記です）。「背景」も以下の１行だけだったのが、「市内の全図書館を一括で管理するシステム」以下のように色々と肉付けされていますので、これを元に再度ステークホルダーであるお客様と話し合い、どれが合っているか、間違っているかを直していくと更に詳細なものが出来上がります。「市内の全図書館（中央館および分館）を一括で管理するシステムを導入し、蔵書・会員・貸出状況を全館で共有可能とする。現状は館ごとに業務が分断されており、貸出・返却・予約・蔵書棚卸・蔵書補充などの業務が人手に依存しているため、職員の負担が大きくなっている。」つまり、図書館業務に置いてあまり詳しくなくともAIの力を借りることで「とっかかり」ができるわけです。それが合っているかどうかは実はあまり重要ではなく、RDRAは「コミュニケーションツール」でもありますので、このような形で叩き台を作り、それを元にお客様から「インタビュー」を行い、要件をより詳細に詰められるかどうかが重要となります。そしてまたフェーズ１～５を実行し、より詳細な資料を作成していき、この後説明するRDRAGraph等でお客様と認識が合っているかを詰めていきます。インタビューとインサイトここでちょっと横道に逸れますが、上で書いたように当社はお客様と要件定義を行うにあたっての聞き取りを「インタビュー」と呼んでいます。聞き取りであれば「ヒアリング」でもいいじゃないかと思われるかもしれませんが、インタビュー＝Interview、「Inter」は「間」、「View」は見えているもの。つまり、お互いの間で見えているものが違うので、それをRDRAモデルなどで「合ってるよね？」と確認しながら進めていく——そのため「インタビュー」と呼んでいます。そしてもう一つ、インタビューで大切にしていることがあります。それは、お客様の中に融け込み、お客様の目線で物事を見るという姿勢です。皆さんもご経験があるかもしれませんが、要件定義の段階ではお客様はまだ正解を知らず、その要望が明確になっていないことがあります。そのため、インタビューした内容を元に我々から「インサイト」、つまり洞察した結果を描き出し、お客様にお見せする。このとき、お客様の立場に立てていなければ、的外れなインサイトになってしまいます。そのために必要なのが「コミュニケーション」であり、そのためのツールとしてRDRAのような要件定義手法が存在すると思っています。繰り返しになりますが、RDRAやRDRA Agentはあくまでフレームワークやツールであり、重要なのは如何にお客様とコミュニケーションを取り、インタビューを行い、インサイトを提示できるかです。AI自体もそのための補助的な存在であり、プログラミング同様、要件定義を全て任せることはできません。例えば、お客様がプロトタイプを触っていて「なんとなく使いにくい」とおっしゃったとき、その言葉の裏にある本当の課題——業務フローの問題なのか、UIの問題なのか、あるいは組織間の調整の問題なのか——を見抜くには、表情や声のトーン、言葉の裏等、様々な情報を読み取る必要があります。さらに言えば、お客様自身がまだ言語化できていない潜在的なニーズを引き出すには、信頼関係の構築が不可欠となります。こうした「人と人との間でしか生まれない理解」は、現時点のAIでは代替できないと考えています。そういう意味では「EQ（心の知能指数）」というのも重要なファクターだと思っているのですが、これはまた別の機会でお話しできればと思います。RDRAGraphへの取り込みさて話は戻りまして、次にRDRA2.0で考えられたRDRAGraphというツールがありますので、そのツールに合わせて今まで作成されたデータを成形し、RDRAGraphで表示できるようにします。コマンド「/02-RDRA/01-RDRAGraphを表示」を選択し、実行してみてください。内部でデータが生成され、外部ウェブサイトとして用意されたRDRAGraphの画面が立ち上がります。ここでちょっとつまづくかもしれないポイントがありまして、「1_RDRA」フォルダ配下の「関連データ.txt」の内容がこの画面が出た時点でクリップボードに貼り付けられている（コピーされている）必要があります。そうしないと上のスクリーンショットのダイアログにある「クリップボードから読み込み」ボタンを押しても何も表示される「？」状態になってしまいます。一応プロンプトでのやり取りを見ているとコピーのコマンドは実行されているようなのですが、私の環境ではうまくいきませんでした。そういった場合はCursorで「関連データ.txt」を開き、自分でコピーした上で上記ブラウザのダイアログ「クリップボードから読み込み」をクリックしてもらうのが良いと思います。そうすると以下のようにRDRAのコンテキスト図が表示されます。更に上記図の「サービススタッフ管理コンテキスト」をクリックすると別ウィンドウで以下のようにそのコンテキストにおけるユースケースや状態が表示されます。RDRA定義の妥当性の検証もできます。では、更に論理データ構造やUIも検討してもらいましょう。仕様の作成「/03-RDRASpec/01-仕様の作成」を実行します。すると以下のような論理データモデルがMermaidで出力されます。Mermaidビューワーで見れば以下のように論理データ構造がグラフィカルに表示できていることがわかります。あとは「03-画面編集の表示」を実行すると以下のような画面編集というページがローカルサーバーで起動します。これはRDRA1.0の画面モデルと同じものといいますか、正確にはそれを更に進化させたものになります。右側の一覧から例えば「訪問介護計画」ー＞「スケジュール調整」を選択すると「サービススタッフ要望確認画面」の表示内容、行える操作、対象データのCRUDが一目でわかるようになっています。画面モデルはRDRA2.0では使われなくなったものなのですが、個人的にはあった方が良いのではないだろうかと思っていたものでして（最初に挙げた過去記事の「RDRAを使った要件定義その２　RDRA1.0と2.0の違い」でも触れています）、これがWeb画面上でより詳しく、わかりやすく参照できるようになったのは嬉しかったです。終わりに他にも色々と出力されているものについてご紹介したいと思うのですが、RDRAAgentの全てをこの記事だけで紹介することは難しいため、一旦ここまでとさせてください。RDRAは様々な図（モデル）＝視点で要件、仕様を俯瞰し、辻妻が合わなければそこを修正して。。という流れを繰り返し行う必要があるのですが、各モデルにおいて抜け漏れを見つけるたび、あるいは仕様が変わるたびにアップデートする必要があり、それが負担となっていたことがありました。しかしながらRDRAAgentを使うことで、そのイテレーションを素早く行うことができるわけです。そしてAIの力を借りて仕様の抜け漏れやそもそもの業務知識の不足を補うこともできます。是非皆さま使ってみてはいかがでしょうか。最後に、要件定義を経験された方には言わずもがなではございますが、要件定義自体は非常に難しいものであり、RDRAやRDRA Agentが銀の弾丸になるわけではありません。とはいえ、拠り所や手がかりが無ければ要件定義はますます困難なものとなりますので、RDRAやRDRA Agent（AI）がそのとっかかりとなり、今皆様が行っている、あるいは行おうとしている要件定義が少しでも楽なものに、そして少しでも成功に近づいてくれれば嬉しい限りです。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

RDRAAgentで要件定義

こんにちは。プロダクトマネージャー兼エンジニア兼UIUXデザイン推進担当として越境気味に働いている照山です。みなさんは「UI/UX」という言葉を聞いて、反射的に誰の顔を思い浮かべるでしょうか？多くの人は、Figmaを巧みに操るデザイナーの顔を思い浮かべるはずです。「ユーザーインターフェース（UI）」「ユーザーエクスペリエンス（UX）」言葉の響きからして、見た目や使い勝手、感性に関わる領域であることは間違いありません。だからこそ、「それはデザイナーの領分であり、エンジニアやPMが口を出すのは野暮だ」　　開発現場には、そんな空気が漂っていないでしょうか。しかし、エンジニアとして、マネージャとしてサービス・プロダクトづくりに長く関われば関わるほど、ある違和感が湧き上がってきます。「UI/UXは、本当にデザイナーだけの仕事なのか？」もっと言えば、顧客の要件を最初に定義するPMや、システムが動くリアリティ（制約）を誰よりも知っているエンジニアこそ、UI/UXの設計プロセスのど真ん中にいるべきではないのか？この問いは、単なる役割分担や「仲良くやろう」という精神論の話ではありません。生成AIが当たり前に存在する2020年代後半において、プロダクト開発における「価値の作り方」そのものが構造的に変化していることに起因する帰結です。今回は、アドベントカレンダーという機会を借りて、「なぜ今、エンジニアとPMがUI/UXに越境すべきなのか」「AI時代におけるBTC（Business/Technology/Creative）人材とは何か」について、少し解像度を上げて言語化してみたいと思います。「分業」というシステムが、プロダクトを歪めてきた歴史まず、私たちが無意識に受け入れている開発の前提を疑うところから始めましょう。ソフトウェア開発は長らく、高度な「分業」によって支えられてきました。 PM： 「何を作るか（What）」を定義し、進行管理をする デザイナー： 「どう見えるか（How）」を具現化する エンジニア： 「どう動かすか（Implementation）」を実装する マーケター： 「どう売るか（How to sell）」を考えるこの分業システムは、確かに効率的でした。それぞれの専門家が自分の領域に閉じて、深掘りすることで、生産性とクオリティを担保してきたのです。工業化社会のモデルをそのままソフトウェア開発に持ち込んだ成功体験と言えるでしょう。しかし、プロダクトが複雑化し、ユーザーの目が肥えた現在、この分業システムの「負の側面」が無視できないレベルで肥大化しています。その最大の弊害が、職種間の「翻訳コスト」と「情報の劣化」です。PMの頭の中にあった「顧客の課題」が、ドキュメントになる過程で少し削ぎ落とされる。そのドキュメントを読んだデザイナーがUIを作る過程で、PMの意図とは少しズレた解釈が混じる。出来上がったデザインを見たエンジニアは、「この挙動は今のDB設計だとパフォーマンスが出ない」と悩みつつ、納期に追われて無理やり実装する。この伝言ゲームの結果、何が生まれるか。「誰も意図していなかった、顧客にとっての価値を最大化したいという目標からズレてしまったプロダクトやサービス」です。さらに深刻なのは、分業が組織の中に「見えない境界線」を引いてしまうことです。「画面の使い勝手が悪いのは、デザイナーのセンスの問題だ」「要件が決まらないのは、PMの優柔不断のせいだ」「実装が遅いのは、エンジニアの技術力不足だ」こうして、本来は「ユーザーに価値を届ける」という共通のゴールを持っていたはずのチームが、いつの間にか「自分の担当範囲を守る」ことに必死になる。UI/UXは、このセクショナリズムの犠牲に最もなりやすい領域です。なぜなら、UI/UXとは「ビジネス要件（Why）」と「技術的制約（How）」と「表現（Look）」が交差する交差点そのものだからです。本来、職種をまたいで扱われるべき「不可分な領域」を、無理やり分業構造に押し込めたことで、プロダクト開発が歪んでしまうのです。AIが「専門性の壁」を溶解させた「分業の弊害なんて、昔から言われていることじゃないか」そう思われるかもしれません。しかし、ここ数年で状況は一変しました。言うまでもなく、生成AIの登場です。AIは、これまで専門家にしか扱えなかった領域への参入障壁を、劇的に引き下げました。専門性の「独占」が終わったのです。これまでは、エンジニアがデザインの意図を理解しようと思えば、デザインの基礎理論から学ぶ必要がありました。しかし今は、UIのスクリーンショットをAIに投げれば、レイアウト、フォント、配色などの意図を即座に解説してくれます。逆に、デザイナーが実装のリアリティを知ろうとした時、以前ならエンジニアにおそるおそる質問する必要がありました。しかし今は、Figmaで作ったデザインをコードに変換し、「このUIを実現するのに無理がある箇所はあるか？」とAIに問えば、レンダリングコストやデータ構造の矛盾を指摘してくれます。PMやマーケターがSQLを知らなくても自然言語でデータを抽出できるし、手書きのメモからプロトタイプを生成できる。つまり、「特定の領域は、その専門家に丸投げしないと何もできない」という前提が崩れたのです。細かい作業はAIが高速に補助してくれます。その結果、人間が担うべき役割は、「作業」から「判断」へ、そして「前後の工程への関与」へとシフトせざるを得なくなりました。これは、エンジニアにとっては大きなチャンスであり、同時にプレッシャーでもあります。「コードだけ書いていればいい」時代は終わり、「コードによってどんな体験を生み出すか」まで責任範囲が広がったことを意味するからです。デザイナーは、すでに「越境」し始めているこのパラダイムシフトにいち早く気づいているのは、実はデザイナーたちかもしれません。UIUXの現場で最先端を走るデザイナーの話を聞くと、彼らの関心が「ビジュアルのクオリティ」だけに留まっていないことが分かります。AIが単純作業を代替し、例えば基本的なログイン画面などをゼロから制作したり、複雑な画面のレイアウト構造のバリエーション出しなども提案してくれるおかげで、彼らの脳のリソースが空きました。その空いたリソースで、彼らはどこに向かっているか？「ビジネス」と「エンジニアリング」への越境です。「この画面遷移を作ることで、KPIであるCVRはどう変化するのか？」「このリッチなアニメーションは、Reactのコンポーネント設計として再利用可能なのか？」「バックエンドのAPIレスポンスを待つ間、ユーザーの不安を取り除くスケルトンスクリーンはどうあるべきか？」彼らはすでに、ただの「絵作り」の人ではありません。顧客の期待、エンドユーザーの体験価値、ビジネスの数字まで鑑みて、実装のフィジビリティ（実現可能性）を考慮した設計を提案しようとしています。ここで、私たちエンジニアやPMは考えなければなりません。「デザイナーがこちら側に歩み寄っているのに、私たちは彼らの領域に歩み寄らなくていいのか？」と。デザイナーだけが越境し、エンジニアやPMが「それは自分の仕事じゃない」と壁を作ったままであれば、パワーバランスは不均衡になります。何より、プロダクトとしての強度が上がりません。UI/UXは「要件」と「実装」と「価値」の変換装置少し視点を変えて、そもそも「UI/UXデザインとは何か」を再定義してみましょう。優れたプロダクトには、必ず以下の3つの文脈が統合されています。Business（ビジネス）： 顧客の課題は何か？ どうやって収益を上げるか？Technology（テクノロジー）： 技術的に何が可能か？ 運用コストやパフォーマンスは？Creative（クリエイティブ）： ユーザーはどう感じるか？ 使い心地は？この3つは、放っておくと互いに矛盾し合います。ビジネス側は「画面にあらゆる情報を詰め込みたい」と言い、エンジニアは「処理が重くなるからシンプルにしたい」と言い、デザイナーは「余白を活かした情緒的な体験にしたい」と言う。この矛盾を調停し、一つの形としてユーザーに提示するのがUI/UXデザインです。つまり、UI/UXデザインとは、ビジネスの論理とエンジニアリングの論理を、ユーザーが使いやすい・使いたいと思える形に「変換・翻訳」するプロセスです。この変換作業を、デザイナー一人に押し付けるのはあまりに酷ではないでしょうか？ビジネスの深い文脈を把握していないデザイナーに「いい感じの画面にして」と頼んだり、DBの構造を知らないデザイナーに「サクサク動く画面にして」と頼むのは、構造的に無理があります。だからこそ、ビジネスを知るPMと、技術を知るエンジニアが、UI/UXデザインのプロセスに積極的に参画しなければならないのです。BTC人材という「新しい標準」へのアップデートこの構造を説明する上で、「BTC人材」というキーワードに触れておきたいと思います。Business、Technology、Creative。この3つの領域を統合できる人材のことです。誤解してほしくないのは、BTC人材とは「全ての領域のプロフェッショナルになれ」という意味ではないということです。そんなことは物理的に不可能ですし、目指すべきでもありません。「自分のコアとなる専門性（軸足）を持ちながら、隣接する2つの領域の言語を理解し、橋渡しができる人」を指します。エンジニアなら：技術（T）を軸足に持ちつつ、ビジネス（B）の数字の意味を理解し、クリエイティブ（C）の原則を踏まえて実装できる。PMなら：ビジネス（B）を軸足に持ちつつ、技術（T）的な実現可否の勘所を持ち、クリエイティブ（C）のプロトタイプで対話できる。UI/UXは、まさにこのBTCの中心に位置する概念です。もしあなたがエンジニアなら、エラーメッセージ一つとってもUI/UXに関与できます。「System Error: 500」と表示するのは、技術的には正解ですが、UI/UXとしてはNGです。ユーザーが何をしていいかわからない（ビジネス機会の損失）からです。ここで、「通信が不安定です。しばらく待ってから再読み込みしてください」と表示し、リトライボタンを置く。これは、技術（エラーハンドリング）とクリエイティブ（マイクロコピー）とビジネス（離脱防止）を統合した、立派なUI/UXの仕事です。他にも読みやすくデザインガイドラインに従った文字サイズや行間にし、エラーという意味を持たせた色やアイコンで表現するなども考えられます。「UI/UXはデザイナーの仕事」と切り捨ててしまうエンジニアは、このエラーメッセージの価値に気づけません。逆に、ここに関与できるエンジニアは、コードの品質だけでなく、プロダクトの価値そのものを高めることができます。結論：なぜ今、“UI/UXは全員の仕事”になるのかここまでの話を整理すると、UI/UXを「全員で」扱うべき理由は以下の3点に集約されます。分業の限界：従来の分業スタイルはコミュニケーションコストを高め、プロダクトの体験を分断させてしまった。「伝言ゲーム」をやめて、全員が同じテーブルで話せる必要がある。AIによる越境の容易化：専門的なツールや知識の習得コストがAIによって劇的に下がった。「作れないから関わらない」という言い訳は通用しなくなり、誰もがプロトタイピングや検証に関与できるようになった。統合の必要性（BTC）：プロダクトの価値は、ビジネス・技術・クリエイティブの統合地点に生まれる。その統合地点こそがUI/UXであり、誰か一人の手には負えない複雑さを持っている。越境するチームこそ最強最後に、これからのチームのあり方について触れておきたいと思います。AI時代に最も高いパフォーマンスを発揮するのは、個々の領域だけに特化したスーパースターが集まったチームではなく、職種を越えて「つながる力」を持ったチームだと思います。PMが、AIを使ってざっくりとしたワイヤーフレームを描き、要件を視覚的に伝える。エンジニアが、そのワイヤーを見て「この体験を実現するには、今のAPIだとレスポンスが遅くなるから、先にデータをプリフェッチしよう」と、体験ベースで技術選定をする。デザイナーが、技術的な制約を理解した上で、「それなら、読み込み中はこういうアニメーションで見せれば体感速度は落ちない」と提案する。そして、全員でプロトタイプを触りながら、「ここは使いにくい」「ここは気持ちいい」と意見を出す。これらがシームレスに行われたとき、プロダクトは初めて「切れ目のない、一つの体験」としてユーザーに届くのではないでしょうか。「越境」とは、自分の専門性を捨てることではありません。自分の専門性を核にしながら、その価値を最大化するために外側に手を伸ばすことです。そして、エンジニアやPMが手を伸ばす先として、UI/UXは最も効果的で、面白い領域だと思っています。明日からできる、小さな一歩この記事を読んでいただいたエンジニアやPMの方で、もし少しでも「越境してみようかな」と思っていただけたなら、今日からできる小さなアクションがあります。Figmaのリンクを開いてみる：デザイナーからもらった画面デザインを見るときに、なぜそのボタンがそこにあるのか、左右の余白と上下の余白が異なるのはなぜか、レイアウトの必然性？などを考えてみてください。優れたデザイナーは感性ではなく根拠に基づいて画面デザインをしています。普段使っているアプリ画面でも同じように考えることはできます。AIに「なぜ？」と聞いてみる：良いと思ったサービスのスクリーンショットを取って、ChatGPTやGeminiやClaudeに投げてみてください。「なぜこのボタンはここにあるのか？」「画面構成についてUIUXデザイン上の意図を解説して」と聞けば、驚くほど論理的な解説が返ってきます。それをチームの雑談で共有するだけで、UIの視座は上がります。「エラー」を「対話」と捉え直す：例外処理のコードを書くとき、「これはシステムのエラー」ではなく、「ユーザーとの対話が失敗した状態」と捉え直してみてください。ユーザーにどんな言葉をかければ安心するか？ それを考えることは、立派なUXデザインです。UI/UXは、決してデザイナーだけの領域ではありません。私たちエンジニアやPMがそこに踏み込み、AIを相棒にしながら、職種の壁を越えて議論する。そうやって作られたプロダクトやサービスが、これからの時代の「標準」になっていくはずです。ネクストスケープでは、そんな「越境する開発」を楽しんでいければと思っています。

UI/UXはデザイナーだけの仕事じゃない。PMとエンジニアが「越境」すべき理由

こんにちは。SAの鈴木です。今年もアドベントカレンダーに参加する機会をいただいたので、イキナリですが「人間理解」についてエンジニアチックに考えてみたいと思います。qiita.comはじめに：AIの熱気の中でふと思うこと課題：なぜか伝わらない相手伝わらない理由①：自分と相手のレンズの違い伝わらない理由②：自分がデフォルトのまま伝える方法：人間を理解するついでに：プロジェクト推進についても考えてみる顧客との対話で感じることプロマネとしてできることは何かなんだかんだいっても相手を理解するのが大事おわりに：技術も人間も大事 はじめに：AIの熱気の中でふと思うこと最近、生成AIをどう活用するかといった話題をよく耳にします。プロンプトの工夫、生成AIツールの組み合わせなど、エンジニアとして「どう使いこなすか」を考えるのは当然の流れだと思います。もちろん、ネクストスケープでも活発に意見交換をしています。※生成AIについての情報は、弊社ブログにもたくさんの情報がありますので、ぜひご覧ください。そんな毎日を過ごしている中で、最近こっそり思っていることがあります。AIが進化しても、人間同士のやり取りでつまずく人はあまり減ってないような…AIを使いこなすのと同じくらい、人間を理解することもエンジニアリングなのではないか。 課題：なぜか伝わらない相手「理屈は正しいのになぜか伝わらない」エンジニアに限らず、このような思いを一度は経験したことがある方が多いのではないでしょうか。でもそれを「自身のおしゃべりセンスの問題」と片づけるのは、ちょっともったいないですし、ましてや「相手の理解度の問題」と決めつけてしまったら、そこで自分の学びが終わってしまいます。もし、噛み合わない理由が「人間の脳のクセ」にあるのだとしたら…そう考えると、まだ改善の余地がある気がしませんか？ 伝わらない理由①：自分と相手のレンズの違い私たちは、これまでの経験をもとに作られたレンズ越しに世界を見ているのだと思います。もちろん、相手は相手のレンズを通しています。このレンズには、単に「目の前に見えている情報」だけでなく、その人が当たり前としている「前提」や「判断基準」も含まれています。つまり、同じ出来事を見ていても、人によって最初から見える世界が違う。そう考えると、相手に伝わらない理由のひとつはレンズの違いなのかもしれません。視点を変えると、うまく伝わらないのは言葉（相手へのインプット）だけの問題ではないと考えられそうです。プログラムが入力だけでなく、データやロジックでもアウトプットが変わるように人間も言葉（入力）だけでなく、経験・価値観（データ）や思考パターン（ロジック）で結果が変わります。この前提に気づかずにやりとりをしたら、ただ正しいことを言っても（入力が正しくても）想定通りに伝わらない、という現象が起きるのかも。 伝わらない理由②：自分がデフォルトのままところで、自分の「思考パターン」や「伝え方」などは、意外とデフォルト設定（無意識）のままになっていると思いませんか？何をどう考えるのか、どんな言い回しを選ぶのか、どんな情報を重視するか、それらのほとんどが無意識に決まっているように思います。エンジニアなら、デフォルト設定を理解せずに運用する怖さは想像がつくと思います。人間も同じで、自分の設定（クセ）に気づかないまま他人と接すると、思わぬ食い違い（バグ！？）が起きる気がしませんか？自分も相手も全く悪気がなくても、衝突やすれ違いが起きるのは、その設定の違いと考えられるのかも…これも、伝わらない理由のひとつになりそうです。 伝える方法：人間を理解する「人間理解」というと、"コミュ力" や "やさしさ" といった、ふわっとしたものを想像してしまいますが、実際はもっと構造的に考えられるような気がします。相手がどんな前提で考え、どんな情報を処理しているのか調査（観察）自分の言葉が相手にどう解釈されやすいか検証もし齟齬が起きたらデバッグ調査・検証・デバッグみたいなのって、エンジニアの得意分野ではないでしょうか？そう考えると、「人を理解する」ことって案外エンジニアリングに近いのでは、と私は思います。 ついでに：プロジェクト推進についても考えてみるネクストスケープには「顧客と溶ける」というすばらしい文化があります。そして、我々は常日頃から「インタビュー」の大切さを社長から伝えられています。顧客との対話で感じること顧客とお話をしていると、顧客自身が「本当の思い」や「本質的な困りごと」をそのまま言葉にできていることは、実はそれほど多くないのではないかと感じます。「こういう機能が欲しい」と言っていてもそれは "手段" でしかなかったり、「ここに困っている」と言っていてもそれは "症状" だったりして、"根本課題" とは限りません。たとえば「通知機能をつけて欲しい」と言われても、根本にあるのは「情報が埋もれて業務が滞ることへの不安」かもしれません。そうであれば、通知よりも、業務の優先順位が見やすい仕組みの方が喜ばれる可能性もあります。「ダッシュボードを見やすくして欲しい」と言われても、実際は上司に数字を説明することへの心理的負担が背景にある場合もあります。プロマネとしてできることは何かこうした顧客の本音は、相手への興味や理解力があるほど見えてくるものだと感じています。相手の言葉をそのまま表層で処理せず、「脳内でどんなプロセスを経て、その言葉が出てきたのか？」と想像してみる。言い換えると、顧客の言葉の裏にある意図や制約、感情を見るイメージです。こういった力を持つことは、AI時代にプロマネが生き残る術のひとつになるかもと、最近思ったりします。AIが得意なのは「知識の再現」だとしたら、AIが出す答えを「どう扱うか」「どう伝えるか」は今のところ人間が担っていると思うので。なんだかんだいっても相手を理解するのが大事自分がどんなレンズで世界を見ていて、どんな問いを立て、どんな言葉で伝えるのか。同様に、相手にはどんな背景や前提があるのか。それを意識してチューニングできれば、プロジェクト推進ももっとやりやすくなるのではないかと思いました。余談になりますが、チーム内でどれだけAIが使いこなせても、コミュニケーションが機能しなければプロジェクトは前に進みません。むしろ、プロジェクト推進においてAI活用が日常化していくからこそ、その差が縮まった先に、「人間を理解する力」の差が結果に反映される時代が来るのかも。なんて思ったりもします。 おわりに：技術も人間も大事人間は意外と自分の思考のクセを知らない。そのあたりの仕組みを知るだけで、相手の意図をくみ取りやすくなり、結果として対話の中で共創が育まれていくのではないでしょうか。テクノロジーが進化しても、結局は人がどう動くかというのが、今のところはプロジェクトの成否に影響してしまいます。だからこそ、外側の技術を使いこなすように、内なる自分や人間の仕組みを理解することも、大切だと信じたいです。技術はどんどん進化し続けますが、人が何かを理解し、動き、変化していくプロセスはそんなに変わらないので、身につけられれば長く使えそうな気がします。そんなこんなで、「人を理解する」力もエンジニアリングと捉えてもいいのかなと思いました。

人間理解についてエンジニアチックに考えてみる

こんにちは。Design Practice Team の開發(@mamikaihatsu)です。この記事は「NEXTSCAPE Advent Calendar 2025」の2日目です。qiita.com2025年の4月、産休育休から職場に復帰しました。さらに生活面では、保育園からの呼び出しや夜泣きによる睡眠不足など、日々のリズムも安定せず、最初の4月・5月は正直あまり記憶がないほど慌ただしく過ぎていきました。それでも今、「なんとかやれている」だけでなく、「思っていた以上に前向きに働けている」と感じられているのは、生成AIと周囲のサポートがあったからだと思っています。育児とフルタイム開発を両立しながら、どうキャッチアップし、どう仕事を回してきたのかを振り返ってみます。復帰してすぐに感じたギャップ復帰直後は、技術キャッチアップの量がとにかく多く、特に生成AI領域は自分が離れていた期間に一気に進んでいました。実際に働き始めてみると、想定していた以上に子どもの体調不良で保育園からの呼び出しが多く、計画が立てづらい状況でした。そんな中でまず困ったのが、“自分のペースでまとまった学習や調査ができない”ということでした。社内の支えと生成AIへの前向きな空気ありがたかったのは、復帰したタイミングで社内でも生成AI活用が一気に進み、生成AIの共有会が定期的に行われていたことでした。各メンバーが試したツールやプロンプト例、失敗談まで率直に共有する場があり、復帰直後の私には大きな助けになりました。また、ネクストスケープでは、リモート勤務と出社を状況に応じて柔軟に使い分けることができます。普段はリモートが中心ですが、気分転換に出社して社食を楽しんだり、社員と雑談したりする時間も良いリフレッシュになります。この働き方の自由度は、復帰後の両立を支える大きな要素になりました。こうした働き方の柔軟さに加えて、男性社員も育児に積極的に参加している方が多い文化で、保育園の呼び出しや急な休みについても理解が得られやすい環境なのも、復帰後の安心感につながりました。私を支えたAIワークフロー復帰後、様々なプロジェクトで生成AI活用をすることが多く実際にどうAIを業務に組み込んでいったかを、ここからは紹介します。● アイディア出し・思考整理：ChatGPT業務から離れていた期間の技術調査わからない用語や概念のキャッチアップ作業のアイディア出しドキュメントのたたき台作成ChatGPTは、頭が回らない朝に状況整理してもらう時にも助けられました。● 実装：Claude Codeブランチ作成・調査・開発・PR発行まで自動化最初は完成度60%だったところから、ガイドラインを整備しながら80%まで向上MCPサーバや、新しい機能を活用したり、色々と試行錯誤しました。実装がほぼAIが担うようになり、人間は設計方針の判断に集中できる状態になりました。● 調査・評価・改善：Cursor（ほぼGPT-5利用）コードレビュー仕様解析バグ調査 と修正Cursorは「重い調査」を肩代わりしてくれる存在としても機能し、思考リソースを大幅に節約できました。● 仕様駆動：KIRO自動テスト生成が特に効果的完成度90%付近まで安定化KIROが登場してからは、作業効率がさらに跳ね上がり、“AIという仲間と一緒に開発している感覚”が強くなりました。（仕様駆動が自分に合ってると感じ、Claude Codeでも仕様駆動でやってみたりしてます）“AIがなかったら破綻していた”と思う理由復帰直後は、時間のコントロールが難しい日が多く、「まとまった学習時間」や「腰を据えて調査する時間」が取りにくい状況でした。そんな中、調査、アイディア出しなど、AIに任せられるタスクが多かったおかげで、残業ができない中でも業務を遅延させずに進めることができました。正直、AIがなかったらキャッチアップが追いつかず、復帰後の両立は今ほどスムーズにできていなかったかもしれません。以前、女性エンジニア向けイベントに参加した際、今回の復帰ではその不安が現実になるのではと感じていましたが、AIの存在がその壁をグッと下げてくれました。周囲の支えがあって続けられている復帰直後、保育園の呼び出しや発熱による急な休みが多かった時期、もちろん、仕事が遅れないよう最大限努力する姿勢は常に持っていましたが、両立のために削ったもの以前はよく参加していた 夕方以降の社外イベントや勉強会 は、いまの生活ではほぼ参加できていません。その代わり、AIを使って学習効率を上げることで、限られた時間でも必要な情報をキャッチアップできるおわりに：AIと文化に支えられた復帰不安を抱えながらの産休育休からの復帰でしたが、リモートが可能という柔軟な働き方、生成AI活用を歓迎する文化と共有会の存在、周囲の理解とサポート があったことで、今の私の働き方は成り立っています。AIに任せられる部分を任せ、限られた時間で最大限の成果を出すというのは、この記事が、同じように不安を抱えながら復帰に臨む方の参考や励ましになれば嬉しいです。※本文中で使用している画像は、生成AI（ChatGPT Image / DALL·E）を用いて作成しています。

産休育休から復帰した女性エンジニアが、生成AIと仲間に支えられて再スタートを切った話

この記事は株式会社ネクストスケープ2025年アドベントカレンダー第1日目の記事です。DX＆HR本部の和田が初日記事を担当します。 人間に残る”シゴト”　今から15年前の2010年だったと記憶しているが、学習型の組織を創り出すための研究会で、ロボットと人工知能（AI）がどうやって人間と協働するのか？が話題になった。その時の結論は、調べることや計算・作業は機械に任せることで、人間は何かを新しく産み出すことを受け持つだろうという予測だった。改めて創造が論点に上ったことで、その更に15年前に発表されていた日本発の知識創造理論SECIモデルの活用に注目するようになる。SECIの基本構造　会社や組織の中で新しく知識が生まれてくる動的なモデルを表すSECIは、暗黙知と形式知の往復を循環として描いたところが面白いと思う。Socialization（共同化）の段階で人は他人と共に体験し同じ暗黙知を持つようになる。そのうえでExternalization（表出化）の段階でその知に名付けを試み形式知に変える。名付けられた形式知を他の形式知と様々な脈絡でCombination（連結化）を試みる。新たに結合された形式知が、J.シュンペーターの言う「イノベーション」であり、組織はこれを再び暗黙知としてInternalization（内面化）していく。野中郁次郎・竹内弘高両先生の『知識創造企業』で1995年に示され、2020年にはその21世紀版『ワイズカンパニー』で増補解説された"知識創造のお作法”だ。SECIの実践はAIにもできるのか？　このモデルは当然ながら人間同士の働く企業組織を観察して抽出されたのだが、AIエージェントの劇的な進化と職場への浸透を考えると、その可能性についても考える必要が出てきた。ひょっとして、人間じゃなくてもSECIが回せるなら、知識創造さえも人間がやらなくて済む可能性に戦慄したというのが本音だ。そんな折、当社のエンジニアから広木大地著『AIエージェント人類と協働する機械』という本を紹介される。すると、そこには「SECIモデルとAIエージェントの統合」という章があり、既に4つの段階に対応したAIエージェントの事例が示されている。ああ、こんなにも早くその日が来てしまったのか。意味と価値は誰が？　情報取集・構造化エージェントに共同化を任せ、インサイト発見エージェントに表出化を任せ、戦略構築エージェントに連結化を任せ、実践支援・仮説検証エージェントに内面を任せる。確かにこれで知識創造の各段階での作業にAIが活用できそうだと思える。　一方で、毎度頭を擡げるのが記号接地に関する問題だ。例えば共同化では「同じ暗黙知」を持つ、つまり「（それが事実だと）信じる」ことが必要になる。これは記号化・言語化よりも前の段階で行われており、その暗黙知に名付けようとする動機にもなっている。また、連結化では「良さ」の基準、言い換えれば意味と価値については、どうしても人間が見るしかなさそうだ。AIエージェントが知識創造をかなりの部分で助けてくれることは間違いが、暗黙知の共有に必要な「信じる」ことと、「意味と価値を見出す・認める」ことは、どうやら人間の手に残りそうだ。改めて人間に問われるのは　共同化では、いま起きていることや体験していることを暗黙知として信じるためには他の人が必要になる。端折って言えば一緒に働く人と同じものを見て、それを体験して、いま同じものを味わっていると「信じられる能力」が求められるということだろう。更に連結化では、その結合させたものにどんな意味を認めるのか？どんな価値を見出すのか？という「主観を開示する能力」と「相手の主観を理解する能力」が求められる。ネクストスケープはこれからも　この能力の重要性は、AIエージェントが普及する中で更に高まっていくのは確実だ。SECIの実践ハードルが下がり、連結化による新結合のインフレは必至で、その意味を認め価値を見出す「自分と相手の主観の取り扱い方法」を学ばなければならないだろう。ネクストスケープはこの新結合（イノベーション）を、お客様のビジョンに共感した上で提供することになるが、お客様と同じものを味わっていると信じられるように融け合って、2026年も期待を超える感動を約束したい。

SECIがAIと出会う日

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。昨日の記事の続きです。こちらはエンジニア以外の方にとっても使える記事かなと思いますので別記事にしてみました。私の過去の記事ではAIツールを使ってドキュメントの作成を試みたものがあります。blog.nextscape.netblog.nextscape.netAIツールの利用にあたってはドキュメントとしてはMarkdownファイルがメインになるのですが、AIツールを使っていない方であったり、実際の業務におけるお客様とのやり取りにあたってはやっぱりOffice、ExcelやWord、パワーポイントでの資料の作成が必要になりまして、そういった背景もあり上の各記事で試してきたという経緯があります。今回AntigravityではGemini3.0が利用でき、SNSでは既にGemini3.0がすごい的な内容もちらほら見受けられています。なので、プログラミングだけではなく、他の用途でも使えるだろうかということで上記の試みをAntigravityでやってみようというのが今回の記事となります。モデルはGemini3.0 Pro(High)で試した結果になりますのであらかじめご承知おきください。パワーポイント出力まずはパワーポイント。いつものようにあえて雑なプロンプトを投げてみます。「AzureとAWSの違いをメリットデメリット含めてパワーポイントにまとめてもらえますか？」以下のように出力してくれます（見づらかったら申し訳ないです。ブラウザの拡大機能等で見てみてください）。悪くはないのですが、表や図がもうちょい欲しいなと思います。著作権の問題もあるのであまり画像は使わなくてもいいのですが、見た目的に寂しいですし、一番最初に試したPowerPointのCopilotでは表が出力できなかったのでそれができるかどうかも実用的であるかどうかの基準の１つとして考えています。そこで、「もっと表やAzure・AWSのアイコンを加えて、グラフィカルにできます？」と投げてみます。結果が以下。上のプロンプトを見てもらうとわかるように出力場所も書かれています。なかなか良い感じです。テーブルとアイコンを出力してくれてますのであとはプロンプトによって如何ようにでもなると思いますので私的には及第点です。Excelでの出力では、次に上の記事でも試してみたのですが、Excel、といっても普通のExcelではなく他の記事で試したようにExcel方眼を作ってもらおうと思います。プロンプトは以下。「Excel方眼で休暇申請書を作って」開くにあたってセルの結合でちょっとエラーが出たのですが、一旦無視して開きますと以下の通り。ExcelのAgentで作ったときとほぼ同じクオリティでの出力結果です。Wordでの出力Wordでも作ってみました。これも実際の業務で使えそうなレベルで特に問題無さそうです。同じプロンプトでExcelをWordに置き換えただけなのですが、今回は実行計画書を事前に作成してくれて、どういった項目を設けるかが書かれてました。最初の２つではこの実行計画書は作成してくれませんでしたが、あらかじめプロンプトして指定しておけば対応してくれるはずです。トライ＆エラーで何度も作り直すでもよいのですが、Antigravityの機能として計画書に対してコメントで事前にこの項目を追加したい、タイトルはこうしたいといったことを追記でき、作成する前にある程度どういった項目を設けるか、どういったフォーマットにするか等を詰めることもできますのでこれも非常にポイントが高いと思います（前回のAntigravityの記事には書いていなかった内容です。。）。終わりにいかがでしょうか。ドキュメント作成用途でのAntigravity。これであれば開発において出力してきた各種MarkdownファイルのドキュメントをWordやExcelで出力しなおしてお客様に提出。。と言ったこともできると思いますし、エンジニア以外の方、例えば営業の方でもパワーポイントを作成したりと使えるツールになっていると思います。もっとプロンプトを工夫し、フォーマットやフォント等を指定すれば更に良い結果が得られると思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Antigravity＋Gemini3.0で資料作成を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Google が 2025年11月18日（米国時間）に発表した開発プラットフォーム、Google Antigravityについての記事になります。現在無償プレビューとなっており、これも最新モデルであるGemini3.0が無償で利用可能です（2025/11/22現在）「An Agent-First Experience」ということを謳っております。antigravity.googleインストールまずはTOPページ。ここからインストーラーをダウンロードしてインストールします。MacOS、Windows、Linux版がそれぞれ存在しています。インストーラーの詳細流れは割愛しますが、以下のように既存のIDE、VS CodeやCursorから設定をインポートすることもできます（文字が小さくスミマセン）キーバインディングで以下の２つを選べたりします。Normal（標準）Vim一通りインストールが終わったらGoogleへのサインイン。以下がAntigravityの画面となります。モデルはデフォルトでは以下が選択可能。Gemini3.0 ProのHighとLow、そしてSonnet等が選べます。上のスタート画面（と呼ぶのかわかりませんが）では「Open　AgentManager」というボタンがありまして、以下のような画面が「AntiGravityの画面とは別に」開かれます（色が白黒逆になっていますがご容赦を。。）。上記のAgent Managerの文言の直訳を一応以下に挙げておきます。「エージェントマネージャーへようこそエージェントマネージャーでは、深い調査、長期プロジェクト、バックグラウンドタスクなどの作業にエージェントを開始できます。受信トレイで複数のエージェントの進捗状況を監視し、作業完了後にその成果を確認できます。」余談ですが、Cursorでも同じようにAgent管理の画面が別にあるのですが、Cursorはあくまで１つの画面での切り替えとなりまして、個人的にはマルチディスプレイ使いということもあり、こちらの別画面が好印象でした。こちらはまた後で紹介するのでまずはメインの画面の方に戻ります。改修実行メインの画面は以下の通り。インストール時の設定で既に予測できた方もいらっしゃるかもですが、VS CodeのForkとなりまして、VS Code、Cursor使いの方にとっては使い慣れた画面となります。すると処理が進んで以下のような結果が出力されます。仕様書と実装計画書が作成されたとのこと。以下が仕様書。以下が実装計画となります。右上の「Proceed」ボタンを押すと承認されたとみなされ処理を続行します。この後は実装が完了し、他のAIツールであれば起動して終了となります。今回はちょっと違った動きとなりまして、先にAntigravityの大きな特徴の１つであるAntigravity Browser Extenstionについて説明します。こちらはChromeの拡張機能として事前にインストールするように促されます。そしてその状態で作業を進めますと単純に立ち上げて終了とならず、テストまで実施してくれます。ブラウザが自動的に起動し、更には今回のTodoアプリの仕様に従ってテスト（ToDoの作成、削除等）が自動的に行われていきます。テストが終わるとWalkthroughとして実装完了報告が作成されます。以下はそれを開いた画面。実装完了報告書の下にスクリーンショットが見えると思いますが、更にその下にある「ブラウザ操作の録画」をクリックします。すると以下のように別ウィンドウで先ほど実行されたテストの内容が動画として再生されます。その他の機能今までのIDEですとスクリーンショットまではあったのですが、動画の録画まで行ってくれるのは今回が初めてです。この動画での録画は実装の流れとして実施してくれるだけでなく、プロジェクトと関係無くAntigravity Browser Extenstionで別途ブラウザを立ち上げ、「Yahooで～を検索して、その一番最初の検索結果をクリックして」のような指示を出せば別途ブラウザが起動し、その作業を録画してくれます。当然（？）スクリーンショットも取得できますし、動画もスクリーンショットもローカルのPCに保存されています。なので開発だけでなく、ブラウザの操作の共有等にも使えそうですね（マニュアル作成に良さそうというのが同僚の意見でした。なるほど。。）。さて、先ほどの実装後の起動時の流れで画面表示ができますので表示して見ます。以下右側のところに「View」ボタンがあるのでそれを押すと真ん中のウィンドウがスクリーンショットが表示されます。Welcomeの部分をドラッグで囲めるので囲んでみます。すると以下のようにコメントを挿入できますので「ToDoアプリにようこそ」に変更したい、と書いて「Add Comment」ボタンをクリックします。するとプロンプトの入力欄が「Submit」ボタンで押せるようになり、それを押すとまた処理が進んでいきます。そして再度ビルドが行われ、アプリが再起動して。。このように変更が反映されました。。テスト動画にも驚きましたが、これはなかなかすごいですね。Agent Managerでは最後にAgent Managerを。以下がAgent Managerの画面で左側に各プロジェクトとそれに紐づくエージェントが表示されています。コードは表示されないですが、ここで各プロジェクトに対して指示が出せます。上の画面では少々分かりにくいのですが、「WebApplication3」と「WebApplication4」というプロジェクトに対して同時にUIの改善を指示しています。右側の一番上「Inbox」をクリックすると以下のような画面になり、各プロジェクト、エージェントの状況が把握でき、必要に応じて承認を行うこともできます。文字通りエージェントの管理が行えるわけです。最後にと、つらつらと書いてみましたが一旦ここまでにしたいと思います。いかがでしょうか。Antigravity。あのGoogleが満を持して公開したIDEなだけに非常に素晴らしいものだと思います。私自身もIDEなんてここまで進化すればどれも同じでしょと思い始めた中でCursorやVS Codeの一歩前を進んでいるような印象を受けました。今回はスポットライトを当てませんでしたが、Gemini3.0もSNSを見る限り非常に有能なようでして、今まで私もCursorを使っていましたが、乗り換えを考えてもよいかなと思い始めています。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Antigravity、Gemini3.0がすごい

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Cursor2.0で発表された機能のうち、マルチエージェントとComposerモデルについて先日記事を書きました。blog.nextscape.net今回はCursor2.0でGAとなったAgent用ブラウザについて試した内容を書いてみたいと思います。既に1.7でベータ版として公開されていますので今更感がある方もいらっしゃるかもですがご容赦を。このAgent用ブラウザ、内蔵ブラウザ（Internal Browser）とも表現されていますが、Cursorの中にブラウザがあることで何がいいのか、何ができるのか、これから説明していきたいと思います。自然言語によるブラウザ操作まず、起動方法なのですが、以下のようにCursorの中央の画面において「Open Browser」という項目がありますのでこれをクリックするか、「Ctrl+Shift+B」を押してください。すると以下のようにブラウザ用のウィンドウが開かれ、ウィンドウ上部にはChrome等の他のブラウザと同じように戻る、進む、リロード、そしてURLの入力欄があります。プロンプトの入力欄に「yahoo.co.jpを開いて、「生成AI」で検索し、最初の検索結果をクリックしてください」と入力し、実行してみましょう。そうするとブラウザ画面が指示した通りに動き、最初の検索結果が表示されたところで終了となります。このようにブラウザを自然言語で操作することはPlaywrightのMCP等でも同様のことができるのですが、Playwright等と比べた場合にどうも反応の遅さが気になりました（以下はPlaywrightのMCPサーバーで同様のことを試した時の記事です）。blog.nextscape.netこの内蔵ブラウザがベータ版として公開された時にも同様の感想を社内で聞いたことがあったのですが、その時はまだ私が触っていなかったため、そういうものなのだろうかと今一つピンと来なかったのですが、実際試してみると例えば「検索欄に入力して」という命令についても「まずは検索欄を探してみます」といったわざわざ報告不要なことをこちらに連絡し、検索したその結果を受け、検索欄が見つかったことをこちらに連絡し。。という感じで非常に時間がかかります。Cursor2.0では前回の記事で紹介した爆速のComposerモデルが加わりましたのでこれを使えばもう少しマシに動作します。。が、やはり傍から見た時のやり取りの多さが気になるところです。一旦そこは目をつぶり、もう少し試してみたいと思います。自作のToDoアプリについても同様に操作が行えますのでlocalhostのアドレスを入力し、ToDoの追加のテストとして「今、intermalブラウザでこのアプリを立ち上げてますが、「Aさんにメールを送る」を追加して。」と指示すると、以下のようにその通りに動作します。ちなみにブラウザのメニューとしては以下のようなものがあります。恐らく読んで字のごとしかと思いますので説明は省略しますが、以下の４つが存在します。・Take Screenshot（表示範囲のスクリーンショットを取得））・Take Full Page Screenshot（ページ全体のスクリーンショットを取得）・Hard Reload（ハードリロード）・Copy Current URL（現在のURLをコピー）エレメント選択あとは「エレメントの選択」機能（という名前で合っているのかわかりませんが。。）がちょっと他の同様のツールと一線を画すかと思いますのでこれを説明して終わります。以下「Select element」をクリックしますすると以下のように要素ごとに選択が可能になりまして、タイトル部分の「Ｈ1」と表示された要素をクリックします。するとプロンプトの入力欄にクリックした要素が表示され、これを対象にしたプロンプトが記述できます。例えば「このエレメントの文言を「ToDoアプリケーション」に変更して」と指示すると以下のように。あとはタイトルバー全体のDIVをクリックし、「選択したエレメントの色を明るい緑に変更して」と指示すると以下の通り。「タイトルバー」と指示してしまうと選択結果が正しく反映されているかわからないので上のようなプロンプトで指示してみましたが、正しく動作しました。終わりにエレメントの選択は開発において非常に便利だなと思いました。あとはブラウザの操作時においてもっと反応が早くなってくれれば完全にCursorの中だけでデバッグ等が完結すると思いますのでCursorユーザーとして非常に期待しております。プロンプトによるブラウザ操作については１つ１つ手順や状況を出力してくれるのもAIツールとしては有りだと思うのですが、例えばそういった情報を出力せずにどんどん操作してくれるようなモードがあったりすると嬉しいな。。と。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor2.0のAgent用ブラウザ、エレメント選択機能を試してみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です2025年10月17日にAnthropicがClaude向けの新機能「Skills」を公開しました。www.anthropic.com上記のサイトの説明を読むと「スキルを使用して特定のタスクの実行方法を改善できるようになりました。スキルとは、Claudeが必要に応じて読み込むことができる指示、スクリプト、リソースを含むフォルダです。」とありますが、ちょっとわかりにくいですね。Claude（特にClaude Code）を知っている人向けの表現になってしまいますが、カスタムコマンドとMCPの中間にあたるようなものなのではと思っています。Anthropicsが公式にGitHubでスキルを公開しているので、使えそうなスキルがあればそれをそのまま使ってもらうのがよいかもしれません。github.com上記のGitHub内にはdocument-skillsというスキルもありますが、これはWordやExcel、パワーポイント資料を作成するためのスキルになります。特定のフォーマットでWordファイルを生成したい場合は上記のスキルを参考に他のチームメンバーでも同じフォーマットでWordファイルが作成できるわけです。そういった繰り返し行う作業、特定の知識に基づく作業、特定のフォーマットに従った出力が必要な場合にスキルが使えるのではと思います。上で挙げた既存のスキルをそのまま使うこともできますし、独自に作ることも可能です。まずはSkillsの基本構造を見てみましょう。/skills/[スキル名]/├── SKILL.md                   # メインのスキルドキュメント（必須）├── LICENSE.txt              # ライセンス情報├── scripts/                       # Pythonスクリプトやツール├── references/                # 参考資料・ドキュメント└── [その他のリソース]   # スキル固有のファイルメインのスキルドキュメント、SKILL.mdは各スキルに必ず存在するものであり、そのスキルの内容はこれを見ればわかるようになっています。なので上記Github内の各スキルについても何のスキルなのかを知りたい場合はまずはSKILL.mdを参照ください。また、scriptsフォルダにスクリプトを入れることでスキル内でスクリプトを実行させることも可能です。スキルの特徴の１つと言えるのではないでしょうか。準備では、今回はDDDに基づきレビュー、改修を行うスキルを作ってみましょう（DDDって何？という方向けに簡単に説明しますと「ドメイン駆動設計」の略称でして、ソフトウェア開発における設計手法です）。ただ、実際に上のようなシステム構成を守り、他のスキルを参考に。。スキルを一から作るのはなかなか大変かと思います。そういった方のために上記Githubでは「skill-creator」というスキルが用意されています。これは文字通りスキルを作成するためのスキルでして、これを使って上記のスキルを作成してみましょう。「skill-creatorのスキルを使ってDDDのアーキテクチャをレビューするスキルを作ってください。プロジェクトのディレクトリ構造とコードを見て、以下をチェックしてほしいです：・レイヤー分離ができているか・依存の方向が正しいか（ドメイン層が他に依存していないかなど）・貧血ドメインモデルになっていないか・ドメインロジックがサービス層に漏れていないかスコアと具体的な改善提案を出力してください。」以下のようにスキルが作成され、ファイルがダウンロードできます。必ずしもそのように出力されるかはわからないのですが、私の環境で起きたちょっとした注意点としてスキルのファイルは実際にダウンロードするとddd-architecture-reviewer.skillというファイル名になっています。これはZIPファイルなので拡張子を「.zip」ファイルに変えて解凍しましょう。作られたスキルのフォルダ構造は以下になります。ddd-architecture-reviewer/├── SKILL.md ├── scripts/│       ├── analyze_dependencies.py│       └── analyze_structure.py └── references/         ├── evaluation_criteria.md           └── language_patterns.mdWindowsであれば以下の場所に配置します。C:\Users\(ユーザー名)\.claude\skillsそして、ちゃんと設定されているかどうかを確認する必要があるわけなのですが、これもClaudeに聞いてみればわかります。以下のように「使えるスキルの一覧を出して」とお願いすると現在設定されているスキルを出力してくれて、その中に今回作成したDDDのスキルが入っているがわかります。ちなみにClaudeのデスクトップアプリの場合はもっと設定が簡単でして、以下の設定画面から「機能」をクリックし、「スキル」の欄の「スキルアップロード」ボタンをクリック、画像以下のようなダイアログが表示されるので上記スキル構造のZIPファイルをアップロードすれば自動的に展開してくれます。次に評価対象のプロジェクトを用意しておきます。一応これもDDDに基づいて作成するのですが、今回の作業内容を事前に伝えておき、あまり完璧なものにしないようにしてもらいます。スキル実行ではいよいよスキルを使ってレビューを行いましょう。以下のプロンプトを投げます。「ddd-architecture-reviwerスキルを使って現在のプロジェクトのレビューをしてください」以下のようにレビューが行われます。結果が以下のように出力されます。スキルとしてスコアを出すように設定していたのでちゃんと「総合スコア」として出力されています。100点中18点というのはちょっと残念なスコアなのですが、まあ「あえて」低くした結果ですので。。レポートも出力してもらっています。以下がその内容です。ソースコードのどの部分が。。というところも含めて出力してくれています。では、スコアがどれくらい変わるか改修を行います。プロンプトは以下のような内容で投げます。「ddd-architecture-reviewerスキル及び今回のレポート内容を踏まえて現在のプロジェクトの改修をしてください」※実際にはレポートファイルの場所、ファイル名を指定しています。そして再度レビューを。。結果、以下のように100点中97点と非常に高い結果になりました。レポートも改修前のスコアを比較できるようにしてくれています。配慮が行き届いていて非常に良い感じです。とりあえずはここで終わりでも良いのですが、あまりのスコアの高さ、変わりっぷりに本当に大丈夫なんだろうかと思ったので、今回のスキルを使わない別モデル、Codexにチェックしてもらいます。結果が以下。「全体としてDDDの基本にしっかり従っています。」とのこと。AIの出力である以上、できれば人間が一通りチェックするべきですが、ある程度は担保できそうです。最後にこのようにスキルの作成も手伝ってもらえますので最初に挙げたような繰り返し作業が必要になるもの等、スキルが活かせる作業についてはは是非使って（作って）みてください。ドキュメント生成スキルを拡張して議事録作成スキル、あとは自社SNSへの投稿文についてフォーマットを揃えたい場合に投稿文作成スキルを用意するといったようにプログラミングに限らず様々なスキルが考えられます。余談ですが、今回の件に限らず、AIが生成した結果に対してどのようにチェックするかは今のところAIツールを使って開発している人達が抱える問題だと思います。当然コードが分かる人間が責任を持って把握、確認することができればよいのですが、開発ボリュームによってはそれができない（及ばない）場合があります。そういった場合はこのように別のAIツールを用いてチェックするというのも1つの手かもしれません。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claudeの「スキル」（Skills）機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です10月29日にCursor2.0が発表され、さまざまな新規機能が公開されました。cursor.comそのうちのマルチエージェントとComposerモデルを触ってみましたので早速記事を書いてみました。まず、Composer（正確には「Composer 1」なのですが、今回は「Composer」で書いていきます）。上記URLでの紹介文を抜粋させていただくと、「Composer は、同等の知能レベルのモデル比で4倍高速な最先端モデルです。このモデルは Cursor における低レイテンシのエージェント型コーディング向けに設計されており、ほとんどのターンを30秒未満で完了します。」とあります。実際SNS等でもその速さとその出力内容を高く評価している声が多々見受けられます。もう１つはマルチエージェント、「git worktree やリモートマシンを活用して、相互に干渉させずに多くのエージェントを並列実行できます。」とのこと。マルチエージェントで複数モデルを実行できますので、Composerの速度を他のモデルと比較してみたいと思います。設定・準備まずは設定・準備。プロンプトのモデル選択のプルダウンを開くと以下のようになります。確かにComposerが存在するのがわかります。あとは」「Use Mutiple Models」という設定がありますね。これがマルチエージェントの設定です。Gitに存在するプロジェクトでないとマルチエージェントの設定をONにできないのでご注意ください。ちなみにcheetahという速さを売りにしたモデルがちょっと前にCursorで使えるようになっていたはずなのですが、今回消えていました。cheetah＝Composerなのかは不明です。マルチエージェントでの実行いつものToDoアプリの作成を依頼すると以下のような表示になり、作業が進められていきます。選択したモデルが３つ、上部に表示され、各モデルをクリックするとそれぞれの進捗状況が確認できます。初めて見る動きということもありますが、3つのモデルが次々と処理をこなしていくのはなかなか壮観ですね。。結果としてComposerはやはり速く、1分もかからずに作業が完了しました。次にSonnet4.5が2～3分で、最後にCodexとなりました。順位自体はなんとなく予想はしていましたが、確かにComposerは早いです。ただ、開発の作業ですとモデルによっては承認を必要とする場合もあり、一概には比較が難しいので解析作業のようなものが比較には合っているのかもしれません。Git Worktreeを使うため、各エージェント用に３つのブランチが作成されているのがわかります。これで１つのエージェントで認証機能を、もう１つのエージェントで検索機能を同時実装といったことも可能になります。話はやや外れますが、このマルチエージェント機能によりGit Worktreeの便利さも見直されているようでして、ちょっと面白いなと思いました。。その他・まとめComposerはコーディング関連の作業においては非常に速いのですが、複雑なタスクや深い思考を必要とするような作業は苦手といった感想がチラホラ見受けられます。また、この記事を書いて気づいたのですが、最初のCursorのブログには「コーディングモデル」という表現がされていました。この表現はそういう意味が込められているのかもしれません。私もまだメインでは利用しておらず数回試しただけですが、実装という点ではCodexやSonnet4.5といった他のモデルと比べると細かさや配慮（という表現がAIに対して合っているかはともかく）が若干ではありますが、足りていないようにも思えます。ただ、その辺りは個人的な感覚でして、プロンプトであったり、共有するコンテキスト等で補えると思いますので、あとは他のモデル同様使い方次第かなと思います。ただ、このような高速なレスポンスを誇るモデルであったり、マルチエージェントによって開発が捗るのは確かに嬉しいことでもありますが、それは一定の期間においてAIで出力される内容が他の方法やモデルと比較して２倍、３倍になるということでもあります。個人的な開発であれば確かにそれによって開発効率は上がるかもしれませんが、実際の仕事において開発を行う場合は出力内容において責任を持つために何らかの確認が必要になりますので、マルチエージェントによって単純に開発速度が上がるかというとそこは難しいところではあります。とはいえ、このようにより便利になるのは非常に良いことだと思います。Cursor2.0で使えるようになった機能は他にもあるのですが、まずはこの辺で。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor2.0のマルチエージェントとComposerモデルを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です「GitHub Universe 2025」が日本時間10月29日未明から開催されていました。様々な発表が行われましたが、そのうちのVisual Studio CodeにおけるGitHub Copilotの新機能「Planモード」を触ってみましたので記事を書いてみました。ちなみにCursor、ClaudeCodeにもPlanモードは存在しており、以前に記事を書いています。blog.nextscape.netVS Codeと書きましたが、正確にはVS Code Insiders(2025/11/01時点で1.106が最新バージョン)で利用可能になります。Planモードはどこで設定するかといいますと、プロンプトの入力欄のプルダウンにモード切替があります。今までは「Agent」「Ask」「Edit」となっていたかと思いますが、それに「Plan」が加わりました。実践　Planモードでの動作今回も「ToDoアプリの作成」で試してみようと思いますので事前にVisualStudioでWebサイトの雛形を作成しておきます。まずはPlanモードに切り替えます。そして以下のプロンプトを投げます。「Planモードで」と追加しようと思いましたが既にモードは切り替えており、蛇足かと思いまして止めておきました。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」結果が以下になります。ちょっと文字が小さいかもしれないので、一番の特徴である最後の「Open Questions」の部分を抜き出してみます。1.永続化は「JSONファイルで十分」か、将来的に「SQLite/EF Core」に切替える予定はありますか?2.UIはモーダルでタスクを追加しますか、それともページ内のインラインフォームにしますか?3.認証/ユーザー別ToDoが必要なら、設計をどう分離しますか（現在は未対応）?事前に全体的なプランを立てて、それに従って作業を進めるという意味では以前試したCursorやClaude Codeのものとあまり変わらないのですが、大きく違うと思った点が上のような「都度、幾つか選択肢を提示し、それを選ばせる」というものになります。また、案を挙げられてもそれがどういったものなのか、メリット・デメリット等、わからないことがあればそのタイミングで以下のように問い合わせることで細かく説明してくれます（以下のやり取りは上記の２番の質問に関してメリット・デメリット等を示してくれと依頼した内容になります）。質問に対して回答することでまた以下のようにOpen Questionsが出てきます。上記のやり取りの間に指示するのを忘れたこともあり、以下のような質問を投げてみます。TDDはできますか？すると以下のような回答があり、また選択肢が出てきます。選択肢によっては「（推奨）」と明示してくれるものもありますので判断の助けになるかと思います。はい、TDDで進められます。私はTDDサイクル（Red → Green → Refactor）に従って、テストを先に書き、失敗することを確認してから最小実装を書き、テストを通し、最後にリファクタします。あなたが「SQLite + ASP.NET Core Identity + インラインUI」を選択された前提で、現実的で効果的なTDDフローを提案します。次に私ができること（選んでください）A) 最初のTDDタスクを始めて「最初の失敗テスト」を作成します（例: TodoItem バリデーション）B) テストプロジェクトの雛形（WebApplication1.Tests）を作成し、必要なNuGet参照・初期ファイルを追加しますC) 流れを示した小さなサンプル（テスト + 実装）を1つ作って動作確認します（推奨）全体的なプランについては以下のように表示され、進捗状況が確認できますので、個々の質問に集中しても迷子にはなりません。この流れで実装まで作業が進んでいきます。最後にClaude CodeやCursorの他のプランモードは最初にプランを立ててくれるものの、一旦プランを立ててしまうとその後はこちらに判断を促すことがなく実装を進めていってしまう印象でした。しかしながら今回のPlanモードは都度どうするかこちらに判断を促し、かつ、選択肢も提示してくれます。つまり今まで以上に「インタラクティブ」にやり取りが行え、勝手に作業を進められてしまうということが減ります。是非試してみてはいかがでしょうか。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

GitHub CopilotのPlanモードを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です今となってはもう１カ月以上前の話になりますが、9月10日にClaudeがExcelやWord、Powerpoint 等のファイルを生成できる機能を発表しました。この時はまだMax、Team、Enterpriseの各プランで先行提供されており、Proプランを利用していた私には非常に興味深い機能だったものの触れずにいました。そして最近になり、やっとProプランでもこの機能が使えるようになりましたので早速試してみたいと思います。結構こまめにチェックしていたつもりなのですが、いつから使えるようになっていたのか定かではありません。。Claudeのデスクトップアプリであれば設定画面に移動しまして、「機能」のタブをクリックします。そうすると「実験的」の欄に「Code execution and file creation」という機能があるのでこれをONにします。さて、早速PowerPointファイルの作成を試してみたいと思いますが、以前、Copilot in PowerPointを試した際のスクリプトを使って比較してみます。blog.nextscape.netPowerPoint出力プロンプトは以下。「AzureとAWSの違い、メリット・デメリットをまとめたパワーポイント資料を作ってください」以下のように作成状況を説明しつつ、作業を進めてくれます。直接PowerPointを作成するのではなく、HTMLでスライドを作り、それをPowerPointへ変換するようです。Markdownファイルから始まらないことを除けばMarp CLIと同じような流れですね。出力結果としては以下のような内容となります。Copilotとの違いは表もちゃんと作られているところでしょうか。あとはグラフも作られており、しかもPowerPointから設定が可能です。この点は「おっ」と思わされました。以前の記事で試した時のCopilotはイメージ画像のようなものも生成し、見た目は派手なのですが、つくりとしては表も使われないためよく見るともう少しかなと思われる部分がありました。Claudeによる資料は見た目は落ち着いているものの、内容としては色々と考えられており、上で挙げたページには存在していないですが、AzureとAWSとで色分けをしていたり、コンテンツとしてはこちらの方がちゃんと作られている印象があります。※当然扱う対象やプロンプトであったり事前に共有する情報等で大きく内容が変わることをご了承くださいExcel出力Excelも試してみましょう。ExcelのAgent modeを試した時と同様、休暇申請書を作成してもらいます。blog.nextscape.net結果としては以下の通り。もう少し枠線等を書いた方が見た目としては良いような気がしますが、それでもこれもすぐに会社のフォーマットとして扱えそうなレベルでちゃんと作られていますね。Word出力次にWord出力を試してみましょう。同じく休暇申請書でいきたいと思います。「スキルファイル」とありますが、特にWordファイル作成に関するスキルは設定していないはず。。スキルについてはまた別途記事を書きたいと思います。以下のようにWordのファイルが作成されました。これも非常に良さげです。GoogleDrive連携ちょっと元々のドキュメント出力機能からずれますが、Googleドライブとの連携もできるので試してみます。右上にGoogleドライブのアイコンがあるのでこれをクリックします。もし、元々連携設定されていなかった場合には以下のようなダイアログが出ますのでここで連携設定を行います。そうするとGoogleドライブに作成したファイルが自動的にアップロードされ、今後はこのアイコンをクリックすればGoogleドライブでファイルが開け、編集できます。Googleドライブを普段使いされている方にとっては非常に良い機能ではないでしょうか。最後にということで以上がドキュメント作成機能となります。AIツールではMarkdownファイルを主に扱うことになると思うのですが、やはり会社として扱うファイルとしてはWordやExcel、PowerPointが必要になる場面は多く、SNSでも評判が良いようです。ただ（ここからは個人的な感想になりますが）、対話形式でExcelを作成でき、その完成度の高さという意味ではやはり本家Agent modeには及ばないかなと思います。まだ発表されていないようですが、このAgent modeがPowerPointでも使えるようになった場合、かつ、WordやExcelの場合と同等のレベルで使えるのであれば、やはりPowerPointにおいてもAgent modeの独壇場になりそうな気がしておりまして、元々のClaudeの機能と話がずれてしまいますが、そちらが非常に気になっているところです。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claudeのドキュメント作成機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。タイトルのClaude Code on the Web、ちょうど発表されたばかりなので軽く試した内容を書いてみたいと思います。2025年10月21日現在ではベータ版、かつProまたはMaxユーザーのみの機能となりますのでご注意ください（筆者はProプランを契約しています）。設定ブラウザでClaudeにログインし、いつものプロンプト入力画面において右側メニューに「</>」というアイコンがあると思うのでそれをクリックします。GitHubへのログインを行った後、以下の画面に遷移します。これがClaude Code on the Webの画面です。（コマンドプロンプト版でも出てきますが、右の宇宙人のようなものはなんでしょうね。。）画面を見るにGitHubからプロジェクトを読み込む前提のようですね。右側のウィンドウの「Select repository」をクリックすると以下のような表示が出てきますので「GitHubアプリをインストール」をクリックします。以下のダイアログが表示され。。別画面でGitHubにログインします。そしてログイン後にGitHubの設定画面に遷移し、Claudeにアクセスを許可するために必要な設定を行います。依頼実行これらの作業が一通り終わりましたら、再度ブラウザの再読み込みを行えば先ほどの画面でGitHub内のリポジトリが選択できるはずです。今回はGitHubがベースになるので事前にVisual StudioでWebアプリのサンプルを作成し、GitHubにpushしておきます。その上でいつものToDoアプリへの改修依頼を投げます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると右側にセッション画面が開き、ローカルのClaude Codeと同様ToDoアプリ作成のための作業が進んでいきます。上記プロンプト通り、まずは解析後に仕様書が作成され、それに基づき実装が行われていきます。ちょっと気になったこととしてはClaude Codeに限らず他のツールでも都度レビューといいますか、生成された内容についての確認があったのですが、今回のClaude Code on the Webについては一気に実装まで進んでしまいました。これが今回のプロンプトに限ったものなのかはまだわからずですが、皆さんもご注意ください。実行も一応依頼してみたのですが、そもそも環境上に.NET SDKがインストールされていないため、実行ができないとのこと。他の言語であれば実行できるかどうかはまだ未確認です（ちょっと難しそうな気がしますが。。）。セッション画面の各機能では、もう少し機能を見てみましょう。セッション画面の下側は以下のようになっています。一番下の入力欄はコマンドラインの入力欄とのこと。その上の部分は一番左がブランチ、そして「Create PR」ボタンと、「Open in CLI」ボタンの３つ。「Create PR」ボタンをクリックしてみましょう。すると別画面でGitHubのプルリクエストの画面が表示され、ここでプルリクエストの作成が行えます。もう１つの「Open in CLI」はなんでしょうか。試しにクリックすると以下の文字列がクリップボードにコピーされます。「claude --teleport session_～」※実際の「～」はセッションを表す英数字の羅列ですこれは何かといいますと、ローカルPCで作業する場合にコマンドプロンプトでこの内容をペーストすると直前までのon the Webの作業状態を引き継いで作業が行えるというものです。以下のようにon the Webのセッション画面の内容がそのまま表示されるのですが、これはなかなか興味深い内容でした。あとはせっかくのWeb版ですのでスマホでの表示も見てみます。以下がそれです。PCブラウザのセッションウィンドウが表示される形になりまして、「Create PR」ボタンや「Open in CLI」等、そのままですね。これで電車の中でもClaude Codeが使えるわけです。その他あとはclaude.mdは参照・利用できるようです。「/help」等のClaude Codeのコマンドについては私が試しに「/help」と入れると応答が返ってきませんでした。少なくてもコマンドのサジェスト機能は無さそうです。同じく最近発表されたスキル機能についてはまだ未確認ではあるものの、私が先ほどまで試した限りではうまく動かない雰囲気でした（設定・実行できたらスミマセン。。）。このあたりはon the Webとしての制限・制約があるような気がしておりまして、ローカルPCでのClaude Codeと完全にイコールの使い勝手では無さそうです。ただ、発表されたばかり、ベータ版ということもありまして早々に色々と改善されるのではと予想しております。最後に発表されたばかりということもあり、少々使い勝手において気になる点もあるものの、社内でも評判の高いClaude CodeがWebブラウザで気軽に扱えるというのはユーザーにとっては非常に便利なものではないでしょうか。家でPCで作業をしていて、電車内でもコーディング、そして職場でも状況を引き継いで再度PCでコーディング、そういったシームレスな作業が可能になります。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Code on the Webを触ってみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。ここ最近、CursorとClaudeCode、それぞれアップデートがあり、色々と調べているところではありますが、最近公開されたCursorのPlanモード、そして、それに似たものとしてこれも先日公開されたinteractive question toolについて触れてみたいと思います。どちらも出力品質を高めるため、要件に関する確認質問が行われ、それに対して答えていきます。そうすると詳細な計画書が作成されますのでそれをレビューまたは編集し、準備ができたらその計画を元に作業を進めていくというものです。CursorのPlanモードまずはCursorから。複雑なタスクを記述すると、Cursor が自動的に Planモードを提案してくれるそうですが、今回はAgent の入力欄で Shift + Tab を押して意図的にPlanモードに切り替えます。下記赤枠部分はプルダウンになっているので直接切り替えてもOKです。いつもの私の記事ではToDoアプリをベースに試してきてましたので今回も例に漏れず、以下のようなプロンプトを投げてみます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると上のように質問が出てくるのですが、ちょっと文字が小さくて見づらいという方に以下にその内容を挙げておきます。「ToDoリスト機能の仕様を作成する前に、いくつか確認させてください:1.ToDoリスト機能の実装方法はどれがよろしいでしょうか?　a) 単純なメモリ内保存(再起動で消える)で進める　b) データベース(SQLite等)を使用して永続化する　c) JSON/XMLファイルに保存する2.UIの実装方法はどちらがよろしいでしょうか?　a) 既存のRazor Pagesに追加する　b) Web API + JavaScriptでSPA風にする3.複数ユーザー対応は必要でしょうか?　a) 不要(単一ユーザー向けシンプルなToDoリスト)　b) 必要(ユーザーごとにToDoを管理)」いきなり言われても。。という場合も有ると思いますので、その場合は以下のようにメリット・デメリットを更に聞いてみて深堀します。当然上記の選択肢のいずれも気に入らなければ更に相談して別の選択肢を考えてもらうこともできます。では、実装方法は「b) データベース(SQLite等)を使用して永続化する」、2は「b) Web API + JavaScriptでSPA風にする」、3は「b) 必要(ユーザーごとにToDoを管理)」」で進めてもらうよう指示します。すると以下のように上記の回答に基づいて実装計画が作られますそして、その計画を実施しても良いかを聞かれますので以下の画面で右下の「Build」をクリックします。そしてあとは今までのCursorでの実装と同様、アプリが作られて。。という形になります。仕様駆動開発というほどではないかもしれませんが、作業を行う前に計画の策定・提案をCursorが行ってくれます。ClaudeCodeのinteractive question toolそして、Claude Codeの方ですが、こちらはバージョン2.0.21で実装された「interactive question tool」というものになります。Shift+Tabを２回押すことでPlanモードに移行し、interactive question toolが動作するようですが、Planモードに切り替えなくても質問の内容によって、あるいは明示的に「interactive question toolで」、と依頼することで同様の対応となるはずです。では、同じToDoアプリの作成をこのinteractive question toolで依頼します。すると以下のように大項目とその下の各選択肢が表示され、それぞれを選んでいく形になります。画面だけではわかりづらいかもしれませんのでもう少し文章で説明すると、大項目として機能範囲データベースUIデザイン追加機能とあり、例えば「機能範囲」の選択肢として基本的なCRUDタスクのカテゴリ分類タスクの期限設定タスクの完了状態管理等があり、複数選択できるものはそれぞれにチェックを付けて。。といった形で細かく指定ができます。一応他の大項目ごとの選択肢も挙げておきます。ちなみに上記選択肢に追加したい場合は各大項目内の各選択肢の最後に「Type something」という選択肢があると思います。選択肢に自身の希望のものがなく、何か独自の選択肢を追加したい場合はこの部分にそれを書き込んで選択すれば計画に含めてくれます。いわゆる自由記入欄ですね。所感いかがでしょうか。Claude CodeのPlanモードは元々Cursorのものとほぼ同様の機能だったと思うのですが、interactive question toolでは文字通り、よりインタラクティブになり、選択肢から取捨選択を行うことでClaude Codeとの意思疎通、認識の確認、指示の明確化がしっかり行えるようになった印象です。ちなみにClaudeでは9月末にSonnet4.5が使えるようになり、今回もそれを使っての実装となりました。Claude Codeは比較的触る機会が少なかったのですが、今回ToDoアプリの作成はかなりスムーズに進んだ印象です。今までのAIツールではビルドや実行時にうまくいかないことが１～２回発生しており、それを解消するために更に何らかのプロンプトを実行せざるを得なかったのですが、そういったユーザーの介在を一切必要とすることなく、実装からビルド・起動まで一気にこなしてくれました。当社でもClaude Codeを利用する方は多く、さすがだなという印象です（私は主にCursor＋Codexを使っています）。「どれが一番優れている」ではなく、人間のチーム同様に個性がありますのでそれぞれに相談してみて進めていくといったことが必要なのかもと改めて思った次第です。個人的にはレビュー時やセカンドオピニオンとして別のモデルを使うように意識しているのですが、更に視野を広げて利用した方が良いのかもしれませんね。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor及びClaudeCodeのPlanモードを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。以前、Playwright MCPについての記事を書きまして、非常に使い勝手の良い素晴らしいツールでした。blog.nextscape.netそのPlaywrightにまた動きがありまして、Playwrightエージェント、Playwright Test Agentというものが発表されました。playwright.devエージェントは３種類、Planner、Generator、Healerの３つが用意されていて、この３つを利用することで製品のテストカバレッジが向上するとのことです。それぞれの役割は以下になります。Planner：アプリを探索し、Markdown テスト プランを作成しますGenerater：はMarkdown プランを Playwright テスト ファイルに変換しますHealer：テストスイートを実行し、失敗したテストを自動的に修復しますちょっとこの説明だけではピンと来ないと思いますので実際に試してみたいと思います。まずはアプリケーションを用意しましょう。今回はASP.NET CoreのWebアプリをベースとした以下のスクリーンショットのようなToDoアプリをAWS Kiroに作ってもらいましたのでこれを元に試してみたいと思います。ToDoの作成から編集、削除といったように色々な操作がありますのでそれなりのテストが必要になるはずです。準備まずはPlaywright Test Agentをインストールします。npm install -D @playwright/test次に実行環境なのですが、現時点（2025/10/14）ではClaude CodeとVS Codeで利用可能です。ただし、VS CodeはVS Code Insiders v1.105以上でなければならないようでして、今回はClaude Codeで試してみたいと思います。今回用意したアプリケーションのプロジェクトのルートディレクトリで以下のコマンドを叩きます。npx playwright init-agents --loop=claude以下のようにテストエージェントの実行に必要なファイルが作成されます。次に「claude」と入力し、Claude Codeを起動します。ここまでで準備が完了です。テストプラン作成では、まずは順番通りPlannerでテストプランを作成してもらおうと思います。ただ、その前に@plannerと入力してもらい、以下のようにテストエージェントに関する情報が表示されるかどうか、つまり正しくテストエージェントがインストールされているか確認してください。問題無ければ改めて実行してみましょう。Claude Codeはinitコマンドでまずはコード解析を行うはずなのでそれは不要なのだろうかと思いつつ以下のプロンプトを実行してみます。「@plannerこのプロジェクトのテスト計画を作成してください」すると以下のようにMarkdownファイルでテストプランが作られます。全てを載せるのは冗長ですので幾つか抜き出してお見せします。以上のようにセキュリティテストも含めた（当然ながら）しっかりしたテストプランが作成されています。テスト生成ではこのテストプランに基づき、テストスクリプトを生成してもらいます。次はGenaratorエージェントに対して指示を行います。「@generatorテストプラン.mdからPlaywrightテストを生成してください。」処理が次々と実行され、～.ts形式のスクリプトファイルを作成してくれます。順番が前後しますが、最初に以下のようなToDoリストを作成しそれに基づきテストスクリプトを作成していきます。基本機能テスト（タスクCRUD）のPlaywrightテスト生成フィルタリング機能のテスト生成編集機能のテスト生成セキュリティテスト（XSS対策）の生成以下のようにテストスクリプトが完成すると、どのようにテストを実行すれば良いかも教えてくれますのでそれに従ってテストを実施します。するとPlaywrightによりテストが実施され、最終的に以下のような結果が表示されます。テスト修正175個のテストのうち、117個が失敗しているとのことなので３つのエージェントのうちの最後のエージェント、Healerエージェントに依頼し、修正を行います。「@healerテストが失敗しているようです」修正が実施され、完全に全てが修正されたわけではないですが、再度テストを実施したところ160個はPASSするようになりました。ちなみに以下７つのブラウザごとのテストを実施してくれます。chromium (Desktop Chrome)firefox (Desktop Firefox)webkit (Desktop Safari)Mobile Chrome (Pixel 5)Mobile Safari (iPhone 12)Microsoft EdgeGoogle Chrome最後に有償のテストツールでなくともかなり詳細なレベルでのテストを実行してくれるこのPlaywrightのTest Agent、いかがでしょうか。小規模のToDoアプリでさえ、このレベル（170近くのテスト項目）ですので大規模プロジェクトになると更にすごいボリュームになると思います。そうなるとちょっと取り扱いが難しくなってくるため、テストプランの段階である程度細かく分けてもらい、それに従ってスクリプトの作成、実行という形にした方が良いかもしれません。最初に挙げたPlaywright MCP、もしくはChrome DevTools MCPを使うことで自然言語でPlaywrightのスクリプトが作成できるのですが、自分自身で抜け漏れなくスクリプトを作りこむのは如何に簡単に作れるようになったとはいえ、やはり大変な作業です。しかしながらこのTest Agentを使うことでそれがもっと簡単に実現できるようになります。かなり使える機能だと思いますので皆さんも是非お試しください。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Playwright Test Agentでテストをより簡単に

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。「Opal」は、Googleが最近公開した自然言語で強力なAIミニアプリを構築できるツールです。SNSでは１週間前ぐらいから既に話題に挙がっていたのですが日本では利用することができず、10月7日にやっと利用できるようになったので早速試してみました。ログイン直後の画面は以下のような感じです。アプリ作成とりあえず、Your Opal appsの「Create New」をクリックしてみましょう。日本でも公開されているようになったものの、文言は英語です。ちょっとそこに抵抗を感じる人もいるかもですが、操作は非常に簡単なので今回の記事を参考に是非触ってみてください。パッと見たところ、ちょっとどうしたらよいかわからなくなってしまうかもですが、他のAIツールと同様入力欄が画面下部にあり、「Describe you want to build」＝「作りたいものを書いてね」とありますので、とりあえず書いてみましょう。他のAIツールの記事でもBMIを計算するアプリを試しに作ってもらったので、今回も比較のためにそれで行きたいと思います（ちなみに以下の記事がそれです。これもGoogleのサービスですね）。blog.nextscape.netということで以下のプロンプトを入力します。「BMIを計算、出力するアプリを作って」するとあれよあれよという間に以下のような内容が表示されます。他のAIツールに詳しい方には「Dify」っぽい画面と言えばおわかりになりますでしょうか。幾つかの機能を持つコンポーネントを組み合わせ、それがアプリになるというものです。上のスクリーンショットですとちょっと見づらいのでもう少し１つ１つ見てみましょう。各コンポーネント説明まずは身長、体重を入力する。ということでそれぞれのコンポーネントがあります。次にその２つのデータを合わせる形で「BMIを計算する」というコンポーネントが。試しに上のコンポーネントをクリックすると以下のような内容が表示されます。「あなたはpythonの熟練プログラマーです。云々」そして最後に最初に入力した「Height」「Weight」でBMIを計算する旨が書かれています。このように各コンポーネントに役割を与えているのですね。このあたりは他のAIツールにおけるプロンプトと同じような感じかなと。ふたたび各コンポーネントの説明に戻りまして、次は「BMIを解釈する」、つまりは太り気味、痩せ気味といった判定部分。そして「結果ページの出力」です。検証こうしてアプリを作ったはいいものの、どこで試せるの？ということになると思いますが、デバッグ段階であれば画面右側のウィンドウの「Preview」を選択してください。そこにアプリの画面が表示されるはずです。完成している、もしくはある程度動くことがわかっているのであれば、画面上部の「Editor」「App」が並んでいると思いますが「App」を選択することで全画面で確認できます。今回は「App」で動かしてみます。ブラウザ画面上にアプリが表示されます。まずはTOP画面。「Start」で開始します。身長を入力。体重を入力。計算中の表示が入り、BMIの計算結果が表示されます。ちなみにPreviewで実行すると現在動いているコンポーネントの周りが点滅しますので、それによって処理の進行状況が確認できます。Opal自体は英語なのですが、コンポーネント内の記述は日本語にも対応しており、例えば結果出力のコンポーネントにおいて「文章は日本語で」と指示すると以下のようにちゃんと日本語で出力してくれます。改修してみるさて、プロンプトだけで終わりにしてしまうと他のアプリ生成ツールと同じ内容になってしまうのでOpalならではの方法で改修してみたいと思います。エディタ画面で「Generate」をクリックすると新しくGenerateコンポーネントが表示されます。新しいコンポーネントを既存のコンポーネントに結び付け、「アドバイスを生成」というタイトルを設定し、内容としては「計算結果を元にブラウザでBMI結果を元にしたアドバイスを検索し、生成する」とします。さてこれでもう一度試してみましょう。数値は肥満気味にしてみます。すると単純に結果を表示するだけでなく、以下のような健康に関するアドバイスを詳細に表示してくれます。ちなみにコンポーネントの接続ですが、下の画像、赤枠の部分をドラッグ＆ドロップして他のコンポーネントに繋げることで接続できます。接続を削除する場合は接続している線を選択し、右クリックで「Delete selection」をクリックすると削除されます。取り扱えるデータあとは今回その場で入力したデータのみを扱ってみましたが、他にどういったデータを扱えるのかを調べてみました。まず、Add Assetsという機能がありまして、これでGoogleDriveやYouTubeの動画等も扱えるようです。「Upload file」で自身のPCのファイルもアップできるようですが、どんなファイルでも扱えるかというとそういうわけではありません（表示される拡張子がかなりあるので具体的に挙げられず。。スミマセン）。例えばCSVファイルではなくTSVファイルは読み込めないようでした。あとはアプリ内での入力においても入力欄の＋アイコンをクリックすることで以下のようにインプットとして扱えるデータが表示されます。これも自身のPC内のファイルで合ったり、GoogleDriveであったり、動画であったりと色々扱えます。今回は試しませんでしたが、マイクアイコンもあるのでその場で音声入力もできそうですね。試しにCSVファイルを読み込み、画面に表示するアプリも作ってみました。単純なアプリなので当たり前と言えば当たり前ですが正しく動作しています。ちなみにこれでもTSVファイルは駄目でした。データ量も小さいのですが、私だけの問題なのかよくわからず。。最後にいかがでしたでしょうか。AIツールを多少使い慣れた方であればあまり試行錯誤することなく、上のようなアプリがかなり簡単に作成できると思います。よくあるノーコード・ローコードアプリのように「まずは画面の操作から」ではなく「まずはプロンプトから」で始められるという点はユーザーのハードルを更に下げるという意味では非常に大きいと思います。今のところ無料で利用もできますので是非試してみてください。ただ、上で書いた通りインプットも色々と選択肢はあるものの、データベースには接続できず、基本的に初心者向けという印象で自由度としては（かつ類似ツールとしては）Difyの方が上かなと思います。ただ、それが許容できるようでしたらこのOpalで作成した方が学習コストの低さ、手軽さという点では非常におすすめできます。このOpal、まだ発表されたばかりということもあり、更なる進化が期待できます。引き続き注視し、キャッチアップしていこうと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Opalが面白い

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚ですここ最近はCursorやClaude、GeminiといったAIツールに関しての記事が多く、ここ最近も色々と発表があり、話題には事欠かないといいますか、むしろキャッチアップするにも一苦労という状況です。今回はAI絡みではありますが、久々にMicrosoftに関する情報、しかもAzureではなくExcelに関する機能について書いてみたいと思います。MicrosoftのAIツールと言えば「Copilot」。Coplilotも色々と進化しているとは聞いておりましたが、なかなか触れずにいました。そんな中、今回9月29日にCopilotのAgent modeが使えるようになったという発表があり、結構面白そうだったので早速試してみたいと思います。Microsoft社曰く「バイブコ―ディング」ならぬ「バイブワーキング」ができるとのこと。設定まずはデスクトップのExcelを開き、「ホーム」ー＞「アドイン」で「Excel labs」を検索し、Excel labsが表示されたら「追加」を選択します。※以下は既に設定されておりますがご容赦を。。Excel Labsのアイコンが表示されるのでクリック。すると以下のようにExcel Labsのウィンドウが開くのですが、「Excel for the web」のみ対応ということでした。。ということでWeb版Excelを開き、再度「Excel Labs」のアイコンをクリックしますと以下のような表示になります。上の画像のように「Agent mode」が表示されていますので「Open」ボタンをクリック。すると、他のAIツールのようにプロンプト入力欄が表示されて、これで準備完了となります。ドキュメント作成それではAgent modeで作業を依頼してみたいと思います。まずは「Excel方眼で休暇申請書を作って」とお願いしてみます。ちょっと話がずれるのですが、Excelで作った仕様書はClaudeで読み込みが可能で、たまに利用することがありました。しかしながらExcel方眼になると（私の持っている資料では）正しく読み込んでくれなかったという経験がありました。他のツールでも読み込み中のまま止まってしまったりと、あまり相性がよろしくない雰囲気がありまして、今回あえてExcel方眼を指定した次第です。プロンプトで依頼してから数分待ちますと以下のような、そのまま会社の正式資料として使えそうな休暇申請書が作成されました（実際のExcel方眼はもっとマスが小さいと思いますが、まあこんなものでしょう。。）プロンプトの入力欄では以下のように出力結果について非常に細かく説明してくれています。さて、ここでふと思ったのですが、「これは通常のCopilotでもできるんじゃないだろうか？」ということ。以前、PowerPointではありますが、以下の記事でCopilotを使って資料を作成し、なかなかの完成度だった経験もありまして、ちょっと試してみることにしました。blog.nextscape.net結果は以下の通り。現在開いているシートに対して処理を行うのではなく、別途Excelファイルを作成し、ダウンロードする形になります。そして、ダウンロードして開いた結果が以下。上記のプロンプトのやり取りを読むとAgent modeと同じ結果になりそうな気がしたのですが、結構違ってしまいました。これはそもそも私のプロンプトが簡単すぎるせいもあると思うのですが、ちょっとこれでは通常の業務では使えなさそうです。Excel操作もう少し試してみたいと思います。次にExcelを使っているとたまに必要になるであろうちょっとした編集作業をやらせてみましょう。以下のように適当に値を各セルに入力し、これを並べ替えてみます。通常であればフィルター機能等を使うわけですが、Agent modeでも以下のように指示すれば並び替えてくれます（スクショは貼り付けるまでもないので割愛。。）。ただ、この作業も依頼して完了するまでに１分程度はかかるのでこういったちょっとした作業、かつ自分で対応方法がわかるのであれば自身でやった方が早いかなと思います。とはいえ、皆さんもExcelを触っていると「これってどうやるんだっけ？」「こういう風にできないだろうか」といったようにExcelの使い方に関してちょっとした疑問が出てくると思うのですが、これもWebで調べたり、もしくはClaudeやChatGPT等の他のツールで調べることなく、Agent modeで自然言語でのやり取りにより対応してくれるわけです。データ集計・インサイトあとはデータ集計やそのインサイトに関する操作を紹介しましょう。まずはサンプルとして仮想コーヒーショップの月次決算書を書いてもらいます。プロンプトは「コーヒーショップの月次決算報告書を作成して」だけです。ちゃんとグラフまで書いてくれてますね。これだけでもすごいのですが、上記が9月分ですので8月分のも作成してもらい、更に「8月と9月の決算内容から判断できることはなんでしょうか。」と投げてみます。すると以下のように8月、9月分の比較結果をまとめてくれます。それだけでなく、以下のように文章でも説明してくれまして、そこに書かれた情報の考察だけでなく、今後のアクション提案として単価維持・向上のための施策としてフード併売率UPをするべき等、ちょっとしたコンサルティングまでしてくれます。Markdownファイル出力Markdownファイルに出力して、とお願いするとチャット欄に以下のように出力してくれます。ファイルそのものを作るのではなく内容のみのなのでコピペで別途ファイルは作る必要があるのですが、これができるとなるとExcelで書いたプログラムの仕様書の内容をMarkdownファイルで出力し、Claude Codeやcursorに読み込んでもらって実装することもできそうです。ちょっと手間ではありますが、Excel、特にExcel方眼の読み込みに対応していないAIツールもありますのでそういったものには使えそうです。まとめということでClaudeやCursorのように対話式でドキュメントを編集してくれるAgent mode、プログラマーだけでなく、Excelを使用する方々全員が利用できる、かなり便利な機能です。ちなみに最初の話に戻りますが、実際に使われているもっとマスの細かいExcel方眼でも正しく内容を読み込んでくれました。さすが本家Microsoftというところでしょうか。更に編集のみに留まらず、ドキュメントの内容に関して上で紹介したようなデータ分析・解析といったコンサルティング的な使い方もできます。そういう意味ではOfficeというソフトにおいて、より「Copilot」、「副操縦士」という名前がふさわしくなってきたのではないでしょうか。以前紹介したCopilot in PowerPointは正直なところ「雛形」作成としては使えるのですが、あくまで「雛形」であるためにメインで作業を進めるのは人間の役割でした。しかしながら今回は主な部分をAIが作成し、あくまで人間はそれの補完やチェックのみとなり、コーディングにおけるClaude CodeやCursor等のようにバイブコ―ディングならぬバイブワーキングを実現してくれています。現在Agent modeが使えるのはExcelとWord、そして近々PowerPointでも利用可能になるそうですので非常に楽しみなところです。Wordも試してみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

ExcelのCopilot Agent modeを触ってみる

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です以前、PlaywrightのMCPサーバーを紹介しました。blog.nextscape.netX等を見るとこのPlaywrightのMCPサーバーを使ってE2Eテストが捗った等のコメントが多々見受けられます。上記の記事でも軽く触れましたが、筆者もスマホアプリのテストでAndroidDriver（AndroidにおけるSelemium）を使ったことがあるので普通にテストシナリオを書くことの大変さはよくわかります。さてそんな中、9月23日に Chrome DevTools Model Context Protocol（MCP）サーバーが公開されました。developer.chrome.comGoogleが提供するこのMCP、どんなものか試してみたいと思います。github.com必要なものは以下の３つ。筆者だけかもですが、Node.jsのバージョンにはご注意ください。自身の環境で最新のバージョンが入っていると思い込んでいたのですが、MCPの設定の時点でうまく動かず少しだけハマってしまいました。。Node.js 22.12.0 or newer.Chrome current stable version or newer.npm設定設定ですが、今回は筆者がいつも使っているCursorで試してみます。上記のGitHubのURLにアクセスすると以下のように各ツール毎に設定方法を説明してくれていますので、「Cursor」をクリックしてみます。 そうすると以下のように設定方法が表示されます。Configファイルの書き方も挙げてくれているので、他のMCPサーバー同様手動で設定することも可能ですが、筆者は「Add to Cursor」ボタンを押して、自動的に設定してくれる方を選びました。あっさりと設定完了。さすがGoogle。地味に助かります。いよいよ実行さて、いよいよ本題ということで試してみたいと思います。以下のプロンプトを実行します。「Chrome Dev ToolsでQiitaを開き、先頭の記事を取得してください。更に検索欄に「Playwright」と入力し、その結果のスクショを取得してください。」まずはQiitaのページが開かれて、以下がMCPとのやり取りです。ちょっと文字が薄いですが、実行内容について教えてくれます。検索欄に「Playwright」が自動的に入力され、以下のように最終的な結果をお知らせしてくれます。スクリーンショットもちゃんと取得されています。あとはPlaywright用のテストコード作成もお願いしてみます。ちゃんとpackage.jsonやplaywright.config.js等、一通りのファイルを作成してくれました。更には「Chrome DevTools MCPでyahoo.co.jpのパフォーマンス測定を開始してください」とお願いすることで以下のような結果が得られます。ちなみにPlaywright MCPでもパフォーマンス測定を行ったのですが、同様の結果が得られまして、違いとしてはLCPに関する詳細分析の有無ぐらいでした。あとはアクセシビリティのチェック。私は以前アクセシビリティについても以下のような記事を書いてますが、このアクセシビリティのチェックを個人で実施するのは非常に困難です。このDevtoolsを使えばどこを改善すべきなのかをわかりやすく教えてくれます。blog.nextscape.netMarkdownファイルに書き起こすことも当然可能ですのでまずはこれで洗い出しを行い、更にそれを参照してもらいつつCursor等を使って修正まで一気に行うことができそうです。すばらしいですね。当社サイトでも試してみるPlaywright MCP同様、当社のサイトでも試してみます。「www.nextscape.netをChrome DevTool  MCPで開き、採用情報のページに遷移してください。更に採用情報のページでどういった情報が書かれているか取得してください。」とスクリプトを投げると当社の採用サイトにアクセスし、その情報を取得、更にスクリーンショットまで取得してくれました。おもむろに宣伝のようになってしまいますが、開発に興味がある方、お客様の課題解決にやりがいを感じる方、是非チェックしてください。recruit.nextscape.net ちなみに以下のようなスクリプトを投げることでPage Object Model形式で出力（実装）してもらうこともできます。「Chrome DevTools MCPを使って先ほどと同じ手順をPage Object Modelの形で実装してください。」Playwright MCPと同様、やはりE2Eテストとして以下のような使い方はもちろん、表示周りのテストにおいて非常に強力なツールとなってくれそうです。日本語でテストしたい操作をChrome DevTool  MCPに対して指示その操作内容をPlaywrightで実行するためのスクリプトとして出力Playwrightで都度実行その他の機能あとは以下のリファレンスを見るとChromeのデベロッパーツールで使える機能が使えそうです。github.comそこで以下のような依頼をしてみます。「www.nextscape.netのトップページのネットワークリクエストを一覧表示してほしい」そうすると以下のように上記リファレンス内の「list_network_requests」が実行され、デベロッパーツールと同じような情報が返されます。これは（25/9/28時点で）Playwright MCPでは得られなかった情報になります。最後にまださわりではありますが、このように様々な操作が可能になります。Playwright MCPとの差がまだあまり見出せていないですが、このChrome DevToolsもE2Eテスト等で非常に役に立つと思います。是非皆さんもそれぞれのMCPを試してみてください。どちらも、特にDevToolsは発表されたばかりということもあり、今後の発展・進化も気になるところですので引き続きチェックしていきたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

Chrome DevTools MCPを試す

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。直近でいくつか仕様駆動開発に対応しているAIツールについて試してみた記事を書かせてもらいました。１つはspec-workflow-mcpblog.nextscape.netもう１つはAWS Kiroblog.nextscape.net他にも幾つかあるのですが、今回AWSのKiro同様、有名どころとしてGithubのSpec Kitを触ってみました。github.com私が調べた時点（2025/9/20）ではLinux/macOS (または Windows 上の WSL2)が対象となっていました。ただ、実際触ってみるとWSL2でなくてもWindows＋VSCode上で動作確認できましたのでその前提でお話しします。今回はVS CodeのClaude Code拡張機能を使いますので事前にインストールしておきます。設定まずはPowerShellで対象となるプロジェクトが存在するフォルダに移動し、以下のコマンドのいずれかを実行します。最後のパラメータはプロジェクト名なのですが、省略して--hereでもよいです。ちなみにここで指定したプロジェクト名がフォルダ名としてプロジェクト内部に作成され、仕様書が格納されます。uvx --from git+https://github.com/github/spec-kit.git specify init --hereuvx --from git+https://github.com/github/spec-kit.git specify init <PROJECT_NAME>上記コマンドのうちいずれかを実行しますと以下のようにタイトルがかっこよく表示され、AI アシスタントを選択するように促されます。今回は前述した通りClaude Codeを選びます。上記スクリーンショットは2週間前に取得したものでして、その時はcopilot、claude、geminiの３つだったのですが、2025/9/20の時点では以下のようにcursor、qwen、opencode、windsurfと7つに増えています。やはり進化が凄まじいですね。。2025/9/20の最新版では更に以下のようにスクリプトタイプ、bash/zshか、PowerShellかを選択できます。その後、プロジェクトの初期化が行われます。そしてNext stepsとして３つの指示が出ます。読むとVS Codeを立ち上げろという指示になりますのでそれに従いVS Codeを起動します（最新版ですと「VS Code」とは書かれておらず、AI Agentといった表現になっています）。ちょっと見づらいと思いますが、VSCodeのエディタの右上にClaudeのアイコンがあるのでそれをクリックしてClaude Code拡張機能を立ち上げてください。そうするとClaude Codeが立ち上がります。実装さて、ここからがポイントなのですが、まずはプロンプト入力欄にスラッシュ「/」を入力してみてください。その時に使えるコマンドが表示されるのですが、以下の赤枠部分にあるコマンド、/plan、/specify、/tasks等が表示されていないとSpec Kitは使える状態にありませんので、もう一度環境や設定を見直してみてください。私もそういう症状が出たのですが、一旦VS Codeを終了し、もう一度上の手順を繰り返すことで表示されました。あらためて上記３つのコマンド（＋実装のための「/Implement」コマンド）がSpec Kitのコマンドになりまして、仕様駆動開発ツールである以上、まずは仕様を作成するわけなのですが、そのためのコマンドが上に挙げた３つのうち、/specifyコマンドになります。「/specify」に続けてどういった仕様を作ってもらうかを記述し、指示するわけですが、他のツールとの比較のために前回、前々回の記事に合わせてToDoアプリの作成を依頼します。粒度も今まで同様ざっくりと以下のように指示してみます。「/specify ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください」このコマンドを受けてまずは仕様書の作成を実行します。プロジェクト内に「specs」フォルダが作成され、更にspec.mdというファイルが作成されます。これが仕様書になります。以下のようにspec.mdに色々と書かれていきます。仕様書の作成が終わると以下のようにその旨と「次のフェーズ（実行計画）の準備ができています」と表示されます。ちなみにspec.mdの内容は以下のようになりまして、クリックガイドラインやユーザーシナリオ等が記載されています。次に「/plan」コマンドで実装計画を作成します。先ほどのspecsフォルダにplan.mdファイルが作成され、そこに実装計画が書き込まれます。spec.md同様、その記述内容が表示されます。と、ここまで進んだところで個人的な予想としては次に/tasksでタスクリストの生成、/implementで実装へと進んでToDoアプリができました。めでたしめでたし。。という流れを想像していたのですが、実はそれを超えた動きとなりました。ここから怒涛の仕様書作成が続きます。更にresearch.mdというファイルが作られまして、パフォーマンス目標や技術スタック概要が書かれています。更にapi-endpoints.md。openapi.yaml次にquickstart.md（どれだけ作るのだろうか。。とこの時点で筆者は思いました）CLAUDE.md。これはClaude Code用のファイルですね。改めてplan.mを更新。これでやっと終わりまして、次のコマンド「/tasks」によるタスク生成を促されます。上のスクリーンショットでも見れますが、一応作成されたファイルを以下に挙げておきます。なかなかしっかり作りこんでくれてますね。計画書: C:/git/WebApplication1/specs/001-todo-todo/plan.md研究成果: C:/git/WebApplication1/specs/001-todo-todo/research.mdデータモデル: C:/git/WebApplication1/specs/001-todo-todo/data-model.mdAPIコントラクト: C:/git/WebApplication1/specs/001-todo-todo/contracts/統合テストシナリオ: C:/git/WebApplication1/specs/001-todo-todo/quickstart.mdClaudeコンテキスト: C:/git/WebApplication1/CLAUDE.md今回小規模なToDoアプリということもありもっと大規模なプロジェクトであれば他にもドキュメントを作成してくれるのかもしれません。そして、「/tasks」でタスクリストを作成します。タスクリスト完成。さて、いよいよ実装となります。今回特にこちらからは指定していなかったのですが、以下のスクリーンショットにあるように「TDD原則に従って、まずテストから作成して」くれます。KiroもTDDで進めてくれましたが、これもTDDで進めてくれます。ちなみに今更ではありますが、AIにソースコードを書いてもらうにあたってはその検証は欠かせないものとなり、テストの重要性がより大きなものになると思っています。そのためにこのようにテストコードを書いてもらうことは必要不可欠になるでしょう。AIツールであればテストコードもすぐに作成できますし。ちなみにTDD原則に従って。。という記述は以下のスクリーンショット、一番最後の行に書かれています。さて、実装もどんどん進めてくれまして、最終的にビルド、実行も実施してくれます。ToDoアプリの画面は以下の通り。テストコードもしっかり作ってくれまして、全てちゃんと通ることを確認済みです。ちなみに以下のスクリーンショットはVisual Studio 2022のテストエクスプローラーの画面です。まとめ以上がSpec Kitを使った仕様駆動開発の基本的な流れになるかと思います。いかがでしょうか。spec-workflow-mcpはMCPとして手軽に試せる点（今振り返ると資料も少な目ではありましたが、規模やプロジェクト内容によってはライトな方が良いという場合もあると思います）、Kiroは有料かつAWSならではのしっかりした作り、そしてSpec KitはKiroに負けず劣らずの作りこみですし、Spec Kit自体は無料で利用可能、更に最初に挙げた通り様々なツールに対応。。といったようにそれぞれに特徴があります。是非皆さんも実際に触っていただき、自分にとって、あるいは利用しようと思っているプロジェクトにとってどのツールが合っているかを確認してもらうのが良いのではないでしょうか。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.netnextscape.netnextscape.net（以下当社お問合せフォーム）Microsoft Forms

GitHubのSpec Kitで仕様駆動開発を試す

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。前回仕様駆動開発を試してみようということで、spec-workflow-mcpを触ってみました。blog.nextscape.netそしてAWSのKiroを使えるようになりましたので今回はその感想を。Kiroは以前からWait listに申請していたのですが、恐らく１カ月経ったでしょうか、それでも通知が来ず、結局Proプランを申し込む形となりました。すごい人気なんですね。。kiro.devKiro起動まずはWebサイトで入金を行い、Kiroをインストールして立ち上げます。私はProプランを申し込みました。KiroもVSCodeライクの画面なのですね。まずはプロジェクトを開くように言われますので、今回も比較のためにVisualStudioで簡単な.NETのWebサイトを作成し、それをKiroで開きます。すると以下の画面に切り替わります。ちょっと画面が小さいと思うので一部拡大。以下のように「Vibe」と「Spec」が選択できます。「Vibe」が他のAIツール同様、都度質問してそれに対してAIが作業を行う形、そして「Spec」が仕様駆動開発で進める場合の選択肢となります。今回は当然ながら「Spec」を。要件定義～設計依頼する内容は以下の通り。前回と同じ（ざっくりとした）依頼にすることでそれぞれの挙動を比較してみたいと思います。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると早速「仕様を作成します」から始まります。画面上部のタブも「Requirements」「Design」「Task list」と、要件定義→設計の流れを表してます。まずは要件定義が作成されます。Markdownファイルで必要によってはMermaidでの図も使って要件をまとめてくれます。問題無ければ右下の入力欄のところにある「Move to design phase」をクリックして設計フェーズへ進みます。そして設計文書の作成。設計文書の内容の一部は以下の通り。エラーハンドリング等も細かく既定されています。そして、「Task list」、いわゆる実装計画になります。これが終わると実装に入るわけですが、上の画面では見づらいと思いますのでKiroからのメッセージを抜粋しておきます。「これで仕様作成のワークフローは完了です。実装を開始するには、tasks.mdファイルを開いて、各タスク項目の横にある「Start task」をクリックして個別のタスクを実行できます。最初のタスクから順番に進めることをお勧めします。」と、このように仕様が問題無いかを確認してきます。いよいよ実装改めてタスクリストを見ると赤枠部分のように「Start task」というボタンといいますか、クリックできるところがありまして、これをクリックすることでその選択したタスクが実行されます。ちなみにタスクリストにはそれに関連する要件も書かれてますのでわかりやすいです。すると以下のように各タスクが実行され、必要に応じてビルドも細かく実行してくれます。前回のspec-workflowは都度ビルドは行ってくれなかったのですが、普通人間が作業を進める場合もこのように手戻りを小さくするために都度ビルドは実施するわけなので非常に丁寧な対応だなと思いました。実は丁寧さはこれだけでなく、各タスクの内容を見ていると「テスト」「test」という単語が出てきます。よく見ると各タスクにおいてちゃんとテストコードを書いてくれていて、更に（当たり前ですが）テストも実行してくれてます。ちなみにTodoアプリのような「比較的」小規模なアプリでもタスク数は１３個ありまして、都度テストを書いて・実行を繰り返しましたので、とにかくどんどん承認だけを繰り返すだけでも30分以上かかりました（1時間近くかかったかもしれません）。テストコードを通すのにエラーやその対処で意外と手間がかかってしまったこともありますが、とにかく丁寧かつ細かく対応してくれます。そして全ての対応が終わりました。結果として以下のようにTodoアプリが完成しました（ちなみに他のツール同様、ビルドだけでなく起動もしてくれます）アイコンや最初に入力する箇所が赤枠で表示されたりと、あれだけ漠然とした依頼にもかかわず、非常に細かい作りになっています。最後にということでKiroを用いた仕様駆動開発を簡単に試してみました。spec-workflow-mcpもちゃんと仕様書が作られ、それに基づいて実装もされていたわけなのですが、１つのIDEの中で要件定義＜－＞設計＜ー＞タスクリスト＜ー＞実装がシームレスに行き来できる点は非常に優れているなと思いました。先ほど書いた通り非常にきめ細かく対応してくれるので、既存のシステムのちょっとした改造ということであれば最初の画面で「Vibe」を選んでくれればよいのかなと思います。spec-workflow-mcp、github/spec-kit、そして今回のKiroと、全て仕様駆動開発というのがベースにあるものの、それぞれ似て非なるものでした。他のツールにも言えることですが、セキュリティの問題もありますので事前に簡単な小規模のアプリ・システムで使ってみて、それぞれの使い勝手や、自分に合っているかどうかを試してみることをお勧めします。実はこの前にもう１つgithub/spec-kitも試してまして、それもまた特徴のある内容だったのですが、別途紹介してみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms