ADS/creating-visual-explainers
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 図解ツールの初期コンテンツを追加

Browse Source 
Made-with: Cursor
This commit is contained in:
mako-surprise 2026-03-05 17:11:54 +09:00
commit 02c1f9329c
13 changed files with 4997 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
.claude/skills/creating-visual-explainers/SKILL.md Normal file
View File

@ -0,0 +1,241 @@
---
name: creating-visual-explainers
description: Generates an illustrated HTML page about any topic and deploys it to surge.sh. Triggered by requests like "図解を作って", "図解を生成して", "このトピックを図解して", or "図解してデプロイして".
---
# Creating Visual Explainers
任意のトピックについて、前提知識がなくても理解できる図解HTMLを生成し、surge.shに公開する。品質基準は「入社したての新卒社会人が読んでも腹落ちする明快さ」だが、この基準は出力には表示しない。
## 依存
- `references/base.html` — 図解テンプレート（Tailwind CSS CDN・Lucide Icons CDN・ADS配色を含む「額縁」）
- `references/model-answer.html` — 模範回答（品質基準・デザインパターンの実例）。base.htmlと同一の額縁を含む完全なHTMLファイル
## ワークフロー
### Step 0: 前提確認
`references/base.html` が存在するか確認する。
存在しない場合、以下を伝えて終了:
> テンプレートファイルが見つかりません。スキルのフォルダ構成が壊れている可能性があります。運営に連絡してください。
### Step 1: 模範回答の読み込み
`references/model-answer.html` を読み、以下を把握する:
- 完成品の品質水準
- デザインパターン（色使い・余白・カード・フロー図などの視覚表現）
- Tailwind CSSクラスの使い方
- Lucide Iconsの使い方
- コンテンツの構成・情報量・説明の深さ
模範回答がデザインガイドラインの代わりになる。パーツ一覧やルールではなく、実物から読み取る。
### Step 2: テンプレートの読み込み
`references/base.html` を読み、額縁の構造を把握する:
- `<!-- CONTENT_START -->` 〜 `<!-- CONTENT_END -->` のプレースホルダー位置
- `<!-- TITLE -->`, `<!-- DESCRIPTION -->` のプレースホルダー
- ADS配色のTailwind設定
- 読み込み済みのCDN（Tailwind CSS・Lucide Icons）
### Step 3: ウェブで情報収集
トピックについてウェブ検索を行い、正確かつ最新の情報を収集する。
検索は **2〜3回** に絞る。以下の観点でクエリを組み立てる:
1. **正確な定義**: トピックの公式な定義、公式ドキュメントの説明
2. **最新動向**: 直近の変更点、アップデート、現在のベストプラクティス
3. **具体例**: 実際の使われ方、初心者に伝わるたとえに使える事例
検索結果から以下を整理し、Step 4 の参考情報とする:
- トピックの正確な定義（検索結果を優先。AIの学習データだけに頼らない）
- 最近変わった点があれば、それを明記する
- たとえ話に使えそうな事例や数字
- **出典URL**: 図解に採用した情報のソースURLを控えておく（Step 4 でインライン出典に使う）
### Step 4: コンテンツ生成
Step 3 で収集した情報をもとに、図解HTMLを生成する。検索結果で得た定義・事実・具体例を優先的に採用する。
模範回答のデザインを参考にしつつ、Tailwindの語彙で自由にレイアウトを組む。模範回答のパターンに合うものはそのまま使い、合わないものはTailwindクラスでその場で作る。テンプレートの定義済みパーツに縛られない。
### Step 5: ファイル作成
1. `output/` ディレクトリがなければ作成する
2. トピックに関連する短い英単語のスラッグを決める（例: `api-basics`, `git-rebase`）
3. `references/base.html` を `output/{スラッグ}.html` にコピーする
4. コピーしたファイル内のプレースホルダーをすべて置換する:
- `<!-- TITLE -->` → 図解のタイトル
- `<!-- DESCRIPTION -->` → 内容を要約した1文
- `<!-- CONTENT_START -->` 〜 `<!-- CONTENT_END -->` → Step 4で生成したコンテンツ
5. ファイル保存後、ブラウザで自動的に開く:
- macOS: `open output/{スラッグ}.html`
- Windows: `start output/{スラッグ}.html`
### Step 5.5: 図解ライブラリの更新
`output/` 内の全HTMLファイル（`index.html` 以外）をスキャンし、一覧ページ `output/index.html` を生成・更新する。
1. `output/` 内の `.html` ファイル一覧を取得する（`index.html` は除外）
2. 各ファイルの `<title>` タグからタイトルを、`<meta property="og:description">` から説明文を読み取る
3. `references/library-template.html` を読み込む
4. テンプレート内の `<!-- LIBRARY_ITEMS -->` を、以下の形式のカードリストで置換する:
```html
<a href="{ファイル名}" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
<h2 class="font-bold text-slate-900 mb-1">{タイトル}</h2>
<p class="text-sm text-ads-muted">{説明文}</p>
</a>
```
5. 結果を `output/index.html` として保存する
### Step 6: 公開
ファイル保存後、公開する前にまず Node.js の有無を確認する。
```bash
node --version
```
バージョン番号が表示された → そのまま「公開の実行」に進む。
`command not found` と表示された → `references/node-install-guide.md` の手順に従ってNode.jsのインストールを案内する。
#### 公開の実行
以下のスクリプトを**実行する**（中身を読む必要はない）。
**重要: 第1引数には図解本体のファイル（`output/{スラッグ}.html`）を指定する。`output/index.html`（ライブラリ一覧）ではない。**
**macOS / Git Bash（Windows）の場合:**
```bash
bash .claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh output/{スラッグ}.html [スラッグ]
```
**Windows（PowerShell）で bash が使えない場合:**
```powershell
npx --yes surge output/{スラッグ}.html --domain diagram-[スラッグ].surge.sh
```
スラッグにはトピックに関連する短い英単語を指定する（例: `git-rebase`, `api-basics`）。
#### 初回の場合（Surge未登録）
ターミナルにメールアドレスとパスワードの入力を求められる。以下を伝える:
> 初回のみアカウント登録が必要です。
> メールアドレスを入力して Enter → パスワードを決めて入力して Enter。
> 確認メールが届いたらリンクをクリックすれば登録完了です。
> 次回以降はこの手順は不要です。
#### エラーが出た場合
エラーメッセージをそのまま見せず、**何が起きていて何をすれば解決するか**を、専門用語を避けて平易に説明する。
よくあるエラーと対応:
- **`npx: command not found`** — Node.js がまだ入っていない。`references/node-install-guide.md` の手順を案内する
- **`surge: not found` / surge関連エラー** — `npm install -g surge` を実行してから再度試す
- **認証エラー / `Login required`** — `npx surge login` を実行してメールアドレスとパスワードを入力する
- **その他** — エラーの内容を読み、「何が問題で」「次に何をすればいいか」を平易に説明する
### 図解の削除
ユーザーが「この図解を削除して」と依頼した場合:
1. `deploy-history.log` を読み、直近のデプロイURLを特定する
- ログが存在しない場合 → ユーザーに削除したいURLを聞く
2. `npx surge teardown [ドメイン]` を実行する
3. 削除完了をユーザーに伝える
### Step 7: 完了報告
#### 公開に成功した場合
```
完成・公開完了: 【図解のタイトル】
（図解の内容を1〜2文で要約）
公開URL:
https://diagram-スラッグ.surge.sh
図解の主なポイント:
- （主要トピックを3〜5個）
この図解を削除したいとき:
チャット欄で「この図解を削除して」と伝えてください。
```
#### 公開できなかった場合
```
完成: 【図解のタイトル】
（図解の内容を1〜2文で要約）
ファイルの保存先:
output/{スラッグ}.html（ブラウザにドラッグ＆ドロップすると表示できます）
図解ライブラリ: output/index.html
図解の主なポイント:
- （主要トピックを3〜5個）
URLで共有したいとき:
チャット欄で「この図解を公開して」と伝えてください。
```
## 守ること（禁止事項）
- **React・shadcn/ui を使わない** — 静的な図解にJSフレームワークは不要。AIの出力を制限し、モデルによる品質差も限定的にしてしまう
- **絵文字を使わない** — OS依存で表示が変わる。アイコンはLucide Iconsを使う
- **インタラクティブ要素を入れない** — トグル、フェードイン、アニメーション、フォーム、クリックで開閉する要素は一切禁止
- **`<style>` タグを追加しない** — スタイリングはTailwind CSSクラスで行う。インラインの `style` 属性も避ける
- **`<script>` を追加しない** — テンプレートに含まれるもの以外のJavaScriptは禁止
- **外部リソースを追加しない** — テンプレートに含まれるCDN以外の外部読み込み（画像URL・フォント・追加CDN）は禁止
- **テンプレートの額縁構造を変更しない** — `<head>`・CDN読み込み・meta タグはそのまま維持する
- **PDF印刷で消える表現を使わない** — `bg-clip-text text-transparent` によるグラデーション文字はPDF出力時に透明のまま消える。テンプレートの print CSS でフォールバックを入れているが、グラデーション文字を使った場合はPDF出力で色が単色（`#2563EB`）に変わる点を意識すること
## コンテンツ生成の指針
- **概論 → 各論** — いきなり詳細に入らない。全体像を見せてから個別の話に入る
- **専門用語は初出で必ず解説** — 「API（Application Programming Interface＝ソフトウェア同士がやり取りするための窓口）」のように、括弧書きで平易に説明する
- **たとえ話で身近な体験に結びつける** — レストランの注文、郵便配達、信号機など、技術を知らない人でもイメージできる例を使う
- **簡潔にまとめすぎない** — 理解に必要な情報量は削らない。腹落ちするまで丁寧に説明する
- **図を早く見せる** — 見出しから最初のビジュアルまでに、テキストは最大2段落（各2〜3行）。それ以上の説明が必要な場合は、図を先に見せてから図の後にテキストで補足する（図→説明の順）。「説明してから図を見せる」より「図を見せてから説明する」方が、同じ文量でも「読まされている感」がなくなる。テキストで述べたたとえ話（ゲーム、レストラン等）も、テキストだけで済まさずミニビジュアル化を検討する
- **「見たことがあるもの」は説明するのではなく見せる** — 図解の中で読者がすでに体験しているもの（アプリの画面、ツールのUI、Webサイト）に言及するとき、テキストで「〜という画面が表示されます」と書く代わりに、その画面自体をTailwind CSSで再現して配置する。「天気アプリの画面」なら天気アプリのモックアップを、「チャット画面」ならチャットUIを、「ターミナル」ならターミナルウィンドウを見せる。読者の「見たことある！」という記憶が発火する瞬間が、テキスト説明より圧倒的に理解を深める
- **ビジュアルには2つの役割がある** — 図解に使うビジュアルは「構造を示す図」と「体験を再現する図」の2種類。どちらか一方ではなく、両方を組み合わせて使う:
- **構造パターン（仕組みを頭で理解する図）** — 知識の種類に応じて選ぶ:
- **「Xとは何か」(定義)** → アナロジー図: 身近なたとえの登場人物を配置し、矢印で関係を示す。主役を中央に大きく
- **「Xはどう動くか」(プロセス)** → ステップフロー: 番号つき横並び（モバイルは縦）。各ステップにアイコン＋一言。色はステップごとに変える
- **「XとYの違い」(比較)** → 左右対比: 2カラムで並べ、同じ観点を同じ行に揃える。✗/✓ や赤/緑で差を一目で伝える
- **「Xの具体例」(事例)** → カードグリッド: 2列のカードにアイコン＋タイトル＋説明。カード内で「表の顔」と「裏の仕組み」を分けると深みが出る
- **「Xのすごさ」(数値)** → 数字カード: 3カラムに大きな数字。text-3xl font-black で存在感を出し、色を各数字で変える
- **「Xの構造・中身」(階層)** → 入れ子ブロック: 外側の大きなブロック内に構成要素を配置。ボーダーや背景色の濃淡で階層を表現
- **「Xの誤解」(訂正)** → 誤解→正解カード: 赤ヘッダーに誤解、本文に緑で正解。✗と✓の対比
- **「Xの変遷」(時系列)** → タイムライン: 左にボーダーライン、各時点に年号・ラベル・要約。色のグラデーションで時代の変化を表現
- **体験再現パターン（読者の「見たことある」記憶と結びつける図）** — 読者が実際に触れたことのある画面をTailwind CSSで再現する。「あなたが見ているもの」「〜の画面では」「実際に使うとき」のような文脈が出てきたら、テキスト説明ではなくこちらを使う:
- **チャットUI** — 吹き出し形式の対話画面。暗い背景＋ユーザー吹き出し（右寄せ）＋AI吹き出し（左寄せ）＋入力欄モック
- **エディタUI** — タイトルバー（赤黄緑ボタン）＋サイドバー（ファイルツリー）＋コードペイン。AIチャットパネルを加えた3ペインも可
- **ターミナルUI** — タイトルバー（赤黄緑ボタン）＋プロンプト（$）＋コマンド＋出力。コードブロックとの違いはウィンドウ枠がある点
- **ブラウザUI** — タイトルバー（赤黄緑ボタン）＋アドレスバー＋ページ内容
- **アプリ画面** — 上記に当てはまらないアプリ（天気予報、地図、決済画面など）。角丸カード内にアイコン＋数値＋ラベルでミニ画面を再現
- 共通ルール: 中身はリアルすぎず要点が伝わるミニマルな内容にする。特定ブランドのロゴや名称は使わず汎用的な表現にする。Tailwind CSSクラスのみで構成する
- **冒頭にヒーロー＋一枚絵サマリー** — タイトルで「何の図解か」を伝えたあと、そのままトピックの核心を1枚の図で見せる。ヒーローの説明文を図への導入（「ひとことで言えば──」のような引き）にし、図の直後に各論への橋渡し（「ここからひとつずつ解説していきます」）を置く。ヒーロー → 一言の答え → 図 → 各論が一本の流れになること。一枚絵サマリーの構成:
- **一言の答え**: トピックの核心を1文で太字表示（カード冒頭）。読者が「なるほど」と思える定義を先に読ませ、そのあとの図で視覚的に裏付ける
- **コア図解**: 一言の答えを図にしたもの。アイコン＋矢印＋ラベルで表現
- **身近な接点**: 読者がすでに体験している具体例を、アイコン＋一言のピルで2〜4個並べる
- **読者のレベルに言及しない** — 「初心者向け」「入門」「未経験者でもわかる」のように読者を特定のレベルにラベリングする表現をタイトル・見出し・本文に入れない。「わかりやすく説明する」のは図解の品質であって、読者のレベルではない。たとえ話や専門用語の解説で自然に噛み砕けば、ラベルなしで誰にでも伝わる
- **ヒーローバッジはトピックカテゴリ** — タイトル上のバッジには、トピックのカテゴリを入れる（テクノロジー、ビジネス、開発ツール、デザイン、マーケティングなど）。「初心者向け」「入門」など読者のレベルを示すラベルは入れない
- **インライン出典** — 検索結果から採用した事実・定義・数字のすぐ近くに、出典リンクをさりげなく添える。本文の読みやすさを損なわないよう `text-xs text-ads-dim` で小さく薄く表示し、リンクテキストはURLそのままではなく「出典: ○○公式ドキュメント」のようにページ内容がわかる名前にする。段落末やカード下部など、視線の流れを邪魔しない位置に置く
- **日本語で** — 英語メインのトピックでも、図解は日本語で書く

