対象読者：AIビギナー / プログラミング初心者 / 試験勉強中のエンジニア
難易度：⭐☆☆☆☆（コピペするだけでOK！）
作業時間：1トピック約3〜5分

🎯 この記事で作れるもの

完成品	特徴
📱 スマホ対応HTML図解	タップで答え表示・自動スライド
🌸 アニメーション付き	パケットが飛ぶ・フローが動く
💡 具体例 + 抽象概念の両方	「たとえ話」→「技術的説明」
❓ 確認クイズ内蔵	タップで採点・解説付き
📌 チートシート自動生成	試験直前の総まとめ

実際に作ったもの（LPIC-2 202試験対策）：

DNSを可愛く、わかりやすく解説する動く図解資料（HTML形式のファイル）

アーティファクト
https://claude.ai/public/artifacts/095d8fb7-9510-4612-8053-5431e09aa590

全単元統合基礎理解用の自動スライド（HTML形式のファイル）など

アーティファクト
https://claude.ai/public/artifacts/e7455794-f5c6-4518-9fbd-691af2c73b08

🧠 全体の仕組み（3行で理解）

1. 教科書/チェックシートを写真で撮る
2. Claude（AI）に画像を貼り付けてプロンプトを入力
3. 1ファイルのHTMLが生成される → ブラウザで開くだけ

📋 プロンプト集（コピペして使ってください）

🔰 Level 1：基本プロンプト（最初にこれを使う）

以下の画像の内容を、新人エンジニア文系女性向けに
スマホで見られる動くHTML図解ページを作ってください。

