はじめに
この記事は、#BuildWithBuildAgentTokyo への参加記事です。
前編と後編に分けて書いています。
- 前編: 作ったもの、進め方、AI 解説を組み込むまで(前編はこちら)
- 後編(この記事): エラーとの格闘、デザインの作り込み、反省
ServiceNow の Build Agent で作った、ホロスコープ占いアプリ NOW HOROSCOPE の動画はこちらです。
前編のおさらい
Build Agent はトライアルだとプロンプトが月25回までなので、技術調査やプロンプト作成は Claude(Opus 5.5)に、ServiceNow の実装は Build Agent に、と役割を分けて進めました。
Build Agent に頼んだのは、全部で次の6回です。
| # | 頼んだこと |
|---|---|
| 1 | 入力 → 計算 → 円形チャートの描画(PoC) |
| 2 | ニックネーム、出生地検索、ハウスシステムの日本語化 |
| 3 | AI 解説と保存(Alias、Scripted REST API、カスタムテーブル、ACL) |
| 4 | エラーの修正と、デザインの適用 |
| 5 | エラーの再修正、デザインの適用 |
| 6 | 画面の使い勝手の改善 ※とある事情により完了できず |
前編では 1〜3 を紹介しました。3回目で AI 解説と保存の仕組みはひととおりできあがったのですが、いざ「AI に解説してもらう」ボタンを押すと、エラーになりました。
後編は、ここから始まります。
4回目: エラーの修正と、デザインの適用
ボタンを押すとエラーになる
3回目のあと、解説ボタンを押すと次のエラーが返ってきました。
ModuleResolutionException: No module with path ".../src/server/api/validation" found in sys_module table
ざっくり言うと、サーバー側のプログラムが、別のファイル(入力チェック用のファイル)を読み込もうとして、見つけられなかったというエラーです。
エラー文をそのまま Claude に渡して原因を考えてもらい、修正用のプロンプトを作ってもらいました。
デザインも一緒に頼む
回数が限られているので、4回目はエラーの修正だけでなく、デザインの適用もまとめて頼みました。
デザインの指示には、DESIGN.mdという考え方を使いました。
DESIGN.mdとは、色・文字・余白・部品・やってはいけないことを1枚の Markdown にまとめて、デザインルールとしてAIに参照させるための文書です。
こちらの記事を参考にしました
作り方は以下の3ステップです。
- ChatGPT の画像生成(Image-2.5)で、占いサイトらしいスタイリッシュな画面のイメージを作る
- その画像をもとに、Claude と一緒に DESIGN.md を書く。ServiceNow の UI Page で表現できる範囲に収める
- Build Agent に「まず DESIGN.md をプロジェクトに保存して、以降はこれに従うこと」と頼む
作成した画像はこちら。占いサイトのPR画像を作成してもらうイメージで依頼しました。
DESIGN.md の中身は、たとえばこんな感じです。
## Direction
白とアイボリーを基調に、濃紺・薄紫・古金色を少量効かせた、静かな占星術感のあるミニマルな UI。
「占いサイト」ではなく「占星術を扱う洗練されたアプリ」に見えること。
## Guidelines(Don't)
- ページ全体を濃い紫や黒にしない。宇宙の背景画像を敷かない
- 星や粒子を大量に散らさない。発光(グロー)を使わない
- 偽の進捗率を表示しない
タスクは段階的に進めてもらうよう、1つのプロンプトの中でステップバイステップで書きました。まずエラーを修正し、次に DESIGN.md を保存し、最後に DESIGN.md に沿ってデザインを実装する、という流れでBuild Agentに依頼しました。
結果はこちらです。
デザイン実装は多くのコンテキストを消費するため、「新しい会話で実施することを推奨します」とのことでした。
コンテキストがいっぱいになる前に、事前に作業を止めてくれるのは嬉しいですね。
5回目: エラーの再修正と、デザインの実装
エラーが解消されてかなと思い、動作確認するとまだエラーが残っていました。
4回目のあとに出たエラーを見比べると、少しだけ文言が変わっており、それを手がかりにClaude と対話しながら原因を詰めていき、次のプロンプトでデザイン実装に加えエラー修正もすることにしました。
図：Claudeと対話したスクリーンショット
4回目は会話が長くなりすぎて止まったので、5回目は Build Agent で新しい会話を立ち上げました。そこで、エラーの修正方針と、4回目にできなかったデザインの続き(フェーズ2 以降)をまとめて指示しています。DESIGN.md はすでにプロジェクトに保存されているので、新しい会話でもそれを読んで続きから進めてくれました。
5回目のプロンプト実行、エラーが解消し、AIによるホロスコープ解説が見れるようになりました。また、デザインも大きく変わりました。
適用前の画面はこちらです。
適用後の画面がこちらです。
DESIGN.mdを参照させたことで、かなり洗練されたデザインにすることができました。
またDESIGN.mdがあることで、今後追加のぺージも統一感のあるデザインで作成することができるようになります。
6回目: 最後の修正(失敗)
画面を見直して見つかった課題
ひととおり画面を見直してみると、検索機能やボタン配置に気になる点がいくつかあったため修正プロンプトを Claude に作ってもらい、Build Agent に送りました。
これで大丈夫だろうと思い、あとは任せて就寝しました。
ところが朝起きてみると、前編で紹介した計画(Plan)の承認画面で止まったままでした。。。
セッションも切れていて、作業は何も進んでいませんでした。
そしてこれが、Build Agentに送れる最後の1回でした。今月の Build Agentは使用不可になってしまいました。
皆さんは、Plan の承認を見届けてから寝てください……。
まとめ
Build Agentを使用して、1日でホロスコープ占いアプリを作成することができました。ふりかえると、以下の点が良かったと感じます。
- 調査・設計を事前にBuild Agent外のAIと対話し固めることで、たった6回でデザインを含め本格的な実装をすることができた。
- デザインはいきなり言葉で指示するのではなく、先に画像生成で画面のイメージを作ってから DESIGN.md に落としこんだ。目指す見た目がはっきりしていたので、最後まで方向性がぶれずに済んだ。
1.については、ServiceNowの開発経験があまりなくても、使いたいもののイメージさえあればアプリが作れる世界になったと実感させられました。
2.については、日ごろからある程度生成AIを触っていたためスムーズにデザインを実装することができました。今後は、ServiceNowの知識のみではなく、AI開発の知識を吸収していくことがより重要になるのでは、と感じました。
ServiceNow World Forum Tokyo のご案内
★ ServiceNow World Forum Tokyo 2026 ★
ServiceNow の国内最大のイベント、World Forum Tokyo 2026 が、10月27日(火)・28日(水)にグランドプリンスホテル新高輪で開かれます。基調講演や最新の製品の話が聞けるだけでなく、ServiceNow に関わる人たちと直接話せる、年に一度の機会です。
今回のチャレンジで優秀賞に選ばれたアプリは、会場の「Vibe Code ラウンジ」に並ぶそうです。
この記事を読んで「良いな」と思っていただけたら、ぜひ下のリンクから参加登録をお願いします!