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?

@dir-zawain株式会社Dirbato

制限されたAI環境でも大丈夫。ブラウザとチャットだけで「及第点の報連相ドキュメント」を爆速作成するアプローチ

0
Last updated at Posted at 2026-03-04

体裁づくりという「虚無の時間」から解放されるために

AI関連のリリースが多すぎて執筆を忘れていたDirbatoの柿澤です。
AIの追っかけで忙しなく過ごす日々ですが、優秀な同僚（AI）のおかげで、日々の報連相ドキュメント作成を完全にアウトソースできています。今の私が集中しているのは「文章の中身の推敲」と「同僚へのダメ出し…リテイク依頼」だけです。

もしあなたが、ChatGPTの有償プランをフル活用し、ワンクリックで美しいプレビューを展開したり、Claude CodeやCoworkで動的にパワーポイント等を生成できるような「恵まれた環境」にいらっしゃるのであれば、この記事はそっと閉じていただいて大丈夫です。

この記事は、「社内導入された必要最低限のテキスト生成AIとブラウザしか使えないビジネスパーソン」に向けて書いています。

日々の業務に潜む「ドキュメント作成」の悩み

日々の業務のなかで、以下のような悩みを抱えたことはありませんか？

  • 退社時間が近づく中、急遽「この障害の件、明日までに一次報告レポートにまとめておいて」という依頼が飛んでくる
  • 何十往復も続く複雑なメールスレッドを読み解き、経緯を分かりやすくまとめる作業に時間がかかる
  • 会議のメモを、チームメンバーが読みやすいレイアウト（見出し、表、箇条書き）に整えるためだけに、多くの時間を費やしてしまう

私たちは、ドキュメントの「中身（意思決定や事実の共有）」ではなく、フォントサイズや行間、レイアウトを調整する「体裁づくり」に多くのリソースを割きがちです。

「60点（及第点）」を素早く出すことの価値

ここで、少し視点を変えてみたいと思います。社内向けの報連相ドキュメントに、芸術的な美しさは本当に必要でしょうか。

ノーベル経済学賞を受賞したハーバート・サイモンは、「サティスファイシング（Satisficing：満足化原理）」という概念を提唱しました。これは、「完璧な結果（Maximizing）を追求して時間と認知リソースを消費するよりも、基準を満たす『十分な結果（Good enough）』を素早く出す方が、ビジネス上の意思決定において合理的である」という行動経済学の考え方です。

つまり、「誰もが読みやすい及第点（60点）」をいかに時間をかけずに作成できるかが、業務効率化の鍵となります。

認知負荷を減らし、本来の思考に集中する

なぜ「体裁づくり」は負担に感じるのでしょうか。教育心理学者ジョン・スウェラーが提唱した「認知負荷理論（Cognitive Load Theory）」によれば、人間のワーキングメモリ（脳の作業領域）には限界があります。

ドキュメント作成時、私たちの脳には2つの負荷がかかっています。

  1. 内在的認知負荷（本来のタスク）
    「課題の根本原因は何か？」「次にどう行動すべきか？」を考える負荷。
  2. 外在的認知負荷（付随するタスク）
    「文字の大きさはどうするか？」「ここで改ページすると不自然ではないか？」を考える負荷。

文字サイズやマージンを調整する「外在的認知負荷」は、思いのほか私たちの集中力を奪います。これにより決断疲れが生じ、本来考えるべき「中身」に回すエネルギーが減ってしまうのです。

そこで本記事では、｢及第点のデザイン実現｣をAIに委ねることで認知負荷を下げ、さらに外部への情報流出リスクを抑えながら報連相レポートを爆速で作成する「オフライン完結のツールセット」をご紹介します。

figure1 (37).png

環境や前提条件

この仕組みを動かすために、複雑な開発環境（Node.jsやDockerなど）は不要です。必要なのは以下の3つだけです。

  • OS: Windows / macOS どちらでも可
  • ブラウザ: Chrome, Edge などのモダンブラウザ
  • AI環境: 社内で許可されている、テキストのやり取りができる任意の生成AIチャット

本記事で使用するツールセット（メタプロンプトとプレビューアのソースコード）は、以下のGitHubリポジトリでPublic公開しています。
サンプルも配置してますので、とりあえず見てみたい!!という方は以下へどうぞ。

🔗 GitHub 報連相ドキュメント作成ツールキット

課題を解決する「2つのアプローチ」

このキットは、単なるプロンプト集ではありません。

  1. 出力品質を一定に保つメタプロンプト
  2. 社外に情報を出さないローカルプレビューア

の組み合わせで機能します。

1. 「及第点」を担保するデジタル庁デザインガイド準拠メタプロンプト

生成AIに単に「綺麗なレポートにして」と依頼すると、不要なJavaScriptが含まれたり、外部のWebフォントを読み込むなど、オフライン環境では正しく表示されないHTMLを出力しがちです。すべてのPCがインターネットに繋がっていれば問題ありませんが、｢誰に渡しても｣、｢いつどこで開いても｣参照できるほうが望ましいです。

そこで、AIの出力をコントロールし、デザインの意思決定（外在的認知負荷）を最小化するメタプロンプトを使用します。

meta-prompt.txtの抜粋
（前略）
# 技術的制約（厳守事項）
1. Single HTML: 必ず1つのHTMLファイルとして完結させること。
2. Internal CSS: CSSは `<head>` 内の `<style>` タグに記述すること。
3. CDN/外部リソース完全NG: 外部のCSS、JS、Webフォント、画像等の読み込みは一切禁止。

