0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせる(見積書 3 案から実用版へ)

0
Last updated at Posted at 2026-10-07

前回の記事(時計カタログ編)では、短い依頼を 3 回重ねて、時計カタログを少しずつ仕上げました。今回はその続編です。

この記事では、AI に案をいくつも作らせて選ぶだけでなく、AI 自身に評価させて、実務で使える帳票に仕上げる進め方を紹介します。

題材は見積書です。まず AI に見た目の違う 3 つの案を一度に作らせました。次に、その 3 案を AI 自身に評価させ、評価をもとに実際の業務で使える「実用版」を作らせています。AI に送ったのは、次の 3 つのメッセージです。

下記レコードを元に見積書を3パターン作成して
シンプル・デザイン性・色彩
https://(kintone のドメイン)/k/guest/15/3443/show#record=5
3パターンを評価して、それを基に実用的な見積書を作成して
見積書は1ページ限定でよい

完成した実用版の見積書(印刷屋で作った PDF)

完成した実用版の見積書(印刷屋で作った PDF)

環境の用意(テンプレートリポジトリ、kintone への接続、印刷屋プラグインの zip)は、rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせる の「環境構築(初回だけ)」のとおりです。本記事は、その環境ができている前提で「頼んでから PDF になるまで」を紹介します。


使ったアプリ

見積書アプリ(アプリ番号 3443)は、ゲストスペースにあるアプリです。

見積書アプリのレコード(例のレコード。明細 4 行)

見積書アプリのレコード(例のレコード。明細 4 行)

項目 種類 内容
宛名 文字列(1 行) フォームでは後ろに「様」のラベル
見積番号 文字列(1 行)
担当者 ユーザー選択
見積日 / 見積有効期限 日付
見積明細 テーブル 型番(ルックアップ)、商品名、単価、数量、金額(計算)
小計金額 / 消費税 / 合計金額 計算 消費税は小計の 10%(切り捨て)
備考 文字列(複数行)
見積書ファイル 添付ファイル PDF の保存先

例のレコードは、明細が 4 行で、備考に改行があり、見積書ファイルにはすでに PDF が 1 つ入っています。


1 通目: 「3 パターン作成して」

下記レコードを元に見積書を3パターン作成して
シンプル・デザイン性・色彩
https://(kintone のドメイン)/k/guest/15/3443/show#record=5

アプリ番号などを別に説明せず、レコードの URL を貼っただけです(番号は URL に含まれています)。AI は URL から、ゲストスペース 15、アプリ 3443、レコード 5 を読み取り、項目とレコードを調べてから、3 つの設定ファイルを書きました。設定の検査はエラー 0 で、書き出した帳票は 3 案とも 1 ページでした(ページ数を数えただけで、はみ出しが無いかは PDF で見ます)。

3 つの案

3 つの案の PDF(左からシンプル・デザイン性・色彩)

3 つの案の PDF(左からシンプル・デザイン性・色彩)

案 AI の説明
シンプル 白黒で、細い線と余白を活かした形。表は縦の線なし。合計は二重線、末尾に「以上」
デザイン性 濃紺と金の 2 色。左端に帯、明朝体の「QUOTATION」、金の縦線つきの大きな金額、TO / FROM の 2 列。下にページ番号
色彩 藍から水色のグラデーションの見出し帯。お客様と発行元を色違いのカードに分け、金額はオレンジの帯。表は角丸、備考は黄色のメモ

「シンプル・デザイン性・色彩」という 3 つの言葉だけで、方向のはっきり違う 3 案が出てきました。

AI が先回りしたこと

返答には、頼んでいないのに気を配った点が書かれていました。

金額項目の単位が半角の「\」なので、そのままだとフォントによってはバックスラッシュで出ます。そこで金額は YEN() で「¥」を付けて表示しています。

保存先はダウンロードにし、見積書ファイルには保存しません。レコード 5 にはもう見積書の PDF があるので、比べている間に上書きしないためです。

ほかにも、会社名・住所・社印は仮の値にしたこと、明細は 10 行前後で 1 ページがいっぱいになりそうなこと(AI の見積もり)を伝えてきました。

