前回の記事では、AI（Claude Code）に帳票を作らせる環境を用意して、見積書アプリの「ご提案書」を作りました。今回はその続編です。
印刷屋プラグインの帳票は HTML と CSS で書きますが、AI に頼めば、書き方を知らなくても作れます。今回は、kintone のアプリに登録した時計の写真を、カタログの PDF にしました。AI に送ったのは次の 3 つのメッセージだけです。
時計アプリ 3445 で、1ページ3時計のカタログページを作成して
1ページ4時計で横2個の配置に、時計名は上部に
少しデコレーションを入れて、カタログらしいデザインに
完成した時計カタログ（1 ページに 4 本。1・2 ページ目）
環境の用意（テンプレートリポジトリ、kintone への接続、印刷屋プラグインの zip）は、前回の記事 rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせる の「環境構築（初回だけ）」のとおりです。本記事は、その環境ができている前提で「頼んでから PDF になるまで」を紹介します。
使ったアプリ
時計アプリ（アプリ番号 3445）は、項目が少ないシンプルなアプリです。
時計アプリのレコード（テーブルに時計の名前と写真）
| 項目 | 種類 | 内容 |
|---|---|---|
| タイトル | 文字列（1 行） | カタログの名前 |
| 既読 | ユーザー選択 | 今回は使わない |
| テーブル | テーブル | 時計の一覧 |
| 名称 | 文字列（1 行） | 時計の名前（例: SEIKO_ASTRON_SBXA027） |
| 添付ファイル | 添付ファイル | 時計の写真（PNG） |
レコード 1 件がカタログ 1 冊、テーブルの 1 行が時計 1 本です。例のレコードには、時計が 10 本入っています。
1 回目: 「1 ページ 3 時計のカタログ」
時計アプリ 3445 で、1ページ3時計のカタログページを作成して
前回の「ご提案書」では、ページの中身を 4 行の要件で伝えました。今回は 1 行だけで、項目の名前もアプリの作りも伝えていません。それでも AI は、次のことを自分で進めました。
- アプリの項目を調べる
- 実際のレコードを見て、時計がレコードではなくテーブルの行だと気づく
- 印刷屋プラグインの設定ファイル（JSON）を書く
- 設定に誤りが無いかを検査する（エラー 0）
- 帳票を HTML に書き出し、ページ数を確かめる（時計 10 本で 4 ページ）
- テーブルに空の行があるレコードでも、帳票が崩れないことを確かめる
返答の冒頭では、アプリの作りをどう読んだかを説明し、確認を求めてきました。
このアプリでは時計 1 件がレコード 1 件ではなく、テーブルの 1 行（添付ファイルの画像と名称）でした。そこで、レコード 1 件をカタログ 1 冊とし、テーブルの行を 1 ページに 3 件ずつ並べています。違っていたら教えてください。
A4 縦に、時計を 1 本ずつ縦に 3 段並べたカタログができました。ボタンを押すと PDF のプレビューが開き、PDF は 時計カタログ-<タイトル>.pdf の名前でダウンロードできます。
1 回目のカタログ（1 ページに 3 本）
2 回目: 「横に 2 個、名前は上に」
1 段に 1 本だと余白が多いので、並べ方を変えてもらいます。
1ページ4時計で横2個の配置に、時計名は上部に
変えたいところを言うだけで、AI が設定ファイルを直し、検査とプレビューをやり直します。1 ページが 2 列 × 2 段の 4 本になり、時計 10 本は 4 本・4 本・2 本の 3 ページになりました。名前は写真の上で、長い名前は 2 行まで折り返します。
2 回目のカタログ（2 列 × 2 段）
3 回目: 「カタログらしいデザインに」
最後は、見た目をざっくりお任せにしました。
少しデコレーションを入れて、カタログらしいデザインに
AI は濃紺と金を基調にして、次の飾りを足しました。
- 見出し: 濃紺の帯に明朝体の「時計カタログ」。上に小さな英字の「WATCH COLLECTION」、右にページ番号（金の枠）
- ページ: 金の細い飾り枠。下の枠線の中央に「WATCH CATALOG」
- カード: クリーム色の地で、上に金の線。通し番号（No.01、No.02 …）、名前、短い金の線、写真の順
- 写真: 白い枠の中に置く。時計の写真の背景が白でも浮かない
「デコレーション」「カタログらしい」のような曖昧な頼み方でも、AI が具体的な案にしてくれます。気に入らないところがあれば、また言葉で頼むだけです。
3 回目のカタログ（完成）
kintone に取り込む
AI が書いた設定ファイル（settings/APP3445-時計-カタログ.json）を、印刷屋プラグインの設定画面で取り込みます。前回の記事と同じ手順です。
- アプリの設定 → プラグイン → 印刷屋プラグインの 設定
- 設定をアップロード で設定ファイルを選ぶ
-
取り込み方を選ぶ
- 印刷屋の設定がまだ無いアプリ → 全置換
- ほかのボタンがあるアプリに足す → 追加
- 前に取り込んだ「時計カタログ」を新しくする → 一部置換（置き換え先に「時計カタログ」を選ぶ）
- 保存する → 運用環境に反映
今回は 1 回目から 3 回目までの設定を、それぞれ「追加」で取り込みました。同じ名前のボタンには「(2)」「(3)」が付くので、3 つの版を並べて見比べられます。
設定画面 — 3 回分を「追加」で取り込んだところ
レコードの詳細画面にボタンが出ます。押すとプレビューが開き、PDF をダウンロードできます。
詳細画面 — 「時計カタログ」「時計カタログ (2)」「時計カタログ (3)」のボタン
使う版が決まったら、要らないボタンは設定画面で行のチェックを外して無効にします。
頼み方のコツ
-
アプリは番号で: アプリの URL の
/k/3445/の数字です。同じ名前のアプリと取り違えません - 項目の名前は知らなくてよい: AI がアプリとレコードを見て判断し、どう読んだかを説明してくれます。違っていたら言えば直ります
- 見た目は言葉で: 「1 ページに 4 つ」「横に 2 個」「名前は上」「カタログらしく」のように、普段の言葉で伝えれば通じます
-
少しずつ直す: 一度に全部を決めなくてかまいません。同じ会話の中なら、変えたいところだけ言えば通じます（別の日に続けるときは、前回の記事の「作った後 — 変更も AI に頼む」のとおり「
settings/APP3445-時計-カタログ.jsonを更新して。…」とファイル名を添えます） - 最後は PDF で確かめる: AI が書き出すプレビューは近似で、写真はダミーの絵になります。実際の写真の見え方は、印刷屋プラグインの PDF で確かめます
AI が教えてくれた注意点
返答の最後には、PDF で確かめてほしい点が毎回付いてきました。今回の主なものです。
| 注意点 | 内容 |
|---|---|
| 写真の縦横の比 | 写真は高さをそろえて並べるので、横に長い写真は横に縮んで見えることがある。つぶれていたら「比を保って」と頼む（今回の写真は正方形で、つぶれなかった） |
| 長い名前 | 名前は 2 行まで。それより長い部分は切れる |
| 書体 | 明朝体は Windows では游明朝、Mac ではヒラギノ明朝になり、PC によって字形が少し違う |
| 空の行 | テーブルに写真も名前も無い行があると、空のカードが 1 枚出る |
自分では気づきにくい点を先に教えてくれるので、PDF のどこを見ればよいかが分かります。
中身を見たい人へ
AI が書いた計算式と CSS です。読まなくても使えますが、自分で手を入れたい人のために載せておきます。
計算式（テーブルをカードにして、4 件ごとにページを分ける）
TABLE_HTML(テーブル,
OPT("type", "card", "pref", "pcraft-catalog-", "hideLabels", "Y",
"pagination", "Y", "perPage", "4", "maxPages", "100", "title", "時計カタログ"),
ARRAY("No", "No." & IF(ROWNO(テーブル) < 9, "0", "") & (ROWNO(テーブル) + 1)), // 通し番号 No.01
ARRAY("名称", ESC_HTML(名称)),
ARRAY("画像", IMGSRC(添付ファイル, 0, "img")) // 1 つ目の添付ファイルを画像に
)
-
TABLE_HTMLのOPT("type", "card")でテーブルの行をカードにし、"pagination", "Y", "perPage", "4"で 4 件ごとにページを分けます。"title"を付けると、各ページの見出しにページ番号（1/3 など）も付きます - カードの中身は、通し番号、名前、写真の順です。名前は
ESC_HTMLで囲み、<や&が入っていても文字として出します - 写真は
IMGSRC(添付ファイル, 0, "img")で、添付ファイルの 1 つ目を画像にします
CSS（見出し、飾り枠、2 列 × 2 段のカード）
/* ページの飾り枠と下の文字（A4 縦 96 dpi の位置） */
.rex0220-pcraft-page {
background: #fff;
}
.rex0220-pcraft-page::before {
content: '';
position: absolute;
top: 16px;
right: 16px;
bottom: 16px;
left: 36px;
border: 1px solid #b08d57;
}
.rex0220-pcraft-page::after {
content: 'WATCH CATALOG';
position: absolute;
bottom: 10px;
left: 317px;
width: 180px;
background: #fff;
color: #b08d57;
font-size: 10px;
line-height: 12px;
letter-spacing: 4px;
text-align: center;
}
/* 見出しの帯 */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 12px 20px;
background: #1f2a36;
border-bottom: 3px solid #b08d57;
color: #fff;
text-align: left;
}
.table-header-title {
font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
font-size: 24px;
font-weight: bold;
letter-spacing: 6px;
}
.table-header-title::before {
content: 'WATCH COLLECTION';
display: block;
margin-bottom: 2px;
color: #d9b77e;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: 4px;
}
.table-header-page {
padding: 2px 12px;
border: 1px solid #d9b77e;
border-radius: 12px;
color: #d9b77e;
font-size: 13px;
letter-spacing: 1px;
}
/* カード（2 列 × 2 段） */
.pcraft-catalog-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pcraft-catalog-list {
display: flex;
flex-direction: column;
gap: 6px;
width: calc(50% - 10px);
height: 450px;
box-sizing: border-box;
padding: 12px 14px 14px;
background: #fbf8f3;
border: 1px solid #e6dccb;
border-top: 3px solid #b08d57;
}
/* 1 つ目: 通し番号 */
.pcraft-catalog-item:nth-child(1) {
color: #b08d57;
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 16px;
letter-spacing: 3px;
text-align: center;
}
/* 2 つ目: 名称と金の線 */
.pcraft-catalog-item:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 64px;
overflow: hidden;
color: #1f2a36;
font-family: 'Helvetica Neue', Arial, 'Yu Gothic', sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 0.5px;
text-align: center;
overflow-wrap: anywhere;
}
.pcraft-catalog-item:nth-child(2)::after {
content: '';
width: 40px;
height: 2px;
margin-top: 8px;
background: #b08d57;
}
/* 3 つ目: 画像 */
.pcraft-catalog-item:nth-child(3) {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #eee5d6;
}
.pcraft-catalog-value img {
display: block;
height: 280px;
width: auto;
max-width: 100%;
}
スマホでも同じ見た目にするなら
今回のカタログは、PC にある書体（游明朝など）を使っています。PC・Mac・iPhone で字形をそろえたいときや、スマホの詳細画面でもボタンを出したいときは、印刷屋プラグインの「Web フォント」を有効にします。これも「Web フォントを有効にして」と AI に頼めます。しくみは rex0220 印刷屋プラグイン — Web フォントのしくみとスマートフォン対応 を参照してください。
まとめ
- 時計カタログは、AI への 3 回のメッセージで、1 ページ 3 本 → 2 列 × 2 段 → カタログらしいデザインと仕上がりました
- 項目の名前も HTML も CSS も知らなくても、アプリ番号と見た目のイメージを言葉で伝えれば作れます
- AI はアプリとレコードを見て作りを読み取り、検査とプレビューまで済ませ、PDF で確かめる点も教えてくれます
- 最後は、印刷屋プラグインの設定画面で取り込んで、実際の PDF を確かめます
関連記事