🌸 Claudeで「アニメ図解つき学習教材」を量産するプロンプト集

文系エンジニアの資格勉強に使えます｜コピペOK

IT の資格勉強って、コマンドの暗記ばかりで眠くなりますせんか・・・😴

そこで Claude に頼んで、自動でアニメが動く・クリックで解説が出るHTML教材を作ってもらいました。

この記事では、私が実際に使ったプロンプトをそのままコピペできる形でまとめています。LPIC 以外の資格勉強にも、社内研修にも応用できます！※多分

作るイメージはこんな感じ

成果物のイメージ※アーティファクトサンプル

https://claude.ai/public/artifacts/f3d0d89e-e4da-449f-8f7a-42ceb2d22f02

https://claude.ai/public/artifacts/f3d0d89e-e4da-449f-8f7a-42ceb2d22f02

---

📋 もくじ

1. 作れる教材の種類（完成イメージ）
2. 基本プロンプト：デザイン指定編
3. アニメ図解を作るプロンプト
4. 模試ミス特化 復習教材プロンプト
5. コマンド図解プロンプト
6. うまくいかないときの修正プロンプト
7. まとめ：プロンプトの組み立て公式

---

1. 作れる教材の種類

実際に Claude で作れた教材の一例です。

🌸 LPIC-2 模試ミス 復習教材（HTMLファイル・ブラウザで開くだけ）

• 👩‍💻 一般ユーザーが権限の壁でバウンスするアニメ（Q5 権限問題）
• 💀 RAIDディスクが点滅して再構築バーが伸びるアニメ（Q12 mdstat）
• 🟩 SSDのトリムを「実行ボタン」で体験（Q7 fstrim）
• 📦 LVMの3層が積み重なって登場（Q13 vgreduce）
• 📦 パケットが左から右に流れてポート番号を学ぶ（Q57 FTP）
• 🎉 全問スクロールで自動進捗バー

HTMLファイルとして出力されるので、ブラウザで開くだけ。インストール不要・オフラインOKです！※出来なかったらごめんね

2. 基本プロンプト：デザイン指定編

最初にデザイン仕様をしっかり伝えると、追加依頼のたびに「ピンク系で」と繰り返す必要がなくなります。

以下のデザイン仕様でHTMLの学習教材を作ってください。

【デザイン仕様】
- フォント：Kaisei Decol（見出し）+ Zen Maru Gothic（本文）
- カラー：ピンクグラデーション × クリーム色のベース
- 重要コマンドはすべて赤文字（code タグ）で強調
- レスポンシブデザイン（スマホ・PC両対応）
- カードUIで各トピックを整理

【コンテンツ仕様】
- 試験で問われる内容を網羅
- コマンドにはふりがなを振る（ruby タグ）
- 図解はホバーまたはクリックで解説が表示される
- 練習問題は選択肢クリックで正誤判定
- 上部に学習進捗バー（スクロールで自動更新）

【対象読者】
文系女性の新人エンジニア。IT用語をやさしく、たとえ話を多く使って説明してください。

---

3. アニメ図解を作るプロンプト

「動く図解」を作ってもらうためのプロンプトです。自動アニメとクリック操作の両方を指定するのがコツです。

3-1. 基本アニメ依頼プロンプト

以下の内容でアニメ図解のHTMLを作ってください。

【必須アニメーション】
① 「自動で動く」モーション図解（ページを開くと勝手に動く）
② 「クリックまたはホバー」で詳細解説が出る図解

【たとえ話ルール】
- 必ず日常生活のたとえ話を入れる（例：マンション、スマホ、料理など）
- 専門用語を使う前にたとえ話で概念を伝える
- アニメはそのたとえ話を視覚化する

【アニメの種類（使い分ける）】
- 「流れ」を表す：粒子が左→右に流れるアニメ
- 「状態変化」：色が変わる・フラッシュするアニメ
- 「積み重ね」：下から上に積み上がるアニメ
- 「到達できない壁」：キャラが壁でバウンスするアニメ
- 「進捗」：バーが伸びるアニメ
- 「存在する/しない」：点滅するアニメ

【説明する内容】
[ここに学習内容を貼り付ける]

3-2. 具体的なアニメ個別指定

もっと細かく指定したいときはこちら。「どのコンテンツにどのアニメか」を書きます。

以下のアニメを実装してください。

【Q7 fstrim の図解】
- SSDのセルをグリッドで表示（10×4マス）
- 赤セル=使用中、黄セル=削除済み（汚れあり）、緑セル=クリーン
- 「fstrim を実行！」ボタンを押すと黄→緑に順番に変化するアニメ
- たとえ話：消しゴムのお掃除

【Q12 RAID5の図解】
- ディスク4つ（ok/ok/broken/spare）をカードで表示
- brokenカードは点滅するアニメ（blink）
- 再構築バーがゆっくり伸びるアニメ（recovery=15.9%を表現）
- 各カードをクリックすると解説テキストが出る
- たとえ話：3人乗りの車

【Q19 sync の図解】
- 「メモリバッファ → sync → ディスク」の3ボックス横並び
- 矢印がゆっくりバウンスするアニメ
- 粒子（丸い点）が左から右に流れるアニメ（自動）
- たとえ話：メモ帳の「今すぐ保存！」ボタン

