はじめに

以下のポストで書かれているプロンプトなどを試してみた、という内容の記事です。

自分で試すとどうなるかが気になり、実際に試したものです。

プロンプトの部分

上記のプロンプト部分を取り出すと、以下となります。

どうやら最後の部分に、自分が出力したい内容を挿入するのみで使えそうです。

早速試してみた

とりあえず、「## 変換する文章/記事」の直下に「Node.jsの特徴を示した内容」という文章を入れて、グラフィックレコーディング風プロンプトと言われているものを試してみました。

出力されたものの見た目

出力された HTML をブラウザで表示させたものは以下のとおりです。

表示を縮小せずにキャプチャしたもの（上部のあたりのみ）も、合わせて掲載してみます。

同様の内容を自分で作るということを考えた場合に、今回のものを使うことで、手間がかかる作業を削減できたのではないかと思います。

ただ、自分が欲しいビジュアル表現があって、その内容に合うものを出力した形ではなく、規定の内容にそった出力を得たという形のため、それを活用できるかどうかは用途次第でもあるかと思います。
このあたりは、自分でプロンプトを修正して意図通りの出力に変えるとか、出力されたものに手を加えて自分の意図通りのものにするとか、そういったことをやれたらと思う点です。

なお、今回は「出力された説明内容が正しいかどうか」は確認対象とせず、見た目的にどんな出力が得られたかを確認対象にすることとしています。

出力された HTML

出力された HTML も掲載してみます。

以下に掲載しましたが、長いので折りたたみにしています。