【デザイン要件】
- フォント：Kaisei Decol（見出し）+ Zen Kaku Gothic New（本文）+ JetBrains Mono（コード）
- 背景：linear-gradient(135deg, #fff0f5, #fff8e1, #f3e5f5)
- さくら花びらアニメーション（40個、CSSアニメーション）
- プログレスバー（shimmerアニメーション付き）

【コンテンツ要件】
- 各項目に「💡 たとえ話」セクションを入れる（身近な例え）
- 「具体的イメージ」と「抽象的な概念」の両方を説明
- 動くフロー図（矢印アニメーション）
- コードブロック（ダークテーマ・シンタックスハイライト）
- 確認クイズ（タップで答え + 解説）
- 試験直前チートシート

【制約】
- 1ファイル完結（外部JS/CSSなし、Google Fontsのみ外部）
- スマホ対応（max-width, タッチスワイプ）
- かわいいピンク系デザイン

🔰 Level 2：同じデザインで続きを作るプロンプト

画像を送った後に使う：

同じ仕様で上記画像を解説して！
新人エンジニア文系女性向け、動くモーション図解、スマホ見れるの作って

💡 ポイント：最初に「同じ仕様で」と書くだけで、前回のデザインを引き継いでくれる

🔰 Level 3：全部まとめて1ファイルにするプロンプト

これまで作った全ファイルを統合して、
自動スライドショー形式の1ファイルHTMLにしてください。

【機能要件】
- カテゴリタブで絞り込み
- ← → ボタン or スワイプで移動
- 自動スライド機能（OFF/5秒/8秒/12秒/20秒）
- スライド番号表示
- プログレスバー
- 最後のスライドで紙吹雪アニメーション

【デザイン】
- ダークテーマ（背景 #0a0412）
- カテゴリごとに色分け
- 全画面レイアウト（スクロールなし）

🏗️ 仕様書プロンプト（上級編）

より精密に作りたい場合はこの仕様書を渡す：

以下の仕様でスタディフラッシュカードHTMLを1ファイルで作ってください。

# ===== デザイン仕様 =====
## カラーパレット（CSS変数）
- --pk: #e91e8c（メインピンク）
- --pk2: #f48fb1 / --pk3: #fce4ec / --pk4: #880e4f
- --lv: #ce93d8 / --lv2: #7b1fa2 / --lv3: #f3e5f5（ラベンダー）
- --cr: #fff8e1 / --cr2: #ffe082 / --cr3: #ff8f00（クリーム/ゴールド）
- --sk: #80deea / --sk2: #00838f / --sk3: #e3f2fd（スカイ）
- --mn: #a5d6a7 / --mn2: #2e7d32 / --mn3: #e8f5e9（ミント）
- --pc: #ffab91 / --pc2: #bf360c / --pc3: #fbe9e7（ピーチ）

## フォント（Google Fonts）
- 見出し: Kaisei Decol（font-weight:700）
- 本文: Zen Kaku Gothic New
- コード: JetBrains Mono（font-weight:700）

## アニメーション必須
- さくら花びら：40個、CSSアニメーション（@keyframes fall）
- プログレスバー：shimmerアニメーション
- フロー矢印：pulse（明滅）
- カード切替：cardpop（scale + translateY）
- コードは手動シンタックスハイライト（.c/.k/.v spanクラス）

# ===== UIコンポーネント =====
## カードレイアウト
- 左パネル：問題文 + たとえ話 + 図解
- 右パネル：答え（blur → タップで表示） + 解説

## 図解の種類（HTMLで作成）
- フロー図：flexbox + アニメーション矢印
- 比較表：grid 2カラム
- コードブロック：#1e1e2e背景、JetBrains Mono
- テーブル：border-collapse、ヘッダーはピンクグラデ

## コントロール
- ← → ナビゲーション
- ドットインジケーター（最大20個）
- 速度選択：OFF / 3秒 / 5秒 / 8秒 / 12秒
- キーボード：← → で移動、スペースで答え表示
- タッチ：左右スワイプ50px以上で移動

# ===== お願いしたい要件 =====
（ここに「DNS基礎」「Apache設定」など具体的なトピックを書く）

💡 AIに伝えると効果的なキーワード集

図解スタイルの指定

キーワード	効果
`具体的イメージと抽象概念の両方`	「たとえ話」と「技術説明」の二段構え
`身近な例えで`	電話帳・コンビニ・郵便局などに例えてくれる
`動くモーション図解`	アニメーションを積極的に入れてくれる
`フロー図で`	矢印でつながった処理の流れ図
`比較表で`	2〜3カラムの比較カード

デザインの指定

キーワード	効果
`かわいいピンク系`	パステルカラー・丸みのあるデザイン
`ダークテーマ`	セキュリティ系など重めなトピックに
`スマホ対応`	viewport設定・タッチ操作・フォントサイズ調整
`1ファイル完結`	外部依存なし・配布しやすい形式

対象読者の指定

指定	効果
`新人エンジニア向け`	専門用語を平易に説明
`文系女性向け`	技術的な背景知識がなくても理解できる
`試験直前`	チートシート・重要度の強調

🔄 ワークフロー（実際の手順）

Step 1: 教科書のページを写真撮影（スマホでOK）
          ↓
Step 2: Claudeに画像をアップロード
          ↓
Step 3: Level 1プロンプトを貼り付けてSend
          ↓
Step 4: HTMLが生成される（約1〜2分）
          ↓
Step 5: コードをコピー → index.htmlとして保存
          ↓
Step 6: ブラウザで開く or スマホに転送
          ↓
Step 7: 次のページを写真撮影して「同じ仕様で」と送る
          ↓
Step 8: 全部できたら「統合して自動スライドに」と送る

📐 構成要素の詳細解説

① たとえ話ボックス（最重要！）

<!-- AIに「たとえ話を入れて」と伝えると自動生成される -->
<div class="analogy">
  DNSは「インターネットの電話帳係」。
  ドメイン名（名前）をIPアドレス（番号）に変換してくれる
</div>

プロンプト例：

各コマンドの説明に「日常生活のたとえ話」を必ず入れてください。
例：DNS=電話帳、iptables=関所の番人、DHCP=自動的にお部屋を割り当てる旅館フロント

② 具体・抽象の2カラム表示

<!-- 「具体的なイメージ」と「抽象的な概念」を分けて説明 -->
<div class="concept-grid">
  <div class="concrete">具体例：コンビニのATMで暗証番号を入力</div>
  <div class="abstract">抽象：ユーザー認証 = ID+秘密情報で本人確認</div>
</div>

プロンプト例：

各項目を「具体的なイメージ（初心者でもわかる例）」と
「抽象的な概念（技術的な定義）」の2つに分けて説明してください

③ 動くフロー図

プロンプト例：
「DNSの問い合わせフロー」「DHCPのDORA手順」など
プロセスは必ず→矢印のアニメーション付きフロー図にしてください

④ クイズ機能

プロンプト例：
各セクションの最後に確認クイズを5問入れてください。
- タップで答えを選ぶ形式
- 正解・不正解で色が変わる
- 解説文も表示する
- 全問回答したらスコア表示と紙吹雪アニメーション

🎨 デザインカスタマイズレシピ

セキュリティ系（ダークテーマ）

デザインはセキュリティをイメージした
ダークテーマ（背景 #0a0412）で
赤いアクセントカラー（#ef4444）
走査線アニメーション付きで

可愛い系（ライトテーマ）

デザインはパステルピンク＆ラベンダーの
かわいいガーリーテイストで
さくら花びらが舞い落ちるアニメーション付きで

シンプル系（モノクロ）

シンプルでミニマルなデザイン
フォントは明朝体系で上品に
アニメーションは控えめに

🚨 よくある失敗と対処法

❌ 失敗1：「コードが途中で切れた」

原因：スライド数や内容が多すぎてトークン制限に達した

対処法：

【分割するプロンプト】
「DNSセクションのみ」を先に作ってください。
次のメッセージでWebサーバーセクションを追加します。

❌ 失敗2：「画像の文字が読み取れなかった」

原因：写真がぼけている・斜めになっている

対処法：

【テキストで補足するプロンプト】
画像が見にくい場合のために、内容を文字で補足します：
・allow-query：DNS問い合わせを受け付けるホスト
・allow-transfer：ゾーン転送を許可するホスト
（以下省略...）

❌ 失敗3：「デザインがバラバラになった」

原因：会話が長くなると前回の仕様を忘れることがある

対処法：

【仕様を再指定するプロンプト】
前回と同じ仕様で続きを作ってください。
仕様の要点：
- ピンク系カラー（--pk: #e91e8c）
- さくら花びらアニメーション
- たとえ話ボックス必須
- スマホ対応1ファイル完結

❌ 失敗4：「アニメーションがカクカクする」

原因：複雑なJSアニメーションを使いすぎ

対処法：

アニメーションはCSSのみで実装してください。
JavaScriptのsetInterval/requestAnimationFrameは
最小限に抑えてください。

📊 プロンプト効果比較表

プロンプト	生成されるもの	推奨用途
`図解して`	シンプルなテキスト＋基本的なCSSボックス	内容の確認
`動くHTML図解で`	アニメーション付きHTML	学習・記憶
`スマホで見れる動く図解`	モバイル最適化+タッチ操作	通勤学習
`新人エンジニア向けにたとえ話で`	わかりやすい解説＋例え話	初学者向け
`試験直前チートシートも`	重要項目まとめ付き	直前対策

🏆 完成品のクオリティを上げるコツ

コツ1：具体的な「対象者」を設定する

❌ 悪い例：「わかりやすく図解して」
✅ 良い例：「文系出身の新人エンジニア（20代女性）向けに、
          コンビニや日常生活の例えを使って図解してください」

コツ2：「何が難しいか」を伝える

特に「required と requisite の違い」
「mbox と Maildir の違い」
「ldap系コマンドとslap系コマンドの使い分け」
が混乱しやすいので、視覚的に比較できるようにしてください

コツ3：「試験で出やすいポイント」を強調させる

試験頻出問題に ⭐ マークをつけて
特に重要な暗記事項は背景色を変えて強調してください

コツ4：アニメーションで「動き」を伝える

以下の概念は動くアニメーションで説明してください：
- DHCPのDORA手順（パケットが飛ぶイメージ）
- iptablesのパケットフィルタリング（関所を通過するイメージ）
- DNSの問い合わせフロー（質問と回答が往復するイメージ）

📁 ファイル管理のベストプラクティス

study/
├── 01_dns.html          ← DNS図解
├── 02_web.html          ← Webサーバー図解
├── 03_nfs_samba.html    ← ファイル共有図解
├── 04_dhcp_pam.html     ← NW管理・PAM図解
├── 05_ldap_mail.html    ← LDAP・メール図解
├── 06_security.html     ← セキュリティ図解
└── 00_all_slides.html   ← 全部統合（最終版）

🔁 他の試験・勉強に応用するプロンプト

AWS認定試験向け

AWSのサービス一覧を、同じ仕様のスタディカードHTMLで作ってください。
EC2・S3・RDS・VPC・IAM の5サービスを
「コンビニのサービス」に例えて図解してください

基本情報技術者試験向け

以下の画像（基本情報の教科書ページ）を、
IT初心者でもわかるようにたとえ話 + 動くHTML図解で解説してください

英単語・資格試験

英単語カード形式で、表面に単語・裏面に意味+例文+語呂合わせを
タップで反転するHTMLカードを作ってください

📝 まとめ

最小構成プロンプト（これだけで8割の品質が出る）

この画像の内容を、スマホで見られる動くHTML図解に変換してください。

要件：
- 身近なたとえ話で説明（コンビニ・電話帳・郵便局など）
- 具体的なイメージと技術的な定義の両方
- アニメーション付きフロー図
- 確認クイズ（タップで答え表示）
- かわいいピンク系デザイン
- 1ファイル完結（外部JS/CSS不要）
- スマホ対応

対象読者：ITの知識がない文系の新人エンジニア

全部込みの完全版プロンプト

最初に「Level 2：仕様書プロンプト」を渡してから
画像を送れば、毎回高品質なものが生成される。

💬 最後に

このプロンプトレシピで作った教材の特徴：

記憶に残りやすい：たとえ話→技術説明の順番
スキマ時間に使える：スマホ1台で完結
試験直前も安心：チートシート付き
0円で作れる：Claude無料プランでも可能

「難しい技術書を写真で撮ってAIに渡す」だけで
プロ品質の教材が手に入る時代になりました。

ぜひコピペして使ってみてください！🌸

付録：使用したCSSクラス名一覧（再利用用）

/* たとえ話ボックス */
.analogy { border-left: 3px solid var(--pk); }
.analogy::before { content: "💡 たとえ："; }

/* 重要ポイント */
.point { border-left: 3px solid var(--sky2); }
.point::before { content: "⭐ "; }

/* 警告 */
.warn { border-left: 3px solid var(--cr); }
.warn::before { content: "⚠️ "; }

/* フロー矢印アニメーション */
.fa { animation: arrowPulse 1.5s ease-in-out infinite; }
@keyframes arrowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; transform: scaleX(1.3); }
}

/* カードポップアニメーション */
@keyframes cardpop {
  from { transform: scale(0.96) translateY(8px); opacity: 0.7; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

※製造できなかったら、ごめんね