対象読者：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; }
}
※製造できなかったら、ごめんね