出力された HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Node.jsのグラフィックレコーディング</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
    
    :root {
      --fashion-1: #593C47;
      --fashion-2: #F2E63D;
      --fashion-3: #F2C53D;
      --fashion-4: #F25C05;
      --fashion-5: #F24405;
      --text-dark: #334155;
      --heading-blue: #1e40af;
      --subtitle-gray: #475569;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Zen Kurenaido', sans-serif;
      background-color: #f8f9fa;
      color: var(--text-dark);
      line-height: 1.4;
      padding: 20px;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23593c47' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      position: relative;
    }
    
    header {
      padding: 25px 30px;
      background: linear-gradient(135deg, var(--fashion-1), var(--fashion-5));
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 4px dashed var(--fashion-3);
    }
    
    .main-title {
      font-family: 'Kaisei Decol', serif;
      font-size: 32px;
      font-weight: bold;
      color: white;
      background: linear-gradient(to right, var(--fashion-2), var(--fashion-3));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
      position: relative;
      padding-left: 40px;
    }
    
    .main-title::before {
      content: "✨";
      position: absolute;
      left: 0;
      top: 0;
      font-size: 30px;
    }
    
    .date-source {
      font-family: 'Yomogi', cursive;
      font-size: 14px;
      color: white;
      text-align: right;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 5px 10px;
      border-radius: 20px;
      backdrop-filter: blur(5px);
    }
    
    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      position: relative;
    }
    
    .column {
      width: 33.333%;
      padding: 15px;
    }
    
    .card {
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      padding: 20px;
      position: relative;
      border: 2px solid;
      border-color: var(--fashion-3);
      overflow: hidden;
    }
    
    .card::before {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      height: 6px;
      background: linear-gradient(to right, var(--fashion-3), var(--fashion-4));
      border-radius: 12px 12px 0 0;
    }
    
    .section-title {
      font-family: 'Kaisei Decol', serif;
      font-size: 18px;
      color: var(--heading-blue);
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--fashion-2);
      display: flex;
      align-items: center;
    }
    
    .section-title i {
      margin-right: 8px;
      color: var(--fashion-4);
    }
    
    .feature-item {
      margin-bottom: 15px;
      position: relative;
      padding-left: 30px;
    }
    
    .feature-item::before {
      content: "→";
      position: absolute;
      left: 5px;
      color: var(--fashion-4);
      font-weight: bold;
    }
    
    .highlight {
      font-weight: bold;
      position: relative;
      z-index: 1;
    }
    
    .highlight::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: var(--fashion-2);
      z-index: -1;
      opacity: 0.5;
    }
    
    .marker-red {
      background: linear-gradient(transparent 60%, var(--fashion-5) 60%);
      font-weight: bold;
    }
    
    .marker-yellow {
      background: linear-gradient(transparent 60%, var(--fashion-2) 60%);
      font-weight: bold;
    }
    
    .marker-orange {
      background: linear-gradient(transparent 60%, var(--fashion-4) 60%);
      font-weight: bold;
    }
    
    .note {
      background-color: rgba(242, 230, 61, 0.2);
      border-left: 4px solid var(--fashion-3);
      padding: 8px 12px;
      margin: 10px 0;
      font-family: 'Yomogi', cursive;
      font-size: 14px;
      border-radius: 0 8px 8px 0;
    }
    
    .bubble {
      position: relative;
      background-color: rgba(242, 196, 61, 0.2);
      padding: 10px 15px;
      border-radius: 20px;
      margin: 15px 0;
      font-family: 'Yomogi', cursive;
    }
    
    .bubble::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 20px;
      border-width: 10px 10px 0;
      border-style: solid;
      border-color: rgba(242, 196, 61, 0.2) transparent;
    }
    
    .arrow-connector {
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--fashion-4);
      font-size: 24px;
    }
    
    .star-point {
      display: inline-block;
      background-color: var(--fashion-1);
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
      margin-right: 8px;
      font-weight: bold;
      font-family: 'Zen Kurenaido', sans-serif;
    }
    
    .icon-box {
      display: flex;
      justify-content: center;
      margin: 15px 0;
    }
    
    .icon-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(89, 60, 71, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      color: var(--fashion-1);
      font-size: 24px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .hand-drawn-border {
      border: 2px solid var(--fashion-4);
      border-radius: 15px;
      padding: 10px 15px;
      position: relative;
      margin: 15px 0;
    }
    
    .hand-drawn-border::before {
      content: "✓";
      position: absolute;
      top: -12px;
      left: 15px;
      background-color: white;
      padding: 0 8px;
      color: var(--fashion-4);
      font-weight: bold;
    }
    
    .arrow-path {
      position: absolute;
      width: 60px;
      height: 30px;
      border-top: 2px dashed var(--fashion-5);
      right: -30px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .arrow-path::after {
      content: "►";
      position: absolute;
      right: -10px;
      top: -10px;
      color: var(--fashion-5);
    }

    .code-example {
      background-color: #f5f5f5;
      border-radius: 8px;
      padding: 12px;
      font-family: monospace;
      margin: 15px 0;
      border-left: 4px solid var(--fashion-4);
      white-space: pre-wrap;
      font-size: 12px;
      color: #333;
    }
    
    footer {
      padding: 15px 20px;
      text-align: center;
      background-color: var(--fashion-1);
      color: white;
      font-size: 12px;
      border-top: 3px dashed var(--fashion-3);
    }
    
    .glassmorphism {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 15px;
      margin: 15px 0;
    }
    
    .nodejs-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 15px 0;
    }
    
    .nodejs-logo img {
      width: 100px;
      height: auto;
    }
    
    /* スマホ対応 */
    @media (max-width: 768px) {
      .column {
        width: 100%;
      }
      
      .arrow-connector, .arrow-path {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="main-title">Node.js の特徴と基本</h1>
      <div class="date-source">
        <div>作成日: 2025年3月15日</div>
        <div>by GraphicRecorder</div>
      </div>
    </header>
    
    <div class="content">
      <!-- 左カラム -->
      <div class="column">
        <div class="card">
          <h2 class="section-title"><i class="fas fa-lightbulb"></i>Node.jsとは？</h2>
          <div class="nodejs-logo">
            <img src="/api/placeholder/100/100" alt="Node.js Logo">
          </div>
          <div class="feature-item">
            <span class="highlight">Node.js</span>は<span class="marker-red">サーバーサイドでJavaScriptを実行</span>するためのランタイム環境です。
          </div>
          <div class="feature-item">
            <span class="marker-yellow">Chrome V8 JavaScriptエンジン</span>を使用しています。
          </div>
          <div class="feature-item">
            <span class="marker-orange">非同期・イベント駆動型</span>の設計により、効率的なI/O処理が可能です。
          </div>
          
          <div class="bubble">
            Node.jsの誕生は2009年。Ryan Dahlによって開発されました 📅
          </div>
        </div>
        
        <div class="card">
          <h2 class="section-title"><i class="fas fa-rocket"></i>主な特徴</h2>
          <div class="hand-drawn-border">
            <div class="feature-item">
              <span class="star-point">1</span><span class="highlight">シングルスレッド</span>で動作しますが、複数リクエストを同時処理
            </div>
            <div class="feature-item">
              <span class="star-point">2</span><span class="highlight">ノンブロッキングI/O</span>により、待ち時間を最小化
            </div>
            <div class="feature-item">
              <span class="star-point">3</span><span class="highlight">npmエコシステム</span>で豊富なライブラリが利用可能
            </div>
          </div>
          
          <div class="note">
            📝 メモ: Node.jsはマイクロサービスやリアルタイムアプリケーションに最適です！
          </div>
        </div>
      </div>
      
      <!-- 中央カラム -->
      <div class="column">
        <div class="card">
          <h2 class="section-title"><i class="fas fa-code"></i>基本的な使い方</h2>
          <div class="feature-item">
            <span class="highlight">モジュールシステム</span>で機能を分割し、再利用可能なコードを書けます。
          </div>
          
          <div class="code-example">// モジュールのインポート
const http = require('http');

// HTTPサーバーの作成
const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
});

// サーバーを起動して待機
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});</div>
          
          <div class="feature-item">
            <span class="marker-orange">コールバック関数</span>を多用し、非同期処理を実現します。
          </div>
          
          <div class="bubble">
            最近はコールバック地獄を避けるため、Promise や async/await が人気です ⚡
          </div>
        </div>
        
        <div class="card">
          <h2 class="section-title"><i class="fas fa-tools"></i>開発ツール</h2>
          <div class="icon-box">
            <div class="icon-circle"><i class="fas fa-terminal"></i></div>
            <div class="icon-circle"><i class="fas fa-bug"></i></div>
            <div class="icon-circle"><i class="fas fa-sync"></i></div>
          </div>
          
          <div class="feature-item">
            <span class="highlight">npm</span> (Node Package Manager) でパッケージを管理
          </div>
          <div class="feature-item">
            <span class="highlight">nodemon</span> で自動再起動による開発効率化
          </div>
          <div class="feature-item">
            <span class="highlight">デバッガー</span> で実行中のコードを検査
          </div>
          
          <div class="note">
            📌 ポイント: package.json ファイルでプロジェクトの依存関係を管理します！
          </div>
        </div>
      </div>
      
      <!-- 右カラム -->
      <div class="column">
        <div class="card">
          <h2 class="section-title"><i class="fas fa-gem"></i>Node.jsの強み</h2>
          <div class="glassmorphism">
            <div class="feature-item">
              <span class="marker-yellow">高速なパフォーマンス</span>：C++で書かれたV8エンジンの速さ
            </div>
            <div class="feature-item">
              <span class="marker-red">スケーラビリティ</span>：多数の同時接続を効率的に処理
            </div>
            <div class="feature-item">
              <span class="marker-orange">フルスタック開発</span>：フロントとバックで同じ言語
            </div>
          </div>
          
          <div class="bubble">
            Netflix、PayPal、LinkedInなど多くの大企業がNode.jsを採用しています 🌟
          </div>
        </div>
        
        <div class="card">
          <h2 class="section-title"><i class="fas fa-heart"></i>人気のフレームワーク</h2>
          <div class="hand-drawn-border">
            <div class="feature-item">
              <span class="highlight">Express.js</span> - 最も人気のあるWebフレームワーク
            </div>
            <div class="feature-item">
              <span class="highlight">NestJS</span> - TypeScriptをベースにした堅牢なバックエンド
            </div>
            <div class="feature-item">
              <span class="highlight">Socket.IO</span> - リアルタイム通信に特化
            </div>
            <div class="feature-item">
              <span class="highlight">Electron</span> - デスクトップアプリケーション開発
            </div>
          </div>
          
          <div class="note">
            🔍 探求: 用途に合わせて適切なフレームワークを選びましょう！
          </div>
        </div>
      </div>
    </div>
    
    <footer>
      © 2025 Node.jsグラフィックレコーディング | このインフォグラフィックはHTML/CSSで作成されています
    </footer>
  </div>
