改善提案書ジェネレータ（Claude Code版 / Codex版スキル）
改善案と対象ページのURLを渡すと、実際の画面に変更を試験適用して撮影した リアルな改善後イメージつきの改善指示書PowerPointを生成するツールです。 Claude Code版とCodex版をご用意しています。
このページは、ご案内した方向けの配布ページです。サイト内の他のページからはリンクしていません。 ご不明な点は本ページ末尾の連絡先までお願いします。
何ができるか
アクセス解析から見つけた課題でも、打ち合わせで出た案を箇条書きにしたものでも、 改善案をテキストかファイルで渡すだけで、提案書の形まで一気に仕上がります。 手作業だと一番時間のかかる「改善後の画面イメージを作る」ところを、AIが引き受けます。
- STEP 1改善案と対象URLを渡す
- STEP 2AIが実画面に変更を試験適用して撮影（または描き起こし）
- STEP 3PowerPointが生成される
改善後イメージの作り方は3方式（自動で選ばれます）
| 実画面パッチ | 既存ページの見た目を変える案。実際のページに変更を試験適用して撮影するため、「実サイトに変更が入った画面」そのものが資料に載ります。現状画面も同時に取得され、Before/Afterの条件が揃います |
|---|---|
| SEOプレビュー | タイトル・ディスクリプション・見出し構成の案。検索結果（SERP）風のBefore/After対比と見出し構成の変更図が自動生成されます。文字数の超過警告つき |
| 手描きモック | 新規ページなど実ページの改変で表現できない案。実サイトから配色・フォント・ボタン形状を実測抽出し、その値でAIが描き起こします |
生成される資料の構成
| 表紙 | タイトル・クライアント名・サイト名・作成月 |
|---|---|
| 本資料について | 資料の読み方と、画面イメージの位置づけの断り書き |
| 改善案リスト | 全件の一覧表。難易度と期待効果を3段階で表示し（判断基準も資料に明記）、優先して着手すべき案を強調 |
| 改善指示書 | 1案につき1枚。左に概要・根拠・期待効果・掲載文言・効果測定の指標・実装手順、右に現状と改善後のイメージ |
| 拡大図 | SEOプレビューなど画像が細かい案のみ、指示書の直後に全幅表示で自動追加 |
配色は初期状態で業種を選ばない中立なトーンにしてあります。 ブランドカラーを伝えれば、その色を基準に資料全体の配色が組み直されます。
動作環境
| AIコーディング環境 | Claude Code または Codex（どちらか一方があれば動きます） |
|---|---|
| Python | 3.10 以上 |
| Playwright | 画面イメージの生成に使用。導入手順は同梱のREADMEに記載 |
| OS | Windows で動作確認済み（macOS は未検証） |
画像生成用のAPIキーは必要ありません。 画面イメージのHTMLはAI自身が書くため、お使いの環境の範囲内で完結します。 別途の従量課金は発生しません。
ダウンロード
お使いの環境に合わせてお選びください。生成される資料はどちらも同じです。
v1.1.0（2026年8月）の主な変更 — 改善後イメージが3方式になりました（実画面パッチ／SEOプレビュー／実測トークンでの描き起こし）。 あわせて、難易度・期待効果の判断基準の明記、効果測定の指標欄、画像が細かい案の拡大図スライドを追加しています。 v1.0.0からの移行は、フォルダを丸ごと入れ替えるだけです。
導入手順
1. スキルを配置する
ZIPを展開すると improvement-deck フォルダが出てきます。これを次の場所に置いてください。
| Claude Code 版 |
Windows：C:\Users\ユーザー名\.claude\skills\macOS / Linux： ~/.claude/skills/
|
|---|---|
| Codex 版 |
Windows：C:\Users\ユーザー名\.codex\skills\macOS / Linux： ~/.codex/skills/
|
2. 必要なパッケージを入れる
配置したフォルダで、次の2つを順に実行します。どちらの版でも共通です。
pip install -r requirements.txt
playwright install chromium2行目は画面描画に使うブラウザ本体（約150MB）を取得します。初回のみ数分かかります。 この2行目を忘れると、画面イメージの生成だけが失敗します。
3. 動作を確認する
Claude Code または Codex を開いて、次のように頼んでください。
同梱のサンプル改善案で提案書を作ってくださいPowerPointファイルが生成されれば導入完了です。
使い方
改善案を渡して頼むだけです。
改善案をまとめたので提案書を作ってください。
（ここに箇条書き、またはファイルのパス）
「改善提案書を作って」「改善案をパワポにして」といった言い方で起動します。
Codex版では $improvement-deck と明示的に指定することもできます。
情報が足りない場合はAIから質問が入ります。
各改善案に対象ページのURLを添えるのがおすすめです。 実画面パッチ方式・デザイン実測の起点になり、仕上がりのリアルさが大きく変わります。 SEO施策は狙うキーワードと検索意図を添えてください（現状のタイトル・見出しはURLから自動取得されます）。 詳しい使い方は同梱のREADMEをご覧ください。
ご利用にあたって
- 生成される画面イメージは改善の方向性を伝えるためのものであり、実装確定のデザインではありません。 実際に適用する際は、既存のデザインガイドラインやシステム制約との整合を別途ご確認ください。 この断り書きは資料内にも自動で入ります。
- 実画面パッチは、お使いのPC内のブラウザ表示に変更を試験適用して撮影する仕組みで、 対象サイトには一切変更を加えません。撮影は通常のページ閲覧程度のアクセスです。 自社サイト、またはご依頼を受けたクライアントサイトなど、提案の正当な対象に限ってご利用ください。
- 計測設定や運用フローなど、画面の見た目が変わらない改善案には画面イメージが付きません。 これは仕様で、理由が資料に注記されます。
- 出力内容の正確性は保証できません。提出前に必ず内容をご確認ください。
- 本ツールの利用によって生じた損害について、当社は責任を負いかねます。
お問い合わせ
不具合のご報告や改善のご要望は、ご案内時の連絡先までお寄せください。 いただいた内容は今後の更新の参考にさせていただきます。
improvement-deck v1.1.0（Claude Code版 / Codex版・2026年8月18日更新）／ 提供: 株式会社HAPPY ANALYTICS
社内および受託業務でのご利用は自由です。第三者への再配布をご希望の場合は、事前にご一報ください。