Anthropic社学習コースナビゲーター

以下の仕様でAnthropicAcademy社内向け活用ガイドHTMLを作成してください。 【デザイン仕様】 - カラー：ネイビー(#1a2744)×ホワイト、アクセントにblue(#2563eb) - フォント：Noto Sans JP（Googleフォント） - タブ切り替え型UI（JavaScriptのshowTab関数） - レスポンシブ対応・max-width:1080px中央寄せ 【タブ構成（5タブ）】 1. はじめに：受講動機・Anthropic企業概要・資格価値・LinkedIn連携フロー・CTAボタン 2. コース一覧：全17コースをカードグリッド表示。カテゴリフィルター付き。各カードに受講するボタン（skilljar URLリンク） 3. 学習ロードマップ：パスA（ビジネス）・パスB（開発者）・パスC（クラウド）・修了証活用の4セクション 4. 用語集：AI関連用語15件以上。検索ボックス付き 5. システム連携概要：SVGアーキテクチャ図（ユーザー層→MCP→AIコア→知識層→インフラ層の5層構造）＋製品一覧表 【コンテンツ要件】 - 対象：社内向け（社名・個人情報は入れない） - skilljar URL形式：https://anthropic.skilljar.com/[コース名] - 外部リンク：anthropic.com・docs.anthropic.com・modelcontextprotocol.io等を積極的に付与 - フッター：「Anthropic社学習コースナビゲーター ／ 更新：YYYY-MM-DD」のみ 【UX要件】 - 右下ナビゲーションボタンなし（社内向けページのため） - 受講ボタンはカード下部に統一（flex-column + margin-top:auto） - 新規登録ボタンは水色枠内中央配置 - 社名・個人情報が一切含まれないこと 完成後、Geminiに生ファイルを渡して構造・動作・リンクのコードレビューを依頼してください。

以下の仕様で「{{title}}」というHTML資料を作成してください。 【目的・対象】 - 目的：{{purpose}} - 対象読者：{{audience}} - 文体・トーン：{{tone}} - 作成日：{{date}} 【デザイン仕様】 - メインカラー：{{primary_color}}×ホワイト - アクセントカラー：{{accent_color}} - フォント：{{font}}（Googleフォントから読み込み） - タブ切り替え型UI（JavaScriptのshowTab関数で実装） - レスポンシブ対応・max-width:1080px中央寄せ - カードグリッド・テーブル・notice（情報ボックス）スタイルを統一CSS変数で定義 【タブ構成（{{tab_count}}タブ）】 {{tab_list}} 【必須コンテンツ要素】 {{key_content}} 【インクルード要件】 - 外部リンク・参考情報：{{include}} - 公式ソースへのリンクを積極的に付与 【除外要件】 - 含めない情報：{{exclude}} 【UX要件】 - タブidは tab0〜tab(N-1) で連番統一すること - doc-footerは最下部に1個のみ配置すること - 各タブのコンテンツが他タブに混入しないこと - script重複を避けること 【セルフチェック実施】 完成後、以下の観点でセルフチェックを実施し結果を報告してください： 1. タブid整合性（tab0〜連番） 2. doc-footer重複なし 3. 除外情報の残存なし 4. 角の立つ表現なし 5. 事実と異なる記述なし 6. script重複なし 【外部レビュー推奨】 複数パッチ積み重ね・タブ構造変更などのメジャーアップデート時は、生ファイルをGeminiに渡してコードレビューを依頼すること。

【入力項目記入欄】 title: audience: purpose: date: primary_color: accent_color: font: tab_count: tab_list: 1. 2. 3. key_content: include: exclude: tone:

{ "title": "Anthropic社学習コースナビゲーター", "audience": "社員・関係者", "purpose": "Anthropic Academy受講の動機づけと役割別ガイド", "date": "2026-05-13", "primary_color": "#1a2744", "accent_color": "#2563eb", "font": "Noto Sans JP", "tab_count": 6, "tab_list": [ {"name": "はじめに", "purpose": "受講動機・資格価値・LinkedIn連携フロー"}, {"name": "コース一覧", "purpose": "全17コースをカードグリッド表示・フィルター付き"}, {"name": "学習ロードマップ", "purpose": "役割別の受講順序（ビジネス/開発/クラウド）"}, {"name": "（参考）用語集", "purpose": "AI関連用語と検索機能"}, {"name": "（参考）システム連携概要", "purpose": "SVGアーキテクチャ図と製品一覧"}, {"name": "（参考）本資料作成手順", "purpose": "再現・改修方法・一撃プロンプト"} ], "key_content": [ "比較表（資格あり/なし）", "SVG 5層アーキテクチャ図", "カードグリッド + 受講するボタン", "用語集 + 検索ボックス" ], "include": [ "anthropic.skilljar.com への受講リンク", "docs.anthropic.com への参照リンク", "modelcontextprotocol.io への参照リンク" ], "exclude": [ "社名・個人情報", "断定的な未確認情報", "煽り表現" ], "tone": "業務文書・敬体・穏やか", "output_path": "/mnt/user-data/outputs/navigator.html", "deploy": { "enabled": true, "target_repo": "C:/git/hancho-docs", "github_pages_url": "https://dx-nexus.github.io/knowledge-hub/" } }

あなたはHTML資料の自動生成エージェントです。以下の手順を順番に実行してください。 【STEP 1】config.jsonを読み込む - パス: ./config.json - 未指定の変数があれば下記デフォルトを適用： * title: "学習コースナビゲーター" * audience: "社員・関係者" * primary_color: "#1a2744" * accent_color: "#2563eb" * font: "Noto Sans JP" * tab_count: 5 * tone: "業務文書・敬体・穏やか" * date: 今日の日付（ISO形式） 【STEP 2】HTML資料を生成 - config.jsonの仕様に基づき、既存の `Anthropic_Academy_Plan_Internal.html` を構造のテンプレートとして参照し、新しいHTML資料を生成する - タブ切り替え型UI（showTab関数使用） - レスポンシブ対応・max-width:1080px中央寄せ - カードグリッド・テーブル・notice・SVGアーキテクチャ図のスタイルを統一CSS変数で実装 - 各コードブロックにコピペボタン（copyCode関数）を実装 - タブidはtab0〜tab(N-1)で連番統一 【STEP 3】セルフチェック実施 完成後、以下6項目を実施し結果を報告： - タブid整合性 - doc-footer重複なし - exclude指定情報の残存なし - 角の立つ表現なし - 事実と異なる記述なし - script重複なし 【STEP 4】ファイル配置 - output_pathに保存 - deploy.enabled=trueの場合： 1. target_repoにコピー 2. git add . && git commit -m "auto: ${title} 自動生成" 3. git push 4. GitHub Pages URLを報告 【STEP 5】完了報告 - 生成ファイル数・サイズ - セルフチェック結果 - 公開URL - 次のステップ（Geminiレビュー依頼コメントを生成）

# Claude Codeのセッションで実行 cd C:\git\hancho-kb\scripts # config.jsonを編集してから↓を実行 claude "$(cat instruction.md)" # あるいはワンライナーで claude "config.jsonを読んで学習コースナビゲーターHTMLを生成、hancho-docsにコピーしてpush"