83
.claude/skills/creating-visual-explainers/references/base.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow">
<meta property="og:title" content="<!-- TITLE -->">
<meta property="og:description" content="<!-- DESCRIPTION -->">
<meta property="og:type" content="article">
<title><!-- TITLE --></title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ads: {
bg: '#FFFFFF',
surface: '#F8FAFC',
hover: '#F1F5F9',
border: '#E2E8F0',
accent: '#3B82F6',
'accent-light': '#2563EB',
text: '#1E293B',
muted: '#64748B',
dim: '#94A3B8',
positive: '#10B981',
negative: '#EF4444',
warning: '#F59E0B',
}
},
fontFamily: {
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
}
}
}
}
</script>
<style>
@media print {
.no-print { display: none !important; }
body { border-top: none !important; }
.rounded-xl { break-inside: avoid; }
.md\:flex-row { flex-direction: row !important; }
.md\:hidden { display: none !important; }
.hidden.md\:block { display: block !important; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.md\:mb-20 { margin-bottom: 5rem !important; }
.md\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.bg-clip-text.text-transparent {
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #2563EB !important;
-webkit-text-fill-color: #2563EB !important;
}
}
</style>
</head>
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
<div class="no-print max-w-3xl mx-auto px-5 pt-2 flex justify-end">
<button onclick="window.print()" class="flex items-center gap-1.5 text-xs text-ads-dim hover:text-ads-accent transition-colors cursor-pointer">
<i data-lucide="download" class="w-3.5 h-3.5"></i>
PDF
</button>
</div>
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
<!-- CONTENT_START -->
<!-- CONTENT_END -->
</main>
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
</footer>
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
</body>
</html>

66
.claude/skills/creating-visual-explainers/references/library-template.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow">
<title>図解ライブラリ</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ads: {
bg: '#FFFFFF',
surface: '#F8FAFC',
hover: '#F1F5F9',
border: '#E2E8F0',
accent: '#3B82F6',
'accent-light': '#2563EB',
text: '#1E293B',
muted: '#64748B',
dim: '#94A3B8',
}
},
fontFamily: {
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
}
}
}
}
</script>
</head>
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
<div class="text-center mb-12">
<h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
<p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
</div>
<div class="space-y-3">
<!-- LIBRARY_ITEMS -->
</div>
<div class="mt-16 pt-8 border-t border-ads-border/30">
<p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
</div>
</div>
</main>
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
</footer>
</body>
</html>

968
.claude/skills/creating-visual-explainers/references/model-answer.html Normal file
View File