取り込んで見比べる

3 つの設定ファイルを、印刷屋プラグインの設定画面で「追加」で取り込みます。ボタンの名前が「見積書(シンプル)」「見積書(デザイン)」「見積書(色彩)」と別々なので、詳細画面にそのまま 3 つ並びます。

詳細画面 — 3 案のボタン

詳細画面 — 3 案のボタン


2 通目: 「評価して、実用的な見積書を」

3 案のどれかを選ぶ代わりに、評価そのものを AI に任せました。

3パターンを評価して、それを基に実用的な見積書を作成して

AI は次の観点で 3 案を比べました。評価は、AI が HTML と CSS を読んで行ったものです(描画した画面は見ていません)。CSS の色の指定(薄い地色、白い文字、グラデーション)や線の色と太さ、行の高さから、白黒で印刷したときの見え方や、1 ページに入る明細の行数を推定しています。

観点 シンプル デザイン性 色彩
白黒印刷・コピー・FAX ◎ ○(金の細線が薄く消える) △(薄い色の地が消え、白文字の帯が潰れる。インクも多い)
金額の目立ち方 △(金額が下線だけで弱い) ◎ ○(目立つが、飾りに埋もれる)
正式な書類としての印象 ◎ ◎ △(店頭・イベント向き)
PDF 化での崩れにくさ ◎ ○ △(グラデーション、半透明、角丸での切り抜き)
明細が何行で切れるか(目安) 約 13 行 約 11 行 約 9 行

表の ◎ ○ △ と行数は AI の見立てで、PDF で確かめた結果ではありません。たとえば「PDF 化での崩れにくさ」は、グラデーションや角丸が PDF で崩れるかもしれない、という懸念として挙がったものです。

1 通目の画像(印刷屋で作った PDF)を見ると、色彩の案のグラデーションや角丸は崩れずに出ていました。一方、シンプルの案では社印が会社名に重なっていて、これは AI の評価には出てきませんでした。HTML と CSS からの見立ては、PDF を見て補います。

さらに、3 案に共通する問題も見つけてきました。

  • アプリのフォームでは宛名の後ろが「様」です(3 パターンは「御中」)
  • 小計・合計が税抜か税込か書いていない
  • 明細が多いと、ページの下ではみ出した行が黙って切れます(合計には入っているのに、行が見えない)

1 つ目は、フォームのラベル(宛名の横の「様」)まで見て気づいたものです。3 つ目は、金額を扱う書類では見落とすと困る問題です。


3 通目: 途中で条件を足す — 「1 ページ限定でよい」

AI は 3 つ目の問題を解こうとして、明細が多いときは次のページへ続ける形を調べ始めました。テーブルの行を自分で組んでページを分ける、手の込んだ作り方です。

見積書は 1 ページで十分なので、ここで口を挟みました。

見積書は1ページ限定でよい

AI はすぐに方針を切り替えました。

1 ページ限定で作ります。…15 行を超えたらボタンを出さない形にして、切れた PDF を作らないようにします。

ただし、行数で止めるのは目安です(「できあがった実用版」で説明します)。

AI が作業している途中でも、条件は言葉で足せます。「複数ページは要らない」の一言で、仕組みはずっと簡単になりました。業務の前提(1 ページ、明細は多くない)は、人のほうが知っています。


できあがった実用版

評価をもとに、AI は次のように仕上げました。

評価で出た点 実用版での対応
白黒印刷・PDF 化に強いのはシンプル シンプルを土台にする。色は紺 1 色だけで、白黒で印刷すると濃い灰色になる
金額の見せ方はデザイン性がよい 金額の枠と、右上の見積番号・発行日・有効期限の表を取り入れる
宛名は「様」 フォームに合わせて 「様」
税抜・税込の区別がない 小計(税抜)、消費税(10%)、合計(税込)。合計欄の金額は、明細の金額の列と縦にそろえる
明細が黙って切れる 明細を 15 行までに制限し、足りない行は空き行で埋める。15 行を超えるとボタンを出さない
比べるあいだは保存しなかった 見積書ファイルに保存し、確認してから作る。PDF があってもボタンは出す(出し直せる)

