前回の記事 では、Claude Desktop のチャットで頼んで、印刷屋プラグインの見積書の帳票を AI に作らせました。本記事はその続きです。できた見積書を、チャットのやり取りだけで「見せられる帳票」に作り込みます。
下は、同じレコードを 3 つのデザインで出した見積書です。
この 3 つは、チャットで 4 回頼んだだけで作りました。
| # | 頼んだこと | 結果 |
|---|---|---|
| 1 | 高額金額に見合ったデザインで |
明朝体・濃紺と金の、格調のある見積書に作り直した |
| 2 | （プレビューのスクリーンショットを貼っただけ） | AI が崩れを 4 か所見つけて直した |
| 3 | 押印欄なしで、３パターン作成して |
雰囲気の違う 3 つのデザインを、別々の設定ファイルで作った |
| 4 | ３パターンを一つの設定ファイルにまとめて |
3 つのボタンを 1 つの設定ファイルにまとめた |
CSS や計算式は 1 行も書いていません。デザインの言葉で頼み、会話の中のプレビューで確かめ、気になるところはスクリーンショットで伝えるだけです。
拡張機能（印刷屋 設定オーサリング）の入れ方と、帳票を最初に作る手順は 前回の記事 を見てください。本記事は、前回作った見積書（アプリ 3740）の続きから始めます。
1. 雰囲気で頼む —「高額金額に見合ったデザインで」
前回の見積書は、印刷屋の雛形に近い、素直な形でした。数百万円の見積もりを出すには少し軽く見えるので、同じ会話の続きでこう頼みました。
高額金額に見合ったデザインで
具体的な色や書体は伝えていません。AI は「高額」「見積書」から方向を決め、次のように作り直しました。
| 部分 | 変えたところ |
|---|---|
| 書体・色 | 明朝体（游明朝 / ヒラギノ明朝）。濃紺を基調に、金を差し色に絞る |
| 見出し | 「御見積書」を字間を広げて大きく。英字の「QUOTATION」を添え、下に二重罫と金の細罫 |
| 宛名 | 大きめの文字で、「御中」を少し小さく添える。その下に挨拶文 |
| 発行元 | 右側に社名・住所・担当者と、承認・担当の押印欄 |
| 御見積金額 | 枠で囲み、30px の太字。「￥8,793,400-」の形 |
| 明細 | 見出し行を濃紺、本文は横罫だけ。数字は等幅で右揃え |
| 合計 | 合計の行を濃紺の地に金の文字で強調 |
| フッター | ページの下端に金の細罫と、社名・見積番号 |
この時点のプレビューは、次の 2 の画像（スクリーンショット）です。
AI の返答には、デザインの説明のほかに、AI が自分で決めたことが書いてあります。たとえば、金額の表示を項目の書式（FVAL）から YEN() に変えた理由です（以下の引用は返答の要約です）。
明朝体ではフィールドの単位「\」がバックスラッシュに見える場合があるため、金額はすべて
YEN()で「￥」付きにしました。
書体を変えたことで起きうる崩れを、AI が先回りして避けています。こうした判断は返答に書かれるので、読んで気になれば「元に戻して」と頼めます（今回の会話での例です。いつも同じ判断や説明が返るとは限りません）。
また、変えたことで生じた制約も返ってきます。
明細の行の高さを広げたので、1 ページに収まる行数は 12 行前後に減っています。
長い見積もりがあるなら、「明細を複数ページに分けて」と頼みます。
2. スクリーンショットを貼る — AI はプレビューを見ていない
前回の記事にも書いたとおり、AI はプレビューの見た目を見ていません。会話の中のプレビューは、レコードの値を AI に渡さないために、表示にだけ渡しています。AI が受け取るのは、ページ数と式のエラーの件数だけです。
そのため、HTML と CSS としては正しくても、見た目が思ったとおりにならないことがあります。そこで、プレビューを全画面にしてスクリーンショットを撮り、何も書かずにそのまま貼りました。
貼ったスクリーンショット（1 の「高額金額に見合ったデザインで」で作った見積書）
AI は画像を見て、意図と違うところを 4 つ挙げ、直しました。
| 見つけたこと | 原因 | 直し方 |
|---|---|---|
| 御見積金額の二重枠が一重に見える | 外側の線を outline で描いていたが、出ていなかった |
外側を border: 3px double、内側を金の細い枠の 2 つの箱にした |
| 「型番」「数量」の列が広く、商品名が 2 行に折り返す | 列の幅が中身なりに決まっていた |
table-layout: fixed にして列の幅を決め、残りを商品名に回した |
| 押印欄の「承認」「担当」が右に寄る | 字間（letter-spacing）は最後の字の後ろにも付く |
同じ量の text-indent を付けて打ち消した |
| 合計の行の「合計」と金額の間に縦線 | セルの罫線が残っていた | 合計の表のセルの罫線を消し、下線だけにした |
直した後の見た目は、3 の A のプレビューで見られます（A は、直した版から押印欄を外したものです）。
文章で「なんだか枠が変」と説明するより、画像を貼るほうが早く、正確に伝わります。
貼った画像は AI に渡ります。帳票には宛名や金額が写るので、テストアプリとテストデータで作っておくと安心です（本記事の画像の値は、すべて架空のものです）。
3. 案を並べる —「押印欄なしで、３パターン作成して」
1 つの案を直し続けるより、いくつか並べて比べたほうが決めやすいことがあります。押印欄を外す指示と一緒に、こう頼みました。
押印欄なしで、３パターン作成して
AI は、方向の違う 3 つを作りました。
| ボタン名 | 方向 | 特徴 | |
|---|---|---|---|
| A | 見積書（紺金） | クラシック | 2 で直した版から押印欄を外したもの。明朝体、濃紺と金、二重罫の金額枠 |
| B | 見積書（モダン） | モダン | ゴシック体の墨一色。ページの上端に黒い帯。金額は 42px の細身の数字を上下の罫で挟む。表は塗りのない横罫だけ |
| C | 見積書（格式） | 格式 | 明朝体、えんじと金。ページ全体を二重枠と金の細枠で囲み、表題は中央に飾り罫（◆）付き。金額は「金 8,793,400 円也」 |
A 紺金クラシック
B モダン
C 格式
作りで工夫されていたのは、次の点です。
- ボタン名を分けた: 「見積書（紺金）」「見積書（モダン）」「見積書（格式）」と名前が違うので、同じアプリに「追加」で取り込むと、詳細画面にボタンが 3 つ並び、同じレコードで PDF を見比べられます
-
クラス名の頭を分けた: CSS のクラス名を
qt-（A）、qm-（B）、qk-（C）で始め、どのルールもそのクラスから書き始めています（tableやtdだけを指すルールは書いていません）。次の 4 で 1 つの設定ファイルにまとめても、クラス名が重なりません。印刷屋の共通 CSS は、3 つのどのボタンにも同じように効きます -
「金 ○○ 円也」は計算式で: C の金額は、
FIXED(合計)で「￥」の無い桁区切りの数字にし、前後に「金」「円也」を置いています。項目の書式に頼らず、計算式で表示の形を変えています
3 つとも検査を通り、レコード 3 での試し出力は 1 ページ、式のエラーは 0 でした。
4. まとめて受け取る —「３パターンを一つの設定ファイルにまとめて」
3 つのファイルを順に取り込むのは手間なので、1 つにまとめてもらいました。
３パターンを一つの設定ファイルにまとめて
できたのは、ボタンが 3 つ入った設定ファイル 見積書-3パターン.json です。元の 3 つのファイルは残っています。
- 検査の結果: 警告 3 件（ボタンごとに
formula.rawHtml）、保存値 6,389 bytes（上限の 2%） - 試し出力: 3 つのボタンとも 1 ページ、式のエラー 0。会話の中にプレビューが 3 つ並びます
取り込みは、前回と同じ 設定をアップロード です。
- 今のボタンを残して足すなら 追加
- 3 つだけにするなら 全置換。ただし今のボタンはすべて消え、共通の設定（外部参照・Web フォント・メニュー・共通 CSS など）もファイルの内容になります。ほかのボタンがあるアプリでは、「追加」で取り込んでから要らないボタンを消すほうが安全です
設定のアップロードの画面（「全置換」を選んだところ。今のボタン 13 件が、ファイルのボタン 3 件に置き換わると出ます）
保存して運用環境に反映すると、詳細画面にボタンが 3 つ並びます。3 つのボタンを押して PDF を見比べ、使わないボタンは設定画面で消します。比べる相手（営業の担当者や上司）がいるなら、3 つの PDF を見せて選んでもらうこともできます。
デザインを頼むときのコツ
雰囲気の言葉でよい
「高額金額に見合った」のように、誰に何を見せる帳票かを伝えれば、AI が書体・色・余白を決めます。言葉を足すと、方向を絞れます。
建設業の見積書らしく、堅めに
IT サービスの見積書。白を多めに、すっきりと
会社のロゴの色（#0b5394）を基調にして
見た目の直しは、画像で伝える
AI はプレビューを見ていないので、崩れはスクリーンショットで伝えるのが確実です。言葉を添えるなら、「この枠を二重にしたい」「商品名を 1 行に収めたい」のようにどうしたいかを書きます。
案を並べてから選ぶ
「3 パターン作って」と頼むと、方向の違う案が出ます。気に入った 1 つを決めてから、細部を直します。
B をもとに、金額の数字をもう少し太くして
A の色で、C のレイアウトにして
仮の文字を本物にする
社名・住所・電話番号は、アプリに項目が無ければ「株式会社○○」のような仮の文字で入ります。AI は返答でそのことを伝えてくるので、実際の値を伝えて差し替えてもらいます。
発行元を「株式会社△△ 〒100-0001 東京都千代田区… TEL 03-…」にして
気を付ける点
- 書体は PC によって変わる: 明朝体・ゴシック体は、PDF を作る PC に入っている書体で描かれます（AI は書体の候補を複数並べ、無ければ次の候補になるように書きます）。PDF を作る PC で一度確かめてください。どの PC でも同じ書体にしたいときは、Web フォントを使う形（帳票レシピの R7。Google Fonts なら承認は要りません）もあります。ただし Web フォントは共通の設定なので、「追加」「一部置換」の取り込みではアプリの今の設定のままになります。会話の中のプレビューも Web フォントを読まず、PDF で確かめる必要があるので、本記事では使っていません
- 検査はデザインの良し悪しを見ない: 検査が見るのは、設定の形と計算式の書き方です。見た目、1 ページに収まる行数、長い商品名での崩れは、印刷屋の PDF で人が確かめます
- プレビューは近似: 会話の中のプレビューと印刷屋の PDF は、細部が違うことがあります。ページの端に近い飾り（C の二重枠、B の上端の帯）は、特に PDF で確かめてください
-
ファイルは上書きされない: 拡張機能は、同じ名前のファイルを上書きしません。本記事の作業でも、作業フォルダーに
見積書.jsonが既にあったため、AI は見積書-20261010.jsonという別の名前で保存しました。案を重ねるとファイルが増えるので、使わないファイルは自分で整理します
まとめ
- 雰囲気の言葉で頼み、画像で直し、案を並べて選ぶ。 デザインの作り込みも、チャットのやり取りだけで進みます
- AI はプレビューを見ていないので、見た目の崩れはスクリーンショットで伝えます。テストデータで作れば、貼る画像にも架空の値しか写りません
- 複数の案は、ボタン名を分けて 1 つの設定ファイルにまとめると、「追加」で取り込んで詳細画面で見比べられます
関連リンク: