🔐

漫画×対話形式 × Claude Artifacts で作る、次世代Linux学習教材のアーキテクチャ全解説

📝 はじめに

LPIC-3 Security（試験コード303-300 v3.0）を学習中で、今回は、Claude Artifacts を使って
漫画キャラ × コードブロック × インタラクティブUI を組み合わせた学習教材を作成しました。

この記事では、その 実装アーキテクチャ・ソースコード解析・カスタマイズ方法 を全公開します！

✅ 公式 lpi.org の5トピック（Topic 331〜335）のデモツールです。
スライド形式でキーボード・スワイプ操作にも対応しています。

▼ 公開アーティファクト（動作デモ）
https://claude.ai/public/artifacts/54a1cab4-b434-4e54-b0ab-67280bad6caa

▼ ソースコード
https://drive.google.com/file/d/18i1sgU7ZcpKrD-8FhtTVfpxSC2p9dspL/view?usp=drive_link

項目	内容
Topics covered	5（331〜335）
コード行数	約800行
AIキャラクター	3体（インラインSVG）
外部ライブラリ依存	0（Pure HTML/CSS/JS）

1. 全体アーキテクチャ

このアーティファクトは Pure HTML/CSS/JS（外部ライブラリなし）で構成されています。
Claude Artifacts の sandbox 環境でも完全動作するよう設計しました。

┌─────────────────────────────────────────────────────┐
│                   LPIC-3 学習教材                     │
├───────────────┬──────────────────┬───────────────────┤
│  UI Layer     │  Content Layer   │   Logic Layer     │
│  ─────────    │  ─────────────   │   ───────────     │
│  Slide System │  漫画キャラ SVG   │   スライド遷移    │
│  Panel Grid   │  コードブロック  │   タイマー制御    │
│  Animation    │  比較テーブル    │   タッチ/キー入力 │
└───────────────┴──────────────────┴───────────────────┘

データフロー:

HTML構造 → CSS変数 & アニメーション → JS制御ロジック → ユーザー操作

💡 設計方針: Cloudflare CDN等の外部リソースに依存しないことで、
オフラインでも動作・任意の環境に埋め込み可能にしました。

2. ソースコード解析

2-1. CSS変数による統一テーマ設計

全カラーを :root の CSS変数で管理。5トピックそれぞれに専用カラーを割り当て、ブランドの一貫性を保ちます。

/* :root — テーマカラー変数 */
:root {
  --ink: #0d1b2a;          /* 墨色（ボーダー・シャドウ基本色）*/
  --cy:  #00bcd4; --cy2: #006064; --cy3: #e0f7fa; /* Topic331 シアン */
  --pu:  #7c4dff; --pu2: #4527a0; --pu3: #ede7f6; /* アクセント紫 */
  --or:  #ff6d00; --or2: #e65100; --or3: #fff3e0; /* Topic332 オレンジ */
  --gr:  #00c853; --gr2: #1b5e20; --gr3: #e8f5e9; /* Topic333 グリーン */
  --rd:  #f44336; --rd2: #b71c1c; --rd3: #ffebee; /* Topic335 レッド */
  /* 各変数は {カラー名}・{濃}・{淡} の3段階で定義 */
  --shadow: 4px 4px 0 var(--ink);  /* 漫画風ドロップシャドウ */
}

ポイント: 各カラーを「ビビッド / 濃 / 淡」3段階で定義することで、
リボン・背景・テキストを統一感を持って使い分けられます。

2-2. スライドシステムの実装

全スライドを position: absolute で重ね、opacity のみで切り替えることで
DOM再構築なしの滑らかな遷移を実現しています。

/* スライドの基本構造 */
.slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;   /* 左:コンテンツ / 右:コード = 黄金比 */
  grid-template-rows: 1fr 1fr;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;        /* GPUコンポジット層で60fps */
}
.slide.active { opacity: 1; pointer-events: all; }

/* パネルのスタガーアニメーション — 160ms間隔で順次表示 */
function showPanels(i) {
  slides[i].querySelectorAll('.panel')
    .forEach((p, j) => setTimeout(() => p.classList.add('show'), j * 160));
  slides[i].querySelectorAll('.bubble,.thought,.badge')
    .forEach((b, j) => setTimeout(() => b.classList.add('pop'), j * 200 + 100));
}

opacity のみをアニメーション対象にすることで、transform と組み合わせて
GPU合成レイヤーに乗り、60fps の滑らかな表示を実現しています。

2-3. 漫画キャラクターSVGの構造

キャラクターは外部画像を使わず インラインSVG で描画。
楕円・円・パスの組み合わせでManga風のシンプルキャラを実現しています。

