はじめに
納品物としての画面仕様書作成をClaude Codeに依頼した際、最初はExcelでの出力を試みたものの、最終的にはHTMLで生成させてPDF化する手法が最適だったという実体験の記録です。
これまで画面仕様書作成の経験はなかった自分が、納品前に60画面を超える仕様書作成に対応するため、Claude Codeを並列エージェント稼働させて作成したプロセスやノウハウをまとめました。
TL;DR（最初に結論）
- 60画面超の画面仕様書を作成する際、Excel（
.xlsx）出力を試みた - しかしClaudeはExcelの見た目を確認できないため、Excel出力では深刻なレイアウト崩れが発生する
- 対策として、AIが得意な「HTML生成 ➔ PDF化」へアプローチを切り替えた
- 5台のClaude Codeに役割（テキスト・画像撮影・結合・PDF変換・校閲）を分業させ、並列で作業を進めた
- 最初の1画面で型を固めて量産することで、効率よく画面仕様書を作成することができる！（ただし並列稼働によるトークン上限には注意が必要）
前提 プロジェクトの状況と納品物の条件
プロジェクトはWEBブラウザで動かすゲームアプリで、画面数が多く最終的に64画面ありました。
約半年間開発を進めたプロジェクトですが、最初から明確な画面仕様書を作成して進めたわけではありませんでした。開発期間中に度々仕様変更があり、弊社から企画提案を行い、先方にチェックしていただく形式で進めていたためです。要件定義フェーズで画面数が明確に決まっていたわけではなく、納品のタイミングで画面仕様書を作成することになりました。
会社契約のClaude Code（$20/月プラン）を使いました。
納品形式は最終的にPDFで提出できれば問題ありませんでしたが、後から内容を更新する際のために xlsx などの編集データも用意しておく必要がありました。フォーマット自体は特別なものではなく、過去プロジェクトの構成を模倣する形式です。
最初に取り組んだExcel出力は失敗
最初は、過去のプロジェクト同様、Excelで画面仕様書を作成しようとしました。
プロジェクトのgit管理外に myself という自分専用ディレクトリを作成し、そこに過去プロジェクトのサンプル仕様書（PDF形式と xlsx 形式）を配置しました。
そのうえでClaudeに対し、「サンプル画面仕様書.pdfとサンプル画面仕様書.xlsxを参考に、サンプルに見た目・形式を合わせた本プロジェクト版の画面仕様書を作成して。まず xlsx で作成し、それをpdfに変換するような形式でお願い」と指示を出しました。
しかし、Excelでは、何度試しても表示が大きく崩れてしまいました。不要な場所に罫線が付与されたりセルの幅がおかしくなったりと、そのまま納品に使える精度ではありませんでした。
一方で、必要な要素（テキスト等）の抽出や画面キャプチャの取得自体は正常に行えていました。見た目のレイアウト崩れさえ解決できれば、要素自体は再現できる見込みがありました。
崩れる原因をClaude本人に尋ねたところ、「エクセルデータはClaudeが見た目を確認する手段がなく、バイナリデータから予想して生成することしかできないため」という回答でした。
Claude CodeはExcelの出力には不向きということが判明しました。
Excelでの出力が難しいのであれば、HTML形式で書き出してからPDF化する方針へ切り替えることにしました。
以前コードレビュー結果をHTML/CSS形式で出力させた際に綺麗に作成できた経験があったため、Claudeが得意なHTMLで試そうと思いました。
5台のClaude Codeの並列運用
納品までの期間もそれほどなく、対象画面も60を超えていたため、作業を効率化する必要がありました。
5台のClaude Codeを並列で立ち上げて役割を分担させました。
各フォルダーと役割の分担は次の通りです。
-
A テキスト: 画面仕様書に記載する文字の作成や調査を担当 -
B 画像: 画面スクショ作成を担当 -
C HTML: テキストの文章と画面のスクショを統合してHTMLを作成する担当 -
D PDF: HTMLをPDF化する担当 -
X 相談役: 自分（私）がAIに相談するときの担当。相談+雑用（全体の把握、校閲等）を担当
myself ディレクトリ内に各担当のフォルダー（TXT、IMG、HTML、PDF）を作成し、それぞれのディレクトリに各担当AIが成果物を格納していく運用です。
連携の流れとしては、
Aがテキスト、Bが画像の素材を用意し、
CがそれをもとにHTMLを組み立て、
DがHTMLをPDFに変換します。
このライン全体を自分とX相談役で見守りながら、指示や調整を行いました。
実際の作業手順
画面は連番を振って管理しました。
- Aテキストの調査によって全体の画面数が60程度（最終的に64画面）と判明したため、Aテキストが画面説明の文章を Markdown ファイルで作成していった。
- 作成された文章は表記ゆれや不自然な表現がないかX相談役に校閲させた。
- 並行してB画像が Playwright を使ってスクショを撮影した。
- 素材が揃った画面から順にC HTMLがテキストと画像を統合してHTMLを作成した。
- HTMLができあがり次第、D PDFが自律的にライブラリを起動してPDFへ変換していった。
まずは1画面を固める
まず画面仕様書の最初の1ページをしっかり作ることにしました。
C HTMLに一気に作らせず、最初の1画面（01の画面）だけを先行して作成させました。1画面目でHTMLの構造とCSSの見た目をガッチリ固めてから、他の画面へ展開させています。
画面ごとに別々のHTMLファイルを作成させつつ、最終的にはそれらを1つの巨大なHTMLファイルにまとめ、1冊のPDFへ変換しました。
画像はHTMLとは別のフォルダーに保存し、HTML内からは img タグの相対パスで参照する構成にしました。これにより、後から画面の見た目や仕様が変更された場合でも、同じファイル名で画像を差し替えるだけで更新できる設計になっています。
フロー図の記述には Mermaid.js を使用しました。
「Mermaid.jsを使ってフロー図を描いて」とAIに指示するだけです。
AIとフロー図のスタイル調整等も実施しました。
作成したHTMLですが、コードは外部JSファイルやCSSファイルに分けずHTML内の script タグ・style タグへ直接埋め込みました。
HTMLファイル+IMGディレクトリのシンプルな形式で提出したかったからです。
文章の修正程度であれば非エンジニアでもHTMLを直接編集して対応でき、CSSの修正も不要な状態です。
PDF出力時のブラッシュアップと画面幅の調整
PDFへ出力した際、改ページの位置がおかしい部分については
「中途半端な要素内で改ページしないように」
「1画面ごとでしっかり改ページするように」
と自然言語でClaude Codeに指示を出して調整させました。
具体的なライブラリや技術の指定は行わず、AIに任せています。
AIは自律的にライブラリ等を調査してくれました。
途中でスマホ画面幅とPC画面幅の表示が混ざった際も、「この画面群（メイン画面等）ではスマホ画面幅、この画面群（管理画面など）ではPC画面幅でお願いします」と伝えることで意図通りの表示に対応させました。
人間側で別のエクスポートツールを用意する必要はなく、Claude自らがツールを立ち上げて納品できる状態まで仕上げています（最終的な目視チェックは人間で行いました）。
成果と出来栄え
結果、数日間かかったのですが、そのまま納品できるレベルの画面仕様書が完成しました。
Excelでは再現できなかったスタイルの調整も細部まで行えており、サンプルとして渡された過去プロジェクトのPDFに準じた見た目を再現しつつ、さらに見やすく改良した仕上がりになっています。
64画面分のスクリーンショット撮影も問題なく成功しました。
感想・振り返り
画面仕様書の作成経験がなかったのですが、60画面を超えるドキュメント作成を数日で完了させられたのは間違いなくClaudeのおかげでした。
AIの特性に合わせてExcelを諦め、テキストベースのHTMLへ切り替える判断ができたことや、5つのClaude Codeを並列で動かして完全分業化させた選択は、今回特に手応えがありました。
一方で、作業中に何度もトークン上限（Limit）に達して作業の手が止まってしまったのはなかなか厳しいと感じました。AIが使えない間は今出ている成果物のチェックや作戦の見直しをしていました。画面を扱う重めの処理であったこと、全64画面を一括で読み込む広範囲な作業であったこと、そして5台のエージェントが同時にトークンを消費したので、枯渇が早かったように感じます。
今回は手探りで型を作り出すまでに時間がかかりましたが、ノウハウが溜まった今後は試行錯誤のプロセスをカットできるため、次回以降はさらに効率よく実行できると考えています。