</body>
</html>

もう 1つ試してみる

他にもバリエーションがあるようだったので、もう 1つ試してみました。

試すのは以下の V5 です。

試した結果

見た目

試した結果は以下の通りで、実際には一部でアニメーションが使われた動きがある内容になっています。

少し拡大したものは、こんな感じです。

出力された HTML

出力された HTML も掲載してみます。

以下に掲載しましたが、長いので折りたたみにしています。

出力された HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Node.jsの特徴 - グラフィックレコーディング風インフォグラフィック</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
    
    :root {
      --ui-color-1: #1B6C8C;
      --ui-color-2: #BF8136;
      --ui-color-3: #F2E8E4;
      --ui-color-4: #260101;
      --ui-color-5: #BF5656;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Zen Kurenaido', sans-serif;
      background-color: #FFF8F5;
      color: #333333;
      line-height: 1.5;
      padding: 20px;
    }
    
    .container {
      max-width: 2000px;
      margin: 0 auto;
    }
    
    /* ヘッダー */
    .header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background-color: white;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .header h1 {
      font-size: 36px;
      color: #333333;
      margin-top: 15px;
      font-family: 'Kaisei Decol', serif;
    }
    
    .header .date {
      font-size: 14px;
      color: #777777;
      margin-top: 10px;
    }
    
    /* セクションレイアウト */
    .section-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin-bottom: 30px;
    }
    
    /* カードスタイル */
    .section-card {
      flex: 1;
      min-width: 220px;
      max-width: 450px;
      background-color: white;
      border-radius: 20px;
      padding: 15px;
      box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
      animation: fadeInScale 0.6s ease-out;
    }
    
    @keyframes fadeInScale {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    /* カード内アイコンコンテナ */
    .mega-icon-container {
      text-align: center;
      margin: 15px 0;
    }
    
    .mega-icon-container h2 {
      font-size: 24px;
      color: #555555;
      margin-top: 15px;
      font-family: 'Kaisei Decol', serif;
    }
    
    /* カードコンテンツ */
    .card-content {
      padding: 0 10px 15px;
    }
    
    /* キーワードリスト */
    .keyword-list {
      margin: 15px 0;
      padding: 0;
      list-style-type: none;
    }
    
    .keyword-list li {
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
    }
    
    .keyword-list li i {
      margin-right: 8px;
      color: var(--ui-color-2);
      min-width: 16px;
    }
    
    /* キーワードタグ */
    .keyword-tag {
      background-color: var(--ui-color-3);
      color: var(--ui-color-4);
      padding: 3px 8px;
      border-radius: 5px;
      margin-right: 5px;
      display: inline-block;
      font-weight: bold;
    }
    
    /* 手書き風吹き出し */
    .speech-bubble {
      position: relative;
      background: #fff;
      border: 3px solid var(--ui-color-1);
      border-radius: 20px;
      padding: 10px 15px;
      margin: 15px 5px;
      font-family: 'Yomogi', cursive;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
      transform: rotate(-1deg);
    }
    
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 20px;
      border-width: 12px 8px 0;
      border-style: solid;
      border-color: var(--ui-color-1) transparent;
      display: block;
      width: 0;
    }
    
    /* 吹き出しバリエーション */
    .speech-bubble.right::after {
      left: auto;
      right: 20px;
      transform: rotate(15deg);
    }
    
    .speech-bubble.top::after {
      bottom: auto;
      top: -13px;
      border-width: 0 8px 12px;
      transform: rotate(-5deg);
    }
    
    .speech-bubble.variant-1 {
      background: #FFF9E3;
      border-color: var(--ui-color-2);
      transform: rotate(1deg);
    }
    
    .speech-bubble.variant-1::after {
      border-color: var(--ui-color-2) transparent;
    }
    
    .speech-bubble.variant-2 {
      background: #FFE9E9;
      border-color: var(--ui-color-5);
      transform: rotate(-2deg);
    }
    
    .speech-bubble.variant-2::after {
      border-color: var(--ui-color-5) transparent;
    }
    
    /* 手書き文字 */
    .handwritten {
      font-family: 'Yomogi', cursive;
      font-size: 15px;
      line-height: 1.5;
      color: #333;
    }
    
    /* コードプレビュー */
    pre {
      background: #f5f5f5;
      padding: 8px;
      border-radius: 5px;
      font-size: 12px;
      margin-top: 10px;
      overflow-x: auto;
    }
    
    /* レスポンシブ対応 */
    @media (max-width: 1600px) {
      .section-card {
        min-width: 280px;
      }
    }
    
    @media (max-width: 1200px) {
      .section-card {
        min-width: 320px;
      }
    }
    
    @media (max-width: 900px) {
      .section-card {
        min-width: 380px;
      }
    }
    
    @media (max-width: 768px) {
      .section-layout {
        flex-direction: column;
      }
      
      .section-card {
        width: 100%;
        min-width: auto;
      }
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="container">
    <!-- ヘッダー -->
    <div class="header">
      <i class="fa-brands fa-node-js fa-7x" style="color: var(--ui-color-1); animation: fa-bounce 2s infinite;" aria-hidden="true"></i>
      <h1>Node.jsの特徴</h1>
      <div class="date">2025年3月15日</div>
    </div>
    
    <!-- セクション1 -->
    <div class="section-layout">
      <!-- カード1: 基本概念 -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-server fa-5x" style="color: var(--ui-color-1); animation: fa-beat-fade 2s infinite;" aria-hidden="true"></i>
          <h2>基本概念</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
              <span><span class="keyword-tag">Node.js</span>はサーバーサイドJavaScriptの実行環境</span>
            </li>
            <li>
              <i class="fa-solid fa-microchip" aria-hidden="true"></i>
              <span>Googleの<span class="keyword-tag">V8 JavaScriptエンジン</span>を搭載</span>
            </li>
            <li>
              <i class="fa-solid fa-bolt" aria-hidden="true"></i>
              <span><span class="keyword-tag">シングルスレッド</span>と<span class="keyword-tag">非同期I/O</span>モデルを採用</span>
            </li>
            <li>
              <i class="fa-solid fa-code-branch" aria-hidden="true"></i>
              <span>イベント駆動型のアーキテクチャ</span>
            </li>
          </ul>
        </div>
        
        <div class="speech-bubble">
          <span class="handwritten">
            <i class="fa-solid fa-lightbulb fa-lg" style="color: var(--ui-color-2);"></i>
            フロントエンドとバックエンドの両方で
            <br>
            JavaScriptが使えるから
            <br>
            <span class="keyword-tag">フルスタック開発</span>がしやすい！
          </span>
        </div>
      </div>
      
      <!-- カード2: パフォーマンス特性 -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-gauge-high fa-5x" style="color: var(--ui-color-2); animation: fa-flip 3s infinite;" aria-hidden="true"></i>
          <h2>パフォーマンス特性</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-bolt-lightning" aria-hidden="true"></i>
              <span><span class="keyword-tag">ノンブロッキングI/O</span>による高速処理</span>
            </li>
            <li>
              <i class="fa-solid fa-spinner" aria-hidden="true"></i>
              <span>多数の同時接続を効率的に処理</span>
            </li>
            <li>
              <i class="fa-solid fa-people-arrows" aria-hidden="true"></i>
              <span>リアルタイムアプリケーションに最適</span>
            </li>
            <li>
              <i class="fa-solid fa-weight-scale" aria-hidden="true"></i>
              <span>軽量で<span class="keyword-tag">メモリ効率</span>が高い</span>
            </li>
          </ul>
        </div>
        
        <div class="speech-bubble variant-1 right">
          <span class="handwritten">
            <i class="fa-solid fa-rocket fa-lg" style="color: var(--ui-color-2);"></i>
            I/Oバウンドな処理には
            <br>
            とてもパワフル！
            <br>
            <span class="keyword-tag">チャットアプリ</span>や<span class="keyword-tag">ストリーミング</span>に向いてる
          </span>
        </div>
      </div>
      
      <!-- カード3: npm (Node Package Manager) -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-box-open fa-5x" style="color: var(--ui-color-5); animation: fa-shake 3s infinite;" aria-hidden="true"></i>
          <h2>npm エコシステム</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-cubes" aria-hidden="true"></i>
              <span><span class="keyword-tag">世界最大級</span>のパッケージエコシステム</span>
            </li>
            <li>
              <i class="fa-solid fa-download" aria-hidden="true"></i>
              <span>オープンソースの<span class="keyword-tag">再利用可能なコード</span>が豊富</span>
            </li>
            <li>
              <i class="fa-solid fa-gears" aria-hidden="true"></i>
              <span>package.jsonによる依存関係管理</span>
            </li>
            <li>
              <i class="fa-solid fa-code-compare" aria-hidden="true"></i>
              <span>簡単なバージョン管理とプロジェクト設定</span>
            </li>
          </ul>
          
          <pre>
// package.jsonの例
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.3"
  }
}</pre>
        </div>
        
        <div class="speech-bubble variant-2">
          <span class="handwritten">
            <i class="fa-solid fa-wand-magic-sparkles fa-lg" style="color: var(--ui-color-5);"></i>
            車輪の再発明をしなくても
            <br>
            誰かが作った優れたパッケージを
            <br>
            <span class="keyword-tag">npm install</span>ですぐ使える！
          </span>
        </div>
      </div>
      
      <!-- カード4: 用途と活用事例 -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-laptop-code fa-5x" style="color: var(--ui-color-2); animation: fa-bounce 2s infinite;" aria-hidden="true"></i>
          <h2>用途と活用事例</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-globe" aria-hidden="true"></i>
              <span><span class="keyword-tag">Webアプリケーション</span>のバックエンド開発</span>
            </li>
            <li>
              <i class="fa-solid fa-comments" aria-hidden="true"></i>
              <span>リアルタイム<span class="keyword-tag">チャットアプリ</span>（Socket.IO）</span>
            </li>
            <li>
              <i class="fa-solid fa-server" aria-hidden="true"></i>
              <span>REST API / GraphQLサーバー</span>
            </li>
            <li>
              <i class="fa-solid fa-file-code" aria-hidden="true"></i>
              <span>シングルページアプリケーション（SPA）のサーバー</span>
            </li>
            <li>
              <i class="fa-solid fa-microchip" aria-hidden="true"></i>
              <span>IoTデバイスのサーバーサイド処理</span>
            </li>
          </ul>
        </div>
        
        <div class="speech-bubble top variant-1">
          <span class="handwritten">
            <i class="fa-solid fa-building fa-lg" style="color: var(--ui-color-2);"></i>
            Netflix、PayPal、Uberなど
            <br>
            大手企業も採用！
            <br>
            <span class="keyword-tag">スケーラビリティ</span>の高さが魅力
          </span>
        </div>
      </div>
    </div>
    
    <!-- セクション2 -->
    <div class="section-layout">
      <!-- カード5: コアモジュール -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-cube fa-5x" style="color: var(--ui-color-1); animation: fa-beat 2s infinite;" aria-hidden="true"></i>
          <h2>コアモジュール</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-file-lines" aria-hidden="true"></i>
              <span><span class="keyword-tag">fs</span>: ファイルシステム操作</span>
            </li>
            <li>
              <i class="fa-solid fa-network-wired" aria-hidden="true"></i>
              <span><span class="keyword-tag">http / https</span>: Webサーバー構築</span>
            </li>
            <li>
              <i class="fa-solid fa-route" aria-hidden="true"></i>
              <span><span class="keyword-tag">path</span>: ファイルパス処理</span>
            </li>
            <li>
              <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
              <span><span class="keyword-tag">events</span>: イベント駆動プログラミング</span>
            </li>
            <li>
              <i class="fa-solid fa-gears" aria-hidden="true"></i>
              <span><span class="keyword-tag">util</span>: ユーティリティ関数</span>
            </li>
          </ul>
          
          <pre>