<!-- ユキコ先輩 SVGキャラクター構造 -->
<svg width="58" height="74" viewBox="0 0 58 74">
  <!-- ① 体（楕円） -->
  <ellipse cx="29" cy="60" rx="16" ry="12" fill="#e0f7fa" stroke="#0d1b2a" stroke-width="2"/>
  <!-- ② 顔（円） -->
  <circle cx="29" cy="25" r="16" fill="#ffe0b2" stroke="#0d1b2a" stroke-width="2"/>
  <!-- ③ 髪（楕円3つ — トピックカラーを適用） -->
  <ellipse cx="29" cy="12" rx="16" ry="9" fill="#006064"/>
  <ellipse cx="14" cy="20" rx="5"  ry="9" fill="#006064"/>
  <ellipse cx="44" cy="20" rx="5"  ry="9" fill="#006064"/>
  <!-- ④ 目（ハイライト付き） -->
  <circle cx="23" cy="25" r="2.5" fill="#0d1b2a"/>
  <circle cx="24" cy="24" r="1"   fill="white"/>  <!-- キラキラハイライト -->
  <!-- ⑤ 口（二次ベジェ曲線で笑顔） -->
  <path d="M24 31 Q29 36 34 31" stroke="#0d1b2a" stroke-width="1.5" fill="none"/>
  <!-- ⑥ 小道具（トピックに合ったアイコン） -->
  <circle cx="10" cy="62" r="5" fill="none" stroke="#ffd600" stroke-width="2"/><!-- 鍵 -->
  <rect x="13" y="60" width="7" height="3" rx="1" fill="#ffd600"/>
</svg>

設計ルール:

髪色 = そのトピックのテーマカラー（--cy2 / --or2 等）
小道具 = トピック内容に合ったアイコン（Topic331=鍵、Topic332=盾など）

2-4. アニメーション付き吹き出し

bubble クラスは 疑似要素（::before / ::after）でしっぽを描画。
JavaScriptで pop クラスを付与することでフェードインします。

/* 吹き出しのしっぽ — 二重の三角で縁取りを表現 */
.bubble::before {  /* しっぽ外側（黒縁） */
  content: ''; position: absolute;
  bottom: -10px; left: 13px;
  border-left: 8px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid var(--ink);
}
.bubble::after {   /* しっぽ内側（白塗り） */
  content: ''; position: absolute;
  bottom: -7px; left: 14px;
  border-left: 7px solid transparent;
  border-right: 3px solid transparent;
  border-top: 9px solid #fff;
}

/* フェードイン */
.bubble { opacity: 0; transform: translateY(5px); transition: opacity .5s, transform .5s; }
.bubble.pop { opacity: 1; transform: translateY(0); }

右向き吹き出しは .bubble.right で ::before / ::after の left / right を反転します。

2-5. タイマー & ナビゲーション制御

5種類の入力を goTo(idx) 関数に集約する設計で、ロジックの重複を排除しています。

const TOPICS = ["Topic 331｜Cryptography", "Topic 332｜Host Security",
                "Topic 333｜Access Control", "Topic 334｜Network Security",
                "Topic 335｜Threats & Pentest"];
const COLORS = ["#006064","#e65100","#4527a0","#1b5e20","#b71c1c"];

let cur = 0, timer = null, speed = 10000;  // デフォルト10秒自動送り

function goTo(idx) {
  hidePanels(cur); slides[cur].classList.remove('active');
  cur = (idx + slides.length) % slides.length;  // 循環インデックス
  slides[cur].classList.add('active'); showPanels(cur);
  // ヘッダー・ドットも同期更新
  document.getElementById('tsticker').textContent = TOPICS[cur];
  document.getElementById('tsticker').style.background = COLORS[cur];
}

// ① ボタン / ② タイマー / ③ キーボード / ④ スワイプ — すべて goTo() に集約
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowLeft')  goTo(cur - 1);
  if (e.key === 'ArrowRight') goTo(cur + 1);
});
document.addEventListener('touchend', e => {
  if (Math.abs(e.changedTouches[0].clientX - tx) > 60)
    goTo(e.changedTouches[0].clientX < tx ? cur + 1 : cur - 1);
}, { passive: true });

3. 5トピックのコンテンツ設計

スライド	Topic	重要度（Weight）	キーコンテンツ
P.1	331 Cryptography	⭐ Weight: 5	PKI信頼チェーン / OpenSSL / LUKS / DNSSEC
P.2	332 Host Security	⭐ Weight: 5	sysctl強化 / auditd / AIDE / cgroups
P.3	333 Access Control	⭐ Weight: 5	DAC(chmod/ACL) vs MAC(SELinux/AppArmor)
P.4	334 Network Security	⭐ Weight: 5	iptables→nftables / WireGuard / Snort
P.5	335 Threats & Pentest	awareness	侵入テスト5フェーズ / nmap / Metasploit