---

4. 模試ミス特化 復習教材プロンプト

試験の模試結果を貼り付けるだけで、不正解問題に特化した復習教材が作れます。

💡 コツ： 不正解だった問題だけを貼ると精度が上がります。全問貼ると指示が分散することがあります。

LPICの模試で間違えた問題の復習HTMLを作ってください。

【デザイン】
- ピンクグラデーション × クリーム色
- フォント：Kaisei Decol（見出し）+ Zen Maru Gothic（本文）
- コマンドは赤文字、正解コマンドは緑背景
- スマホ・PC 両対応

【教材の構成（各問に必ず入れる）】
1. 問題文の再掲
2. 日常生活のたとえ話（マンション・料理・スマホなど）
3. 自動で動くアニメ図解（1問につき1つ）
4. 正解コマンドのふりがな付き表示
5. 不正解の選択肢の「なぜ違うか」の解説
6. セットで覚えるコマンド比較表

【インタラクティブ要素】
- クリックで解説が出るカード
- 選択肢クリックで正誤判定するミニクイズ
- スクロールで自動カウントアップする進捗バー

【模試の結果】
[ここに不正解問題を全文貼り付ける]

【注意点】
- 文系女性が読むので、専門用語は必ずたとえ話で説明
- 「存在しないコマンド」の選択肢は赤でまとめる
- 量が多い場合は Part1 / Part2 に分けて作成する

---

5. コマンド図解プロンプト

5-1. 1コマンド深掘り図解

「[コマンド名]」コマンドを文系女性向けに図解してください。

【図解に含める内容】
1. 日常生活のたとえ話（1つ）
2. 物理的な構造図（ホバーで解説）
3. よく使うオプション一覧（表形式）
4. 似ているコマンドとの違い比較
5. 試験でひっかかりやすい選択肢と理由

【自動アニメの指定】
- コマンドの動作を視覚的に表現するアニメを1つ作る
- たとえ話のキャラ（👩‍💻など）が動くようにする

【ひっかけ選択肢を必ず入れる】
以下のような「紛らわしいコマンド」をまとめて赤背景で表示：
- 存在しないコマンド名（架空のもの）
- 正しそうだが意味が違うオプション

5-2. 概念の違いを図解（例：物理 vs 論理）

「[概念A]」と「[概念B]」の違いを図解してください。

【図解ルール】
- 上から下への層構造図（クリックで解説）
- 「概念A ≠ 概念B」が一目で分かるように
- たとえ話：[任意のたとえ]

【アニメ】
- 概念Aを使おうとして概念Bに行って失敗するアニメ
- 正しいコマンドの実行でデータが表示されるアニメ

（使用例）
- iw dev wlan0 info と iw phy phy0 info の違い
- /dev/st0 と /dev/nst0 の違い
- vgextend と vgreduce の違い

---

6. うまくいかないときの修正プロンプト

アニメが動かないとき

アニメが動いていないので修正してください。

【確認してほしいこと】
- CSS animation の keyframes が正しく定義されているか
- animation-delay が長すぎないか（3秒以内に開始する）
- infinite で無限ループになっているか
- 要素に opacity:0 が設定されていて消えていないか

【自動で動くアニメの条件】
- ページを開いた瞬間から動き始める
- ユーザーの操作なしで繰り返す（infinite）
- 分かりやすい動き（2〜4秒周期）

スマホ表示が崩れるとき

スマホ（幅375px以下）で表示が崩れています。修正してください。

【修正してほしい箇所】
- 横スクロールが発生している
- フォントが小さすぎる（最小 12px 以上に）
- カードが画面からはみ出している
- flex レイアウトが横並びのまま→縦並びにする

@media(max-width: 580px) でこれらを対応してください。

内容を追加したいとき

以下の問題を追加してください。既存のデザインと統一してください。

【追加する問題】
[問題文と正解・解説を貼り付ける]

【追加ルール】
- 既存のカードと同じスタイル
- アニメも1つ追加する
- NAVリンクにも追加する
- 進捗バーの総問題数を更新する

---

7. まとめ：プロンプトの組み立て公式

① デザイン仕様（フォント・色・レスポンシブ）
　　＋
② 対象読者の明示（文系女性・新人エンジニアなど）
　　＋
③ アニメの種類を具体的に指定（流れる・点滅・積み重なるなど）
　　＋
④ たとえ話のテーマを指定（マンション・料理・スマホなど）
　　＋
⑤ 学習コンテンツをそのまま貼る

🎉 アニメ図解つき学習教材の完成！

❌ うまくいかないプロンプト

LPIC の勉強教材を作って。アニメもつけて。かわいくして。

✅ うまくいくプロンプト

文系女性エンジニア向けに、ピンク×クリームのデザインで、fstrimコマンドをSSDセルグリッドアニメで図解して。たとえ話は「消しゴムのお掃除」で。クリックで詳細も出して。

---

🌸 最大のコツは「アニメの種類」を具体的に書くこと！

「アニメをつけて」だけでは弱いです。「点滅する」「粒子が流れる」「バーが伸びる」など、動きのイメージを書くと格段にクオリティが上がります。

---

このプロンプトは実際に LPIC-2 の勉強に使って作ったものです。同じように試験勉強で活用してみてください 💕