// HTTPサーバーの例
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});</pre>
        </div>
        
        <div class="speech-bubble right">
          <span class="handwritten">
            <i class="fa-solid fa-puzzle-piece fa-lg" style="color: var(--ui-color-1);"></i>
            Node.jsには
            <br>
            標準で便利な<span class="keyword-tag">組み込みモジュール</span>が
            <br>
            たくさん用意されてる！
          </span>
        </div>
      </div>
      
      <!-- カード6: フレームワーク -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-layer-group fa-5x" style="color: var(--ui-color-5); animation: fa-flip 3s infinite;" aria-hidden="true"></i>
          <h2>主要フレームワーク</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
              <span><span class="keyword-tag">Express</span>: 最も人気のある軽量Webフレームワーク</span>
            </li>
            <li>
              <i class="fa-solid fa-feather" aria-hidden="true"></i>
              <span><span class="keyword-tag">NestJS</span>: TypeScript対応のフルスタックフレームワーク</span>
            </li>
            <li>
              <i class="fa-solid fa-wind" aria-hidden="true"></i>
              <span><span class="keyword-tag">Koa</span>: Expressの次世代版</span>
            </li>
            <li>
              <i class="fa-solid fa-meteor" aria-hidden="true"></i>
              <span><span class="keyword-tag">Meteor</span>: フルスタックリアルタイムプラットフォーム</span>
            </li>
            <li>
              <i class="fa-solid fa-server" aria-hidden="true"></i>
              <span><span class="keyword-tag">Fastify</span>: 高速なWebフレームワーク</span>
            </li>
          </ul>
        </div>
        
        <div class="speech-bubble variant-2 right">
          <span class="handwritten">
            <i class="fa-solid fa-heart fa-lg" style="color: var(--ui-color-5);"></i>
            Express.jsが最も人気！
            <br>
            初心者にも優しくて、
            <br>
            <span class="keyword-tag">ミドルウェア</span>の概念が素晴らしい
          </span>
        </div>
      </div>
      
      <!-- カード7: 非同期プログラミング -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-infinity fa-5x" style="color: var(--ui-color-2); animation: fa-spin 8s linear infinite;" aria-hidden="true"></i>
          <h2>非同期プログラミング</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-clock" aria-hidden="true"></i>
              <span>伝統的な<span class="keyword-tag">コールバック</span>パターン</span>
            </li>
            <li>
              <i class="fa-solid fa-handshake" aria-hidden="true"></i>
              <span>モダンな<span class="keyword-tag">Promise</span>ベースの実装</span>
            </li>
            <li>
              <i class="fa-solid fa-hourglass" aria-hidden="true"></i>
              <span>ES2017以降の<span class="keyword-tag">async/await</span>構文</span>
            </li>
            <li>
              <i class="fa-solid fa-diagram-project" aria-hidden="true"></i>
              <span>複雑な非同期フローの管理</span>
            </li>
          </ul>
          
          <pre>