⚠️ Topic 335（Threats） は各ツールの awareness（認知）レベル で十分。
Kali Linux・Armitage の深い設定コマンドは出題されにくいです。

各スライドは以下の3パネル構成を基本としています。

┌────────────────────────┬─────────────┐
│                        │  Panel B    │
│  Panel A（span-row）   │  コードブロック│
│  キャラ + 吹き出し     ├─────────────┤
│  フロー図              │  Panel C    │
│                        │  テーブル   │
└────────────────────────┴─────────────┘

4. カスタマイズ方法

4-1. 新しいスライドを追加する

HTMLの  ブロック内に <div class="slide"> を追加し、
JS の TOPICS / COLORS 配列にエントリを追記するだけです。

// JS側 — TOPICS/COLORS配列に追記
const TOPICS = [
  "Topic 331｜Cryptography",
  // ... 既存 ...
  "Topic 336｜New Topic"   // ← 追加
];
const COLORS = [
  "#006064", /* ... */ "#0277bd"  // ← 対応色
];

プログレスバー・ドットナビゲーターは自動的に増加します。

4-2. キャラクターを変更する

各スライドの .chara ブロック内のSVGを差し替えます。
髪色（fill値）と小道具SVGを変更することで、トピックに合ったキャラクターを作れます。

<!-- 髪色をトピックカラーに合わせる例 -->
<ellipse cx="29" cy="12" rx="16" ry="9"
  fill="var(--cy2)"/>  <!-- --cy2 を --or2 / --pu2 等に変更 -->

4-3. 自動スライドの速度を変更する

UI下部のボタンで変更できますが、デフォルト値をコードで変えることも可能です。

let cur = 0, timer = null, speed = 10000;  // ← ミリ秒で指定（0でOFF）

4-4. クイズパネルを追加する

各スライドのパネルに問題文と答え照合ロジックを追加することで、
インタラクティブな確認問題を実装できます。

<div class="panel">
  <div class="p-ribbon" style="background:#4527a0">✏️ 確認問題</div>
  <div class="p-body">
    <p style="font-size:.75rem;font-weight:700">
      KSKはどのRRに署名する？
    </p>
    <div style="display:flex;gap:6px;margin-top:6px">
      <button onclick="checkAnswer(this,'ZSK',true)">ZSK</button>
      <button onclick="checkAnswer(this,'DS',false)">DS record</button>
      <button onclick="checkAnswer(this,'RRSIG',false)">RRSIG</button>
    </div>
    <div id="quiz-result" style="margin-top:8px;font-size:.72rem"></div>
  </div>
</div>

<script>
function checkAnswer(btn, label, correct) {
  document.getElementById('quiz-result').textContent =
    correct ? `✅ 正解！ ${label} に署名します` : `❌ 不正解… 正解は ZSK`;
}
</script>

5. AIプロンプト設計

このアーティファクトは基本、以下のプロンプト構造でClaude Sonnetに生成させました。
再現・カスタマイズ時の参考にしてください。

※補足
step1:システムプロンプト構造
step2:詳しい設計、実装要件を指示する
step3:エラーが起きたら改善して完成するイメージです。

## システムプロンプト構造

【役割定義】
あなたは優れたエンジニアで
LPICレベル３ セキュリティ先生

【ユーザー文脈】
私は新卒エンジニアで文系女性
基礎から問題読み取り解説・図解をお願いします

【技術仕様】
- 出典: 公式 lpi.org + wiki.lpi.org v3.0
- Topic 331〜335 を全カバー
- Pure HTML/CSS/JS（外部ライブラリなし）
- 漫画キャラ(インラインSVG) × コードブロック × アニメーション
- キーボード矢印キー・スワイプ対応

【変数化】
{{topic_name}} / {{topic_color}} / {{weight}}
を差し替えることで各スライドを生成

💡 プロンプトのコツ: 「文系女性・新卒」という自分の文脈を明示することで、
難易度・説明の粒度が最適化されました。ペルソナ設定は効果的です。

6. まとめ

漫画図解 × インタラクティブUI × 公式出典という組み合わせで、
難解なLPIC-3 Securityの学習教材を作ることができました。

ポイント	内容
✅ 外部依存ゼロ	どこにでも埋め込み可能
✅ CSS変数設計	テーマ変更が1箇所で完結
✅ スタガーアニメーション	視覚的な学習リズムを演出
✅ AI × 自分の文脈	最適化された教材生成

同じ手法で LPIC-1・LPIC-2・AWS・Docker など他の資格にも応用できます。
ぜひ fork & カスタマイズしてみてください！🌸

参考リンク

出典: lpi.org 303-300 v3.0 | 作成ツール: Claude Sonnet (Anthropic)