@ -0,0 +1,968 @@
<!-- このファイルの<head>はreferences/base.htmlと同一に保つ。base.html変更時は必ずこちらも更新する -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow">
<meta property="og:title" content="APIの仕組み">
<meta property="og:description" content="APIの仕組みを、身近な例とビジュアルでわかりやすく図解します。">
<meta property="og:type" content="article">
<title>APIの仕組み</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ads: {
bg: '#FFFFFF',
surface: '#F8FAFC',
hover: '#F1F5F9',
border: '#E2E8F0',
accent: '#3B82F6',
'accent-light': '#2563EB',
text: '#1E293B',
muted: '#64748B',
dim: '#94A3B8',
positive: '#10B981',
negative: '#EF4444',
warning: '#F59E0B',
}
},
fontFamily: {
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
}
}
}
}
</script>
<style>
@media print {
.no-print { display: none !important; }
body { border-top: none !important; }
.rounded-xl { break-inside: avoid; }
.md\:flex-row { flex-direction: row !important; }
.md\:hidden { display: none !important; }
.hidden.md\:block { display: block !important; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.md\:mb-20 { margin-bottom: 5rem !important; }
.md\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.bg-clip-text.text-transparent {
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #2563EB !important;
-webkit-text-fill-color: #2563EB !important;
}
}
</style>
</head>
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
<div class="no-print max-w-3xl mx-auto px-5 pt-2 flex justify-end">
<button onclick="window.print()" class="flex items-center gap-1.5 text-xs text-ads-dim hover:text-ads-accent transition-colors cursor-pointer">
<i data-lucide="download" class="w-3.5 h-3.5"></i>
PDF
</button>
</div>
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
<!-- CONTENT_START -->
<!-- ============================================================ -->
<!-- HERO -->
<!-- ============================================================ -->
<div class="text-center mb-8 md:mb-10">
<div class="inline-flex items-center gap-2 bg-ads-accent/10 text-ads-accent-light px-4 py-1.5 rounded-full text-sm font-medium mb-6">
<i data-lucide="cpu" class="w-4 h-4"></i>
テクノロジー
</div>
<h1 class="text-3xl md:text-5xl font-black text-slate-900 tracking-tight mb-6">
<span class="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">API</span>の仕組み
</h1>
<p class="text-lg text-ads-muted max-w-xl mx-auto leading-relaxed">
「APIって何？」と聞かれて、うまく答えられない。<br>
ひとことで言うと ──
</p>
</div>
<!-- ============================================================ -->
<!-- ONE-PAGE SUMMARY -->
<!-- ============================================================ -->
<div class="bg-ads-surface border border-ads-border rounded-2xl p-6 md:p-10 mb-6">
<div class="text-center mb-8 md:mb-10">
<p class="text-xl md:text-2xl font-black text-slate-900 mb-2">
API = ソフトウェアの<span class="text-ads-accent-light">「注文窓口」</span>
</p>
<p class="text-sm text-ads-muted">
中身を知らなくても、決まった形で頼めば結果が届く
</p>
</div>
<!-- Core flow: App → API → Server -->
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-0 mb-8">
<!-- App -->
<div class="flex flex-col items-center w-36 p-3">
<div class="w-14 h-14 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-2.5">
<i data-lucide="smartphone" class="w-7 h-7 text-blue-600"></i>
</div>
<div class="font-bold text-slate-900 text-sm">あなたのアプリ</div>
<div class="text-[11px] text-blue-600/70 mt-0.5">「天気を教えて」</div>
</div>
<!-- Arrow 1: Request -->
<div class="flex items-center justify-center md:w-16 py-1 md:py-0">
<div class="flex flex-col items-center gap-0.5">
<span class="text-[9px] font-medium text-ads-accent tracking-wider">リクエスト</span>
<i data-lucide="arrow-right" class="w-5 h-5 text-ads-accent hidden md:block"></i>
<i data-lucide="arrow-down" class="w-5 h-5 text-ads-accent md:hidden"></i>
</div>
</div>
<!-- API (centerpiece — visually prominent) -->
<div class="flex flex-col items-center w-40 p-4 bg-ads-accent/5 border-2 border-ads-accent/20 rounded-2xl">
<div class="w-16 h-16 rounded-2xl bg-ads-accent/15 border-2 border-ads-accent/30 flex items-center justify-center mb-2.5">
<i data-lucide="arrow-left-right" class="w-8 h-8 text-ads-accent-light"></i>
</div>
<div class="font-bold text-ads-accent-light text-base">API</div>
<div class="text-[11px] text-ads-muted mt-0.5 mb-2">注文を届け、結果を返す</div>
<div class="text-[10px] text-ads-muted bg-white rounded-lg px-2.5 py-1 border border-ads-border/50">レストランのウェイター役</div>
</div>
<!-- Arrow 2: Forward to server -->
<div class="flex items-center justify-center md:w-16 py-1 md:py-0">
<div class="flex flex-col items-center gap-0.5">
<span class="text-[9px] font-medium text-ads-accent tracking-wider">依頼</span>
<i data-lucide="arrow-right" class="w-5 h-5 text-ads-accent hidden md:block"></i>
<i data-lucide="arrow-down" class="w-5 h-5 text-ads-accent md:hidden"></i>
</div>
</div>
<!-- Server -->
<div class="flex flex-col items-center w-36 p-3">
<div class="w-14 h-14 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-2.5">
<i data-lucide="server" class="w-7 h-7 text-emerald-600"></i>
</div>
<div class="font-bold text-slate-900 text-sm">サービス</div>
<div class="text-[11px] text-emerald-600/70 mt-0.5">処理して結果を返す</div>
</div>
</div>
<!-- Return flow -->
<div class="flex justify-center mb-8">
<div class="flex items-center gap-2 text-xs text-emerald-600 bg-emerald-500/5 border border-emerald-500/15 rounded-full px-4 py-1.5">
<i data-lucide="corner-down-left" class="w-3.5 h-3.5"></i>
結果（レスポンス）があなたのアプリに届く
</div>
</div>
<!-- Divider with label -->
<div class="flex items-center gap-4 mb-6">
<div class="flex-1 border-t border-ads-border/50"></div>
<div class="text-[11px] text-ads-dim font-medium">あなたも毎日使っている</div>
<div class="flex-1 border-t border-ads-border/50"></div>
</div>
<!-- Everyday examples as pills -->
<div class="flex flex-wrap justify-center gap-2 mb-8">
<div class="flex items-center gap-1.5 bg-white border border-ads-border rounded-full px-3.5 py-1.5 text-xs text-slate-700">
<i data-lucide="cloud" class="w-3.5 h-3.5 text-cyan-500"></i>
天気予報
</div>
<div class="flex items-center gap-1.5 bg-white border border-ads-border rounded-full px-3.5 py-1.5 text-xs text-slate-700">
<i data-lucide="log-in" class="w-3.5 h-3.5 text-blue-500"></i>
Googleログイン
</div>
<div class="flex items-center gap-1.5 bg-white border border-ads-border rounded-full px-3.5 py-1.5 text-xs text-slate-700">
<i data-lucide="credit-card" class="w-3.5 h-3.5 text-emerald-500"></i>
オンライン決済
</div>
<div class="flex items-center gap-1.5 bg-white border border-ads-border rounded-full px-3.5 py-1.5 text-xs text-slate-700">
<i data-lucide="map-pin" class="w-3.5 h-3.5 text-red-500"></i>
地図・ナビ
</div>
</div>
</div>
<p class="text-center text-ads-muted mb-16 md:mb-20">
ここから先で、この仕組みをひとつずつ丁寧に解説していきます。
</p>
<!-- ============================================================ -->
<!-- SECTION 1: そもそもAPIって何？ -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-blue-500/10 flex-shrink-0">
<i data-lucide="help-circle" class="w-5 h-5 text-blue-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">そもそもAPIって何？</h2>
</div>
<p class="mb-6 leading-relaxed">
API（エーピーアイ）は <strong class="text-slate-900">Application Programming Interface</strong>（アプリケーション・プログラミング・インターフェース）の略称です。正式名称を聞いても「何のこと？」と思いますよね。
</p>
<p class="mb-6 leading-relaxed">
まずは日常のたとえで考えてみましょう。レストランに行った場面を想像してください。
</p>
<p class="mb-8 leading-relaxed">
あなた（お客さん）は、厨房に直接入って料理を作ることはできません。厨房のルールも、調理器具の使い方も知りません。でも、<strong class="text-slate-900">ウェイターに「パスタをください」と注文すれば、厨房で作られた料理があなたのテーブルに届きます。</strong>厨房の中で何が起きているかを知る必要はありません。
</p>
<!-- レストラン比喩フロー図 -->
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 md:p-8 mb-8">
<h3 class="text-lg font-bold text-slate-900 text-center mb-8">レストランで考えるAPIの役割</h3>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-0">
<!-- あなた（お客さん） -->
<div class="w-44 bg-blue-500/10 border border-blue-500/20 rounded-xl p-5 text-center">
<div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center mx-auto mb-3">
<i data-lucide="user" class="w-6 h-6 text-blue-600"></i>
</div>
<div class="font-bold text-blue-700 mb-1">あなた</div>
<div class="text-xs text-blue-600/70">お客さん</div>
<div class="text-xs text-ads-muted mt-3 bg-slate-100/80 rounded-lg px-3 py-1.5">「パスタください」</div>
</div>
<!-- 矢印 1 -->
<div class="flex items-center justify-center md:w-16 py-2 md:py-0">
<div class="flex flex-col items-center gap-1">
<span class="text-[10px] text-ads-muted">注文</span>
<i data-lucide="arrow-right" class="w-5 h-5 text-ads-accent hidden md:block"></i>
<i data-lucide="arrow-down" class="w-5 h-5 text-ads-accent md:hidden"></i>
</div>
</div>
<!-- API（ウェイター） -->
<div class="w-44 bg-ads-accent/10 border-2 border-ads-accent/30 rounded-xl p-5 text-center">
<div class="w-12 h-12 rounded-full bg-ads-accent/20 flex items-center justify-center mx-auto mb-3">
<i data-lucide="message-square" class="w-6 h-6 text-ads-accent-light"></i>
</div>
<div class="font-bold text-ads-accent-light mb-1">API</div>
<div class="text-xs text-ads-accent/70">ウェイター</div>
<div class="text-xs text-ads-muted mt-3 bg-slate-100/80 rounded-lg px-3 py-1.5">注文を伝え、料理を届ける</div>
</div>
<!-- 矢印 2 -->
<div class="flex items-center justify-center md:w-16 py-2 md:py-0">
<div class="flex flex-col items-center gap-1">
<span class="text-[10px] text-ads-muted">依頼</span>
<i data-lucide="arrow-right" class="w-5 h-5 text-ads-accent hidden md:block"></i>
<i data-lucide="arrow-down" class="w-5 h-5 text-ads-accent md:hidden"></i>
</div>
</div>
<!-- サーバー（厨房） -->
<div class="w-44 bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-5 text-center">
<div class="w-12 h-12 rounded-full bg-emerald-500/20 flex items-center justify-center mx-auto mb-3">
<i data-lucide="server" class="w-6 h-6 text-emerald-600"></i>
</div>
<div class="font-bold text-emerald-700 mb-1">サーバー</div>
<div class="text-xs text-emerald-600/70">厨房</div>
<div class="text-xs text-ads-muted mt-3 bg-slate-100/80 rounded-lg px-3 py-1.5">パスタを作って渡す</div>
</div>
</div>
<div class="flex justify-center mt-6">
<div class="flex items-center gap-2 text-ads-muted text-sm">
<i data-lucide="corner-down-left" class="w-4 h-4"></i>
料理（レスポンス）があなたのテーブルに届く
</div>
</div>
</div>
<p class="mb-6 leading-relaxed">
この比喩がAPIの本質をほぼ言い当てています。あなた（アプリ）は、厨房（サーバー）の中で何が起きているかを知る必要がありません。ウェイター（API）に決まった形式で注文を伝えれば、結果が返ってくる。これがAPIです。
</p>
<!-- ポイントボックス -->
<div class="bg-ads-accent/5 border border-ads-accent/20 rounded-xl p-5">
<div class="flex items-start gap-3">
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-ads-accent/10 flex-shrink-0 mt-0.5">
<i data-lucide="lightbulb" class="w-4 h-4 text-ads-accent-light"></i>
</div>
<div>
<p class="font-bold text-ads-accent-light mb-1">ここがポイント</p>
<p class="text-ads-muted leading-relaxed">
APIは<strong class="text-slate-800">「仲介役」</strong>です。相手の内部構造を知らなくても、<strong class="text-slate-800">決まったルールで話しかければ結果が返ってくる</strong>。これがAPIの本質です。この「決まったルール」のことを、エンジニアは「インターフェース（Interface）」と呼びます。
</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 2: もう少し正確に言うと -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-purple-500/10 flex-shrink-0">
<i data-lucide="search" class="w-5 h-5 text-purple-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">もう少し正確に言うと</h2>
</div>
<p class="mb-6 leading-relaxed">
レストランのたとえで、ざっくりとしたイメージはつかめましたか？ ここからもう少しだけ正確に説明します。
</p>
<p class="mb-8 leading-relaxed">
APIとは、ひとことで言えば<strong class="text-slate-900">「ソフトウェア同士が会話するための窓口」</strong>です。あなたが使っているアプリの裏側で、別のサービスのデータや機能を借りてくるための「取り決め」と考えてください。
</p>
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 mb-8 text-center">
<div class="text-xs text-ads-dim font-medium tracking-widest uppercase mb-3">技術的な定義</div>
<p class="text-lg md:text-xl font-bold text-slate-900 leading-relaxed">
API = あるソフトウェアの機能を、<br class="hidden md:block">
別のソフトウェアから使えるようにする仕組み
</p>
<p class="text-xs text-ads-dim mt-3">出典: <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction" class="underline decoration-ads-dim/30 hover:text-ads-accent transition-colors">MDN Web Docs — Web API の紹介</a></p>
</div>
<p class="mb-8 leading-relaxed">
これだけだとまだ抽象的に感じるかもしれません。では、<strong class="text-slate-900">APIがある世界とない世界</strong>を比べてみましょう。
</p>
<!-- Before / After 比較 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Before -->
<div class="bg-red-500/5 border border-red-500/20 rounded-xl p-6">
<div class="inline-flex items-center gap-1.5 bg-red-500/10 text-red-600 px-3 py-1 rounded-full text-xs font-bold tracking-wide mb-5">
<i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
BEFORE — APIがない世界
</div>
<ul class="space-y-3">
<li class="flex items-start gap-2.5">
<i data-lucide="x" class="w-4 h-4 text-red-600 mt-1 flex-shrink-0"></i>
<span>天気情報が欲しければ、<strong class="text-red-700">自分で気象観測の仕組み</strong>を構築する</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="x" class="w-4 h-4 text-red-600 mt-1 flex-shrink-0"></i>
<span>決済機能が欲しければ、<strong class="text-red-700">クレジットカード処理を自前で開発</strong>する</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="x" class="w-4 h-4 text-red-600 mt-1 flex-shrink-0"></i>
<span>地図を表示したければ、<strong class="text-red-700">地図データを自分で作成・更新</strong>する</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="x" class="w-4 h-4 text-red-600 mt-1 flex-shrink-0"></i>
<span>ユーザー認証は<strong class="text-red-700">パスワード管理からセキュリティ対策まで全部自前</strong></span>
</li>
</ul>
<div class="mt-5 pt-4 border-t border-red-500/10 text-sm text-red-700/70 flex items-center gap-2">
<i data-lucide="alert-circle" class="w-4 h-4"></i>
膨大な開発コストと時間。バグのリスクも高い。
</div>
</div>
<!-- After -->
<div class="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-6">
<div class="inline-flex items-center gap-1.5 bg-emerald-500/10 text-emerald-600 px-3 py-1 rounded-full text-xs font-bold tracking-wide mb-5">
<i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
AFTER — APIがある世界
</div>
<ul class="space-y-3">
<li class="flex items-start gap-2.5">
<i data-lucide="check" class="w-4 h-4 text-emerald-600 mt-1 flex-shrink-0"></i>
<span>天気情報は<strong class="text-emerald-700">天気予報APIに問い合わせるだけ</strong>で取得できる</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="check" class="w-4 h-4 text-emerald-600 mt-1 flex-shrink-0"></i>
<span>決済は<strong class="text-emerald-700">Stripe APIに任せれば数行のコード</strong>で完成</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="check" class="w-4 h-4 text-emerald-600 mt-1 flex-shrink-0"></i>
<span>地図は<strong class="text-emerald-700">Google Maps APIで高品質な地図を即表示</strong>できる</span>
</li>
<li class="flex items-start gap-2.5">
<i data-lucide="check" class="w-4 h-4 text-emerald-600 mt-1 flex-shrink-0"></i>
<span>ログインは<strong class="text-emerald-700">GoogleやAppleのAPIで安全に認証</strong>できる</span>
</li>
</ul>
<div class="mt-5 pt-4 border-t border-emerald-500/10 text-sm text-emerald-700/70 flex items-center gap-2">
<i data-lucide="zap" class="w-4 h-4"></i>
「自分が本当に作るべきもの」に集中できる。
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 3: APIの仕組み -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-cyan-500/10 flex-shrink-0">
<i data-lucide="settings" class="w-5 h-5 text-cyan-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">APIの仕組み — リクエストとレスポンス</h2>
</div>
<p class="mb-6 leading-relaxed">
APIでのやり取りは、実はとてもシンプルです。基本は<strong class="text-slate-900">「聞く（リクエスト）」</strong>と<strong class="text-slate-900">「答える（レスポンス）」</strong>の2つだけ。
</p>
<p class="mb-8 leading-relaxed">
リクエスト（Request）とは、「こういう情報をください」「この処理をしてください」とAPIに送るメッセージのことです。レスポンス（Response）は、APIがその要求に対して返す結果です。この2つのやり取りを分解すると、4つのステップになります。
</p>
<!-- 4ステップフロー図 -->
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 md:p-8 mb-8">
<h3 class="text-lg font-bold text-slate-900 text-center mb-8">APIリクエスト〜レスポンスの流れ</h3>
<div class="flex flex-col md:flex-row items-stretch justify-center gap-3 md:gap-0">
<div class="flex-1 bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-center">
<div class="w-8 h-8 rounded-full bg-blue-500 text-white text-sm font-bold flex items-center justify-center mx-auto mb-3">1</div>
<i data-lucide="send" class="w-6 h-6 text-blue-600 mx-auto mb-2"></i>
<div class="font-bold text-blue-700 text-sm mb-1">リクエスト送信</div>
<div class="text-xs text-ads-muted leading-relaxed">あなたのアプリが<br>「こういう情報ください」<br>とAPIに送る</div>
</div>
<div class="flex items-center justify-center md:w-10 py-1 md:py-0">
<i data-lucide="chevron-right" class="w-5 h-5 text-ads-dim hidden md:block"></i>
<i data-lucide="chevron-down" class="w-5 h-5 text-ads-dim md:hidden"></i>
</div>
<div class="flex-1 bg-purple-500/10 border border-purple-500/20 rounded-xl p-4 text-center">
<div class="w-8 h-8 rounded-full bg-purple-500 text-white text-sm font-bold flex items-center justify-center mx-auto mb-3">2</div>
<i data-lucide="shield" class="w-6 h-6 text-purple-600 mx-auto mb-2"></i>
<div class="font-bold text-purple-700 text-sm mb-1">APIが受け取る</div>
<div class="text-xs text-ads-muted leading-relaxed">リクエストの内容を<br>チェック・認証する<br>（門番の役割）</div>
</div>
<div class="flex items-center justify-center md:w-10 py-1 md:py-0">
<i data-lucide="chevron-right" class="w-5 h-5 text-ads-dim hidden md:block"></i>
<i data-lucide="chevron-down" class="w-5 h-5 text-ads-dim md:hidden"></i>
</div>
<div class="flex-1 bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 text-center">
<div class="w-8 h-8 rounded-full bg-emerald-500 text-white text-sm font-bold flex items-center justify-center mx-auto mb-3">3</div>
<i data-lucide="database" class="w-6 h-6 text-emerald-600 mx-auto mb-2"></i>
<div class="font-bold text-emerald-700 text-sm mb-1">サーバーが処理</div>
<div class="text-xs text-ads-muted leading-relaxed">データベース検索や<br>計算など、実際の<br>処理を実行する</div>
</div>
<div class="flex items-center justify-center md:w-10 py-1 md:py-0">
<i data-lucide="chevron-right" class="w-5 h-5 text-ads-dim hidden md:block"></i>
<i data-lucide="chevron-down" class="w-5 h-5 text-ads-dim md:hidden"></i>
</div>
<div class="flex-1 bg-amber-500/10 border border-amber-500/20 rounded-xl p-4 text-center">
<div class="w-8 h-8 rounded-full bg-amber-500 text-white text-sm font-bold flex items-center justify-center mx-auto mb-3">4</div>
<i data-lucide="reply" class="w-6 h-6 text-amber-600 mx-auto mb-2"></i>
<div class="font-bold text-amber-700 text-sm mb-1">レスポンス返却</div>
<div class="text-xs text-ads-muted leading-relaxed">処理結果をあなたの<br>アプリに返す<br>（料理が届く瞬間）</div>
</div>
</div>
</div>
<p class="mb-6 leading-relaxed">
言葉だけだとまだピンとこないかもしれません。では、実際のコードで見てみましょう。たとえば、天気予報APIから東京の天気を取得するコードは、たったこれだけです。
</p>
<!-- コード例: JavaScript -->
<div class="mb-6">
<div class="flex items-center gap-2 bg-slate-800 border border-slate-700/50 rounded-t-xl px-4 py-2.5 text-xs text-ads-muted">
<i data-lucide="code" class="w-3.5 h-3.5"></i>
JavaScript — 天気予報APIの呼び出し例
</div>
<pre class="bg-slate-950 border border-slate-700/50 border-t-0 rounded-b-xl p-5 overflow-x-auto text-sm leading-loose"><code><span class="text-slate-500">// 1. APIにリクエストを送る（「東京の天気を教えて」と聞く）</span>
<span class="text-purple-400">const</span> response <span class="text-slate-400">=</span> <span class="text-purple-400">await</span> <span class="text-blue-400">fetch</span>(<span class="text-emerald-400">"https://api.weather.example.com/current?city=tokyo"</span>);
<span class="text-slate-500">// 2. レスポンスをJSON形式（データの構造）に変換する</span>
<span class="text-purple-400">const</span> data <span class="text-slate-400">=</span> <span class="text-purple-400">await</span> response.<span class="text-blue-400">json</span>();
<span class="text-slate-500">// 3. 必要なデータを取り出して使う</span>
console.<span class="text-blue-400">log</span>(data.temperature); <span class="text-slate-500">// → "22°C"</span>
console.<span class="text-blue-400">log</span>(data.condition); <span class="text-slate-500">// → "晴れ"</span>
console.<span class="text-blue-400">log</span>(data.humidity); <span class="text-slate-500">// → "65%"</span></code></pre>
</div>
<!-- コード解説 -->
<div class="bg-ads-surface border border-ads-border rounded-xl p-5 mb-8">
<h4 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-ads-accent"></i>
コードの解説（1行ずつ読み解く）
</h4>
<div class="space-y-4 text-sm">
<div class="flex items-start gap-3">
<span class="text-xs font-mono bg-blue-500/10 text-blue-600 px-2 py-0.5 rounded flex-shrink-0 mt-0.5">1</span>
<span class="leading-relaxed"><code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">fetch()</code> は「指定したURLに問い合わせる」命令。URLの末尾にある <code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">?city=tokyo</code> が「東京の情報が欲しい」というリクエストの中身です。レストランのたとえで言えば「パスタください」にあたる部分。</span>
</div>
<div class="flex items-start gap-3">
<span class="text-xs font-mono bg-purple-500/10 text-purple-600 px-2 py-0.5 rounded flex-shrink-0 mt-0.5">2</span>
<span class="leading-relaxed">返ってきたデータは機械向けの生データなので、<code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">.json()</code> で人間が読みやすい形（JSON = JavaScript Object Notation）に変換します。JSONは「名前: 値」の組み合わせでデータを表現する書式で、Web業界で最も広く使われています。</span>
</div>
<div class="flex items-start gap-3">
<span class="text-xs font-mono bg-emerald-500/10 text-emerald-600 px-2 py-0.5 rounded flex-shrink-0 mt-0.5">3</span>
<span class="leading-relaxed">変換したデータから <code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">data.temperature</code> のように、ドット（.）で区切って欲しい情報を名前で取り出します。辞書で単語を引くのに似ています。</span>
</div>
</div>
</div>
<p class="mb-4 leading-relaxed">
ターミナル（コマンドを入力する黒い画面）からもAPIを試せます。<code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">curl</code>（カール）というコマンドを使うと、たった1行でAPIにリクエストを送れます。
</p>
<!-- ターミナルUIモックアップ: curl -->
<div class="mb-8 rounded-xl overflow-hidden border border-slate-700/50">
<div class="flex items-center gap-3 bg-slate-800 px-4 py-2.5">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-400">
<i data-lucide="terminal" class="w-3.5 h-3.5"></i>
ターミナル — curlコマンドでAPIを叩く
</div>
</div>
<pre class="bg-slate-950 p-5 overflow-x-auto text-sm leading-loose"><code><span class="text-emerald-400">$</span> curl https://api.weather.example.com/current?city=tokyo
<span class="text-slate-500"># 返ってくるレスポンス（JSON形式）</span>
{
<span class="text-blue-400">"city"</span>: <span class="text-emerald-400">"東京"</span>,
<span class="text-blue-400">"temperature"</span>: <span class="text-amber-400">"22°C"</span>,
<span class="text-blue-400">"condition"</span>: <span class="text-emerald-400">"晴れ"</span>,
<span class="text-blue-400">"humidity"</span>: <span class="text-amber-400">"65%"</span>
}</code></pre>
</div>
<div class="bg-amber-500/5 border border-amber-500/20 rounded-xl p-5">
<div class="flex items-start gap-3">
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-amber-500/10 flex-shrink-0 mt-0.5">
<i data-lucide="info" class="w-4 h-4 text-amber-600"></i>
</div>
<div>
<p class="font-bold text-amber-700 mb-1">ちょっと補足: URLの構造</p>
<p class="text-ads-muted leading-relaxed text-sm">
<code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">https://api.weather.example.com/current?city=tokyo</code> のURLは、大きく3つの部分に分かれます。<strong class="text-slate-800">api.weather.example.com</strong> がAPIの住所（ベースURL）、<strong class="text-slate-800">/current</strong> が「何を」（現在の天気）、<strong class="text-slate-800">?city=tokyo</strong> が「どこの」（東京）というパラメータです。レストランで例えると「〇〇レストランの（住所）、メインメニューから（何を）、パスタを（詳細）」に対応します。
</p>
</div>
</div>
</div>
<p class="mt-8 mb-6 leading-relaxed">
では、このAPIのレスポンスが実際のアプリではどう表示されるのでしょうか？ あなたが見ている天気アプリの画面を覗いてみましょう。
</p>
<!-- ブラウザUIモックアップ -->
<div class="rounded-xl overflow-hidden border border-slate-700/50 mb-8">
<div class="flex items-center gap-3 bg-slate-800 px-4 py-2.5">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
</div>
<div class="flex-1 bg-slate-700/50 rounded-lg px-3 py-1 text-xs text-slate-400 flex items-center gap-1.5">
<i data-lucide="lock" class="w-3 h-3 text-emerald-400"></i>
weather-app.example.com
</div>
</div>
<div class="bg-gradient-to-b from-sky-100 to-sky-50 p-6 md:p-8">
<div class="text-center">
<div class="text-xs text-sky-600/70 font-medium mb-1">現在地: 東京</div>
<div class="flex items-center justify-center gap-2 mb-2">
<i data-lucide="sun" class="w-10 h-10 text-amber-500"></i>
<span class="text-4xl font-black text-sky-900">22°C</span>
</div>
<div class="text-sm text-sky-700 font-medium mb-4">晴れ</div>
<div class="flex justify-center gap-6 text-xs text-sky-600/80">
<div class="flex items-center gap-1"><i data-lucide="droplets" class="w-3.5 h-3.5"></i> 65%</div>
<div class="flex items-center gap-1"><i data-lucide="wind" class="w-3.5 h-3.5"></i> 3m/s</div>
</div>
</div>
</div>
</div>
<div class="bg-ads-accent/5 border border-ads-accent/20 rounded-xl p-5">
<div class="flex items-start gap-3">
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-ads-accent/10 flex-shrink-0 mt-0.5">
<i data-lucide="lightbulb" class="w-4 h-4 text-ads-accent-light"></i>
</div>
<div>
<p class="font-bold text-ads-accent-light mb-1">APIの結果 → アプリの画面</p>
<p class="text-ads-muted leading-relaxed">
上の天気アプリは、裏側で <code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">temperature: "22°C"</code> や <code class="text-emerald-700 text-xs bg-slate-100 px-1.5 py-0.5 rounded">condition: "晴れ"</code> というAPIレスポンスを受け取り、見やすいデザインに変換して表示しています。<strong class="text-slate-800">あなたが普段見ているきれいな画面の裏側では、こうしたAPIのやり取りが行われている</strong>のです。
</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 4: 身近なAPIの例 -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-amber-500/10 flex-shrink-0">
<i data-lucide="smartphone" class="w-5 h-5 text-amber-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">身近なAPIの例 — 実はあなたも毎日使っている</h2>
</div>
<p class="mb-8 leading-relaxed">
「API」と聞くとプログラマーの専門用語に聞こえるかもしれません。しかし、あなたがスマホで何気なくやっている日常の操作の裏側では、たくさんのAPIが動いています。<strong class="text-slate-900">「あなたが見ている画面」の裏側で、APIが何をしているのか</strong>を図解します。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 天気予報アプリ -->
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="bg-gradient-to-b from-sky-100 to-sky-50 p-5">
<div class="text-center">
<div class="text-[10px] text-sky-600/60 font-medium mb-0.5">東京</div>
<div class="flex items-center justify-center gap-1.5 mb-1">
<i data-lucide="sun" class="w-7 h-7 text-amber-500"></i>
<span class="text-2xl font-black text-sky-900">22°C</span>
</div>
<div class="text-xs text-sky-700 font-medium mb-2">晴れ</div>
<div class="flex justify-center gap-4 text-[10px] text-sky-600/70">
<div class="flex items-center gap-0.5"><i data-lucide="droplets" class="w-3 h-3"></i> 65%</div>
<div class="flex items-center gap-0.5"><i data-lucide="wind" class="w-3 h-3"></i> 3m/s</div>
</div>
</div>
</div>
<div class="p-5 pt-4">
<h3 class="font-bold text-slate-900 text-sm mb-2 flex items-center gap-2">
<i data-lucide="cloud" class="w-4 h-4 text-cyan-600"></i> 天気予報アプリ
</h3>
<div class="text-xs text-cyan-600 font-medium mb-1">裏側でAPIがやっていること</div>
<p class="text-sm text-ads-muted leading-relaxed">気象庁のサーバーに「東京の最新天気データをください」とリクエストを送り、気温・天候・湿度・風速などのデータをJSON形式で受け取っている</p>
</div>
</div>
<!-- Googleログイン -->
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="bg-white p-5 flex flex-col items-center justify-center">
<div class="text-xs text-ads-muted mb-3">アカウントにログイン</div>
<div class="flex items-center gap-2.5 border border-ads-border rounded-lg px-5 py-2.5 bg-white hover:bg-ads-hover transition-colors">
<div class="w-5 h-5 rounded-full bg-gradient-to-br from-blue-500 via-red-500 to-yellow-500 flex items-center justify-center">
<span class="text-[8px] font-black text-white">G</span>
</div>
<span class="text-sm font-medium text-slate-700">Google でログイン</span>
</div>
<div class="flex items-center gap-3 mt-3">
<div class="flex-1 border-t border-ads-border/50"></div>
<span class="text-[10px] text-ads-dim">または</span>
<div class="flex-1 border-t border-ads-border/50"></div>
</div>
<div class="w-full mt-2 bg-ads-surface border border-ads-border/50 rounded-lg px-3 py-1.5 text-xs text-ads-dim">メールアドレスで登録</div>
</div>
<div class="p-5 pt-4">
<h3 class="font-bold text-slate-900 text-sm mb-2 flex items-center gap-2">
<i data-lucide="log-in" class="w-4 h-4 text-blue-600"></i> 「Googleでログイン」ボタン
</h3>
<div class="text-xs text-blue-600 font-medium mb-1">裏側でAPIがやっていること</div>
<p class="text-sm text-ads-muted leading-relaxed">GoogleのOAuth API（オーオース = 認可の仕組み）に「このユーザーの身元を確認してください」と問い合わせ、認証トークン（本人確認済みの証）を受け取っている</p>
</div>
</div>
<!-- オンライン決済 -->
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="bg-gradient-to-b from-emerald-50 to-white p-5 text-center">
<div class="w-10 h-10 rounded-full bg-emerald-500/15 flex items-center justify-center mx-auto mb-2">
<i data-lucide="check" class="w-6 h-6 text-emerald-600"></i>
</div>
<div class="text-sm font-bold text-emerald-700 mb-1">お支払い完了</div>
<div class="text-xl font-black text-slate-900 mb-1">&#165;1,980</div>
<div class="text-[10px] text-ads-dim">VISA **** 4242</div>
</div>
<div class="p-5 pt-4">
<h3 class="font-bold text-slate-900 text-sm mb-2 flex items-center gap-2">
<i data-lucide="credit-card" class="w-4 h-4 text-emerald-600"></i> オンライン決済
</h3>
<div class="text-xs text-emerald-600 font-medium mb-1">裏側でAPIがやっていること</div>
<p class="text-sm text-ads-muted leading-relaxed">Stripe等の決済APIが、クレジットカード会社のサーバーと暗号化通信を行い、与信確認（この人は支払える？）→ 決済処理 → 結果通知を実行している</p>
<p class="text-[10px] text-ads-dim mt-2">出典: <a href="https://docs.stripe.com/api" class="underline decoration-ads-dim/30 hover:text-ads-accent transition-colors">Stripe API 公式ドキュメント</a></p>
</div>
</div>
<!-- 地図・ナビ -->
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="bg-emerald-50/50 p-5">
<div class="relative bg-emerald-100/80 rounded-lg p-4 h-28 flex flex-col justify-between">
<div class="flex items-center gap-1.5">
<div class="w-4 h-4 rounded-full bg-blue-500 border-2 border-white flex items-center justify-center">
<div class="w-1.5 h-1.5 bg-white rounded-full"></div>
</div>
<span class="text-[10px] text-blue-700 font-medium">現在地</span>
</div>
<div class="border-l-2 border-dashed border-blue-400/60 ml-2 h-6"></div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<i data-lucide="map-pin" class="w-4 h-4 text-red-500"></i>
<span class="text-[10px] text-red-700 font-medium">東京駅</span>
</div>
<div class="bg-white rounded-full px-2 py-0.5 text-[10px] font-bold text-blue-700 border border-blue-200">12分</div>
</div>
</div>
</div>
<div class="p-5 pt-4">
<h3 class="font-bold text-slate-900 text-sm mb-2 flex items-center gap-2">
<i data-lucide="map-pin" class="w-4 h-4 text-red-600"></i> 地図・ナビアプリ
</h3>
<div class="text-xs text-red-600 font-medium mb-1">裏側でAPIがやっていること</div>
<p class="text-sm text-ads-muted leading-relaxed">Google Maps APIが地図画像の取得、現在の交通情報の取得、経路計算をそれぞれ別のAPIに問い合わせ、統合して表示している</p>
</div>
</div>
</div>
<div class="mt-8 bg-ads-accent/5 border border-ads-accent/20 rounded-xl p-5">
<div class="flex items-start gap-3">
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-ads-accent/10 flex-shrink-0 mt-0.5">
<i data-lucide="lightbulb" class="w-4 h-4 text-ads-accent-light"></i>
</div>
<div>
<p class="font-bold text-ads-accent-light mb-1">気づきましたか？</p>
<p class="text-ads-muted leading-relaxed text-sm">
上の4つの例に共通しているのは、<strong class="text-slate-800">あなたがAPIの存在を意識していない</strong>ということです。天気を確認するとき「今からAPIを呼ぶぞ」とは思いませんよね。優れたAPIは、ユーザーにその存在を感じさせません。まるで空気のように、裏側で静かに仕事をしているのです。
</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 5: APIを使うとどう嬉しいか -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-500/10 flex-shrink-0">
<i data-lucide="trending-up" class="w-5 h-5 text-emerald-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">APIを使うとどう嬉しいか</h2>
</div>
<p class="mb-8 leading-relaxed">
ここまで読んで「APIは便利そうだ」と感じてもらえたと思います。では、開発者の視点から見たとき、APIを使うことで<strong class="text-slate-900">具体的にどのくらいの効果</strong>があるのか。数字と一緒に見てみましょう。
</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10">
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 text-center">
<div class="text-3xl md:text-4xl font-black text-ads-accent leading-tight mb-2">50回+</div>
<div class="text-sm text-ads-muted">あなたが1日に<br>APIを使っている回数</div>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 text-center">
<div class="text-3xl md:text-4xl font-black text-emerald-600 leading-tight mb-2">24,000+</div>
<div class="text-sm text-ads-muted">世界で公開されている<br>APIの数</div>
<p class="text-[10px] text-ads-dim mt-2">出典: <a href="https://www.programmableweb.com/" class="underline decoration-ads-dim/30 hover:text-ads-accent transition-colors">ProgrammableWeb</a></p>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 text-center">
<div class="text-3xl md:text-4xl font-black text-amber-600 leading-tight mb-2">0.2秒</div>
<div class="text-sm text-ads-muted">多くのAPIの<br>平均応答時間</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex gap-4 bg-ads-surface border border-ads-border rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="zap" class="w-5 h-5 text-amber-600"></i>
</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">開発スピードが上がる</h3>
<p class="text-sm text-ads-muted leading-relaxed">決済、認証、地図、翻訳...。これらをゼロから作ると何ヶ月もかかりますが、APIを使えば数日〜数時間で実装できます。車を作りたいとき、エンジンから設計する必要はないのです。</p>
</div>
</div>
<div class="flex gap-4 bg-ads-surface border border-ads-border rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="shield" class="w-5 h-5 text-blue-600"></i>
</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">品質が担保される</h3>
<p class="text-sm text-ads-muted leading-relaxed">Google Maps、Stripe、AWSなど、各分野の専門企業が何千人体制で開発・運用しているAPIの品質は、個人や小さなチームで再現できるレベルではありません。その品質を「借りる」ことができます。</p>
</div>
</div>
<div class="flex gap-4 bg-ads-surface border border-ads-border rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="refresh-cw" class="w-5 h-5 text-purple-600"></i>
</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">保守の手間が減る</h3>
<p class="text-sm text-ads-muted leading-relaxed">API提供元がバグ修正・機能改善・セキュリティ更新を継続的に行ってくれます。あなたはAPIを「使うだけ」。自分でゼロから作った機能は、自分でずっと面倒を見続ける必要があります。</p>
</div>
</div>
<div class="flex gap-4 bg-ads-surface border border-ads-border rounded-xl p-5">
<div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="layers" class="w-5 h-5 text-emerald-600"></i>
</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">レゴのように拡張できる</h3>
<p class="text-sm text-ads-muted leading-relaxed">APIはレゴブロックのように組み合わせられます。たとえば「翻訳API + 音声合成API」を組み合わせれば、多言語音声読み上げ機能が作れます。1つのAPIだけでは実現できない価値が、組み合わせで生まれるのです。</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 6: よくある誤解 -->
<!-- ============================================================ -->
<section class="mb-16 md:mb-20">
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-red-500/10 flex-shrink-0">
<i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">よくある誤解</h2>
</div>
<p class="mb-8 leading-relaxed">
APIについて学び始めると、多くの人が同じところでつまずきます。ここでは、初学者が陥りがちな3つの誤解を取り上げて、正しい理解に修正します。
</p>
<div class="space-y-4">
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="flex items-center gap-3 px-6 py-4 bg-red-500/5 border-b border-ads-border/50">
<div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-3.5 h-3.5 text-red-600"></i>
</div>
<h3 class="font-bold text-red-700 text-sm">誤解: 「APIはプログラマーだけが使うもの」</h3>
</div>
<div class="px-6 py-5">
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
<i data-lucide="check" class="w-3.5 h-3.5 text-emerald-600"></i>
</div>
<div>
<p class="text-sm font-bold text-emerald-700 mb-2">実際は:</p>
<p class="text-sm text-ads-muted leading-relaxed">
あなたも毎日APIを使っています。朝、天気アプリを開く。SNSにログインする。電子マネーで買い物する。これらの操作はすべて、裏側でAPIが動いています。プログラマーが「APIを使う」のは、この仕組みのコードを書いている側にいるだけの話。<strong class="text-slate-800">気づかないうちにAPIの恩恵を毎日受けている</strong>のです。
</p>
</div>
</div>
</div>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="flex items-center gap-3 px-6 py-4 bg-red-500/5 border-b border-ads-border/50">
<div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-3.5 h-3.5 text-red-600"></i>
</div>
<h3 class="font-bold text-red-700 text-sm">誤解: 「APIって難しい技術でしょ？」</h3>
</div>
<div class="px-6 py-5">
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
<i data-lucide="check" class="w-3.5 h-3.5 text-emerald-600"></i>
</div>
<div>
<p class="text-sm font-bold text-emerald-700 mb-2">実際は:</p>
<p class="text-sm text-ads-muted leading-relaxed">
APIの概念自体は「注文して結果を受け取る」というシンプルな仕組みです。レストランで注文できるなら、APIの概念は理解できます。先ほどのコード例のように、実際のプログラムも数行で書けることがほとんどです。難しいのはAPIそのものではなく、<strong class="text-slate-800">「APIで何を作るか」を考える部分</strong>。道具はシンプル、使いこなすセンスが問われるということです。
</p>
</div>
</div>
</div>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl overflow-hidden">
<div class="flex items-center gap-3 px-6 py-4 bg-red-500/5 border-b border-ads-border/50">
<div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-3.5 h-3.5 text-red-600"></i>
</div>
<h3 class="font-bold text-red-700 text-sm">誤解: 「APIを使うと個人情報が漏れそうで怖い」</h3>
</div>
<div class="px-6 py-5">
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
<i data-lucide="check" class="w-3.5 h-3.5 text-emerald-600"></i>
</div>
<div>
<p class="text-sm font-bold text-emerald-700 mb-2">実際は:</p>
<p class="text-sm text-ads-muted leading-relaxed">
適切に設計されたAPIは、<strong class="text-slate-800">必要最小限の情報だけ</strong>をやり取りします。たとえば銀行のAPIが口座残高を返す際、パスワードや暗証番号は一切含まれません。APIはデータの「窓口」であり、<strong class="text-slate-800">「何の情報を公開し、何を隠すか」を厳密に制御</strong>できます。むしろ、データベースに直接触るよりもAPIを介した方が安全なのです。レストランのたとえで言えば、お客さんが直接厨房に入るより、ウェイターを通した方が厨房の秩序が保たれるのと同じです。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- SECTION 7: まとめ -->
<!-- ============================================================ -->
<section>
<div class="flex items-center gap-3 mb-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-ads-accent/10 flex-shrink-0">
<i data-lucide="check-circle" class="w-5 h-5 text-ads-accent-light"></i>
</div>
<h2 class="text-xl md:text-2xl font-bold text-slate-900">まとめ — 覚えておきたい3つのこと</h2>
</div>
<p class="mb-8 leading-relaxed">
長い図解を読んでいただきありがとうございます。最後に、この記事で伝えたかったことを3つに絞ってまとめます。
</p>
<div class="space-y-4 mb-10">
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 border-l-4 border-l-blue-500">
<div class="flex items-start gap-4">
<div class="text-2xl font-black text-blue-500 leading-none flex-shrink-0 mt-1">01</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">APIは「ソフトウェアの窓口」</h3>
<p class="text-sm text-ads-muted leading-relaxed">
レストランのウェイターのように、あなた（アプリ）とサーバーの間を取り持つ仲介役。相手の内部構造を知らなくても、決まったルール（インターフェース）で話しかければ結果が返ってきます。
</p>
</div>
</div>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 border-l-4 border-l-emerald-500">
<div class="flex items-start gap-4">
<div class="text-2xl font-black text-emerald-500 leading-none flex-shrink-0 mt-1">02</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">あなたはすでにAPIユーザー</h3>
<p class="text-sm text-ads-muted leading-relaxed">
天気予報、SNSログイン、地図検索、オンライン決済。気づかないうちに、あなたの日常はAPIに支えられています。APIは特別な人だけのものではなく、全員の生活を支える仕組みです。
</p>
</div>
</div>
</div>
<div class="bg-ads-surface border border-ads-border rounded-xl p-6 border-l-4 border-l-amber-500">
<div class="flex items-start gap-4">
<div class="text-2xl font-black text-amber-500 leading-none flex-shrink-0 mt-1">03</div>
<div>
<h3 class="font-bold text-slate-900 mb-2">APIで「車輪の再発明」がなくなる</h3>
<p class="text-sm text-ads-muted leading-relaxed">
すでにある優れた機能をAPIで借りることで、自分は「自分にしか作れない部分」に集中できます。開発スピードが上がり、品質も上がり、保守の手間も減る。これがAPIの最大の恩恵です。
</p>
</div>
</div>
</div>
</div>
<div class="text-center bg-gradient-to-b from-ads-accent/5 to-transparent border border-ads-accent/10 rounded-xl p-8 md:p-10">
<i data-lucide="globe" class="w-8 h-8 text-ads-accent mx-auto mb-4"></i>
<p class="text-lg font-bold text-slate-900 mb-3">APIは「知っている」だけで世界が広がる概念です。</p>
<p class="text-ads-muted max-w-lg mx-auto leading-relaxed">
次にアプリを使うとき、「この裏側でどんなAPIが動いているんだろう？」と想像してみてください。天気予報の数字も、ログインボタンも、決済完了の画面も、すべてAPIが繋いでいます。テクノロジーの見え方が、少しだけ変わるはずです。
</p>
</div>
</section>
<!-- CONTENT_END -->
</main>
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
</footer>
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
</body>
</html>

68
.claude/skills/creating-visual-explainers/references/node-install-guide.md Normal file
View File

@ -0,0 +1,68 @@
# Node.js インストールガイド
SKILL.md の Step 5 で Node.js が未インストールだった場合に参照する。
## 説明と許可
以下をユーザーに伝え、インストールの許可を求める:
> 図解の作成は完了しました。`output/index.html` をブラウザにドラッグ＆ドロップすれば、今すぐ確認できます。
>
> URLで公開するには「Node.js」のインストールが必要です。
> Node.js は、パソコン上でプログラムを動かすための土台で、世界中で使われている安全な道具です。
> **README にも記載の通り、AI-Driven School 運営が確認済みですので安心してください。**
>
> 今からインストールしてもよいですか？
ユーザーが許可しなかった場合 → ファイルの確認方法（`output/index.html` をブラウザで開く）を伝えて終了。
## macOS の場合
インストーラーをダウンロードする:
```bash
PKG_NAME=$(curl -sL https://nodejs.org/dist/latest-lts/ | grep -o 'node-v[0-9.]*\.pkg' | head -1) && curl -fsSL "https://nodejs.org/dist/latest-lts/${PKG_NAME}" -o /tmp/node-install.pkg && echo "ダウンロード完了: ${PKG_NAME}"
```
ダウンロード完了後、インストールを実行する**前に**以下を伝える:
> インストールのために、パソコンのパスワードの入力が必要です。
> これはパソコンにログインするときに使っているパスワードです。
> 画面下のターミナル欄にパスワードを入力して Enter を押してください。
> 入力中の文字は画面に表示されませんが、正常な動作です。
```bash
sudo installer -pkg /tmp/node-install.pkg -target / && rm /tmp/node-install.pkg
```
## Windows の場合
インストールを実行する**前に**以下を伝える:
> インストール中に「このアプリがデバイスに変更を加えることを許可しますか？」という確認画面が表示されることがあります。
> 「はい」を押してください。
```powershell
winget install OpenJS.NodeJS.LTS --accept-package-agreements --accept-source-agreements
```
インストール完了後、現在のターミナルで Node.js を使えるようにする:
```powershell
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
```
winget が使えない場合（「winget は認識されていません」と表示された場合）:
```powershell
$msi = (Invoke-WebRequest -Uri "https://nodejs.org/dist/latest-lts/" -UseBasicParsing).Links.href | Where-Object { $_ -match "x64\.msi$" } | Select-Object -First 1; Invoke-WebRequest -Uri "https://nodejs.org/dist/latest-lts/$msi" -OutFile "$env:TEMP\node-install.msi" -UseBasicParsing; Start-Process msiexec.exe -ArgumentList "/i `"$env:TEMP\node-install.msi`"" -Verb RunAs -Wait; Remove-Item "$env:TEMP\node-install.msi"
```
## インストール完了の確認
```bash
node --version
```
バージョン番号が表示された → インストール成功。
エラーが出た → Cursor を再起動してからもう一度試すよう案内する。

56
.claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh Normal file
View File

@ -0,0 +1,56 @@
#!/bin/bash
set -e
HTML_FILE="${1:-output/index.html}"
SLUG="${2:-}"
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
NC='\033[0m'
if ! command -v node &>/dev/null; then
echo -e "${RED}エラー: Node.js がインストールされていません${NC}" >&2
echo "Node.js をインストールしてから、もう一度試してください。" >&2
exit 1
fi
if [ ! -f "$HTML_FILE" ]; then
echo -e "${RED}エラー: $HTML_FILE が見つかりません${NC}" >&2
echo "先に図解を生成してください。" >&2
exit 1
fi
if [ -n "$SLUG" ]; then
DOMAIN="diagram-${SLUG}.surge.sh"
else
DOMAIN="diagram-$(date +%y%m%d%H%M).surge.sh"
fi
TEMP_DIR=$(mktemp -d)
trap 'rm -rf "$TEMP_DIR"' EXIT
cp "$HTML_FILE" "$TEMP_DIR/index.html"
printf "User-agent: *\nDisallow: /\n" > "$TEMP_DIR/robots.txt"
echo -e "${YELLOW}公開中...${NC}"
npx --yes surge "$TEMP_DIR" --domain "$DOMAIN"
touch deploy-history.log
echo "$(date '+%Y-%m-%d %H:%M:%S') | https://${DOMAIN}" >> deploy-history.log
echo ""
echo -e "${GREEN}完了！${NC}"
echo "URL: https://${DOMAIN}"
if [[ "$OSTYPE" == "darwin"* ]]; then
echo "https://${DOMAIN}" | pbcopy
echo -e "${GREEN}URLをクリップボードにコピーしました${NC}"
fi
if command -v clip.exe &>/dev/null; then
echo -n "https://${DOMAIN}" | clip.exe
echo -e "${GREEN}URLをクリップボードにコピーしました${NC}"
fi
echo -e "${YELLOW}削除するとき: npx surge teardown ${DOMAIN}${NC}"

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
output/*.html
!output/index.html
!output/git.html
!output/llm.html
!output/cursor.html
deploy-history.log

230
README.md Normal file
View File

@ -0,0 +1,230 @@
# 図解ツール
わからない言葉やしくみを AI に伝えるだけで、初めて聞く人にもわかるように噛み砕いた図解ページを自動で作ってくれるツールです。
検索してもよくわからなかったことが「なるほど」に変わります。
- **前提知識がなくても読める** — 専門用語は出てきた場所で必ずわかりやすく解説されます
- **いきなり難しくならない** — まず全体像を見せてから、細かい話に入ります
- **文字の壁にならない** — カード・ステップ図・比較表など、目で見てわかる構成です
- **毎回きれいな図解ができる** — テンプレートと模範回答をもとに、安定した品質で生成されます
- **スマホでも見やすい** — 画面サイズに合わせてレイアウトが自動で調整されます
## まず見てみる
`output/index.html` が図解ライブラリ（一覧ページ）です。
ブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。
サンプルの図解が 3 つ入っているので、完成品のイメージがわかります。
- **Gitの仕組み** — 開発の土台になるバージョン管理ツール
- **LLM（大規模言語モデル）の仕組み** — AI 時代の中核技術
- **Cursorの仕組み** — まさにこの図解ツールを動かしているエディタ
気に入ったら、次のステップで自分だけの図解を作ってみましょう。
## 使い方
3 ステップで図解が完成します。
```
① このフォルダを Cursor で開く
↓
② チャット欄で「○○を図解して」と依頼
↓
③ ブラウザで確認（自動で開きます）
```
### ステップ 1: このフォルダを Cursor で開く
Cursor のメニューから「File → Open Folder」を選び、この「図解ツール」フォルダを開きます。
コードを書いたり、ファイルを編集したりする必要はありません。
フォルダを開くだけで準備完了です。
### ステップ 2: チャット欄で図解を依頼する
Cursor のチャット欄に、知りたいことを書いて送信します。
```
APIについて図解して
```
これだけで OK です。AI が内容を読み取り、図解を自動で作ってくれます。
### ステップ 3: 図解を確認する
AI が図解を作り、`output/` フォルダに保存します。
完成すると自動でブラウザが開きます。
作った図解は上書きされず、どんどん溜まっていきます。
`output/index.html`（図解ライブラリ）を開けば、過去の図解を一覧で確認できます。
## 使い方の例
こんなときに使えます。
- **「API とは何か、図解して」**
レストランの注文に例えて説明してくれるので、仕組みが腹落ちします
- **「Git の rebase と merge の違いを図解して」**
Before / After の比較図で、2 つの違いが一目でわかるようになります
- **「クラウドとは何か、図解して」**
専門用語をひとつずつ噛み砕きながら、全体像が頭に入ります
- **「HTML と CSS の関係を図解して」**
役割の違いと連携の仕組みが、具体例つきで理解できます
技術用語に限らず、どんなテーマでも図解にできます。
特に指定しなくても、初めて聞く人にわかるレベルで説明してくれます。
## 図解を共有するには
### PDF で共有する（おすすめ・準備不要）
図解ページの下部にある「PDF でダウンロード」ボタンを押すと、印刷画面が開きます。
保存先を「PDF」にすれば、そのままファイルとして保存できます。
保存した PDF は、メール・Slack・LINE などで誰にでも送れます。
相手は特別なアプリもアカウントも不要で、すぐに読めます。
### URL で共有する（上級者向け）
URL を発行して他の人にも共有したい場合は、以下の 2 つが必要です。
- **Node.js** — パソコン上でプログラムを動かすための土台
- **Surge** — URL を発行してくれる無料の公開サービス
どちらも、AI がチャット上でインストールと登録の手順を案内してくれます。
```
手元で見るだけ → 準備不要
output/index.html をブラウザで開くだけ
URL で共有する → Node.js + Surge が必要
初回だけセットアップが必要（AI が案内します）
```
公開した URL は `deploy-history.log` に自動で記録されます。
過去の URL を忘れた場合は、AIチャット欄で「公開した URL を教えて」と聞いてください。
### 共有するときの注意
発行された URL は **Google などの検索結果には表示されません**。
検索しても見つからないので、知らない人の目に偶然触れることはありません。
ただし、**URL を知っている人は誰でもページを見ることができます**。
これは Google ドライブや Notion の「リンクを知っている人に共有」と同じ仕組みです。
```
検索エンジン → 見つからない ✅
URL を知らない人 → 見られない ✅
URL を知っている人 → 見られる ⚠️
```
そのため、以下の点に気をつけてください。
- **社外秘や個人情報など、絶対に外に出てはいけない情報は図解の内容に含めない**
- URL の共有先は、見せたい相手だけに限定する（SNS の公開投稿に貼らない、など）
社内の情報をどこまで図解に含めてよいかは、お勤め先のルールに従ってください。
迷ったときは、上長やチームに確認するのが確実です。
### 初めて URL を発行するとき
AI がチャット上で順番に案内してくれます。画面の指示に従うだけで完了します。
1. **Node.js のインストール**
AI が「インストールしてよいですか？」と確認してから進めます。
Mac でも Windows でも対応しています。
2. **Surge の登録**
初回だけメールアドレスとパスワードの入力が必要です。
こちらも AI がその場で手順を教えてくれます。
Node.js は世界中の開発現場で使われている安全な道具です。
AI-Driven School 運営が動作確認済みですので、安心してください。
## フォルダの中身
```
図解ツール/
├── .claude/skills/creating-visual-explainers/ ← AI への指示書（通常は非表示）
├── README.md ← この説明書
└── output/ ← 図解の保存先
├── index.html ← 一覧ページ（自動生成）
└── ○○.html ← 個別の図解（どんどん増える）
```
「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。
あなたが触る必要があるファイルはありません。
AI がすべて自動で処理します。
| ファイル / フォルダ | 説明 | 触る必要 |
|---|---|---|
| `output/` | 図解ライブラリ。`index.html` で一覧、各図解は個別ファイル | 見るだけ |
| `README.md` | この説明書 | 読むだけ |
| `.claude/skills/` | AI への指示書とテンプレート。AI が自動で読み込みます（通常は非表示） | なし |
## Git で管理する場合
このフォルダを Git で管理する場合、`output/` 内の図解 HTML は `.gitignore` に追加することをおすすめします。
図解は手元で読むためのもので、リポジトリに含める必要はありません。
同梱の `.gitignore` で、自分が作成した図解と `deploy-history.log` はあらかじめ除外されています。
## 困ったとき
### 「base.html が見つかりません」と言われた
「図解ツール」フォルダそのものを Cursor で開いているか確認してください。
フォルダの中の個別ファイルではなく、フォルダごと開く必要があります。
### 図解がうまく生成されない
チャット欄に「エラーが出ました」と伝えてください。
AI が原因を調べて、対処法を案内してくれます。
### Node.js のインストールでつまずいた
チャット欄で「Node.js のインストールがうまくいきません」と伝えてください。
Mac / Windows それぞれに合わせた手順を案内してくれます。
解決しない場合は、Cursor を一度終了してから開き直すと直ることがあります。
### その他のトラブル
何が起きても、まずはチャット欄で AI に状況を伝えてください。
AI がエラーの内容を読み取り、次にやるべきことを教えてくれます。
## 利用量の目安
> 以下は 2026 年 3 月時点の Cursor 料金をもとにした参考値です。
> 料金体系は変わることがあるため、最新の情報は [Cursor の料金ページ](https://cursor.com/pricing) で確認してください。
Cursor の Teams プラン（$40/ユーザー/月）には、月 **$20 ぶんの AI 利用枠** が含まれています。
Claude Sonnet 4.6 で図解を作った場合、1 回あたりの消費は図解のボリュームによって変わります。
```
1 回あたりのコスト目安（Sonnet 4.6 の場合）
小さめの図解（用語の簡潔な解説） → 約 $0.18（約 27 円）
標準的な図解（仕組みを丁寧に説明） → 約 $0.25（約 38 円）
大きめの図解（全体像を網羅的に） → 約 $0.35（約 53 円）
```
$20 の利用枠で作れる図解の数は、ボリュームにもよりますがおおむね以下の通りです。
```
図解だけに使った場合 → 約 60〜110 回
半分を他の作業に使った場合 → 約 30〜55 回
```
図解以外の作業（コードの質問、ファイル編集など）にも同じ利用枠を使います。
1 日 1〜2 回のペースなら、月の利用枠に十分収まります。
利用枠を超えた場合は、同じ料金で自動的に追加課金されます（チーム管理者が上限を設定可能）。
---
Mac / Windows どちらでも使えます。AI-Driven School 運営が動作確認済みです。

0
output/.gitkeep Normal file
View File

1010
output/cursor.html Normal file
View File

File diff suppressed because it is too large Load Diff

1050
output/git.html Normal file
View File

File diff suppressed because it is too large Load Diff

77
output/index.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow">
<title>図解ライブラリ</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ads: {
bg: '#FFFFFF',
surface: '#F8FAFC',
hover: '#F1F5F9',
border: '#E2E8F0',
accent: '#3B82F6',
'accent-light': '#2563EB',
text: '#1E293B',
muted: '#64748B',
dim: '#94A3B8',
}
},
fontFamily: {
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
}
}
}
}
</script>
</head>
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
<div class="text-center mb-12">
<h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
<p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
</div>
<div class="space-y-3">
<a href="git.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
<h2 class="font-bold text-slate-900 mb-1">Gitの仕組み</h2>
<p class="text-sm text-ads-muted">Gitの仕組みを、身近なたとえとビジュアルでわかりやすく図解します。</p>
</a>
<a href="llm.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
<h2 class="font-bold text-slate-900 mb-1">LLM（大規模言語モデル）の仕組み</h2>
<p class="text-sm text-ads-muted">LLMの仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
</a>
<a href="cursor.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
<h2 class="font-bold text-slate-900 mb-1">Cursorの仕組み</h2>
<p class="text-sm text-ads-muted">AIが組み込まれたコードエディタ「Cursor」の仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
</a>
</div>
<div class="mt-16 pt-8 border-t border-ads-border/30">
<p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
</div>
</div>
</main>
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
</footer>
</body>
</html>

1142
output/llm.html Normal file
View File

File diff suppressed because it is too large Load Diff