// 非同期処理の例
// 1. コールバック
fs.readFile('file.txt', (err, data) => {
  if (err) throw err;
  console.log(data);
});

// 2. Promise
fs.promises.readFile('file.txt')
  .then(data => console.log(data))
  .catch(err => console.error(err));

// 3. Async/Await
async function readFileContents() {
  try {
    const data = await fs.promises.readFile('file.txt');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}</pre>
        </div>
        
        <div class="speech-bubble">
          <span class="handwritten">
            <i class="fa-solid fa-wand-magic-sparkles fa-lg" style="color: var(--ui-color-1);"></i>
            <span class="keyword-tag">async/await</span>の登場で
            <br>
            コールバック地獄から解放された！
            <br>
            同期コードのように書けるのが嬉しい
          </span>
        </div>
      </div>
      
      <!-- カード8: デプロイとホスティング -->
      <div class="section-card">
        <div class="mega-icon-container">
          <i class="fa-solid fa-cloud-arrow-up fa-5x" style="color: var(--ui-color-1); animation: fa-bounce 2s infinite;" aria-hidden="true"></i>
          <h2>デプロイとホスティング</h2>
        </div>
        
        <div class="card-content">
          <ul class="keyword-list">
            <li>
              <i class="fa-solid fa-cloud" aria-hidden="true"></i>
              <span><span class="keyword-tag">Heroku</span>: PaaSプラットフォーム</span>
            </li>
            <li>
              <i class="fa-brands fa-aws" aria-hidden="true"></i>
              <span><span class="keyword-tag">AWS Lambda</span>: サーバーレスデプロイ</span>
            </li>
            <li>
              <i class="fa-brands fa-digital-ocean" aria-hidden="true"></i>
              <span><span class="keyword-tag">Digital Ocean</span>: クラウドVPS</span>
            </li>
            <li>
              <i class="fa-solid fa-network-wired" aria-hidden="true"></i>
              <span><span class="keyword-tag">Vercel</span> / <span class="keyword-tag">Netlify</span>: Jamstack向けホスティング</span>
            </li>
            <li>
              <i class="fa-brands fa-docker" aria-hidden="true"></i>
              <span><span class="keyword-tag">Docker</span>: コンテナ化デプロイ</span>
            </li>
          </ul>
        </div>
        
        <div class="speech-bubble variant-1 top">
          <span class="handwritten">
            <i class="fa-solid fa-rocket fa-lg" style="color: var(--ui-color-2);"></i>
            <span class="keyword-tag">PM2</span>を使えば
            <br>
            プロダクション環境での
            <br>
            プロセス管理が簡単！
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

その他

別バージョン・別内容のプロンプトなど

グラフ付き

サムネイル用

イラスト埋め込み

フルムーンダークテーマ版

v2

GitHubリポジトリでの置き場

●MysticLibrary/prompts/documentation at main · Sunwood-ai-labs/MysticLibrary
　https://github.com/Sunwood-ai-labs/MysticLibrary/tree/main/prompts/documentation