例のレコードでは、下に余白を残して 1 ページに収まりました(冒頭の画像)。ただし 15 行以下でも、商品名や備考が長いとはみ出すことがあるので、そういう見積もりは PDF で確かめます。行数でボタンを出さなくする代わりに、ボタンはいつも出し、押したときのプレビューで、はみ出していないかを確かめる方針でもかまいません。16 行以上も作る業務なら、「15 行を超えたら 2 ページ目に続けて」と頼みます(今回は作っていません)。

できた形は、「空き行の追加は要らない」のように言葉で直せます。AI に任せた結果が中途半端なら、3 案から気に入ったものを選び、「デザイン性の案をもとに、宛名は「様」、税抜・税込を書いて」のように直してもらう方法もあります。


AI が自分で確かめたこと

AI は設定を検査し、帳票を HTML に書き出して確かめます。今回は、試し用のレコードを手元で作って、例のレコードには無い場合も確かめていました。kintone のレコードには触れていません。

確かめたこと 結果
例のレコード(明細 4 行) ページ数は 1。明細 4 行と空き行 11 行で 15 行。金額はすべて「¥」付き
明細を 16 行にした試しのレコード 空き行は足されない(ボタンの表示条件は、この確認では評価されない)
有効期限を空にした試しのレコード 有効期限の欄は空欄で出る

有効期限が空のときに備えて、AI は最初、日付の式を条件分岐で囲みました。ところが、それが検査で警告になりました。そこで空の日付で試し、もともと空欄で出ると分かったので、条件分岐を外して警告を消しています。

ただし、ボタンの表示条件の動き、PDF が 1 ページに収まるか、添付ファイルへの保存は、AI の手元では確かめられません。そこは kintone と印刷屋プラグインで確かめます。

kintone で確かめたこと

確かめたこと 結果
例のレコード(明細 4 行。1 行は商品名が 2 行に折り返す)の実用版の PDF 1 ページに収まった(冒頭の画像)
例のレコードの 3 案の PDF 色彩の案のグラデーション・角丸・半透明の円は崩れずに出た。シンプルの案は社印が会社名に重なった(1 通目の画像)
明細 15 行のレコードでのボタンの表示 TODO
明細 16 行のレコードでのボタンの表示 TODO
明細 15 行で、商品名が多く折り返し、備考も長い場合の PDF の収まり TODO
見積書ファイルへの保存。PDF がすでにあるレコードでは、追加されるか置き換わるか TODO

kintone に取り込む

設定ファイル(settings/APP3443-見積書-実用版.json)を、印刷屋プラグインの設定画面で取り込みます。

  1. アプリの設定 → プラグイン → 印刷屋プラグインの 設定
  2. 設定をアップロード で設定ファイルを選ぶ
  3. 取り込み方を選ぶ
    • 3 案のボタンがあるアプリに足す → 追加
    • すでに「見積書」という名前のボタンがあり、それと差し替える → 一部置換(置き換え先に「見積書」を選ぶ)。「追加」なら「見積書 (2)」になる
  4. 保存する → 運用環境に反映

実用版のボタンを押すと、確認の後に PDF を作り、見積書ファイルに保存します(PDF がすでにあるときの動きは、上の「kintone で確かめたこと」)。3 案のボタンが要らなくなったら、設定画面で行のチェックを外して無効にします。

今回はアプリにもともと「見積書」ボタンがあったので、実用版を「追加」で取り込むと「見積書 (2)」になりました。

詳細画面 — 3 案のボタンと、実用版の「見積書 (2)」

詳細画面 — 3 案のボタンと、実用版の「見積書 (2)」


かかった時間と費用