# 出力品質の均質化（OKデザインとNGデザインの基準）
- ⭕️ PDF出力（改ページ）制御: 意味のある情報の塊が途中で改ページされないよう、CSSで以下を必ず適用する。
  `section, .report-block, table { break-inside: avoid; page-break-inside: avoid; }`
（後略）

このアプローチを採用する理由

  • 1ファイル完結のポータビリティ
    HTMLとCSSを1ファイルにまとめることで、ファイル管理の手間を省き、どこでもブラウザ一つで開ける利便性を確保します。
  • デジタル庁ガイドラインの活用
    配色や余白のルール（8pxの倍数、十分なコントラスト比）をプロンプトで指定することで、AIによるデザインのブレを防ぎます。これにより、誰が読んでも見やすいはずの｢及第点｣のレポートが安定して出力されます。
  • PDF出力への最適化
    ブラウザの印刷機能（Ctrl+P）を利用したPDF保存を前提とし、テーブルや重要なセクションが不自然に改ページされないようCSSで制御しています。(HTMLをそのまま渡されるより、PDFのほうが心理的に受け取りやすいだろう、という配慮です。)

2. 完全ローカル HTML Previewer

AIが出力したHTMLを確認するために、オンラインのプレビューツールに業務データ（インシデント内容や社内情報など）を貼り付けるのは、セキュリティの観点から避けるべきです。

そこで、ブラウザ上でローカル完結する 「Simple HTML Previewer」 を用意しました。リポジトリにある Simple_HTML_Previewer.html をPCにダウンロードし、ブラウザで開くだけで、安全なオフラインプレビュー環境が整います。

【技術解説】なぜ安全にプレビューできるのか？

セキュリティを懸念される方に向けて、コアとなるレンダリング処理のコードを解説します。

Simple_HTML_Previewer.htmlの抜粋
// --- プレビューの更新処理 ---
function updatePreview() {
  const htmlCode = editor.value; // 左側のエディタ入力値
  const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
  
  doc.open();
  doc.write(htmlCode); // iframe内に直接DOMを書き込み（通信なし）
  doc.close();

  try {
    // データはブラウザのローカルストレージにのみ保存
    localStorage.setItem('simplePreviewCode', htmlCode);
  } catch(e) {}
}

安全性のポイント

  1. 外部通信が発生しない
    fetch や XMLHttpRequest といった外部と通信する処理は含まれていません。入力された文字列は、iframe 内にブラウザのメモリ上でのみDOMとして構築されます。
  2. 外部リソースに依存しない
    プレビューア自体のUI（アイコンやCSS）も、すべて1ファイル内に記述されており、外部サーバー（CDNなど）へリクエストを送りません。
  3. データ保存はローカルのみ
    誤ってタブを閉じた際の復元用に localStorage を使用していますが、これはご利用のPC内にのみ保存される仕組みです。

ネットワークから切断された完全なオフライン状態でも動作するため、セキュリティ厳し目の環境下でも安心してご利用いただけます。

インシデント報告書をサクッと作成してみよう

それでは、実際の業務フローを想定した手順をご紹介します。

ステップ1（AIへの入力）
社内で許可された生成AIにメタプロンプトを入力し、続けて「メモや箇条書き」をそのまま貼り付けます。
ここまでは、似たようなことをやってる方も多いでしょうから、違和感ないと思います。
(以下は、架空のインシデントです。)

AIへの入力例
レポートタイトル：顧客DBサーバー 一時ダウンのインシデント一次報告
メモ：
- 14:00頃、顧客から「ログインできない」と問い合わせが複数あり。
  - 14:15に調査開始。DBサーバー（10.xx.xx.xx）のCPU使用率が100%になっていた。
- 原因は昨日リリースした集計バッチの影響の可能性が高い。
- 14:45に該当バッチを停止したところ復旧した。
- 恒久対応については明日の朝会で協議する。現在は正常稼働中。

ステップ2（プレビューの確認）
AIが1ファイルにまとまったHTMLコードを出力します。
それをローカルの Previewer.html のエディタ（左画面）に貼り付けると、右画面にデジタル庁準拠の整ったレポートが即座に表示されます。
(ペースト用のボタンなども右上に用意していますので、それを押してもOKです。)

image.png

ステップ3（PDFとして保存）
あとは「PDF印刷用のボタン」 を押すだけ。
見出しの階層や読みやすい行間、適切な改ページが施されたドキュメントの完成です。

長文の議事録や、込み入った情報の整理でも手順は同じです。数分の作業で、共有に十分な「及第点のレポート」を作成できます。

おわりに

「最新のAIツールが自由に使えない環境だから、業務効率化は難しい」と諦めてしまうのはもったいないことです。

制限された環境であっても、「ちょっと工夫したプロンプト」と、「制約を逆手に取ったシンプルなフロントエンド技術（1ファイル完結HTML）」を組み合わせることで、ドキュメントの体裁づくりという負担を大きく軽減できます。

これにより生み出された時間と認知リソースを、ビジネスにおいて本当に重要な「本質的な思考やコミュニケーション」に充てていただければ幸いです。ぜひ、明日からの業務にお役立てください。

参考・引用元:

業務でAIを利用する際は、必ず自社のセキュリティポリシーを遵守し、許可されたAIツールへ入力を行ってください。プレビューア自体は完全オフラインで安全に動作しますが、AIへの入力情報の取り扱いは各社のガイドラインに従っていただきますようお願いいたします。*

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
Sign upLogin
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?