回 依頼 AI の作業時間 API 料金に換算
1 通目 3 パターン作成 22 分 29 秒 $2.30
2 通目 評価して実用版を(途中で条件を足した) 2 分 07 秒 $0.58
3 通目 1 ページ限定で 9 分 03 秒 $1.50
計 33 分 39 秒(約 34 分) $4.38(約 4.4 ドル)
  • Claude Code は定額プラン(Max)で使っています。プランの利用枠の中で使ったので、この作業のための別の支払いはありません。表の金額は、同じ量を API で使った場合の目安です(Claude Opus 5.5。100 万トークンあたり、入力 $4、出力 $20、キャッシュの読み込み $0.20、キャッシュの書き込み $8。書き込みの $8 は 1 時間キャッシュの料金で、今回の書き込みはすべて 1 時間キャッシュでした。5 分キャッシュなら $5)
  • 作業時間は、メッセージを送ってから AI の返答が終わるまでです。kintone からの取得や設定の検査などのツールの実行(合わせて約 3 分)を含みます。結果を読む時間や、kintone で取り込んで PDF を確かめる時間は含みません
  • 1 通目が長いのは、帳票の書き方の資料を読む、アプリを調べる、3 案を書く、を全部含むためです
  • 換算額の約 4 割が出力トークン(AI が考えて書いた分)、約 6 割が入力トークン(会話・資料の読み込み。キャッシュの読み書きを含む)でした
  • 同じ依頼でも、毎回同じ時間・金額になるとは限りません

頼み方のコツ

  • レコードの URL を貼る: アプリ番号もレコード番号も、ゲストスペースかどうかも、AI が URL から読み取ります
  • まず複数の案を出させる: 「シンプル・デザイン性・色彩」のように方向を言葉で添えると、違いのはっきりした案が並びます
  • 評価も AI に頼む: 観点を指定しなくても、印刷・FAX、PDF 化、書類としての印象など、実務の観点で比べてくれます。3 案に共通する問題も見つけます。評価は HTML と CSS からの見立てなので、最後は PDF で確かめます
  • 業務の前提は途中でも言う: 「1 ページでよい」のような前提は、人のほうが知っています。AI が作業を始めた後でも、一言で方針が変わります
  • 要件に合わせて訂正を重ねる: 実用版ができた後も、「空き行の追加は要らない」のように言葉で直せます。一度で決めなくてかまいません
  • 任せるか、選んで直すか: 実用版を AI に任せると、中途半端な形になることもあります。気に入った案があるなら、それを選んで直してもらう方法もあります
  • 比べるあいだは保存しない: 試しの PDF をレコードに残さないよう、比べるあいだはダウンロードにし、保存先は使う版を決めてから設定します

AI が教えてくれた注意点

注意点 内容
円記号 金額項目の単位が半角の「\」だと、書体によってはバックスラッシュで出る。帳票では YEN() で「¥」を付ける
明細の行数 明細は 15 行までに制限(超えるとボタンが出ない)。商品名や備考が長い見積もりは PDF で確かめる
保存先 例のレコードで押すと、見積書ファイルに PDF が保存される(もう 1 つ入っている。追加か置き換えかは kintone で確かめる)
仮の値 会社名・住所・電話番号・社印は仮。正しい内容を伝えて入れ替える
項目 アプリに件名・納期・支払条件の項目があると、見積書としてもっと使える(項目を足せば帳票に組み込める)

中身を見たい人へ

AI が書いた計算式と HTML、CSS の要所です。読まなくても使えますが、自分で手を入れたい人のために載せておきます。

ボタン表示条件(15 行を超えたら出さない)
COUNTROW(見積明細) <= 15 // 明細は 15 行まで(1 ページの帳票)。超えるとボタンを出さない
計算式(明細の表と、15 行にそろえる空き行)
LET(
  table, TABLE_HTML(見積明細,
    OPT("pref", "est-p-item-"),
    ARRAY("No.", ROWNO(見積明細) + 1, "value-center"),
    ARRAY("型番", 型番, "value-center"),
    商品名,
    数量,
    ARRAY("単価", YEN(単価), "value-right"), // 単位が「\」なので円記号は YEN で出す
    ARRAY("金額", YEN(金額), "value-right")
  ),
  blank, "<tr class='est-p-item-row est-p-blank'>" & JOIN(ARRAY_FOR(6, "<td class='est-p-item-td-value'>&nbsp;</td>"), "") & "</tr>",
  blanks, JOIN(ARRAY_FOR(MAX(15 - COUNTROW(見積明細), 0), blank), ""), // 15 行にそろえる空き行
  REPLACE($html, "##table##", REPLACE(table, "</tbody>", blanks & "</tbody>")) // テンプレートの目印を明細表に
)
  • TABLE_HTML で明細を表にし、OPT("pref", "est-p-item-") で表の class 名を est-p-item-… にそろえます
  • 単価と金額は YEN() で「¥」付きの桁区切りにします
  • 足りない行数だけ空き行を差し込む: ARRAY_FOR(MAX(15 - COUNTROW(見積明細), 0), blank) で空き行を作り、表の </tbody> の前に差し込みます。16 行以上なら空き行は 0 です。各明細行の内容が折り返さず、同じ高さに収まる場合は、明細の数が少なくても表の高さは同じになり、下の合計欄と備考の位置がそろいます(商品名が 2 行に折り返した行は、その分だけ高くなります)
  • HTML 欄の ##table## の目印を、できた表に置き換えます
HTML(金額の枠と合計欄)
<table class="est-p-amount"><tbody><tr>
  <th>御見積金額<small>(税込)</small></th>
  <td>${YEN(合計金額)}</td>
</tr></tbody></table>
<table class="est-p-total"><tbody>
  <tr><th>小計(税抜)</th><td>${YEN(小計金額)}</td></tr>
  <tr><th>消費税(10%)</th><td>${YEN(消費税)}</td></tr>
  <tr class="est-p-grand"><th>合計(税込)</th><td>${YEN(合計金額)}</td></tr>
</tbody></table>
  • 宛名は ${ESC_HTML(宛名)} で、< や & が入っていても文字として出します
  • 備考は ${REPLACE(ESC_HTML(備考), NEWLINE(), "<br>")} で、改行をそのまま出します
CSS(明細の行の高さと、合計欄を金額の列にそろえる)
/* 明細の行は 32px。2 行に折り返した行は伸びる */
.est-p-item-td-value {
  box-sizing: border-box;
  height: 32px;
  padding: 4px 8px;
  border-right: 1px solid #b8c2cf;
  border-bottom: 1px solid #d0d7e0;
  border-left: 1px solid #b8c2cf;
}
/* 列の幅(No.、型番、商品名は残り、数量、単価、金額) */
.est-p-item-th-label:nth-child(1) { width: 36px; }
.est-p-item-th-label:nth-child(2) { width: 72px; }
.est-p-item-th-label:nth-child(4) { width: 60px; }
.est-p-item-th-label:nth-child(5) { width: 100px; }
.est-p-item-th-label:nth-child(6) { width: 112px; }
/* 合計欄は表の右下に付け、金額の列(112px)と縦にそろえる */
.est-p table.est-p-total {
  width: 272px;
  margin-top: -1.5px;
  border: 1.5px solid #1f3a5f;
}
.est-p-total th {
  width: 160px;
  font-weight: normal;
  text-align: left;
  background: #e8edf3;
}
.est-p-total td {
  width: 112px;
  text-align: right;
}

まとめ

  • 見積書は、AI への 3 回のメッセージで、3 つの案 → AI による評価 → 実用版、と仕上がりました
  • 案を並べて比べるだけでなく、評価も AI に任せられます。白黒印刷や PDF 化といった実務の観点で比べ、3 案に共通する問題(宛名の敬称、税抜・税込、明細が切れる)まで見つけました
  • 業務の前提は人が伝えます。「1 ページでよい」の一言で、作りがずっと簡単になりました。できあがった後も、「空き行の追加は要らない」のように、要件に合わせて訂正を重ねられます
  • AI の作業時間は 3 回の依頼で約 34 分、API 料金に換算すると約 4.4 ドルでした(定額プランなら利用枠の中)
  • 最後は、印刷屋プラグインの設定画面で取り込んで、実際の PDF を確かめます

関連記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?